本篇文章我们来讲一下JavaScript日常开发规范,让大家往后的JavaScript日常开发写出的js代码更规范,感兴趣的同学可以来看看本篇文章!日常开发规范还是很重要的哦!
前端入坑依赖前前后后写了好几个项目,在用JavaScript写交互逻辑的时候,或多或少写了一些垃圾代码,如全局变量污染、代码复用性差、简洁性不高等直接给代码后期维护的造成一些困惑。下面是一些JS编码方面有待提高的地方,可直接在开发中加以应用,致力于写出更优雅的代码。
说到代码规范,我们或许会想到ESLint规则,下面的规范有涉及到ESLint规则的进行了相关的说明,也许在你使用ESLint的时候出现相关报错提示也可以从中或许一些帮助。
1.变量声明
1.1不要用var声明变量,尽量使用const
eslint: prefer-const, no-const-assign
避免使用var能够减少全局变量污染问题,使用const确保声明的变量是唯一的,无法在对其进行重新赋值操作。
//bad var a = 1; //best const a = 1;
1.2如果需要声明可变动的引用,那么使用let代替var
eslint: no-var jscs: disallowVar
let属于当前{}中的一个块级作用域,而var属于函数作用域
//bad var count = 1; if (true) { var count = 2; } console.log(count) //best let count = 1; if (true) { let count = 2; } console.log(count)
1.3将声明的let和const进行分组
能够提高代码可读性。
//bad let a = 1; const obj = {}; let num = 0; const page = 10; //best let a = 1; let num = 0; const obj = {}; const page = 10;
1.4将let和const声明的变量放在合适位置
因为let和const被赋予了一种称为【暂时性死区(Temporal Dead Zones, TDZ)】的概念,也就决定了他们声明的变量不会进行变量提升。而var声明的变量会被提升到作用域顶部。
2.使用对象
2.1使用字面量创建对象
eslint: no-new-object
//bad const obj = new Object(); //good const obj = {};
2.2对象的方法是用简写形式
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
2.3对象的属性也使用简写形式
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
const hello = "你好"; //bad const obj = { hello:hello }; //best const obj = { hello, };
2.4不要直接使用Object.prototype的方法,如:hasOwnProperty, propertyIsEnumerable, isPrototypeOf 等
// bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. const has = require('has'); … console.log(has.call(object, key));
2.5对象的浅拷贝最好使用 ... 而不是Object.assign()
// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `original` delete copy.a; // so does this // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
使用Object.assign()会产生一些意想不到的问题。
3.使用数组
3.1使用字面量创建数组
eslint: no-array-constructor
// bad const arr= new Array(); // good const arr= [];
3.2使用扩展运算符 ... 复制数组
// bad const arr= new Array(); // good const arr= []; // bad const len = arr.length; const arrCopy = []; let i; for (i = 0; i < len; i++) { arrCopy[i] = arr[i]; } // good const arrCopy = [...arr];
3.3使用Array.from把一个类数组转成数组
const list = document.getElementsByTagName("li"); const liNodes = Array.from(list);
4.函数
4.1使用函数声明代替函数表达式
为什么?因为函数声明的函数会先被识别,进行变量提升(hoisted),而函数表达式只会把函数的引用变量名提升(即变量提升)。
// bad const fn= function () { }; // good function fn() { }
4.2不要再一个非函数代码块中(if,else,while等)声明函数, 而是把那个函数赋给一个变量。即使前者不会报错,但是浏览器的解析方式是不同的。
// bad if (ifLogin) { function test() { console.log(' logged'); } } // good let test; if (ifLogin) { test = () => { console.log(' logged'); }; }
4.3避免使用arguments,而是用rest语法 ... 替代
原因是arguments是一个类数组,没有数组特有的方法,而...能够明确你传入的参数,并且是真正的数组。
// bad function myconcat() { const args = Array.prototype.slice.call(arguments); return args.join(''); } // good function myconcat(...args) { return args.join(''); }
5.箭头函数
5.1当你必须使用函数表达式(或者需要传递一个匿名函数)时候,可以使用箭头函数代替。
原因是使用新的函数会创建一个新的函数作用域,这样就会改变当前this的指向,而箭头函数会创建一个新的this执行环境,能够将当前环境的this继续传递下去;并且写法也更为简洁。
当你的函数较为复杂的时候,这时候使用箭头函数就容易出问题,可以使用函数声明代替。
// bad [1, 3, 5].map(function (x) { return x * x; }); // good [1, 3, 5].map((x) => { return x * x; });
5.2如果一个函数适合用一行写出并且只有一个参数,那就把花括号、圆括号和 return 都省略掉。如果不是,那就不要省略。
// good [1, 2, 3].map(x => x * x); // good [1, 2, 3].reduce((total, n) => { return total + n; }, 0);
6.构造器
6.1总是使用class,避免直接操作prototype属性
这样写更为简洁。
// bad function Queue(contents = []) { this._queue = [...contents]; } Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } // good class Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } }
7.模块开发
7.1利用模块的思想写业务。
使用模块编写逻辑业务,可以使你的代码更有整体性和可扩展性。类似的库有seaJS、requireJS
7.2少使用通配符import
这样更能够确保你只有一个模块被你import,而那些不必要的模块不会被import,减少代码体积。
// bad import * as webUI from './WEB'; // good import webUI from './WEB';
8.使用高阶函数如map()和reduce()代替for~of
const arr= [1, 2, 3, 4, 5]; // bad let sum = 0; for (let num of arr) { sum += num; } sum === 15; // good let sum = 0; arr.forEach((num) => sum += num); sum === 15; // best (use the functional force) const sum = arr.reduce((total, num) => total + num, 0); sum === 15;
9.比较运算符
9.1优先使用===和!==而不是==和!=
===和!==不会进行强制类型转换,后者则会
9.2在做if条件判断时强制类型转换规则
对象都会被转为true
null、undefined、NaN被转为false
布尔值转为对应的布尔值
数字中+0 -0 0都被计算为false,否则为true
字符串 如果是“”空字符串,被计算为fasle,否则为true
相关推荐:
以上是日常js开发规范的详细内容。更多信息请关注PHP中文网其他相关文章!

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),