loulanyijian的专栏

写了一系列前端规范，现在暂停一下，并做一下回顾html css js 三驾马车 3篇前端规范 - html规范前端规范 - css规范前端规范 - JS开发规范开发框架类 1篇前端规范 - vue开发规范开发实践类 5篇前端规范 - git使用规范前端规范 - 注释规范前端规范 - 前端广义安全规范前端规范 - 前后端接口规范前端规范 - 前端项目开发规范因为与业务场景强相关，下列一些博文不太方便作为前端规范来要求团队成员，但是可以作为开发指导借鉴下面的一些前端规范，其实也很重要，个人之前

因为会牵扯到业务逻辑，在实际开发场景中，js开发会占绝大部分，相应的规范细节也比较多限于篇幅原因，加上有eslint的这个利器，本文只讲一些最最常用的规范开启了eslint的项目，可以保证一个项目的底线；没有开启eslint的项目，时间长了大概率惨不忍睹我们做的是引用eslint的，然后在开发中调整成适合自己团队的规则比如 可以关闭两格缩进，html js css三者统一为两格缩进为什么不使用四格缩进保持空行[强制] 文件末尾空行[推荐] 不同模块之间空行[强制] 空格不超过1个[强制]

好好做业务，提高自己的工程能力根据团队的习惯，制定适合自己的rules比如 可以关闭老项目不做要求，新项目必须使用同时避免用成，那样就毫无意义无需封装一堆请求方法，直接通过统一json方式管理便于统一管理、修改、升级统一导出挂载在Vue原型链上，便于项目中直接访问，如 便于封装请求，以及拦截返回结果并且挂载在Vue原型链上，便于项目中直接访问，工具类文件，统一放置在下uat、pre、prod不同环境的变量参数，统一收纳配置，避免各自为政项目公用组件，放置在下面业务单独使用的组件，放置在业务文件

git规范看起来很简单，但如果执行不好的话，十分容易出问题，比如丢代码、出线上bug前端业务代码，只能创建在前端群组的git仓库中，不允许建在个人名下，不允许创建在其余的地方前端业务代码，owner必须为前端负责人，不接受后端owner负责不允许创建任何内部员工都有权限的公用代码，群组外人员权限需要手动赋予git提交权限已经很敏感，再加上与之挂钩的上线权限，所以授予外部人员权限，采用策略，够用即可个人经历不同的公司，有不同的管理方式，但都有共同的特点 杜绝无意义的提交，方便追踪代码提交格式：scop

如下为支持w3c标准的最小html构成，缺一不可[强制]2格缩进html、js、css保持统一，均为2格缩进最大宽度也是与js保持统一，一般默认120个字符[强制]属性需要双引号html使用双引号，不能不写，不能写单引号（虽然都可以使用）[强制]嵌套规则块级元素可以互相嵌套，行内元素也可以互相嵌套，行内元素不能嵌套块级元素[强制]自定义标签使用 - 命名为了与自带的标签做区分，自定义元素要使用中横线间隔[推荐]段落注释复杂的业务逻辑模块之间，需要用过注释包裹起来，方便确认代码的起止范围

最近做的项目，因为看别人的代码，没有注释，看的简直头疼。代码注释，是一个程序员最基本的素养，因为写的代码，不只是给机器去执行的，还需要给自己看，给继任者看，给同项目小伙伴看注释是一个磨刀不误砍柴工的活，自己阅读起来会快；大家都写注释，互相了解起来方便如果真的开发任务很重，可以把握优先级，把核心的注释写好有的同事，觉得自己命名没问题，逻辑没问题，就可以不用写注释这样的好习惯，的确可以少些一部分注释，不过所以没有理由不写注释，注释写的好，不见得是好程序员；注释写不好，肯定不是好程序员！单vue文件、js文

css是个神奇的东西，要精通css很难，但是不精通的话，通过各种拼凑，也能写出正常的界面。所以目前css届的前端网红，目前只有张鑫旭css有性能一说，但影响不大，除非你使用那些没人使用的filter之类的魔法写法。比如选择器不能过长，但你发现选择器比较长的话，也不会有明显的性能问题团队内部推广css规范，主要目的为2个：可维护性+避免样式污染所以相对于JS，css的规范不是那么多，但也值得注意一下............

data里面的数据，按模块顺序，分开书写vue2 的option对象，属性需要按顺序排列从上到下的顺序如下：不使用v-html v-for必须添加key不写过于复杂的表达式，使用计算属性来代替一切从简 需要加上scoped作用域在template最外层dom添加样式，style里面，将样式统一包起来。如下面代码命名与语义化如上面架构，尽可能将单vue文件语义化，避免使用命名如果......

不仅仅局限为前端老生常谈的xss、csrf等典型性前端安全问题更多的，是前端面临的整体的一些合规、风控、信息泄露等一系列问题

通用要求接口命名小驼峰如果不是restfull的接口，需要语义化，例如：getUserInfo、getUserList、createUser、updateUser、deleteUser、uploadUserImg 接口尽量轻巧，前端不需要的数据，不需要返回后端尽量统一风格，禁止单独适配为了避免某些Chrome浏览器广告屏蔽插件的误拦截，不使用ad等广告字眼对前端的要求：前端使用axios统一封装请求方法，做统一请求、拦截安全性要求如果是客户敏感信息，接口绝对需要返回最小