标签 JS 下的文章 - Lino笔记

label标签中的for属性 使用介绍label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。<label for="test">label标签</label> <input type="text" id="test">如上所示，该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。为什么要给label标签加上for属性呢？label标签加上for属性绑定了表单元素后，可以提高用户体验。当点击label标签内的文本后，就会触发绑定的表单元素。也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到绑定的表单控件上。ps：表单控件input、select、textarea、button和h5的datalist、keygen、output。其中当label标签和select标签绑定后，点击label标签文本内容，不能触发select便签

一些性能相关的 JavaScript 代码编写建议规范 本文对一些日常编写 JavaScript 的过程中，一些有助于提高代码性能的规范进行罗列。本文比较零碎，不作为规范提议，仅作为交流参考。1. 使用解构赋值，减少中间变量。对于一些比如变量替换的场景，我们使用解构赋值，可以省略中间变量，整体代码也会更加清晰。let a = 3; let b = 4; [b, a] = [a, b];2. 通过条件判断提前返回这里主要是提醒大家如何写好 if 语句。实际上， 在编写复杂的 if 语句之前，我们应该考虑是否可以逻辑外化：即尽可能的将代码的复杂逻辑向外推，例如抽离成多个函数，而不是在程序里面进行过多判断。有一种比较典型的不合理的重用是把大量的逻辑都堆叠到一个函数里面，然后提供一个很复杂的功能。我认为更好的做法应当是分离成更多的模块。经过以上思考之后，我们可能还有一些 if 语句，一般的原则是：if 语句先简单，后复杂。if 语句，可以提前返回即提前返回，减少复杂的嵌套。// nice: if (condition1) { // do something return; } if (condition2) { // do something return; } other_function(); // bad: if (condition1) { // do something } else { if (condition2) { // do something } else { other_function(); } }3. 尽量避免在循环体内包裹函数表达式函数表达式会生成对应的函数对象，如果我们在循环体内去做这个事情，很可能会造成额外的浪费。// nice: function callback() { } const len = nodelist.length; for(let i = 0; i < len; i += 1) { addListener(nodelist[i], callback); } // bad: for(let i = 0; i < nodelist.length; i += 1) { addListener(nodelist[i], function() ); }4. 对循环体内的不变值，在循环体外使用缓存这一条其实是对上一条的补充，实际上是同样的原理，即希望我们在循环体内尽量保持逻辑的简单，减少重复的 cpu 时间和内存的消耗。5. 清空数组使用 .length = 0这样写可以方便我们清空一个 const 数组。const a = [1,2,3,4]; // 如果使用 a = [] 会报错 a.length = 0;6. 不得为了编写方便，将并行的 io 串行化虽然现在 JavaScript 有了 async/await，但是我发现很多同学会对此滥用，一个很常见的清空就是将可以并行的操作串行化了:let res1 = await process1(); let res2 = await process2(); next(res1, res2);这个时候，虽然写代码方便，但是这样写是不可取的，Promise 提供了若干的方便我们处理并行任务的方法，我认为这些都是必须要了解的。7. 禁止直接使用 evaleval 的安全性非常差，事实上有很多已知的 xss 等漏洞都和 eval 有关，所以我们在实际场景中避免使用 eval。如下为一个例子，使用了 eval 函数，由于其执行代码的作用域为本地作用域，所以对我们的本地变量进行了修改并且可以生效：let tip = "请重新登录" let otherCode = `tip = "请前往 xxx.com 重新登录"` eval(otherCode);一些取代方式：我们可以使用 new Function 的方式来代替 eval，这样至少可以进行作用域的隔离，相对会安全一些（但是请注意其仍然会可能影响到全局变量）。8. 浏览器环境中，尽量避免使用 document.all、document.querySelectorAll类似的 all 相关操作都要避免使用，由于我们很难控制随着项目发展内容会有多少，所以我们最好一开始就不要留下随着项目内容增加性能越来越差的隐患。9. 获取元素的样式，尽量使用 getComputedStyle 或 currentStyle通过 style 只能获得内联定义或通过 JavaScript 直接定义的样式，通过 CSS class 设置的样式无法直接获取。10. 尽可能通过为元素添加预定义的 ClassName 来改变元素样式，避免直接操作 style 进行设置。直接操作 style，会比较混乱，而且有的时候还会忘记写单位，导致实际上不管用。

