當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript代码规范

發(fā)布時間：2025/7/14 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript代码规范小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

類型

原始值: 相當(dāng)于傳值(JavaScript對象都提供了字面量)，使用字面量創(chuàng)建對象。
- string
- number
- boolean
- null
- undefined

var foo = 1,bar = foo;bar = 9;console.log(foo, bar); // => 1, 9

復(fù)雜類型: 相當(dāng)于傳引用

object
array
function

var foo = [1, 2],bar = foo;bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9

對象

使用字面值創(chuàng)建對象 // bad var item = new Object();// good var item = {};
不要使用保留字?reserved words?作為鍵 // bad var superman = {class: 'superhero', default: { clark: 'kent' }, private: true }; // good var superman = { klass: 'superhero', defaults: { clark: 'kent' }, hidden: true };

數(shù)組

使用字面值創(chuàng)建數(shù)組 // bad var items = new Array();// good var items = [];
如果你不知道數(shù)組的長度，使用push var someStack = [];// bad someStack[someStack.length] = 'abracadabra';// good someStack.push('abracadabra');
當(dāng)你需要拷貝數(shù)組時使用slice.?jsPerf var len = items.length,itemsCopy = [],i;// bad for (i = 0; i < len; i++) {itemsCopy[i] = items[i]; }// good itemsCopy = items.slice();
使用slice將類數(shù)組的對象轉(zhuǎn)成數(shù)組. function trigger() {var args = [].slice.apply(arguments); ... }

字符串

