この記事で共有される内容は、js の仕様に関する問題に関するものであり、必要な友人はそれを参照できます
整列インデントと改行。
...属性
変数
条件式と等号
ブロック
コメント
コンマ
セミコロン
型変換
命名規則
アクセサー
コンストラクター
イベント
モジュール
埋め込みルール
インデントと改行を揃える
インデント
各独立したステートメントの終了後
<script src="filename.js">if、else、catch、finally、while およびその他のキーワード;
コードの各行は 80 文字未満である必要があります。コードが長い場合は、改行を演算子と句読点の後、できればセミコロン「;」またはカンマ「,」の後に置くようにしてください。コードの次の行は、前の行に対してスペース 4 つインデントされます。これにより、コピー＆ペーストによるコード抜けなどのエラーを効果的に防止し、可読性を向上させることができます。三項演算子が長すぎます
三項演算子は 3 つの部分で構成されているため、行の折り返しは各部分の長さに基づいて、3 つの異なる状況を形成する必要があります:
<script> // 无需换行
var result = condition ? resultA : resultB; // 条件超长的情况
var result = thisIsAVeryVeryLongCondition ? resultA : resultB; // 结果分支超长的情况
var result = condition
? thisIsAVeryVeryLongCondition
:resultB; var result = condition
? resultA
: thisIsAVeryVeryLongCondition;</script><script> // 最后一个结果很长，但不建议合并条件和第一个分支
// 不要这么干
var result = condition ? resultA
: thisIsAVeryVeryLongCondition;</script><script> // 注意逻辑运算符前的缩进
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) { // code
}
</script><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>By 5 グループのグループが各行を合理的な範囲で制御し、論理的に分割します。 項目数が多い配列の場合も同様の方法で対応可能です
命名方法は通常、次のカテゴリに分類されます:
1. 名称の説明- 1).camel 命名法、thisIsAnApple の形式
- 2).pascal 命名法、ThisIsAnAppleの形式です。 コンテンツの種類に応じて、次の命名法を厳密に使用する必要があります:
列挙名: 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();ログイン後にコピー以上がjsに関する仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
