前端书写规范
1:项目文件及文件命名规范
(1):例如一个home模块页面 => (文件命名要具有可识别与模块含义的名称)
html: page/home.html
css: css/home.css
js: js/ views/home.js
2:html的class 、id等正确命名方式
(1):为何要正确命名:方便自己及同事之间的开发,便于理解快速查找问题
例如: 这是一个电影列表 .movie-list,这个单词的组合一眼便看出该html代码的含义“电影 – 列表”(命名id一般使用驼峰命名法:movieList)
注意:命名无需太长否则容易误导
3:css 规范书写
(1):合理的避免使用ID一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。使用ID唯一有效的是确定网页或整个站点中的位置。尽管如此,我们应该始终考虑使用class,而不是id,除非只使用一次。(id多用于js上的编写)
(2):声明结束为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。
(3):合理利用style 在div上减少使用style,我们一般要写在html页面上的话都会在head标签内插入style既美观又便于重复使用。
4:js 规范书写
(1):js、jq初始化编写
(2):引号的使用,单引号' ' 优先
正常情况: console.log('hello there')
双引号转码: $("<div class='box'></div>")
(3):空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等
a 函数的括号:function hello (name) {} 看 (参数)的 "括号外左右"( ) 是有空格的,"括号内name左右" 是没有空格的
b 关键字后需要空格:if (condition) { ... } if和()之间需要有空格
c 赋值符号 = 两边需要有空格 :var x = 2 赋值符号 = 两边需要空格
d 字符串拼接符号 + 两边需要空格:var message = 'hello, ' + name + '!' 常量和变量之间的+号,左右两边需要空格
e 逗号,前面不要留空格,后面留空格:
var list = [1, 2, 3, 4];
function greet (name, options) { ... }
逗号前面不留后面留空格
(4):注释规范在描写注释时,推荐格式化且统一的注释风格,在写注释时尽量描述写代码时的思路,而不是代码做了什么。
(5):对象和数组的创建问题: var item = {}; 不用new Object()方式, 数组:var arr = []
5:css、js抽取公用代码(封装js)
抽取原因:减少代码的冗余性,减少请求资源的加载时间,减少项目大小,增加代码重复使用率,使其提高工作效率。
(1):css 初始化 + 抽取公用(命名:base.css)
(2):js 封装公用(命名:common.js)