javascript编码标准
前面的话
编码标准是有争议的。几乎每个人都有自己的标准，但对标准应该是什么样的，则似乎很少能达成共识。但编码标准意味着，通过共同语言和一致的结构，把开发人员从无意义的工作中解放出来。允许开发人员把创新精神放在重要的逻辑上面。一个好的标准能提供清晰明了的意图，是有效工作所必需的。本文将详细介绍Javascript编码标准
引入
给像JavaScript这种松散类型(loosely typed)的动态语言定义明确的标准，几乎可以肯定，要比给较为严格的语言定义标准来得更加重要。JavaScript的高度灵活性，可能会使它成为编码语法和实践的潘多拉魔盒。较为严格的语言，本身就具备结构性和一致性，而JavaScript需要准则和应用标准才能达到相同的效果
维护代码要比编写代码花费更多的时间。要编写越是容易理解的代码，在最开始就越是需要深思熟虑和良好的结构
好的Javascript编码应该符合以下标准
1、编码错误的可能性降至最低
2、代码适合大规模的项目和团队(一致的、可读的、可扩展的和可维护的)
3、鼓励编码的效率、效果和重用
4、鼓励使用JavaScript的优点，避免使用它的缺点
5、开发团队的每个成员都使用
代码布局
通常，我们的代码被阅读的次数比编写它的次数要多得多。对代码规定格式和应用约定，以便我们的开发同事(包括几个星期之后的我们自己)，能够很容易地理解代码的内容
【使用一致的缩进和行长】
报纸上的文本列都在50~80个字符的长度之间。对人类的眼睛来说，超过80个字符的行，看起来会逐渐变得吃力。一般地，阅读理解的最佳行长(linelength)在45~75个字符之间，66个字符的行长被认为是最舒适的。最好使用短制表符(2个空格)和稍短的行长(78个字符)，每一行更窄一些，重要的内容也更易读一些。使用短制表符也是意识到，像JavaScript这种事件驱动的语言比纯过程语言，缩进要小一些，因为JavaScript有大量的回调函数和闭包
1、每级代码缩进两个空格
2、每行限制为78个字符
【按段落组织代码】
在编排代码的时候，要以清晰明白为目标，而不是减少代码的字节数。一旦代码发布到生产环境，在传输给用户之前，JavaScript代码会合并(concatenated)、压缩(minified)。结果，那些用来帮助理解的工具(空白、注释和更具描述性的变量名)对性能毫无影响。通过合理的使用空白符(white space)，使代码更易读
1、按逻辑段落组织代码，段落之间要空行
2、每一行最多只包含一条语句或赋值语句，但是允许每行同时声明多个变量
3、运算符和变量之间要有空格，这样就能更容易地识别变量
4、每个逗号之后要有空格
5、在段落内，相似的运算符要对齐
6、缩进注释，缩进量和所解释的代码相同
// 把一个或多个声明放在一行上，但每行只有一条赋值语句 var x, y, r, print_msg, get_rangdom, coef = 0.5, rot_delta = 1, x_delta = 1, y_delta = 1, first_name = 'sally' ; // 在下一行段落的前面添加空行 // function to write text to message container print_msg = function ( msg_text ){ //缩进注释，和它所描述的段落层级一致 // .text() prevents xss injection $('#sl').text( msg_text ); }; // function to return a random number get_rangdom = function ( num_arg ){ return Math.random() * numn_arg; }; // initialize coorainates x = get_random( 10 ); y = get_random( 20 ); r = get_random( 360 ); // 添加空白，对齐相似的元素，相似的语句更容易阅读 // adjust to offsets x += x_delta * coef; y += y_delta * coef; r += rot_delta * coef;
【换行要一致】
1、在运算符的前面换行，因为人们检查左列的所有运算符是很容易的
2、把后续的语句缩进一个层次，比如使用两个空格
3、在逗号分隔符的后面换行
4、方括号或者括号单独占一行。清楚地表明这是语句的结尾，不会迫使读者横向扫寻分号
// 将运算符放在左边，排成一列 long_quote = 'Four score and seven years ago our ' + 'fathers brought forth on this continent, a new , + 'nation, conceived in Liberty, ' + 'and dedicated to the proposition that ' + 'all men are created equal. '; // 方括号单独占一行，下一条语句就容易识别了 // 使用尾部逗号，更容易维护 cat_breed_list = [ 'Abyssinian', 'American Bobtail', 'American Curl', 'American Shorthair', 'American Whiterhair', 'Balinses', 'Balinese-Javanaese', 'Birman', 'Bombay' ];
【使用K&R风格的括号】
K&R风格的括号可以平衡垂直空间的使用，增加可读性。当格式化对象和映射、数组、复合语句或者调用的时候，应该使用K&R风格的括号
1、如果可能，就使用单行。比如，当一个很短的数组声明能写在一行上的时候，就没必要把它拆分成三行。
2、把左括号、左花括号或者左方括号放在开始行的末尾。
3、在分隔符（括号、花括号或者方括号）的里面把代码缩进一个层级，比如，两个空格。
4、右括号、右花括号或者右方括号单独占一行，缩进和开始行相同
var run_count, full_name, top_fruit_list, full_fruit_list, print_string; run_count = 2; full_name = 'Fred Burns'; top_fruit_list = ['Apple', 'Banana', 'Orange' ]; // 使用垂直对齐，增加可读性 full_fruit_list = [ 'Apple', 'Apricot', 'Banana', 'Blackberry', 'Blueberry', 'Current', 'Cherry', 'Date', 'Grape', 'Grapefruit', 'Guava', 'Kiwi', 'Kumquat', 'Lemon', 'Lime', 'Lychee', 'Mango', 'Melon', 'Nectarine', 'Orange', 'Peach', 'Pear', 'Pineapple', 'Raspberry', 'Strawberry', 'Tangerine', 'Ugli' ] // 使用K&R风格的括号 print_string = function ( text_arg ){ var text_arg, char_list, i; char_list = input_text.split(''); for( i = 0, i < char_list.length; i++ ){ document.write( char_list[i] ); } return true; } print_string( 'We have counted' + + String( run_count ) + ' invocations to date; );
【使用空格来区别函数和关键字】
很多语言有冠词的概念，像an、a或者the这种单词。冠词的目的之一是提醒读者或者听者，下一个单词将是名词或者名词短语。和函数以及关键字一起使用的空格，可以达到类似的效果
1、函数名后面没有空格。在函数名和左括号“(”之间没有空格
2、关键字后面空一格，然后是左括号“(”
3、当格式化for语句的时候，在每个分号的后面空一格
mystery_text = get_mystery( 'Hello JavaScript Denizens' ); for ( x = 1; x < 10; x++ ) { console.log( x ); }
【引号要一致】
使用单引号作为字符串的定义符号，而不是双引号，因为HTML中标准属性的定义符是双引号
html_snip = '<input name="alley_cat" type="text" value="bone">';
注释说明
注释可能要比它们所解释的代码更加重要，因为它们能传达在其他方面不明显的关键细节。这在事件驱动编程中尤其明显，因为大量的回调函数，导致跟踪代码的执行要耗费掉大量时间。这并不意味着添加更多的注释总是更好的。摆放有策略、信息量大和精心维护的注释，价值是很高的，而杂乱无章文不对题的注释，还不如没有的好
【解释代码】
好的注释的标准是将注释的数量最小化，将注释的价值最大化。通过约定来减少注释，尽可能地让代码进行自我说明。通过将注释和它们所描述的段落对齐，并确保它们的内容对读者是有价值的，从而使注释的价值最大化
使用一致的、有意义的变量名，能提供更多的信息，需要的注释很少
var welcome_html = '<h1>Welcom tho Color house</h1>', house_color_list = ['yellow', 'green', 'little pink'], spec_map, get_spec_map, run_init; // Begin /get_spec_map/ // Get a specification map based on colors get_spec_map = function ( color_list_arg ){ var color_count = color_list_arg.length, spec_map = {}, i; for ( i = 0, i < color_count; i++ ){ // ... 30 more lines } return spec_map; } // End /get_spec_map/ run_init = function () { var spec_map = get_spec_map( house_color_list ); $('#welocome').html('welcome_html'); $('#specs').text( JSON.stringify( spec_map ) ); }; run_init();
【给API和TODO添加文档】
注释也能为代码提供更为正式的文档。总体架构的文档应该放在专门的架构文档里面。但是函数或者对象API的文档，可以并且通常应该放在代码的旁边
1、解释所有重要的函数，说明它的目的，使用的参教或者设置(setting)，它的返回值，以及所有抛出的异常
2、如果禁用了代码，要解释为什么，使用这种格式的注释：//TODO date username-comment。在判断注释新鲜度的时候，用户名和日期是很有价值的，也可以使用自动化工具，在代码库中的TODO项上，自动填上用户名和日期
// BEGIN DOM Method /toggleSlider/ // Purpose : Extends and retracts chat slider // Required Arguments : // * do_extend (boolean) true extends slider, false retracts // Optional Arguments : // * callback (function) executed after animation is complete // Settings : // * chat_extend_time, chat_retract_time // * chat_extend_height, chat_retract_height // Returns : boolean // * true - slider animation activated // * false - slider animation not activated // Throws : none // toggleSlider = function( do_extend, callback ) { // ... }; // END DOM Method /toggleSlider/
// BEGIN TODO 2018-01-11 xiaohuochai - debug code disabled // alert( warning_text )； // ... (lots more lines) ... // // END TODO 2018-01-11 xiaohuochai - debug code disabled
【使用命名约定，减少并改进注释】
下面是一个示例
var make_house = curry_build_item({ item_type : 'house' });
通过上面代码可以得到以下信息
1、make_house是一个对象构造器。
2、调用的函数叫做柯里化函数，它使用闭包来维护状态并返回一个函数
3、调用的函数接收字符串参数，表示类型(type)
4、变量的作用域是局部的
如果使用如下声明，则需要添加许多注释
var creator = maker('house');
// 'creator' is an object constructor we get by
// calling 'maker'. The first positional argument
// of 'maker' must be a string, and it directs
// the type of object constructor to be returned.
// 'maker' uses a closure to remember the type
// of object the returned function is to
// meant to create.
var creator = maker('house');
加了注释的示例，不但比简易的示例显得更为冗长，而且需要更多的时间编写，很可能是因为我们设法传递和命名约定一样多的信息量。情况会越来越糟糕：经过一段时间以后，注释容易变得不准确，因为代码改变了，开发人员变得懒惰了。假如几个星期之后，我们决定更改了变量名，却忘记更新注释中引用这些变量名的地方。现在的注释完全错了并且容易误导别人。不但是这样，而且所有这些注释使得代码难以理解，因为代码清单长了9倍。没有注释是最好的。相比之下，我们更想使用简单示例中的变量名
变量
每个人在编码的时候，都会使用命名约定，不管他们是否意识到这一点，就像不做决定也是一种决定。一个好的命名约定，当团队的所有成员都理解并使用它的时候，能发挥巨大的价值。当他们这么做的时候，就能从枯燥的代码跟踪和费力的注释维护当中解放出来，把精力都集中在代码的目标和逻辑上面
【使用常用字符】
1、变量名使用a~z、A~Z、0~9、下划线和$符号
2、变量名不要以数字开头
【传送变量作用域】
1、当变量作用域是整个模块时使用驼峰式（模块名字空间的所有地方都可以访问该变量)
2、当变量作用域不是整个模块时使用下划线 (模块名字空间内的某个函数的局部变量)
3、确保所有模块作用域内的变量至少有两个音节，这样作用域就清晰了。比如，不要使用叫做config的变量，可以使用更具描述性的和明显是模块作用域的configMap
【命名布尔变量】
当布尔值表示状态的时候，我们使用单词is，比如，is_retracted或者is_stale。当使用布尔值来表示行为的时候(如函数中的参数)，我们使用单词do，像do_retract或者do_extend。当使用布尔值来表示所有权的时候，我们使用has，比如，has_whiskers 或者 has_wheels
指示器 局部作用域 模块作用域 bool[通用] bool_return boolReturn do(请求行为) do_retract doRetract has(表示包含) has_whiskers hasWhiskers is(表示状态) is_retracted isRetracted
【命名字符串变量】
指示器 局部作用域 模块作用域
str[通用] direction_str directionStr
id email_id emailld
date email_date emailDate
html body_html bodyHtml
msg employee_msg employeeMsg
name emp1oyee_name employeeName
text email_text emailText
type item_type itemType
【命名整型变量】
指示器 局部作用域 模块作用域 int[通用] size_int sizeInt 无(约定) i , j , k (不允许出现在模块作用域内) count employee_count employeeCount index employee_index employeeIndex time(毫秒) retract_time retractTime
【命名数字变量】
指示器 局部作用域 模块作用域
num[通用] size_num sizeNum
无(约定) x, y, z (不允许出现在模块作用域内)
coord(坐标) x_coord xCoord
ratio sales_ratio salesRatio
【命名正则变量】
指示器 局部作用域 模块作用域
regex regex_filter regexFilter
【命名数组变量】
指示器 局部作用域 模块作用域
list timestamp_list timestampList
list color_list colorList
【命名映射变量】
指示器 局部作用域 模块作用域
map employee_map employeeMap
map receipt_timestamp_map receiptTimestampMap
【命名对象变量】
1、对象变量应该是名词，加上可选的修饰符：emplyee或者receipt
2、确保模块作用域的对象变量名具有两个或者两个以上的音节，这样作用域就清晰了： storeEmployee 或者 salesReceipt
3、jQuery对象有前缀$。目前这种约定很常见，在单页应用中，jQuery对象（有时候叫集合）很普遍
指示器 局部作用域 模块作用域
无(单名词) employee storeEmployee
无(单名词) receipt salesReceipt
$ $area_tabs $areaTabs
【命名函数变量】
1、命名函数应始终遵循动词加名词的形式，比如，get_record或者empty_cache_map
2、模块作用域的函数应始终包含两个或两个以上的音节，这样作用域就清晰了：getRecord 或者 emptyCacheMap
3、动词含义要一致
指示器 局部作用域 模块作用域 指示器含义 fn[通用] fn_sync fnSync 通用函数指示器 curry curry_make_user curryMakeUser 返回指定参数的函数 destroy destroy_entry destroyEntry 移除数据结构，意味着必要时会回收数据引用 remove remove_element removeElement 移除数据结构的另一种写法 empty empty_cache_map emptyCacheMap 移除数据结构的一些或者全部成员，不会移除容器 fetch fetch_user_list fetchUserList 返回从外部源获取的数据 get get_user_list getUserList 返回对象或者其他内部数据结构中的数据 make make_user makeUser 返回新建对象(不使用new操作符) on on_mouseover onMouseover 事件处理程序。事件应是单字的，和HTML标记一致 save save_user_list saveUserList 把数据保存到对象或者其他内部数据结构中 set set_user_name setUserName 初始化或者更新通过参数提供的值 store store_user_list storeUserList 发送数据到外部源进行存储，比如通过AJAX调用 update update_user_list updateUserList 和set类似，但有“先前己经初始化了”的暗含意思
【命名未知类型的变量】
有时候，我们实际上不知道变量包含的数据类型是什么。有两种情况很常见
1、编写多态函数(接收多种数据类型的函数)
2、接收的数据来自外部数据源，比如AJAX或者Web Socket订阅
局部作用域 模块作用域 说明
http_data httpData 接收自HTTP订阅的未知数据类型
socket_data socketData 接收自Web socket的未知数据类型
arg_data data 通过参数传递的未知数据类型
下面是一个示例
dogPrototype = { body_temp_c : 36.5, dog_name : 'Guido', greet_text : 'Grrrr', speak_text : 'I am a dog', height_in_m : 1.0, leg_count : 4, check_destroy : checkDestroy, destroy_dog : destroyDog, print_greet : printGreet, print_name : printName, print_speak : printSpeak, show_flash : showFlash, redraw_dog : redrawDog };
【变量声明和赋值】
1、创建新对象、映射或者数组的时候，使用{}或者[]]代替new Object()或者new Array()
2、使用工具方法复制对象和数组
3、一开始就在函数作用域内，使用单个var关键字，显式地声明所有的变量
4、不要使用块
5、把所有函数赋给变量。这进一步巩固了JavaScript把函数当作第一类对象的事实
6、 当函数需要三个以上的参数时，使用具名参数(named arguments)，因为位置参数的含义很容易忘记，并且也不能进行自我说明
7、每条变量赋值语句占用一行。尽可能按字母或者逻辑来排序。多个声明可以放在单行上
命名空间
很多早期的JavaScript代码比较简单，单独在一张页面上使用。这些脚本可以(而且经常就是这么做的)使用全局变量，而不会有什么影响。但是随着JavaScript应用的蓬勃发展和第三方类库的普遍使用，别人想要全局变量i的可能性会急剧上升。当两个代码库声明了相同的全局变量时，地狱之门也随之打开
只使用单一的全局函数，把其他所有变量的作用域限制在该函数里面，就可以极大地减少这种问题，如下所示：
var spa = (function () { // other code here var initModule = function () { console.log( 'hi there')； }； return { initModule : initModule }; }());
这个单一的全局函数(在这个示例中是spa)叫做名字空间。赋给它的函数. 在加载的时候就会执行，当然所有在该函数里面赋值的局部变量，在全局名字空间中是不可访问的。注意我们让initModule方法对外可见。所以其他代码可以调用初始化函数，但它不能访问其他的东西。并且必须使用spa前缀
spa.initModule();
可以把命名空间再细分，这样就不会被迫用单个文件来装载50KB的应用。比如，可以创建spa、spa.shell和spa.slider这样的命名空间：
// In the file spa.js: var spa = (function () { // some code here }()); // In the file spa.shell.js: var spa.shell = (function () { // some code here }()); // In the file spa.slider.js: var spa.slider = (function () { // some code here }());
命名空间是创建可维护的JavaScript代码的关键所在
【文件命名】
1、根据命名空间来命名JavaScript文件，每个文件一个命名空间示例
spa.js // spa.* namespace spa.shell.js // spa.shell.* namespace spa.slider.js // spa.slider.* namespace
2、为会生成HTML的每个JavaScript文件创建一个CSS文件。示例：
spa.css // spa.* namespace spa.shell.css // spa.shell.* namespace spa.slider.css // spa.slider.* namespace
3、给CSS选择器加上模块名前缀。这种做法能极大地有助于避免和第三方模块的意外冲突
spa.css defines #spa, .spa-x-clearall
spa.shell.css defines
#spa-shell-header, #spa-shell-footer, .spa-shell-main
JS模板
模块按一致的区块来划分，是很有价值的做法。它能帮助我们理解和浏览代码，提醒我们要以良好的方式来编码
【使用IIFE创建命名空间】
使用自执行函数为模块创建命名空间。这能防止意外地创建全局JavaScript变量。每个文件应该只定义一个命名空间，并且文件名正好和命名空间对应。比如，模块的名字空间是spa.shell，则文件名应为spa.shell.js
spa.module = (function(){
})();
【声明并初始化模块作用域变量】
一般会使用configMap来保存模块配置、使用stateMap来保存运行时的状态值以及使用jqueryMap来缓存jQuery集合
var configMap = { settable_map : { color_name: true }, color_name : 'blue' }, stateMap = { $container : null }, jqueryMap = {};
// Begin DOM method /setJqueryMap/ setJqueryMap = function () { var $append_target = stateMap.$append_target, $slider = $append_target.find( '.spa-chat' ); jqueryMap = { $slider : $slider, $toggle : $slider.find( '.spa-chat-head-toggle' ), $window : $(window) }; }; // End DOM method /setJqueryMap/
【声明工具方法】
把所有私有的工具方法聚集在它们自己的区块里面。这些方法不会操作DOM，因此不需要浏览器就行。如方法不是单个模块的工具施，则应该把它移到共享的工具方法库里面，比如spa.util.js
//------------------- BEGIN UTILITY METHODS ------------------ // Cross-browser method to set __proto__ // Newer js engines (v1.8.5+) support Object.create() hasCreate = !! Object.create; createObject = function ( arg ){ if ( ! arg ) { return {}; } if ( hasCreate ){ return Object.create( arg ); } function obj() {}; obj.prototype = arg; return new obj; }; //-------------------- END UTILITY METHODS -------------------
【DOM方法】
把所有私有的DOM方法聚集在它们自己的区块里面。这些方法会访问和修改DOM，因此需要浏览器才能运行。一个DOM方法的例子是移动CSS sprite。set JqueryMap方法用来缓存jQuery集合
//--------------------- BEGIN DOM METHODS -------------------- // functions used in dogPrototype printName = function (){ this.$name.text( this.dog_name ); }; showFlash = function (){ this.$bg.css({opacity: 1, display:'block'}) .fadeOut('slow'); };//---------------------- END DOM METHODS ---------------------
【事件处理】
把所有的私有事件处理程序聚集在它们自己的区块里面。这些方法会处理事件，比如按钮点击、按下按键、浏览器容器缩放、或者接收Websocket消息。事件处理程序理一般会调用DOM方法来修改DOM，而不是它们自己直接去修改DOM
// BEGIN EVENT HANDLERS onLogin = function ( event, login_user ) { configMap.set_chat_anchor( 'opened' ); }; onLogout = function ( event, logout_user ) { configMap.set_chat_anchor( 'closed' ); jqueryMap.$title.text( 'Chat' ); clearChat(); }; // END EVENT HANDLERS
【回调方法】
把所有的回调方法聚集在它们自己的区块里面。如果有回调函数，一般把它们放在事件处理程序和公开方法之间。它们是准公开方法，因为它们会被所服务的外部模块使用
//---------------------- BEGIN CALLBACKS --------------------- setChatAnchor = function ( position_type ) { return changeAnchorPart({ chat : position_type }); }; //----------------------- END CALLBACKS ----------------------
【公开方法】
把所有的公开方法聚集在它们自己的区块里面。这些方法是模块公开接口的部分。如果有的话，该区块应该包括configModule和initModule
//------------------- BEGIN PUBLIC METHODS ------------------- configModule = function ( input_map ) { spa.util.setConfigMap({ input_map : input_map, settable_map : configMap.settable_map, config_map : configMap }); return true; }; initModule = function ( $container ) { setJqueryMap( $container ); $.gevent.subscribe( $container, 'spa-logout', onLogout ); $container .bind( 'utap', onTapNav ) .bind( 'uheldend', onHeldendNav ); return true; }; return { configModule : configModule, initModule : initModule }; //------------------- END PUBLIC METHODS ---------------------
好的代码像粥一样，都是用时间熬出来的