十条编写优化的 JavaScript 代码的建议 本文总结了十条编写优秀的 JavaScript 代码的习惯，主要针对 V8 引擎：1.始终以相同的顺序实例化对象属性，以便可以共享隐藏类和随后优化的代码。V8 在对 js 代码解析的时候会有构建隐藏类的过程，以相同的顺序实例化（属性赋值）的对象会共享相同的隐藏类。下面给出一个不好的实践：function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(1, 2); p1.a = 5; p1.b = 6; var p2 = new Point(3, 4); p2.b = 7; p2.a = 8; // 由于 a 和 b 的赋值顺序不同，p1 和 p2 无法共享隐藏类2.避免分配动态属性。在实例化之后向对象添加属性将强制隐藏类更改，并减慢为先前隐藏类优化的所有方法。相反，在其构造函数中分配所有对象的属性。 3.重复执行相同方法的代码将比仅执行一次（由于内联缓存）执行许多不同方法的代码运行得更快。 4.避免创建稀疏数组。稀疏数组由于不是所有的元素都存在，因此是一个哈希表，因此访问稀疏数组中的元素代价更高。另外，尽量不要采用预分配数量的大数组，更好的办法是随着你的需要把它的容量增大。最后，尽量不要删除数组中的元素，它会让数组变得稀疏。 5.标记值：V8采用32位来表示对象和数字，其中用一位来区别对象（flag = 0）或数字（flag = 1），因此这被称之为 SMI (Small Integer)因为它只有31位。因此，如果一个数字大于31位，V8需要对其进行包装，将其变成双精度并且用一个对象来封装它，因此应该尽量使用31位有符号数字从而避免昂贵的封装操作。 6.检查你的依赖，去掉不需要 import 的内容。 7.将你的代码分割成一些小的 chunks ，而不是整个引入。 8.尽可能使用 defer 来推迟加载 JavaScript，另外只加载当前路由需要的代码段。9.使用 dev tools 和 DeviceTiming 来寻找代码瓶颈。 10.使用诸如Optimize.js这样的工具来帮助解析器决定何时需要提前解析以及何时需要延后解析。 以上内容来源：How JavaScript works: Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse timeHow JavaScript works: inside the V8 engine + 5 tips on how to write optimized code

javascript异步编程——Promise函数的理解 了解异步编程异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。在理解Promise函数前，我们应该先了解什么是异步编程：理解Promise函数Promise函数 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。了解 Promisenew Promise(function (resolve, reject) { // 要做的事情... });Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：then：用于处理 Promise 成功状态的回调函数。catch：用于处理 Promise 失败状态的回调函数。finally：无论 Promise 是成功还是失败，都会执行的回调函数理解PromisePromise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止运行，而是进入catch 方法中。注意：catch 只捕获最近的 then 的回调函数，前面的then的执行不成功的结果，有后面 then 的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行var promise =new Promise(function(resolve,reject){ //To Do 要异步执行的事情，这个异步执行的事情有可能成功执行完毕，那么Promise将是fulfilled状态，如果执行失败则是rejected; //下面测试代码，人为设置为rejected状态; reject("将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）"); //当然此处也可以设置为fulfilled(已完成)状态 }) promise.then(//调用第一个then() success=>{ console.log("异步执行成功，状态为：fulfilled，成功后返回的结果是："+success); return(" 当前 success "); }, error=>{ console.log("异步执行失败，状态为rejected，失败后返回的结果是："+error); return(" 当前 error "); } ).then( //调用第二个then() 因为调用第一个then()方法返回的是一个新的promise对象，此对象的状态由上面的success或者error两个回调函数的执行情况决定的： //如果回调函数能正常执行完毕，则新的promise对象的状态为fulfilled，下面执行success2,如果回调函数无法正常执行，则promise状态为rejected;下面执行error2 success2=>{ console.log("第一个then的回调函数执行成功 成功返回结果："+success2); throw(" 当前 success2 ");//自定义异常抛出 }, error2=>{ console.log("第一个then的回调函数执行失败 失败返回结果："+error2); return(" 当前 error2 "); } ).catch(err=>{ //当success2或者error2执行报错时，catch会捕获异常; console.log("捕获异常："+err); }); //上述代码,打印如下: //异步执行失败，状态为rejected，失败后返回的结果是：将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝） //第一个then的回调函数执行成功 成功返回结果： 当前 error //捕获异常： 当前 success2