JS 编码标准
编码标准是有争议的。几乎每个人都有自己的标准，但对标准应该是什么样的，则似乎很少能达成共识。
但编码标准意味着，通过共同语言和一致的结构，把开发人员从无意义的工作中解放出来。
允许开发人员把创新精神放在重要的逻辑上面。一个好的标准能提供清晰明了的意图，是有效工作所必需的。
引入
给像JavaScript这种松散类型(loosely typed)的动态语言定义明确的标准，几乎可以肯定，要比给较为严格的语言定义标准来得更加重要。JavaScript的高度灵活性，可能会使它成为编码语法和实践的潘多拉魔盒。较为严格的语言，本身就具备结构性和一致性，而JavaScript需要准则和应用标准才能达到相同的效果。
维护代码要比编写代码花费更多的时间。要编写越是容易理解的代码，在最开始就越是需要深思熟虑和良好的结构。
好的Javascript编码应该符合以下标准：
a. 编码错误的可能性降至最低
b. 代码适合大规模的项目和团队(一致的、可读的、可扩展的和可维护的)
c. 鼓励编码的效率、效果和重用
d. 鼓励使用JavaScript的优点，避免使用它的缺点
e. 开发团队的每个成员都使用
代码布局
通常，我们的代码被阅读的次数比编写它的次数要多得多。对代码规定格式和应用约定，以便我们的开发同事(包括几个星期之后的我们自己)，能够很容易地理解代码的内容。
【使用一致的缩进和行长】
报纸上的文本列都在50~80个字符的长度之间。对人类的眼睛来说，超过80个字符的行，看起来会逐渐变得吃力。一般地，阅读理解的最佳行长(linelength)在45~75个字符之间，66个字符的行长被认为是最舒适的。最好使用短制表符(2个空格)和稍短的行长(78个字符)，每一行更窄一些，重要的内容也更易读一些。使用短制表符也是意识到，像JavaScript这种事件驱动的语言比纯过程语言，缩进要小一些，因为JavaScript有大量的回调函数和闭包。
a. 每级代码缩进两个空格
b. 每行限制为78个字符
【按段落组织代码】
在编排代码的时候，要以清晰明白为目标，而不是减少代码的字节数。一旦代码发布到生产环境，在传输给用户之前，JavaScript代码会合并(concatenated)、压缩(minified)。结果，那些用来帮助理解的工具(空白、注释和更具描述性的变量名)对性能毫无影响。通过合理的使用空白符(white space)，使代码更易读。
a. 按逻辑段落组织代码，段落之间要空行
b. 每一行最多只包含一条语句或赋值语句，但是允许每行同时声明多个变量
c. 运算符和变量之间要有空格，这样就能更容易地识别变量
d. 每个逗号之后要有空格
e. 在段落内，相似的运算符要对齐
f. 缩进注释，缩进量和所解释的代码相同
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 把一个或多个声明放在一行上，但每行只有一条赋值语句 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; |
【换行要一致】
a. 在运算符的前面换行，因为人们检查左列的所有运算符是很容易的
b. 把后续的语句缩进一个层次，比如使用两个空格
c. 在逗号分隔符的后面换行
d. 方括号或者括号单独占一行。清楚地表明这是语句的结尾，不会迫使读者横向扫寻分号
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 将运算符放在左边，排成一列 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风格的括号
a. 如果可能，就使用单行。比如，当一个很短的数组声明能写在一行上的时候，就没必要把它拆分成三行。
b. 把左括号、左花括号或者左方括号放在开始行的末尾。
c. 在分隔符（括号、花括号或者方括号）的里面把代码缩进一个层级，比如，两个空格。
d. 右括号、右花括号或者右方括号单独占一行，缩进和开始行相同
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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这种单词。冠词的目的之一是提醒读者或者听者，下一个单词将是名词或者名词短语。和函数以及关键字一起使用的空格，可以达到类似的效果。
a. 函数名后面没有空格。在函数名和左括号“(”之间没有空格
b. 关键字后面空一格，然后是左括号“(”
c. 当格式化for语句的时候，在每个分号的后面空一格
|
1 2 |
mystery_text = get_mystery( 'Hello JavaScript Denizens' ); for ( x = 1; x < 10; x++ ) { console.log( x ); } |
【引号要一致】
使用单引号作为字符串的定义符号，而不是双引号，因为HTML中标准属性的定义符是双引号。
|
1 |
html_snip = '<input name="alley_cat" type="text" value="bone">'; |
注释说明
注释可能要比它们所解释的代码更加重要，因为它们能传达在其他方面不明显的关键细节。这在事件驱动编程中尤其明显，因为大量的回调函数，导致跟踪代码的执行要耗费掉大量时间。这并不意味着添加更多的注释总是更好的。摆放有策略、信息量大和精心维护的注释，价值是很高的，而杂乱无章文不对题的注释，还不如没有的好。
【解释代码】
好的注释的标准是将注释的数量最小化，将注释的价值最大化。通过约定来减少注释，尽可能地让代码进行自我说明。通过将注释和它们所描述的段落对齐，并确保它们的内容对读者是有价值的，从而使注释的价值最大化。
使用一致的、有意义的变量名，能提供更多的信息，需要的注释很少。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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的文档，可以并且通常应该放在代码的旁边
a. 解释所有重要的函数，说明它的目的，使用的参教或者设置(setting)，它的返回值，以及所有抛出的异常。
b. 如果禁用了代码，要解释为什么，使用这种格式的注释：//TODO date username-comment。在判断注释新鲜度的时候，用户名和日期是很有价值的，也可以使用自动化工具，在代码库中的TODO项上，自动填上用户名和日期。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 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/ |
|
1 2 3 4 5 |
// BEGIN TODO 2018-01-11 xiaohuochai - debug code disabled // alert( warning_text )； // ... (lots more lines) ... // // END TODO 2018-01-11 xiaohuochai - debug code disabled |
【使用命名约定，减少并改进注释】
下面是一个示例
|
1 |
var make_house = curry_build_item({ item_type : 'house' }); |
通过上面代码可以得到以下信息
1、make_house是一个对象构造器。
2、调用的函数叫做柯里化函数，它使用闭包来维护状态并返回一个函数
3、调用的函数接收字符串参数，表示类型(type)
4、变量的作用域是局部的
如果使用如下声明，则需要添加许多注释。
|
1 |
var creator = maker('house'); |
|
1 2 3 4 5 6 7 8 |
// '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。
|
1 2 3 4 5 |
指示器 局部作用域 模块作用域 bool[通用] bool_return boolReturn do(请求行为) do_retract doRetract has(表示包含) has_whiskers hasWhiskers is(表示状态) is_retracted isRetracted |
【命名字符串变量】
|
1 2 3 4 5 6 7 8 9 |
指示器 局部作用域 模块作用域 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 |
【命名整型变量】
|
1 2 3 4 5 6 |
指示器 局部作用域 模块作用域 int[通用] size_int sizeInt 无(约定) i , j , k (不允许出现在模块作用域内) count employee_count employeeCount index employee_index employeeIndex time(毫秒) retract_time retractTime |
【命名数字变量】
|
1 2 3 4 5 |
指示器 局部作用域 模块作用域 num[通用] size_num sizeNum 无(约定) x, y, z (不允许出现在模块作用域内) coord(坐标) x_coord xCoord ratio sales_ratio salesRatio |
【命名正则变量】
|
1 2 |
指示器 局部作用域 模块作用域 regex regex_filter regexFilter |
【命名数组变量】
|
1 2 3 |
指示器 局部作用域 模块作用域 list timestamp_list timestampList list color_list colorList |
【命名映射变量】
|
1 2 3 |
指示器 局部作用域 模块作用域 map employee_map employeeMap map receipt_timestamp_map receiptTimestampMap |
【命名对象变量】
1、对象变量应该是名词，加上可选的修饰符：emplyee或者receipt
2、确保模块作用域的对象变量名具有两个或者两个以上的音节，这样作用域就清晰了： storeEmployee 或者 salesReceipt
3、jQuery对象有前缀$。目前这种约定很常见，在单页应用中，jQuery对象（有时候叫集合）很普遍
|
1 2 3 4 5 |
指示器 局部作用域 模块作用域 无(单名词) employee storeEmployee 无(单名词) receipt salesReceipt $ $area_tabs $areaTabs |
【命名函数变量】
1、命名函数应始终遵循动词加名词的形式，比如，get_record或者empty_cache_map
2、模块作用域的函数应始终包含两个或两个以上的音节，这样作用域就清晰了：getRecord 或者 emptyCacheMap
3、动词含义要一致
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
指示器 局部作用域 模块作用域 指示器含义 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订阅
|
1 2 3 4 5 |
局部作用域 模块作用域 说明 http_data httpData 接收自HTTP订阅的未知数据类型 socket_data socketData 接收自Web socket的未知数据类型 arg_data data 通过参数传递的未知数据类型 |
下面是一个示例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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的可能性会急剧上升。当两个代码库声明了相同的全局变量时，地狱之门也随之打开。
只使用单一的全局函数，把其他所有变量的作用域限制在该函数里面，就可以极大地减少这种问题，如下所示：
|
1 2 3 4 5 6 7 |
var spa = (function () { // other code here var initModule = function () { console.log( 'hi there')； }； return { initModule : initModule }; }()); |
这个单一的全局函数(在这个示例中是spa)叫做名字空间。赋给它的函数. 在加载的时候就会执行，当然所有在该函数里面赋值的局部变量，在全局名字空间中是不可访问的。注意我们让initModule方法对外可见。所以其他代码可以调用初始化函数，但它不能访问其他的东西，且必须使用spa前缀。
|
1 |
spa.initModule(); |
可以把命名空间再细分，这样就不会被迫用单个文件来装载50KB的应用。比如，可以创建spa、spa.shell和spa.slider这样的命名空间：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 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文件，每个文件一个命名空间示例
|
1 2 3 4 |
spa.js // spa.* namespace spa.shell.js // spa.shell.* namespace spa.slider.js // spa.slider.* namespace |
2、为会生成HTML的每个JavaScript文件创建一个CSS文件。示例：
|
1 2 3 4 |
spa.css // spa.* namespace spa.shell.css // spa.shell.* namespace spa.slider.css // spa.slider.* namespace |
3、给CSS选择器加上模块名前缀。这种做法能极大地有助于避免和第三方模块的意外冲突
|
1 2 3 4 |
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
|
1 2 3 4 |
spa.module = (function(){ })(); |
【声明并初始化模块作用域变量】
一般会使用configMap来保存模块配置、使用stateMap来保存运行时的状态值以及使用jqueryMap来缓存jQuery集合
|
1 2 3 4 5 6 7 8 |
var configMap = { settable_map : { color_name: true }, color_name : 'blue' }, stateMap = { $container : null }, jqueryMap = {}; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//------------------- 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集合
|
1 2 3 4 5 6 7 8 9 10 11 |
//--------------------- 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
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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 |
【回调方法】
把所有的回调方法聚集在它们自己的区块里面。如果有回调函数，一般把它们放在事件处理程序和公开方法之间。它们是准公开方法，因为它们会被所服务的外部模块使用
|
1 2 3 4 5 6 |
//---------------------- BEGIN CALLBACKS --------------------- setChatAnchor = function ( position_type ) { return changeAnchorPart({ chat : position_type }); }; //----------------------- END CALLBACKS ---------------------- |
【公开方法】
把所有的公开方法聚集在它们自己的区块里面。这些方法是模块公开接口的部分。如果有的话，该区块应该包括configModule和initModule
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//------------------- 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 --------------------- |
拓展理解：JS编程风格-代码优化的八点建议
01. 松耦合
当修改一个组件而不需要更改其他组件时，就做到了松耦合。
1、将JS从CSS中抽离：不要使用CSS表达式。
|
1 2 3 |
//不好的做法 .box{width: expression(document.body.offsetWidth + &rsquo;px')} |
2、将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式。
|
1 2 3 4 5 6 |
//不好的做法一 ele.style.color = 'red'; ele.style.left= '10px'; //不好的做法二 ele.style.cssText ='color:red;left:10px;'; |
|
1 2 3 4 5 6 |
.reveal{color:red;left:10px;} //好的做法一 ele.className += 'reveal'; //好的做法二 ele.classList.add('reveal'); |
3、将JS从HTML中抽离：从JS文件放入外置文件中。
4、将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars。
02. 全局变量
创建全局变量被认为是糟糕的实践，尤其在团队开发的大背景下更是问题多多。随着代码量的增长，全局变量会导致一些非常重要的可维护性难题，全局变量越多，引入错误的概率会变得越高。
一般而言，有如下三种解决办法：
1、零全局变量
实现方法是使用一个立即调用函数IIFE并将所有脚本放置其中。
|
1 2 3 4 |
(function(){ var doc = win.document; })(window); |
这种模式的使用场景有限，只要代码需要被其他的代码所依赖，或者需要在运行中被不断扩展或修改，就不能使用这种方式。
2、单全局变量和命名空间
依赖尽可能少的全局变量，即只创建一个全局变量，使用单变量模式，如YUI或jQuery。
单全局变量，即所创建的这个唯一全局对象名是独一无二的，并将所有的功能代码都挂载到这个全局对象上。因此，每个可能的全局变量，都成为唯一全局变量的属性，从而不会创建多个全局变量。
命名空间是简单的通过全局对象的单一属性表示的功能性分组。比如Y.DOM下的所有方法都是和DOM操作相关的，Y.Event下的所有方法都是和事件相关的。常见的约定是每个文件中都通过新的全局对象来声明自己的命名空间。
3、使用模块
模块是一种通用的功能片段，它并没有创建新的全局变量或命名空间。相反，所有的这些代码都存放于一个表示执行一个任务或发布一个接口的单函数中。可以用一个名称来表示这个模块，同样这个模块可以依赖其他模块。
03. 事件处理
将事件处理相关的代码和事件环境耦合在一起，导致可维护性很糟糕。
1、隔离应用逻辑
将应用逻辑从所有事件处理程序中抽离出来是一种最佳实践，将应用逻辑和事件处理的代码拆分开来。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
//不好的做法 function handleClick(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; popup.className = 'reveal'; } addListener(element,'click',handleClick); //好的做法 var MyApplication = { handleClick: function(event){ this.showPopup(event); }, showPopup: function(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); }); |
2、不要分发事件对象
应用逻辑不应当依赖于event对象来正确完成功能，方法接口应该表明哪些数据是必要的。代码不清晰就会导致bug。最好的办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//改进的做法 var MyApplication = { handleClick: function(event){ this.showPopup(event.clientX,event.clientY); }, showPopup: function(x,y){ var popup = document.getElementById('popup'); popup.style.left = x + 'px'; popup.style.top = y + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); }); |
当处理事件时，最好让事件程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止事件冒泡，都应当直接包含在事件处理程序中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//改进的做法 var MyApplication = { handleClick: function(event){ event.preventDefault(); event.stopPropagation(); this.showPopup(event.clientX,event.clientY); }, showPopup: function(x,y){ var popup = document.getElementById('popup'); popup.style.left = x + 'px'; popup.style.top = y + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); }); |
04. 配置数据
代码无非是定义一些指令的集合让计算机来执行。我们常常将数据传入计算机，由指令对数据进行操作，并最终产生一个结果。当不得不修改数据时，可能会带来一些不必要的风险。应当将关键数据从代码中抽离出来。
配置数据是指导在应用中写死的值，且将来可能会被修改，包括如下内容：
|
1 2 3 4 5 6 |
1、URL 2、需要展现给用户的字符串 3、重复的值 4、配置项 5、任何可能发生变更的值 |
下面是未处理配置数据的做法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//不好的做法 function validate(value){ if(!value){ alert('Invalid value'); location.href="/errors/invalid.php"; } } function toggleSelected(element){ if(hasClass(element,'selected')){ removeClass(element,'selected'); }else{ addClass(element,'selected'); } } |
下面代码中将配置数据保存在了config对象中，config对象的每个属性都保存了一个数据片段，每个属性名都有前缀，用以表明数据的类型(MSG表示展现给用户的信息，URL表示网络地址，CSS表示这是一个className)。当然，也可以将整个config对象放到单独的文件中，这样对配置数据的修改可以完全和使用这个数据的代码隔离开来。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//好的做法 var config = { MSG_INVALID_VALUE: 'Invalid value', URL_INVALID:'/errors/invalid.php', CSS_SELECTED:'selected' } function validate(value){ if(!value){ alert(config.MSG_INVALID_VALUE); location.href=config.URL_INVALID; } } function toggleSelected(element){ if(hasClass(element,config.CSS_SELECTED)){ removeClass(element,config.CSS_SELECTED); }else{ addClass(element,config.CSS_SELECTED); } } |
05. 选择器优化
将选择器选择到的元素作为对象的静态属性集中到一个地方统一管理。
|
1 2 3 4 5 6 7 8 9 |
initializeElements: function() { var eles = app.Eles; for (var name in eles) { if (eles.hasOwnProperty(name)) { this[name] = $(eles[name]); } } } |
下面是一个例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//好的做法 app.Eles = { widgetDiv: ".left-widget div", inputResize: '.input-resize', hr: '.hr', txt: '.input-group-btn button', cus: '#paper-type-cus', hid: '#hidden', mainCon: '#mainCon', rulerX: '.ruler-x', rulerY: '.ruler-y', }; |
06. 函数优化
【提炼函数】
在javascript开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构。
如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点：
1、避免出现超大函数。
2、独立出来的函数有助于代码复用。
3、独立出来的函数更容易被覆写。
4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。
比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息有关的log，那么打印log的语句就可以被封装在一个独立的函数里：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var getUserInfo = function(){ ajax( 'http:// xxx.com/userInfo', function( data ){ console.log( 'userId: ' + data.userId ); console.log( 'userName: ' + data.userName ); console.log( 'nickName: ' + data.nickName ); }); }; //改成： var getUserInfo = function(){ ajax( 'http:// xxx.com/userInfo', function( data ){ printDetails( data ); }); }; var printDetails = function( data ){ console.log( 'userId: ' + data.userId ); console.log( 'userName: ' + data.userName ); console.log( 'nickName: ' + data.nickName ); }; |
【尽量减少参数数量】
如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、heigth以及square：
|
1 2 |
var draw = function(width,height,square){}; |
但实际上正方形的面积是可以通过width和height计算出来的，于是我们可以把参数square从draw函数中去掉：
|
1 2 3 4 |
var draw = function( width, height ){ var square = width * height; }; |
假设以后这个draw函数开始支持绘制圆形，需要把参数width和height换成半径radius，但图形的面积square始终不应该由客户传入，而是应该在draw函数内部，由传入的参数加上一定的规则计算得来。此时，可以使用策略模式，让draw函数成为一个支持绘制多种图形的函数。
【传递对象参数代替过长的参数列表】
有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果想在第3个参数和第4个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
var setUserInfo = function( id, name, address, sex, mobile, qq ){ console.log( 'id= ' + id ); console.log( 'name= ' +name ); console.log( 'address= ' + address ); console.log( 'sex= ' + sex ); console.log( 'mobile= ' + mobile ); console.log( 'qq= ' + qq ); }; setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 ); |
这时可以把参数都放入一个对象内，然后把该对象传入setUserInfo函数，setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序，只要保证参数对应的key值不变就可以了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var setUserInfo = function( obj ){ console.log( 'id= ' + obj.id ); console.log( 'name= ' + obj.name ); console.log( 'address= ' + obj.address ); console.log( 'sex= ' + obj.sex ); console.log( 'mobile= ' + obj.mobile ); console.log( 'qq= ' + obj.qq ); }; setUserInfo({ id: 1314, name: 'xiaohuochai', address: 'beijing', sex: 'male', mobile: '150********', qq: 121631835 }); |
07. 条件优化
【合并条件片段】
如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。假如有一个分页函数paging，该函数接收一个参数currPage，currPage表示即将跳转的页码。在跳转之前，为防止currPage传入过小或者过大的数字，要手动对它的值进行修正，详见如下伪代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var paging = function( currPage ){ if ( currPage &lt;= 0 ){ currPage = 0; jump( currPage ); // 跳转 }else if ( currPage &gt;= totalPage ){ currPage = totalPage; jump( currPage ); // 跳转 }else{ jump( currPage ); // 跳转 } }; |
可以看到，负责跳转的代码jump(currPage)在每个条件分支内都出现了，所以完全可以把这句代码独立出来：
|
1 2 3 4 5 6 7 8 9 |
var paging = function( currPage ){ if ( currPage &lt;= 0 ){ currPage = 0; }else if ( currPage &gt;= totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump 函数独立出来 }; |
【把条件分支语句提炼成函数】
在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。假设现在有一个需求是编写一个计算商品价格的getPrice函数，商品的计算只有一个规则：如果当前正处于夏季，那么全部商品将以8折出售。代码如下：
|
1 2 3 4 5 6 7 8 |
var getPrice = function( price ){ var date = new Date(); if ( date.getMonth() &gt;= 6 &amp;&amp; date.getMonth() &lt;= 9 ){ // 夏天 return price * 0.8; } return price; }; |
观察这句代码：
|
1 2 |
date.getMonth()&gt;=6&amp;&amp;date.getMonth()&lt;=9 |
这句代码要表达的意思很简单，就是判断当前是否正处于夏天（7~10月）。尽管这句代码很短小，但代码表达的意图和代码自身还存在一些距离，阅读代码的人必须要多花一些精力才能明白它传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确地表达代码的意思，函数名本身又能起到注释的作用。代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var isSummer = function(){ var date = new Date(); return date.getMonth() &gt;= 6 &amp;&amp; date.getMonth() &lt;= 9; }; var getPrice = function( price ){ if ( isSummer() ){ // 夏天 return price * 0.8; } return price; }; |
【提前让函数退出代替嵌套条件分支】
许多程序员都有这样一种观念：“每个函数只能有一个入口和一个出口。”现代编程语言都会限制函数只有一个入口。但关于“函数只有一个出口”，往往会有一些不同的看法。下面这段伪代码是遵守“函数只有一个出口的”的典型代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var del = function( obj ){ var ret; if ( !obj.isReadOnly ){ // 不为只读的才能被删除 if ( obj.isFolder ){ // 如果是文件夹 ret = deleteFolder( obj ); }else if ( obj.isFile ){ // 如果是文件 ret = deleteFile( obj ); } } return ret; }; |
嵌套的条件分支语句绝对是代码维护者的噩梦，对于阅读代码的人来说，嵌套的if、else语句相比平铺的if、else，在阅读和理解上更加困难。嵌套的条件分支往往是由一些深信“每个函数只能有一个出口的”程序员写出的。但实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出。引导阅读者去看一些没有用的else片段，只会妨碍他们对程序的理解。
于是可以挑选一些条件分支，在进入这些条件分支之后，就立即让这个函数退出。要做到这一点，有一个常见的技巧，即在面对一个嵌套的if分支时，可以把外层if表达式进行反转。重构后的del函数如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var del = function( obj ){ if ( obj.isReadOnly ){ // 反转if 表达式 return; } if ( obj.isFolder ){ return deleteFolder( obj ); } if ( obj.isFile ){ return deleteFile( obj ); } }; |
08. 循环优化
【合理使用循环】
在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。下面有一段创建XHR对象的代码，为了简化示例，只考虑版本9以下的IE浏览器，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var createXHR = function(){ var xhr; try{ xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' ); }catch(e){ try{ xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' ); }catch(e){ xhr = new ActiveXObject( 'MSXML2.XMLHttp' ); } } return xhr; }; var xhr = createXHR(); |
下面灵活地运用循环，可以得到跟上面代码一样的效果：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//下面我们灵活地运用循环，可以得到跟上面代码一样的效果： var createXHR = function(){ var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ]; for ( var i = 0, version; version = versions[ i++ ]; ){ try{ return new ActiveXObject( version ); }catch(e){ } } }; var xhr = createXHR(); |
【用return退出多重循环】
假设在函数体内有一个两重循环语句，需要在内层循环中判断，当达到某个临界条件时退出外层的循环。大多数时候会引入一个控制标记变量：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var func = function(){ var flag = false; for ( var i = 0; i &lt; 10; i++ ){ for ( var j = 0; j &lt; 10; j++ ){ if ( i * j &gt;30 ){ flag = true; break; } } if ( flag === true ){ break; } } }; |
第二种做法是设置循环标记：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var func = function(){ outerloop: for ( var i = 0; i &lt; 10; i++ ){ innerloop: for ( var j = 0; j &lt; 10; j++ ){ if ( i * j &gt;30 ){ break outerloop; } } } }; |
这两种做法无疑都让人头晕目眩，更简单的做法是在需要中止循环的时候直接退出整个方法：
|
1 2 3 4 5 6 7 8 9 10 |
var func = function(){ for ( var i = 0; i &lt; 10; i++ ){ for ( var j = 0; j &lt; 10; j++ ){ if ( i * j &gt;30 ){ return; } } } }; |
当然用return直接退出方法会带来一个问题，如果在循环之后还有一些将被执行的代码呢？如果提前退出了整个方法，这些代码就得不到被执行的机会：
|
1 2 3 4 5 6 7 8 9 10 11 |
var func = function(){ for ( var i = 0; i &lt; 10; i++ ){ for ( var j = 0; j &lt; 10; j++ ){ if ( i * j &gt;30 ){ return; } } } console.log( i ); // 这句代码没有机会被执行 }; |
为了解决这个问题，可以把循环后面的代码放到return后面，如果代码比较多，就应该把它们提炼成一个单独的函数。