欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端书写规范

程序员文章站 2022-06-15 14:37:29
...

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)

前端书写规范

前端书写规范推荐网站: http://www.jianshu.com/p/3140a2c5dade#