本篇文章給大家分享的內容是關於js的規範問題，具有一定的參考價值有需要的朋友可以參考一下 ##目錄 #嵌入規則 對齊縮排與換行 #命名 宣告 類型 物件 陣列 #字串 函數 屬性 ##變數 #條件式表達式與等號區塊#註解 #空白 逗號 分號 ##類型轉換 #命名約定 存取器 #建構器 事件 模組 jQuery 嵌入規則 Javascript程式應該盡量放在.js的檔案中，需要呼叫的時候在頁面中以</h1>的形式包含進來。 Javascript程式碼若不是該頁面專用的，則應盡量避免在頁面中直接編寫Javascript程式碼。 <ul class=" list-paddingleft-2"> <li>對齊縮排與換行<p><br></p> </li>#縮排<ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p></p></li></ul>#在同一系統中應採用同一種縮排標準，本文提倡縮排大小為4個空格。各編譯器對Tab鍵所取代的空白大小定義不同。建議設定開發環境時，將編輯器裡的Tab快捷鍵重新設定成4個空格。多數編譯器提供了此功能。否則建議按4次空格來進行縮排。 <li> <p><br></p> <blockquote>換行<p><br></p> </blockquote>在下列位置必須換行： </li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p></p></li> <li><p></p></li> <li><p></p></li> <li>#每個獨立語句結束後；<p><br></p> </li>if、else、catch、finally、while等關鍵字前；</ul> </ul> <ol class=" list-paddingleft-2"><li><p>運算子處換行時，運算子必須在新行的行首。 </p></li></ol>對於因為單行長度超過限制時所產生的換行，參考行長度中的策略進行分隔。 <p></p> <ol class=" list-paddingleft-2"> <li><p></p></li>字串過長截斷</ol> <p></p> <p></p>#每行程式碼應小於80個字元。若程式碼較長應盡量換行，換行應選擇在運算元和標點符號之後，最好是在分號「;」或逗號「,」之後。下一行程式碼相對上一行縮排4個空格。這樣可以有效防止複製貼上引起的程式碼缺失等錯誤並增強可讀性。 <ol class=" list-paddingleft-2"><li> <p></p>三元運算子過長</li></ol> <p></p>三元運算子由3部分組成，因此其換行應根據每個部分的長度不同，形成3種不同的情況：<ol class=" list-paddingleft-2"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><script> // 无需换行 var result = condition ? resultA : resultB; // 条件超长的情况 var result = thisIsAVeryVeryLongCondition ? resultA : resultB; // 结果分支超长的情况 var result = condition ? thisIsAVeryVeryLongCondition :resultB; var result = condition ? resultA : thisIsAVeryVeryLongCondition;登入後複製不得出現以下情況： // 最后一个结果很长，但不建议合并条件和第一个分支 // 不要这么干 var result = condition ? resultA : thisIsAVeryVeryLongCondition;登入後複製過長的邏輯條件組合# #當因為較複雜的邏輯條件組合導致80個字元無法滿足需求時，應將每個條件獨立一行，邏輯運算子放置在行首進行分隔，或將部分邏輯依邏輯組合分隔。最終將右括號)與左大括號{放在獨立一行，保證與if內語句塊能容易視覺辨識。如： // 注意逻辑运算符前的缩进 if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { // code } 登入後複製過長的JSON和陣列#如果物件屬性較多導致每個屬性一行佔用空間過大，可以按語意或邏輯進行分組的組織，如： // 引文-数字的映射 var mapping = { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6, seven: 7, eight:8, nine: 9, ten: 10, eleven: 11 } 登入後複製透過5個一組的分組，將每一行控制在合理的範圍內，並且按邏輯進行了切分。 對於項目較多的數組，也可以採用相同的方法eturn語句return如果用表達式的執行作為傳回值，請把表達式和return 放在同一行中，以免換行符號被誤解析為語句的結束而造成回傳錯誤。 return 關鍵字後面沒有回傳表達式，則回傳 undefined。構造器的預設回傳值為 this。 命名命名的方法通常有以下幾類： 1. 命名法說明 - 1).camel命名法，形如thisIsAnApple ## - 2).pascal命名法，形如ThisIsAnApple - 3).底線命名法，形如this_is_an_apple · - 4).中劃線命名法，形如this-is-an-apple 根據不同類型的內容，必須嚴格採用如下的命名法：變數名稱：必須使用camel命名法###參數名：必須使用camel命名法############函數名稱：必須使用camel命名法############方法/屬性：必須使用camel命名法## ##########私有（保護）成員：必須以下劃線_開頭#############常數名稱：必須使用全部大寫的底線命名法，如IS_DEBUG_ENABLED### #########類別名稱：必須使用pascal命名法############枚舉名：必須使用pascal命名法############枚舉的屬性：必須使用全部大寫的底線命名法###命名空间：必须使用camel命名法语义：命名同时还需要关注语义，如： 变量名应当使用名词；boolean类型的应当使用is、has等起头，表示其类型；·函数名应当用动宾短语；类名应当用名词。声明变量的声明尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明。但我们还是应该养成这个好习惯。这样可以比较容易的检测出那些未经声明的变量，避免其变为隐藏的全局变量，造成隐患。在函数的开始应先用 var 关键字声明函数中要使用的局部变量，注释变量的功能及代表的含义，且应以字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域，用 var 关键字声明的局部变量只在函数内有效，而未经 var 声明的变量则被视为全局变量。示例： var valueA = "a"; var valueB = "b"; function f1() { var valueA = "c"; alert("valueA=" + valueA); // output: valueA=c valueB = "d"; alert("valueB=" + valueB); // output: valueB=d } f1(); alert("valueA=" + valueA); // output: valueA=a alert("valueB=" + valueB); // output: valueB=d登入後複製用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是，在函数内部用 var 声明的变量为局部变量，这样可以有效地避免因局部变量和全局变量同名而产生的错误。类型原始值: 相当于传值 stringnumberbooleannullundefined var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9登入後複製复杂类型: 相当于传引用 objectarrayfunction var foo = [1, 2], bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9登入後複製对象使用字面值创建对象// badvar item = new Object();// goodvar item = {};登入後複製不要使用保留字 reserved words 作为键// badvar superman = { class: 'superhero', default: { clark: 'kent' }, private: true};// goodvar superman = { klass: 'superhero', defaults: { clark: 'kent' }, hidden: true};登入後複製数组使用字面值创建数组// badvar items = new Array();// goodvar items = [];登入後複製如果你不知道数组的长度，使用pushvar someStack = [];// badsomeStack[someStack.length] = 'abracadabra';// goodsomeStack.push('abracadabra');登入後複製当你需要拷贝数组时使用slice. jsPerfvar len = items.length, itemsCopy = [], i;// badfor (i = 0; i < len; i++) { itemsCopy[i] = items[i]; }// gooditemsCopy = items.slice();登入後複製使用slice将类数组的对象转成数组function trigger() { var args = Array.prototype.slice.call(arguments); ... } 登入後複製字符串对字符串使用单引号 ”// badvar name = "Bob Parr";// goodvar name = 'Bob Parr';// badvar fullName = "Bob " + this.lastName;// goodvar fullName = 'Bob ' + this.lastName;登入後複製超过80个字符的字符串应该使用字符串连接换行注: 如果过度使用，长字符串连接可能会对性能有影响// badvar errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';// badvar errorMessage = 'This is a super long error that \ was thrown because of Batman. \ When you stop to think about \ how Batman had anything to do \ with this, you would get nowhere \ fast.';// goodvar errorMessage = 'This is a super long error that ' + 'was thrown because of Batman.' + 'When you stop to think about ' + 'how Batman had anything to do ' + 'with this, you would get nowhere ' + 'fast.';登入後複製编程时使用join而不是字符串连接来构建字符串，特别是IEvar items, messages, length, i; messages = [{ state: 'success', message: 'This one worked.'},{ state: 'success', message: 'This one worked as well.'},{ state: 'error', message: 'This one did not work.'}]; length = messages.length;// badfunction inbox(messages) { items = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; }// goodfunction inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = messages[i].message; } return '<ul><li>' + items.join('</li><li>') + '</li></ul>'; } 登入後複製函数函数表达式:// 匿名函数表达式var anonymous = function() { return true; };// 有名函数表达式var named = function named() { return true; };// 立即调用函数表达式(function() { console.log('Welcome to the Internet. Please follow me.'); })();登入後複製绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句.// badif (currentUser) { function test() { console.log('Nope.'); } }// goodif (currentUser) { var test = function test() { console.log('Yup.'); }; } 登入後複製绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.// badfunction nope(name, options, arguments) { // ...stuff...}// goodfunction yup(name, options, args) { // ...stuff...} 登入後複製属性当使用变量访问属性时使用中括号.var luke = { jedi: true, age: 28};function getProp(prop) { return luke[prop]; }var isJedi = getProp('jedi');登入後複製变量总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。// badsuperPower = new SuperPower();// goodvar superPower = new SuperPower();登入後複製使用一个 var 以及新行声明多个变量，缩进4个空格。// badvar items = getItems();var goSportsTeam = true;var dragonball = 'z';// goodvar items = getItems(), goSportsTeam = true, dragonball = 'z';登入後複製最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。// badvar i, len, dragonball, items = getItems(), goSportsTeam = true;// badvar i, items = getItems(), dragonball, goSportsTeam = true, len;// goodvar items = getItems(), goSportsTeam = true, dragonball, length, i;登入後複製在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。// badfunction() { test(); console.log('doing stuff..'); //..other stuff.. var name = getName(); if (name === 'test') { return false; } return name; }// goodfunction() { var name = getName(); test(); console.log('doing stuff..'); //..other stuff.. if (name === 'test') { return false; } return name; }// badfunction() { var name = getName(); if (!arguments.length) { return false; } return true; }// goodfunction() { if (!arguments.length) { return false; } var name = getName(); return true; } 登入後複製条件表达式和等号适当使用 === 和 !== 以及 == 和 !=条件表达式的强制类型转换遵循以下规则： 对象 被计算为 trueUndefined 被计算为 falseNull 被计算为 false布尔值 被计算为 布尔的值数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true字符串 如果是空字符串 ” 则被计算为 false, 否则为 true javascript if ([0]) { // true // An array is an object, objects evaluate to true } 登入後複製使用快捷方式// badif (name !== '') { // ...stuff...}// goodif (name) { // ...stuff...}// badif (collection.length > 0) { // ...stuff...}// goodif (collection.length) { // ...stuff...} 登入後複製块给所有多行的块使用大括号// badif (test) return false;// goodif (test) return false;// goodif (test) { return false; }// badfunction() { return false; }// goodfunction() { return false; } 登入後複製注释注释要尽量简单，清晰明了。着重注释的意思，对不太直观的部分进行注解JavaScript 的注释有两种”//” 和”/* …. */” - 建议”//”用作代码行注释 - “/* …. */”形式用作对整个代码段的注销，或较正式的声明中，如函数参数、功能、文件功能等的描述中 - >另：复制粘贴应注意注释是否与代码对应。使用 /* … / 进行多行注释，包括描述，指定类型以及参数值和返回值// bad// make() returns a new element// based on the passed in tag name//// @param <String> tag// @return <Element> elementfunction make(tag) { // ...stuff... return element; }// good/** * make() returns a new element * based on the passed in tag name * * @param <String> tag * @return <Element> element */function make(tag) { // ...stuff... return element; } 登入後複製使用 // 进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行.// badvar active = true; // is current tab// good// is current tabvar active = true;// badfunction getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; }// goodfunction getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; } 登入後複製如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解function Calculator() { // FIXME: shouldn't use a global here total = 0; return this; }function Calculator() { // TODO: total should be configurable by an options param this.total = 0; return this; } 登入後複製空白将tab设为4个空格// badfunction() {∙∙var name; }// badfunction() {∙var name; }// goodfunction() {∙∙∙∙var name; }登入後複製大括号前放一个空格// badfunction test(){console.log('test'); }// goodfunction test() {console.log('test'); }// baddog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog'});// gooddog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog'});登入後複製在做长方法链时使用缩进.// bad$('#items').find('.selected').highlight().end().find('.open').updateCount();// good$('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount();// badvar leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led);// goodvar leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .class('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led);登入後複製逗号不要将逗号放前面// badvar once , upon , aTime;// goodvar once, upon, aTime;// badvar hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength'};// goodvar hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength'};登入後複製不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。// badvar hero = { firstName: 'Kevin', lastName: 'Flynn', };var heroes = ['Batman','Superman', ];// goodvar hero = { firstName: 'Kevin', lastName: 'Flynn'};var heroes = ['Batman','Superman'];登入後複製分号语句结束一定要加分号// bad(function() {var name = 'Skywalker'return name })()// good(function() {var name = 'Skywalker';return name; })();// good;(function() {var name = 'Skywalker';return name; })();登入後複製类型转换在语句的开始执行类型转换.字符串:// => this.reviewScore = 9;// badvar totalScore = this.reviewScore + '';// goodvar totalScore = '' + this.reviewScore;// badvar totalScore = '' + this.reviewScore + ' total score';// goodvar totalScore = this.reviewScore + ' total score';登入後複製对数字使用 parseInt 并且总是带上类型转换的基数.var inputValue = '4';// badvar val = new Number(inputValue);// badvar val = +inputValue;// badvar val = inputValue >> 0;// badvar val = parseInt(inputValue);// goodvar val = Number(inputValue);// goodvar val = parseInt(inputValue, 10);// good/** * parseInt was the reason my code was slow. * Bitshifting the String to coerce it to a * Number made it a lot faster. */var val = inputValue >> 0;登入後複製布尔值:var age = 0;// badvar hasAge = new Boolean(age);// goodvar hasAge = Boolean(age);// goodvar hasAge = !!age;登入後複製命名约定避免单个字符名，让你的变量名有描述意义。// badfunction q() {// ...stuff...}// goodfunction query() {// ..stuff..}登入後複製当命名对象、函数和实例时使用驼峰命名规则// badvar OBJEcttsssss = {};var this_is_my_object = {};var this-is-my-object = {};function c() {};var u = new user({ name: 'Bob Parr'});// goodvar thisIsMyObject = {};function thisIsMyFunction() {};var user = new User({ name: 'Bob Parr'});登入後複製当命名构造函数或类时使用驼峰式大写// badfunction user(options) {this.name = options.name; }var bad = new user({ name: 'nope'});// goodfunction User(options) {this.name = options.name; }var good = new User({ name: 'yup'});登入後複製命名私有属性时前面加个下划线 _// badthis.__firstName__ = 'Panda';this.firstName_ = 'Panda';// goodthis._firstName = 'Panda';登入後複製当保存对 this 的引用时使用 _this.// badfunction() {var self = this;return function() { console.log(self); }; }// badfunction() {var that = this;return function() { console.log(that); }; }// goodfunction() {var _this = this;return function() { console.log(_this); }; }登入後複製存取器属性的存取器函数不是必需的如果你确实有存取器函数的话使用getVal() 和 setVal(‘hello’)// baddragon.age();// gooddragon.getAge();// baddragon.age(25);// gooddragon.setAge(25);登入後複製如果属性是布尔值，使用isVal() 或 hasVal()// badif (!dragon.age()) {return false; }// goodif (!dragon.hasAge()) {return false; }登入後複製可以创建get()和set()函数，但是要保持一致function Jedi(options) {options || (options = {});var lightsaber = options.lightsaber || 'blue';this.set('lightsaber', lightsaber); } Jedi.prototype.set = function(key, val) {this[key] = val; }; Jedi.prototype.get = function(key) {return this[key]; };登入後複製构造器给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题。function Jedi() {console.log('new jedi'); }// badJedi.prototype = { fight: function fight() { console.log('fighting'); }, block: function block() { console.log('blocking'); } };// goodJedi.prototype.fight = function fight() {console.log('fighting'); }; Jedi.prototype.block = function block() {console.log('blocking'); };登入後複製方法可以返回 this 帮助方法可链。// badJedi.prototype.jump = function() {this.jumping = true;return true; }; Jedi.prototype.setHeight = function(height) {this.height = height; };var luke = new Jedi(); luke.jump(); // => trueluke.setHeight(20) // => undefined// goodJedi.prototype.jump = function() {this.jumping = true;return this; }; Jedi.prototype.setHeight = function(height) {this.height = height;return this; };var luke = new Jedi(); luke.jump() .setHeight(20);登入後複製可以写一个自定义的toString()方法，但是确保它工作正常并且不会有副作用。function Jedi(options) {options || (options = {});this.name = options.name || 'no name'; } Jedi.prototype.getName = function getName() {return this.name; }; Jedi.prototype.toString = function toString() {return 'Jedi - ' + this.getName(); };登入後複製事件当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器// bad$(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', function(e, listingId) {// do something with listingId});登入後複製更好:// good$(this).trigger('listingUpdated', { listingId : listing.id }); ... $(this).on('listingUpdated', function(e, data) {// do something with data.listingId});登入後複製模块模块应该以 ! 开始，这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误这个文件应该以驼峰命名，并在同名文件夹下，同时导出的时候名字一致加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它总是在模块顶部声明 'use strict';// fancyInput/fancyInput.js!function(global) {'use strict';var previousFancyInput = global.FancyInput;function FancyInput(options) { this.options = options || {}; } FancyInput.noConflict = function noConflict() { global.FancyInput = previousFancyInput; return FancyInput; }; global.FancyInput = FancyInput; }(this);登入後複製jQuery缓存jQuery查询// badfunction setSidebar() {$('.sidebar').hide();// ...stuff...$('.sidebar').css({ 'background-color': 'pink'}); }// goodfunction setSidebar() {var $sidebar = $('.sidebar'); $sidebar.hide();// ...stuff...$sidebar.css({ 'background-color': 'pink'}); }登入後複製对DOM查询使用级联的 $('.sidebar ul') 或 $('.sidebar ul')，jsPerf对有作用域的jQuery对象查询使用 find// bad$('.sidebar', 'ul').hide();// bad$('.sidebar').find('ul').hide();登入後複製// good$('.sidebar ul').hide();// good$('.sidebar > ul').hide();// good (slower)$sidebar.find('ul');// good (faster)$($sidebar[0]).find('ul');登入後複製
