您现在的位置:主页 > 手机最快现场开奖直播-视频 > 正文内容

Web前端开发代码规范(基础)

发布日期:2019-08-05 18:28   来源:未知   阅读:
 

  对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

  html编码统一格式化显示,使用一个Tab键进行分层缩进 (2个空格宽度),使整个页面结构层次清晰,方便阅读和修改。

  1、由于html标签和属性不区别大小写,所有建议都采用小写,尤其是自定义标签和属性名,否定js中取不到,如:

  4、所有、&、等特殊符号(非标签一部分)用编码表示。 编码成 ,编码成,&编码成&

  统一使用link标签,少用@import(原生import有加载性能问题),sass、less、vue.js等文件使用import命令除外(因为最终前端构建工具会将引入文件编译成一个css文件)。

  关于version,如果对代码有修改更新version版本号,并添加相关注释。

  2、样式中属性排序规则:先外部 再自身 后内部,推荐工具( CSScomb )

  3、关于css背景图片(关键字:合并,缩写,去引号), 引号不是必须的,而且在某些浏览器上加引号反而出错:

  5、所有CSS的命名应语义化,如:回复框,.replyBox{…},禁止用拼音缩写命名,如.hfk{…}。

  8、上下相邻的两模块尽量避免混用margin-bottom,margin-top,否则会产生重叠现象。

  脚本语言发展至今,也只有js混的最好了,所以type=text/java类型指定可以省去。

  2、引入位置: body标签内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞的问题(js单线程)。

  3、引入方式:html页面中禁止直接编写js代码,统一使用外部引用方式,以便打包压缩和缓存。

  运算符(=、==,&&、+/-等)两侧应各空一个格,块级{}左侧也应该空出一格

  变量名应由 26 个大小写字母(A..Z,a..z),10 个数字(0..9),和“_”(下划线、通常, 使用”驼峰式”写法,对象、函数和实例时尤其如此。

  3.5 编码模式为了规范代码严谨风格,推荐严格模式(Strict Mode),即总是在模块顶部声明 use strict;

  非严格模式下,为一个未申明的局部变量赋值时会自动创建一个同名的全局变量,这是Js程序中最容易出现的错误之一,在严格模式下这么做会显性的抛出异常。

  当编写大量代码时,对象属性和函数参数很容易一不小心被设置成一个重复的名字。严格模式在这种情况下会显性的抛出错误

  ES5中可为对象特定属性设为只读或让整个对象不可修改。 但在非严格模式中尝试修改一个只读属性只会默不做声的失败。

  为了兼容第三方代码可能没有为严格模式做好准备而引发的问题,最好把开启严格模式的指令作用于自己独立的模块/函数里。

  声明变量必须加上 var 关键字. 否则变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突(es6中let修复了这个问题)。

  不要加多余的逗号,这可能会在IE下引起错误,同时如果多一个逗号某些ES3的实现会计算多数组的长度。

  如果仅依靠语句间的隐式分隔, 有时会很麻烦.而且有些情况下, 漏掉分号会很危险.

  item1 = {}, item2 = [];(解释:new关键字的使用 除了在需要实例化一个对象,或罕见的需要延时加载数据的情况外,基本上不需要使用new关键字。在Java里分配大量的new变量地址是一项很慢的操作,为了效率起见,应该始终使用对象符号。)

  使用 === 和 !== 操作符会相对好点。== 和 != 操作符会进行类型强制转换。 特别是, 不要将 == 用于与错值比较(false,null,undefined,“”,0,NaN)。

  eval 会让程序执行的比较混乱, 当 eval 里面包含用户输入的话就更加危险.

  可以用其他更佳的, 更清晰, 更安全的方式写你的代码, 所以一般情况下请不要使用 eval.

  当碰到一些需要解析序列化串的情况下(如, 计算 RPC 响应), 使用 eval 很容易实现.

  jQuery中最快的筛选器是ID筛选器,这是因为它直接和JS原生方法getElementById对应。

  第二快是tag选择器, 因为它和JS原生方法getElementsByTagName 对应。jQuery中class选择器是最慢的,因为在IE浏览器下它会遍历所有的DOM节点。

  2、#id 前面不要用tag来修饰。写成$(div#id)会降低性能,因为JS会遍历所有的div元素来查找id为id的哪一个节点:

  3、#id1也不需要由#id2来修饰。写成$(#id2 #id1) 是画蛇添足,降低性能。

  要养成将jquery对象缓存进变量的习惯,避免进行多次查找,另外为了区分普通的JS对象和jQuery对象,建议在变量首字母前加上$符号。如:

  2、所有文件(.html、.css、.js、图片)命名,如需要两个单词表示的,使用_下划线连接符(如:index_info.html)。

  3、所有素材图片应将文件名第一个单词命名为图片分类,第二个单词为图片名称,第三个单词可以是数字或其它内容,以下为图片命名细则: