string转换成number,JavaScript编码规范

时间:2016-05-11 作者:吕澄缔 阅读:9995次

  string转换成number,JavaScript编码规范   

// 布尔不成立 // good if  { //} // bad if  { //},
// good function clicker { //} for  { var element = elements;,使用hasOwnProperty过滤掉原型中的属性。
  JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护。
  虽然本文档是针对JavaScript设计的,但是在使用各种JavaScript的预编译语言时时,适用的部分也应尽量遵循本文档的约定。
  JavaScript文件使用无BOM的UTF-8编码。
  UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
  使用4个空格做为一个缩进层级,不允许使用2个空格 或tab字符。
  switch下的case和default必须增加一个缩进层级。
  
// good switch  { case '1': //; case '2': //; default: //} // bad switch  { case '1': //; case '2': //; default: //}
  二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。
  用作代码块起始的左花括号{前必须有一个空格。
  if / else / for / while / function / switch / do / try / catch / finally关键字后,必须有一个空格。
  在对象创建时,属性中的:之后必须有空格,:之前不允许有空格。
  函数声明、具名函数表达式、函数调用中,函数名和 {
  fuame; // bad function fuame  {
  } var fuame = function fuame  {
  
// good callFunc; // bad callFunc ;
  在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch等语句中,和内紧贴括号部分不允许有空格。
  needIncreament && ; if  {
  单行声明的数组与对象,如果包含元素,{}和内紧贴括号部分不允许包含空格。
  声明包含元素的数组与对象,只有当内部元素的形式较为简单时,才允许写在一行。元素复杂的情况,还是应该换行书写。
  
// good var arr1 = ; var arr2 = ; var obj1 = {}; var obj2 = {name: 'obj'}; var obj3 = {
  sex: 1 }; // bad var arr1 = ; var arr2 = ; var obj1 = { }; var obj2 = { name: 'obj' }; var obj3 = {name: 'obj', age: 20, sex: 1};
  超长的不可分割的代码允许例外,比如复杂的正则表达式。长字符串不在例外之列。
  运算符处换行时,运算符必须在新行的行首。
  
// good if  &&&&||
  ) { // Code } var result = number1 + number2 + number3 + number4 + number5; // bad if  &&&&||) { // Code } var result = number1 + number2 + number3 + number4 + number5;
  
// 字符串为空 // good if  { //} // bad if  { //}
  
// 字符串非空 // good if  { //} // bad if  { //}
  
// 数组非空 // good if  { //} // bad if  { //}
  
// 布尔不成立 // good if  { //} // bad if  { //}
  
// null 或 undefined // good if  { //} // bad if  { //}
  按执行频率排列分支的顺序好处是:
  阅读的人容易找到最常见的情况,增加可读性。
  对于相同变量或表达式的多值条件,用switch代替if。
  
// good switch  { case 'object': //; case 'number': case 'boolean': case 'string': //;
  } // bad var type = typeof variable; if  { //} else if  { //}
  如果函数或全局中的else块后没有任何语句,可以删除else。
  
// good function getName { if  { return name;
  } // bad function getName { if  { return name;
  不要在循环体中包含函数表达式,事先将函数提取到循环体外。
  循环体中的函数表达式,运行过程中会生成循环次数个函数对象。
  
// good function clicker { //} for  { var element = elements;
  } // bad for  { var element = elements;
  对循环内多次使用的不变值,在循环外用变量缓存。
  
// good var width =+ 'px'; for  { var element = elements;
  = width; //} // bad for  { var element = elements;
  对有序集合进行遍历时,缓存length。
  虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能。
  
