js规范

Array 和 Object 直接量

  • 为了避免这些歧义, 我们应该使用更易读的直接量来声明.
  • var a = [x1, x2, x3];
    var a2 = [x1, x2];
    var a3 = [x1];
    var a4 = [];
  • 虽然 Object 构造器没有上述类似的问题, 但鉴于可读性和一致性考虑, 最好还是在字面上更清晰地指明. 
    var o = new Object();
    var o2 = new Object();
    o2.a = 0;
    o2.b = 1;
    o2.c = 2;
    o2['strange key'] = 3;

编码

  • 统一用 utf-8

长度

  • 长度不超过 80 个字符。

  • 参考:

    pep8 为 79 个字符

    npm 为 80 个字符

    google 为 80 个字符

缩进

  • 一般缩进4个字符,若层次比较多的可以缩进2个字符。

小括号

  • 不要滥用括号, 只在必要的时候使用它.

  • 对于一元操作符(如delete, typeof 和 void ), 或是在某些关键词(如 return, throw, case, new )之后, 不要使用括号.

花括号

  • 花括号不换行

    • 好  

      if (foo) {
      }
    • 坏  
      if (foo)
      {
      }
  • 不允许一行判断,一律换行
    • 坏  

      if (foo) return;

命名约定

  • 常量 UPPERCASE_WORD

  • 变量 camelName

  • 类名 CamelName

  • 属性和方法

    • 文件或类中的私有属性, 变量和方法名应该以下划线 "_" 开头.
    • 保护属性, 变量和方法名不需要下划线开头, 和公共变量名一样.
  • 方法和函数参数

    • 可选参数以 opt_ 开头.
    • 函数的参数个数不固定时, 应该添加最后一个参数 var_args 为参数的个数. 你也可以不设置 var_args而取代使用 arguments.
    • 可选和可变参数应该在 @param 标记中说明清楚. 虽然这两个规定对编译器没有任何影响, 但还是请尽量遵守
  • 文件名

    文件名应该使用小写字符, 以避免在有些系统平台上不识别大小写的命名方式. 文件名以.js结尾, 不要包含除 - 和 _ 外的标点符号(使用 - 优于 _).

空格

  • 操作符之间需要空格

    • 好  

      var x = y + z
    • 坏  
      var x=y+z
  • 只空一格
    • 好  

      {
      a: 'short',
      looooongname: 'long'
      }
    • 坏  
      {
      a : 'short',
      looooongname: 'long'
      }

逗号与换行

  • 建议用自然人的处理方法  

    {
    a: 'a',
    b: 'b',
    c: 'c'
    }
  • 不建议使用 npm 风格的逗号与换行,即  
    {
    a: 'a'
    ,b: 'b'
    ,c: 'c'
    }

变量声明

  • 首先,变量在使用前必须声明。

  • 对于单 var 模式和多 var 模式,不做强行约定,但同一个文件里,风格必须一致。

