做个优雅的码农

自我接触前端这个行业以来，我就一直标榜前端的重要性，尽管会有部分的后端很不屑于我们的作用，于是我也不屑于他们觉得他们才是真正的外行，哈哈！既然选择了这个行业就该热爱它、欣赏它并极力的维护它。我现在也在实践的过程中越来越追求代码的可读性、规范性，以及加载性能的优化、用户操作的简便性；作为前端，对于自己写的东西应该像创造一件艺术品一样，追求完美与极致，做个优雅的码农，写着优雅的代码！当然，我也仍在改变与尝试的道路上前进。不懂和欠缺的地方也有很多，生命不息、学习不止…（废话真多啊！）

由于项目组的项目增加，前端新成员的加入个人觉得很有必要制定一些代码规范，采用规定的文件格式、开发模式、代码规范将对后期的维护不随着人员的更替变得麻烦复杂。因此我一直想能总结下前端规范，当然，这也是个递进的过程，后期还需要再优化与改善补充！下面先总结下通用的代码规范，后针对项目组的代码构建简要描述下，希望项目组的前端人员能统一学习并提出意见！

通用代码规范：

1、命名：标准变量采用驼峰标识，如schoolName，不建议使用数字、拼音，字体图标命名也是如此，请使用英文命名； 对于构造函数，需大写第一个字母；

2、定义：使用var命名，不同的命名之间用逗号隔开，以分号结束；避免过多使用”var”；

3、简化：善用二元运算符&& 、||、三元运算符；将一些if()else()语句替换，例如 if(!a) alert(“123”) 替换成 !a || alert(“123”);

4、封装：避免写重复冗余的代码，学会封装，充分体会高聚合低冗余的概念；

5、匿名函数:单个界面的js使用匿名立即执行函数，不需要在外部访问的变量或者函数限制在一个比较小的范围内同时可避免全局变量泛滥；目前我们项目采用的都是这种形式；

6、for循环：我们习惯的写法是—–for(var
i=0;i<selector.length;i++){};

看似是没有问题，但是如果selector是读取的DOM的节点，那么每一次循环都要去DOM里选取节点再做判断，非常影响性能。数量不大还行，多了就非常严重！因此for循环判断条件里尽量不要使用涉及到DOM操作的动作。优化如下：for
(var i = 0, max = selector.length; i < max; i++){};这个同理就是减少dom检索的请求；

7、命名空间：当要给某个已经存在的页面增加功能， 可能要增加十多个函数， 而那个页面已经存在大量的函数， 甚至还有函数跟你新增的函数同名，那么命名空间是比较好的选择， 你可以创建一个命名空间， 把你的新函数都放在那个命名空间之下；

8、字符串拼接，应该使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。（这个我也要注意）；

9、比较判断：最近在大神的博客都注意到一条：请尽量不要使用==和!=,永远只使用===和!==。因为==默认会进行类型转换，规则十分难记;

10、避免多余的接口请求：比如对于校验来说，一般后台都会校验，但是会在你请求接口的时候进行校验，因此前端应严格要求自己做好前台能做的校验，避免多余的接口请求！

番外篇：项目组前端规范：

一、项目文件夹建立

在本地的文件夹上建立一个新的项目的文件夹例如newManage，该文件夹下分别有content/css/js/font/image五个子文件夹

content下是每个界面的html和对应的js,js统一放在content/js文件夹中；

css放置静态页面的Css；

font字体图标文件夹

images图片文件夹

js下放置所有外部引用的公共js，其中引用的第三方插件放置到js/vender中

二、新项目gulp配置

1、在config.js中添加新项目分别对应的本地链接头部与现网头部

2、在gulpfile.js中mark的地方添加新项目的信息，

mark1:合并css：请安装css的加载顺序填写;

mark2: 线网与本地路径替换

3、html中路径更改，请将需要合并的文件build，例如：

<!– build:css /local/src/enroll/css/main.css –>

<link rel=”stylesheet” href=”/local/src/enroll/css/base.css”>

<link rel=”stylesheet” href=”/local/src/enroll/css/index.css”>

<!– endbuild –>

此例说明将base.css和index.css合并成main.css的替换写法