for  { var element = elements; //}
  对有序集合进行顺序无关的遍历时,使用逆序遍历。
  逆序遍历可以节省变量,代码比较优化。
  
var len =; while  { var element = elements; //}
  类型检测优先使用typeof。对象类型检测使用instanceof。null或undefined的检测使用== null。
  
// string typeof variable === 'string' // number typeof variable === 'number' // boolean typeof variable === 'boolean' // Function typeof variable === 'function' // Object typeof variable === 'object' // RegExp variable instanceof RegExp // Array variable instanceof Array // null variable === null // null or undefined variable == null // undefined typeof variable === 'undefined'
  
// good num + ''; // bad new String;
  
// good +str; // bad Number;
  string转换成number,要转换的字符串结尾包含非数字并期望忽略时,使用parseInt。
  
var width = '200px'; parseInt;
  
// good parseInt; // bad parseInt;
  number去除小数点,使用//,不使用parseInt。
  
// good var num =;; // bad var num =; parseInt;
  输入单引号不需要按住 shift,方便输入。
  实际使用中,字符串经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。
  
var str = '我是一个字符串'; var html = '<div class="cls">拼接HTML可以省去双引号转义</div>';
  使用 + 拼接字符串,如果拼接的全部是 StringLiteral,压缩工具可以对其进行自动合并的优化。所以,静态字符串建议使用 + 拼接。
  在现代浏览器下,使用 + 拼接字符串,性能较数组的方式要高。
  如需要兼顾老旧浏览器,应尽量使用数组拼接字符串。
  
// 使用数组拼接字符串 var str =; // 使用 + 拼接字符串 var str2 = '' // 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读 + '<ul>', + '<li>第一项</li>', + '<li>第二项</li>', + '</ul>';
  复杂的数据到视图字符串的转换过程,选用一种模板引擎。
  在开发过程中专注于数据,将视图生成的过程由另外一个层级维护,使程序逻辑结构更清晰。
  优秀的模板引擎,通过模板编译技术和高质量的编译产物,能获得比手工拼接字符串更高的性能。
  artTemplate: 体积较小,在所有环境下性能高,语法灵活。
  : 体积小,在现代浏览器下性能高,语法灵活。
  etpl: 体积较小,在所有环境下性能高,模板复用性高,语法灵活。
  handlebars: 体积大,在所有环境下性能高,扩展性高。
  hogon: 体积小,在现代浏览器下性能高。
  nunjucks: 体积较大,性能一般,模板复用性高。
  
// good var obj = {}; // bad var obj = new Object;
  对象创建时,如果一个对象的所有属性均可以不添加引号,则所有属性不得添加引号。
  对象创建时,如果任何一个属性需要添加引号,则所有属性必须添加'。
  如果属性不符合 Identifier 和 NumberLiteral 的形式,就需要以 StringLiteral 的形式提供。
  
// good var info = { 'name': 'someone', 'age': 28, 'more-info': '...' }; // bad var info = {
  不允许修改和扩展任何原生对象和宿主对象的原型。
  
// 以下行为绝对禁止= function  {
  属性名符合 Identifier 的要求,就可以通过.来访问,否则就只能通过方式访问。
  通常在 JavaScript 中声明的对象,属性命名是使用 Camel 命名法,用.来访问更清晰简洁。部分特殊的属性,可能采用不寻常的命名方式,可以通过方式访问。
  for in遍历对象时, 使用hasOwnProperty过滤掉原型中的属性。
  
var newInfo = {}; for  { if ) {
  使用数组字面量创建新数组,除非想要创建的是指定长度的数组。
  
// good var arr = ; // bad var arr = new Array;
  数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果.
  = 'other things'; // 这里仅作演示, 实际中应使用Object类型 // 正确的遍历方式 for  {;
  不因为性能的原因自己实现数组排序功能,尽量使用数组的sort方法。
  自己实现的常规排序算法,在性能上并不优于数组默认的 sort 方法。以下两种成能使用-documentgetelementbyid-获取避免使用documentall" class="anchor" href="#建议-对于单个元素尽可能使用-documentgetelementbyid-获取避免使用documentall"> 对于单个元素,尽可能使用获取,避免使用。
  对于多个元素的集合,尽可能使用获龋其中context可以为document或其他元素。指定tagName参数为*可以获得所有子元素。
  遍历元素集合时,尽量缓存集合长度。如需多次操作同一集合,则应将集合转为数组。
  原生获取元素集合的结果并不直接引用 DOM 元素,而是对索引进行读取,所以 DOM 结构的改变会实时反映到结果中。
  <span></span> <script> var elements =;  // 显示为 DIV alert;  var div = elements; var p =;;  // 显示为 P alert; </script>
  获取元素的直接子元素时使用children。避免使用childNodes,除非预期是需要包含文本、注释和属性类型的节点。
  获取元素实际样式信息时,应使用geputedStyle或currentStyle。
  通过 style 只能获得内联定义或通过 JavaScript 直接设置的样式。通过 CSS class 设置的元素样式无法直接通过 style 获龋
  尽可能通过为元素添加预定义的 className 来改变元素样式,避免直接操作 style 设置。
  通过 style 对象设置元素样式时,对于带单位非 0 值的属性,不允许省略单位。
  除了 IE,标准浏览器会忽略不规范的属性值,导致兼容性问题。
  操作DOM时,尽量减少页面reflow。
  页面 reflow 是非常耗时的行为,非常容易导致性能瓶颈。下面一些场景会触发浏览器的reflow:
  应用新的样式或者修改任何影响元素布局的属性。
  读取元素的某些属性移除添加的监听器。
  
// good var arr1 = ; var arr2 = ; var obj1 = {}; var obj2 = {name: 'obj'}; var obj3 = {,number去除小数点,使用//,不使用parseInt,方便阅读 + '<ul>',<span></span> <script> var elements =;  // 显示为 DIV alert;  var div = elements; var p =;;  // 显示为 P alert; </script>。
	
        
上一篇:不得包含BOM信息,Less 编码规范
下一篇:没有了
相关教程