關於js的規範
本篇文章給大家分享的內容是關於js的規範問題,具有一定的參考價值有需要的朋友可以參考一下
- #嵌入規則
- 對齊縮排與換行
- #命名
- 宣告
- 類型
- 物件
- 陣列
- #字串
- 函數
- 屬性 ##變數
- 區塊
- #註解
#空白
逗號
分號
- ##類型轉換
- #命名約定
- 存取器
- #建構器
- 事件
- 模組
嵌入規則
- 對齊縮排與換行
-
換行
在下列位置必須換行: - #每個獨立語句結束後;
運算子處換行時,運算子必須在新行的行首。
- 字串過長截斷
- 三元運算子過長
- 不得出現以下情況:
<script> // 最后一个结果很长,但不建议合并条件和第一个分支 // 不要这么干 var result = condition ? resultA : thisIsAVeryVeryLongCondition;</script>
登入後複製
<script> // 无需换行 var result = condition ? resultA : resultB; // 条件超长的情况 var result = thisIsAVeryVeryLongCondition ? resultA : resultB; // 结果分支超长的情况 var result = condition ? thisIsAVeryVeryLongCondition :resultB; var result = condition ? resultA : thisIsAVeryVeryLongCondition;</script>
# #當因為較複雜的邏輯條件組合導致80個字元無法滿足需求時,應將每個條件獨立一行,邏輯運算子放置在行首進行分隔,或將部分邏輯依邏輯組合分隔。最終將右括號)與左大括號{放在獨立一行,保證與if內語句塊能容易視覺辨識。如:
<script> // 注意逻辑运算符前的缩进 if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { // code } </script>
過長的JSON和陣列
#如果物件屬性較多導致每個屬性一行佔用空間過大,可以按語意或邏輯進行分組的組織,如:
<script> // 引文-数字的映射 var mapping = { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6, seven: 7, eight:8, nine: 9, ten: 10, eleven: 11 } </script>
登入後複製透過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 声明的变量则被视为全局变量。示例:
<script> 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</script>
用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是,在函数内部用 var 声明的变量为局部变量,这样可以有效地避免因局部变量和全局变量同名而产生的错误。
类型
原始值: 相当于传值
string
number
boolean
null
undefined
<script> var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9</script>
复杂类型: 相当于传引用
object
array
function
<script> var foo = [1, 2], bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9</script>
对象
使用字面值创建对象
<script>// badvar item = new Object();// goodvar item = {};</script>
不要使用保留字 reserved words 作为键
<script>// badvar superman = { class: 'superhero', default: { clark: 'kent' }, private: true};// goodvar superman = { klass: 'superhero', defaults: { clark: 'kent' }, hidden: true};</script>
数组
使用字面值创建数组
<script>// badvar items = new Array();// goodvar items = [];</script>
如果你不知道数组的长度,使用push
<script>var someStack = [];// badsomeStack[someStack.length] = 'abracadabra';// goodsomeStack.push('abracadabra');</script>
当你需要拷贝数组时使用slice. jsPerf
<script>var len = items.length, itemsCopy = [], i;// badfor (i = 0; i < len; i++) { itemsCopy[i] = items[i]; }// gooditemsCopy = items.slice();</script>
使用slice将类数组的对象转成数组
<script>function trigger() { var args = Array.prototype.slice.call(arguments); ... } </script>
字符串
对字符串使用单引号 ”
<script>// badvar name = "Bob Parr";// goodvar name = 'Bob Parr';// badvar fullName = "Bob " + this.lastName;// goodvar fullName = 'Bob ' + this.lastName;</script>
超过80个字符的字符串应该使用字符串连接换行
注: 如果过度使用,长字符串连接可能会对性能有影响
<script>// 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.';</script>
编程时使用join而不是字符串连接来构建字符串,特别是IE
<script>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;// 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>'; } </script>
函数
函数表达式:
<script>// 匿名函数表达式var anonymous = function() { return true; };// 有名函数表达式var named = function named() { return true; };// 立即调用函数表达式(function() { console.log('Welcome to the Internet. Please follow me.'); })();</script>
绝对不要在一个非函数块里声明一个函数,把那个函数赋给一个变量。浏览器允许你这么做,但是它们解析不同。
注: ECMA-262定义把块定义为一组语句,函数声明不是一个语句.
<script>// badif (currentUser) { function test() { console.log('Nope.'); } }// goodif (currentUser) { var test = function test() { console.log('Yup.'); }; } </script>
绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.
<script>// badfunction nope(name, options, arguments) { // ...stuff...}// goodfunction yup(name, options, args) { // ...stuff...} </script>
属性
当使用变量访问属性时使用中括号.
<script>var luke = { jedi: true, age: 28};function getProp(prop) { return luke[prop]; }var isJedi = getProp('jedi');</script>
变量
总是使用 var 来声明变量,如果不这么做将导致产生全局变量,我们要避免污染全局命名空间。
<script>// badsuperPower = new SuperPower();// goodvar superPower = new SuperPower();</script>
使用一个 var 以及新行声明多个变量,缩进4个空格。
<script>// badvar items = getItems();var goSportsTeam = true;var dragonball = 'z';// goodvar items = getItems(), goSportsTeam = true, dragonball = 'z';</script>
最后再声明未赋值的变量,当你想引用之前已赋值变量的时候很有用。
<script>// badvar i, len, dragonball, items = getItems(), goSportsTeam = true;// badvar i, items = getItems(), dragonball, goSportsTeam = true, len;// goodvar items = getItems(), goSportsTeam = true, dragonball, length, i;</script>
在作用域顶部声明变量,避免变量声明和赋值引起的相关问题。
<script>// 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; } </script>
条件表达式和等号
适当使用 === 和 !== 以及 == 和 !=
条件表达式的强制类型转换遵循以下规则:
对象 被计算为 true
Undefined 被计算为 false
Null 被计算为 false
布尔值 被计算为 布尔的值
数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
字符串 如果是空字符串 ” 则被计算为 false, 否则为 true
javascript <script> if ([0]) { // true // An array is an object, objects evaluate to true } </script>
登入後複製使用快捷方式
<script>// badif (name !== '') { // ...stuff...}// goodif (name) { // ...stuff...}// badif (collection.length > 0) { // ...stuff...}// goodif (collection.length) { // ...stuff...} </script>
块
给所有多行的块使用大括号
<script>// badif (test) return false;// goodif (test) return false;// goodif (test) { return false; }// badfunction() { return false; }// goodfunction() { return false; } </script>
注释
注释要尽量简单,清晰明了。着重注释的意思,对不太直观的部分进行注解
JavaScript 的注释有两种”//” 和”/* …. */”
- 建议”//”用作代码行注释
- “/* …. */”形式用作对整个代码段的注销,或较正式的声明中,如函数参数、功能、文件功能等的描述中
- >另:复制粘贴应注意注释是否与代码对应。
使用 /* … / 进行多行注释,包括描述,指定类型以及参数值和返回值
<script>// 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; } </script>
使用 // 进行单行注释,在评论对象的上面进行单行注释,注释前放一个空行.
<script>// 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; } </script>
如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解
<script>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; } </script>
空白
将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');
登入後複製以上是關於js的規範的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

學習Python時需要了解的變數命名規格在學習Python程式語言時,一個重要的面向是學習如何正確命名和使用變數。變數是用來儲存和表示資料的標識符。良好的變數命名規範不僅能提高程式碼的可讀性,還能減少出錯的可能性。本文將介紹一些常用的變數命名規範,並給出對應的程式碼範例。使用有意義的名字變數名應該具有清晰的含義,能夠描述變數所儲存的資料。使用有意義的名字可以讓其