對字符串使用單引號?''(因為大多時候我們的字符串。特別html會出現(xiàn)") // bad var name = "Bob Parr";// good var name = 'Bob Parr'; // bad var fullName = "Bob " + this.lastName; // good var fullName = 'Bob ' + this.lastName;
超過80(也有規(guī)定140的，項目具體可制定)個字符的字符串應(yīng)該使用字符串連接換行
注: 如果過度使用，長字符串連接可能會對性能有影響.?jsPerf?&?Discussion // bad var 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.'; // bad var 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.'; // good var 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而不是字符串連接來構(gòu)建字符串，特別是IE:?jsPerf. var 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; // bad function inbox(messages) { items = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; } // good function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = messages[i].message; } return '<ul><li>' + items.join('</li><li>') + '</li></ul>'; }

函數(shù)

函數(shù)表達(dá)式: // 匿名函數(shù)表達(dá)式 var anonymous = function() { return true; }; // 有名函數(shù)表達(dá)式 var named = function named() { return true; }; // 立即調(diào)用函數(shù)表達(dá)式 (function() { console.log('Welcome to the Internet. Please follow me.'); })();
絕對不要在一個非函數(shù)塊里聲明一個函數(shù)，把那個函數(shù)賦給一個變量。瀏覽器允許你這么做，但是它們解析不同。
注:?ECMA-262定義把塊定義為一組語句，函數(shù)聲明不是一個語句。閱讀ECMA-262對這個問題的說明. // bad if (currentUser) {function test() { console.log('Nope.'); } } // good if (currentUser) { var test = function test() { console.log('Yup.'); }; }
絕對不要把參數(shù)命名為?arguments, 這將會逾越函數(shù)作用域內(nèi)傳過來的?arguments?對象. // bad function nope(name, options, arguments) { // ...stuff... } // good function yup(name, options, args) { // ...stuff... }

屬性

當(dāng)使用變量和特殊非法變量名時，訪問屬性時可以使用中括號(.?優(yōu)先). var luke = {jedi: true,age: 28 };function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');

變量

總是使用?var?來聲明變量，如果不這么做將導(dǎo)致產(chǎn)生全局變量，我們要避免污染全局命名空間。 // bad superPower = new SuperPower();// good var superPower = new SuperPower();
使用一個?var?以及新行聲明多個變量，縮進(jìn)4個空格。 // bad var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; // good var items = getItems(), goSportsTeam = true, dragonball = 'z';
最后再聲明未賦值的變量，當(dāng)你想引用之前已賦值變量的時候很有用。 // bad var i, len, dragonball,items = getItems(),goSportsTeam = true;// bad var i, items = getItems(), dragonball, goSportsTeam = true, len; // good var items = getItems(), goSportsTeam = true, dragonball, length, i;
在作用域頂部聲明變量，避免變量聲明和賦值引起的相關(guān)問題。 // bad function() {test();console.log('doing stuff..'); //..other stuff.. var name = getName(); if (name === 'test') { return false; } return name; } // good function() { var name = getName(); test(); console.log('doing stuff..'); //..other stuff.. if (name === 'test') { return false; } return name; } // bad function() { var name = getName(); if (!arguments.length) { return false; } return true; } // good function() { if (!arguments.length) { return false; } var name = getName(); return true; }

條件表達(dá)式和等號

合理使用?===?和?!==?以及?==?和?!=.
合理使用表達(dá)式邏輯操作運算.
條件表達(dá)式的強制類型轉(zhuǎn)換遵循以下規(guī)則：
- 對象?被計算為?true
- Undefined?被計算為?false
- Null?被計算為?false
- 布爾值?被計算為?布爾的值
- 數(shù)字?如果是?+0, -0, or NaN?被計算為?false?, 否則為?true
- 字符串?如果是空字符串?''?則被計算為?false, 否則為?true
  
  ?
  if ([0]) {// true// An array is an object, objects evaluate to true }
使用快捷方式. // bad if (name !== '') {// ...stuff... }// good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... }
閱讀?Truth Equality and JavaScript?了解更多

塊

給所有多行的塊使用大括號 // bad if (test)return false;// good if (test) return false; // good if (test) { return false; } // bad function() { return false; } // good function() { return false; }

注釋

使用?/** ... */?進(jìn)行多行注釋，包括描述，指定類型以及參數(shù)值和返回值 // bad // make() returns a new element // based on the passed in tag name // // @param <String> tag // @return <Element> element function 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; }
使用?//?進(jìn)行單行注釋，在評論對象的上面進(jìn)行單行注釋，注釋前放一個空行. // bad var active = true; // is current tab// good // is current tab var active = true; // bad function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; } // good function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; }
如果你有一個問題需要重新來看一下或如果你建議一個需要被實現(xiàn)的解決方法的話需要在你的注釋前面加上?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; }
滿足規(guī)范的文檔，在需要文檔的時候，可以嘗試jsdoc.

空白

縮進(jìn)、格式化能幫助團隊更快得定位修復(fù)代碼BUG.
將tab設(shè)為4個空格 // bad function() { ??var name; } // bad function() { ?var name; } // good function() { ????var name; }
大括號前放一個空格 // bad function test(){ console.log('test'); } // good function test() { console.log('test'); } // bad dog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog' }); // good dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog' });
在做長方法鏈時使用縮進(jìn). // bad $('#items').find('.selected').highlight().end().find('.open').updateCount();// good $('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount(); // bad var 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); // good var 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);

逗號

不要將逗號放前面 // bad var once, upon, aTime;// good var once,upon,aTime;// bad var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // good var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' };
不要加多余的逗號，這可能會在IE下引起錯誤，同時如果多一個逗號某些ES3的實現(xiàn)會計算多數(shù)組的長度。 // bad var hero = {firstName: 'Kevin',lastName: 'Flynn', };var heroes = [ 'Batman', 'Superman', ]; // good var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ];

分號

語句結(jié)束一定要加分號 // bad (function() {var name = 'Skywalker' return name })() // good (function() { var name = 'Skywalker'; return name; })(); // good ;(function() { var name = 'Skywalker'; return name; })();

類型轉(zhuǎn)換

在語句的開始執(zhí)行類型轉(zhuǎn)換.
字符串: // => this.reviewScore = 9;// bad var totalScore = this.reviewScore + ''; // good var totalScore = '' + this.reviewScore; // bad var totalScore = '' + this.reviewScore + ' total score'; // good var totalScore = this.reviewScore + ' total score';
對數(shù)字使用?parseInt?并且總是帶上類型轉(zhuǎn)換的基數(shù).，如parseInt(value, 10)
var inputValue = '4';// bad var val = new Number(inputValue); // bad var val = +inputValue; // bad var val = inputValue >> 0; // bad var val = parseInt(inputValue); // good var val = Number(inputValue); // good var 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;// bad var hasAge = new Boolean(age); // good var hasAge = Boolean(age); // good var hasAge = !!age;

命名約定

避免單個字符名，讓你的變量名有描述意義。 // bad function q() { // ...stuff... } // good function query() { // ..stuff.. }
當(dāng)命名對象、函數(shù)和實例時使用駝峰命名規(guī)則 // bad var OBJEcttsssss = {}; var this_is_my_object = {}; var this-is-my-object = {}; function c() {}; var u = new user({ name: 'Bob Parr' }); // good var thisIsMyObject = {}; function thisIsMyFunction() {}; var user = new User({ name: 'Bob Parr' });
當(dāng)命名構(gòu)造函數(shù)或類時使用駝峰式大寫 // bad function user(options) { this.name = options.name; } var bad = new user({ name: 'nope' }); // good function User(options) { this.name = options.name; } var good = new User({ name: 'yup' });
命名私有屬性時前面加個下劃線?_: // bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; // good this._firstName = 'Panda';
當(dāng)保存對?this?的引用時使用?self(python 風(fēng)格),避免this issue.Angular建議使用vm(MVVM模式中view-model): // good function() {var self = this; return function() { console.log(self); }; }

存取器

屬性的存取器函數(shù)不是必需的
如果你確實有存取器函數(shù)的話使用getVal() 和 setVal(‘hello’),java getter、setter風(fēng)格或者jQuery風(fēng)格
如果屬性是布爾值，使用isVal() 或 hasVal() // bad if (!dragon.age()) {return false; }// good if (!dragon.hasAge()) { return false; }
可以創(chuàng)建get()和set()函數(shù)，但是要保持一致 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]; };

構(gòu)造器