字符串

  • 单引号 (') 优于双引号 (")

明确作用域

  • 任何时候都要明确作用域 - 提高可移植性和清晰度. 例如, 不要依赖于作用域链中的 window 对象. 可能在其他应用中, 你函数中的 window 不是指之前的那个窗口对象.

注释

  • 方法/函数注释:
 /**
* Converts text to some completely different text.
* @param {string} arg1 An argument that makes this more interesting.
* @return {string} Some return value.
*/
  • 顶层/文件注释:

    • 顶层注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西. 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息. 如下:
// Copyright 2009 Google Inc. All Rights Reserved.
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@google.com (Firstname Lastname)
*/

技巧:

  • 下面的布尔表达式都返回 false:

    • null
    • undefined
    • '' 空字符串
    • 0 数字0
  • 但小心下面的, 可都返回 true:

    • '0' 字符串0
    • [] 空数组
    • {} 空对象
  • 下面段比较糟糕的代码:  

    while (x != null) {
  • 你可以直接写成下面的形式(只要你希望 x 不是 0 和空字符串, 和 false):  

    while (x) {
  • 如果你想检查字符串是否为 null 或空:  

    if (y != null && y != '') {
  • 但这样会更好:  

    if (y) { 
  • 注意: 还有很多需要注意的地方, 如:  

    Boolean('0') == true
    '0' != true
    0 != null
    0 == []
    0 == false
    Boolean(null) == false
    null != true
    null != false
    Boolean(undefined) == false
    undefined != true
    undefined != false
    Boolean([]) == true
    [] != true
    [] == false
    Boolean({}) == true
    {} != true
    {} != false
  • 条件(三元)操作符 (?:)

    • 三元操作符用于替代下面的代码:  

      if (val != 0) {
      return foo();
      }
      else {
      return bar();
      }
    • 你可以写成:  
      return val ? foo() : bar();
    • 在生成 HTML 代码时也是很有用的:  
      var html = '<input type="checkbox"' +
      (isChecked ? ' checked' : '') +
      (isEnabled ? '' : ' disabled') +
      ' name="foo">';
  • && 和 ||

    • 二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项.
    • "||" 被称作为 'default' 操作符, 因为可以这样:

      /** @param {*=} opt_win */
      function foo(opt_win) {
      var win;
      if (opt_win) {
      win = opt_win;
      } else {
      win = window;
      }
      // ...
      }
    • 你可以使用它来简化上面的代码:

      /** @param {*=} opt_win */

      function foo(opt_win) { var win = opt_win || window; // ... }

    • "&&" 也可简短代码.比如:  

      if (node) {
      if (node.kids) {
      if (node.kids[index]) {
      foo(node.kids[index]);
      }
      }
      }
    • 你可以像这样来使用:

      if (node && node.kids && node.kids[index]) {
      foo(node.kids[index]);
      } 
    • 或者:  

      var kid = node && node.kids && node.kids[index];
      if (kid) {
      foo(kid);
      }
    • 不过这样就有点儿过头了:  

      node && node.kids && node.kids[index] && foo(node.kids[index]);
  • 使用 join() 来创建字符串

    • 通常是这样使用的:

      function listHtml(items) {
      var html = '<div class="foo">';
      for (var i = 0; i < items.length; ++i) {
      if (i > 0) {
      html += ', ';
      }
      html += itemHtml(items[i]);
      }
      html += '</div>';
      return html;
      }
    • 但这样在 IE 下非常慢, 可以用下面的方式:  
      function listHtml(items) {
      var html = [];
      for (var i = 0; i < items.length; ++i) {
      html[i] = itemHtml(items[i]);
      }
      return '<div class="foo">' + html.join(', ') + '</div>';
      }
    • 你也可以是用数组作为字符串构造器, 然后通过 myArray.join('') 转换成字符串. 不过由于赋值操作快于数组的 push(), 所以尽量使用赋值操作.
    • Node lists 是通过给节点迭代器加一个过滤器来实现的. 这表示获取他的属性, 如 length 的时间复杂度为 O(n), 通过 length 来遍历整个列表需要 O(n2). 
      var paragraphs = document.getElementsByTagName('p');
      for (var i = 0; i < paragraphs.length; i++) {
      doSomething(paragraphs[i]);
      }
    • 这种方法对所有的 collections 和数组(只要数组不包含 falsy 值) 都适用.
      var paragraphs = document.getElementsByTagName('p');
      for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
      doSomething(paragraph);
      }
    • 在上面的例子中, 也可以通过 firstChild 和 nextSibling 来遍历孩子节点.  
    • var parentNode = document.getElementById('foo');
      for (var child = parentNode.firstChild; child; child = child.nextSibling) {
      doSomething(child);
      }

js规范的更多相关文章

  1. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  2. 【重点突破】—— Easy Mock的使用及Mock.js规范

    前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock ...

  3. 前端开发规范之命名规范、html规范、css规范、js规范

    在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...

  4. JS规范2

    百度SS Javascript编码规范 1.变量.方法命名必须匹配正则:/^[$_a-zA-Z]\w*$/ /** * 虽然Javascript引擎支持多种格式命名的变量, * 比如下面这样的变量,J ...

  5. 互联网部-供应商团队js规范

    文件命名 页面.js文件命名:采用中划线连接方式,比如说: error-report.html js文件夹命名:scripts 公共js命名:common.js 文件结构组织 每个页面中中独有的js文 ...

  6. angular.js规范写法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. js 规范

    1.原型链的弊端是不支持多重继承.记住,原型链会用另一类型的对象重写类的 prototype 属性 2.注意:调用 ClassA 的构造函数,没有给它传递参数.这在原型链中是标准做法.要确保构造函数没 ...

  8. js规范思维导图(仅限于自己)

  9. 模块化规范Common.js,AMD,CMD

    随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...

随机推荐

  1. 嵌入式linux开发之工具------tftp

    我在嵌入式linux开发中用到tftp的地方主要有2个方面: 1.是在嵌入式目标板启动时,bootloader启动时通过uEnv文件,下载dtb文件和kernel文件: 2.是在嵌入式目标板启动后,通 ...

  2. mysql慢查询分析工具 mysqlsla 安装

    概述 mysqlsla 是一款很不错的mysql慢查询日志分析工具,而且简单易用.mysqlsla 是用perl编写的脚本,运行需要perl-DBI和per-DBD-Mysql两模块的支持.mysql ...

  3. 将图标LOGO之类的图形图像转换成字体调用方法大全

    借鉴百度对此标题的评价: 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载 ...

  4. windows2008(64位)下iis7.5中的url伪静态化重写(urlrewrite)

    以前在windows2003里,使用的是iis6.0,那时常使用的URL重写组件是iisrewrite,当服务器升级到windows2008R2时,IIS成了64位的7.5,结果iisreite组件是 ...

  5. Java继承--子类的实例化过程

    一个对象的实例化过程: Person p = new Person(); 1,JVM会读取指定的路径下的Person.class文件,并加载进内存,并会先加载Person的父类(如果有直接的父类的情况 ...

  6. PHP中提问频率最高的11个面试题和答案

    问题:请用最简单的语言告诉我PHP是什么? 回答:PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 问题:什么是MVC? 回答:MVC由Model(模 ...

  7. shell script测试命令(test)

    shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...

  8. zabbix自动截图留档_python版

    1 背景     每个DB Server都有zabbix监控,除了异常情况的报警信息外,也会在日检.周检.月检等工作中用到zabbix的监控数据,对zabbix监控数据会做两种处理:1 数据分析(环比 ...

  9. LeetCode 55. Jump Game (跳跃游戏)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  10. JAVA提高九:集合体系

    在经过了前面的JDK6.0新特性的学习后,将进一步深入学习JDK,因为集合的重要性,因此从集合开始入手分析: 一.集合概况 Java是一种面向对象语言,如果我们要针对多个对象进行操作,那么首先必要将多 ...