給對象原型分配方法，而不是用一個新的對象覆蓋原型，覆蓋原型會使繼承出現(xiàn)問題。 function Jedi() {console.log('new jedi'); } // bad Jedi.prototype = { fight: function fight() { console.log('fighting'); }, block: function block() { console.log('blocking'); } }; // good Jedi.prototype.fight = function fight() { console.log('fighting'); }; Jedi.prototype.block = function block() { console.log('blocking'); };
方法可以返回?this?幫助方法可鏈。 // bad Jedi.prototype.jump = function() {this.jumping = true; return true; }; Jedi.prototype.setHeight = function(height) { this.height = height; }; var luke = new Jedi(); luke.jump(); // => true luke.setHeight(20) // => undefined // good Jedi.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(); };

事件

當(dāng)給事件附加數(shù)據(jù)時，傳入一個哈希而不是原始值，這可以讓后面的貢獻(xiàn)者加入更多數(shù)據(jù)到事件數(shù)據(jù)里而不用找出并更新那個事件的事件處理器 // 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 });

模塊

這個文件應(yīng)該以駝峰命名，并在同名文件夾下，同時導(dǎo)出的時候名字一致
對于公開API庫可以考慮加入一個名為noConflict()的方法來設(shè)置導(dǎo)出的模塊為之前的版本并返回它
總是在模塊頂部聲明?'use strict';，引入[JSHint規(guī)范](http://jshint.com/): // 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對象以$開頭，以和原生DOM節(jié)點區(qū)分。 // bad var menu = $(".menu");// good var $menu = $(".menu");
緩存jQuery查詢 // bad function setSidebar() { $('.sidebar').hide(); // ...stuff... $('.sidebar').css({ 'background-color': 'pink' }); } // good function setSidebar() { var $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... $sidebar.css({ 'background-color': 'pink' }); }
對DOM查詢使用級聯(lián)的?$('.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');
每個頁面只使用一次document的ready事件，這樣便于調(diào)試與行為流跟蹤。 $(function(){//do your page init. });
事件利用jQuery.on從頁面分離到JavaScript文件。 // bad <a id="myLink" href="#" οnclick="myEventHandler();"></a> // good <a id="myLink" href="#"></a> $("#myLink").on("click", myEventHandler);
對于Ajax使用promise方式。 // bad$.ajax({...success : function(){},error : function(){ } }) // good $.ajax({. .. }).then( function( ){ // success }, function( ){ // error })
利用promise的deferred對象解決延遲注冊問題。 var dtd = $.Deferred(); // 新建一個deferred對象var wait = function(dtd){ 　　　　var tasks = function(){ 　　　　　　alert("執(zhí)行完畢！"); 　　　　　　dtd.resolve(); // 改變deferred對象的執(zhí)行狀態(tài) 　　　　}; 　　　　setTimeout(tasks,5000); 　　　　return dtd; 　　};
HTML中Style、以及JavaScript中style移到CSS中class，在HTML、JavaScript中引入class，而不是直接style。

ECMAScript 5兼容性

盡量采用ES5方法，特別數(shù)組map、filter、forEach方法簡化日常開發(fā)。在老式IE瀏覽器中引入ES5-shim。或者也可以考慮引入underscore、lodash?常用輔助庫.
- 參考Kangax的 ES5?compatibility table

HTML、CSS、JavaScript分離

頁面DOM結(jié)構(gòu)使用HTML，樣式則采用CSS，動態(tài)DOM操作JavaScript。不要混用在HTML中
分離在不同類型文件，文件link。
HTML、CSS、JavaScript變量名都需要有業(yè)務(wù)價值。CSS以中劃線分割的全小寫命名，JavaScript則首字母小寫的駝峰命名。
CSS可引入Bootstrap、Foundation等出名響應(yīng)式設(shè)計框架。以及SASS、LESS工具書寫CSS。
對于CSS、JavaScript建議合并為單文件，減少Ajax的連接數(shù)。也可以引入AMD(Require.js)加載方式。
對于內(nèi)部大部分企業(yè)管理系統(tǒng)，可以嘗試采用前端?MVC框架組織代碼。如Angular、React +?Flux架構(gòu)、Knockout等。
對于兼容性可用Modernizr規(guī)范庫輔助。

使用jsHint

前端項目中推薦引入jshint插件來規(guī)范項目編碼規(guī)范。以及一套完善的IDE配置。
注意：jshint需要引入nodejs 工具grunt或gulp插件，建議企業(yè)級nodejs npm私服。

前端工具

- 前端第三方JavaScript包管理工具bower(bower install jQuery)，bower可以實現(xiàn)第三方庫的依賴解析、下載、升級管理等。建議建立企業(yè)級bower私服。
- 前端構(gòu)建工具，可以采用grunt或者gulp工具，可以實現(xiàn)html、css、js壓縮、驗證、測試，文件合并、watch和liveload等所有前端任務(wù)。建議企業(yè)級nodejs npm私服。
- 前端開發(fā)IDE： WebStorm( Idea )、Sublime為最佳。項目組統(tǒng)一IDE。IDE統(tǒng)一配置很重要。

轉(zhuǎn)載于:https://www.cnblogs.com/ning123/p/11029619.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript代码规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：连接数据库时常用的工具类（一）-----
下一篇：在 Linux 下确认 NTP 是否同步