javascript编程小技巧

testbird 发布于2019-08-20 13:43 / 3270人阅读

摘要：源码的代码质量很高，非常值得我等小辈学习。上面的技巧，若有任何不对，欢迎指正，也欢迎补充过段时间一定要写源码阅读笔记好怕打脸逃

其实主要是性能小技巧。

循环优化

循环体是执行最多的，所以要确保其被最大限度的优化.

//提前计算好终止条件，存到局部变量中
for(var i=0, j = document.getElementsByTagName("a").length; i
避免 for-in 循环
for(in)的效率极差，因为它需要查询散列键，只要可以，就应该尽量少用
//要遍历一个集合内的元素，用for,while,do..while代替
//这是vue源码中的一段，作者用for(;;)循环代替了for...in
var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }
多个类型一起声明
var option="option";
var event="event";
var method="method";

//可替换为 
var option="option",
    event="event",
    method="method";
    

类型转换
+"010" === 10; //+可以把字符串变成整数
Number("010") === 10;
parseInt("010", 10) === 10;
10 + "" === "10";//也可以把整数变成字符串

+new Date() // timestamp
+new Date;
使用三目运算符替代条件分支
//将条件从最可能到最不可能进行排列,减少探测次数
 if (a > b) {
    num = a;
} else {
    num = b;
}
//可以替换为：
num = a > b ? a : b;
巧用||和&&布尔运算符
//源码中这种运算符操作很多，尤其是jQuery源码
item && item.$value || item;
var id = typeof asset === "function" ? asset.options && asset.options.name || asset.id : asset.name || asset.id;

用局部变量代替全局变量
无论是DOM节点，普通变量，还是对象属性，若需重复使用，通通存成局部变量，避免多次取值的调用开销
 //vue源码
var p = Cache.prototype;
p.put = function (key, value) {}

//jquery源码
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;
DOM节点链式操作
//链式操作会自动缓存
$(".test").find(".btn").css("backgroundColor","#f30").click();
修改CSS类，而不是样式
尤其是在修改多个样式时，修改css类只会引起一次回流，而修改样式会引起多次回流。
插入迭代器
var name=values[i]; 
i++;

//替换为
var name=values[i++]
使用字面量
var aTest = new Array(); 
var aTest = new Object; 
var reg = new RegExp(); 
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";

//分别替换为
var aTest = []; 
var aTest = {}; 
var reg = /d/i; //只在有变量时才用new RegExp()
var oFruit = { color: "red", name: "apple" };
使用一次innerHTML赋值代替构建dom元素
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement("p");
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push("" + i + "");
}
document.body.innerHTML = html.join("");
尽量使用原生方法
var container = document.createElement("div");
container.appendChild(el.cloneNode(true));
避免with语句
with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，所以能不用的时候就不要用。
with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替换为：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
ps:有些代码性能虽高，但是可能会降低阅读性与可维护性，或者与团队的规范冲突，所以这个需要自己在可读性，团队规范性与代码性能之间权衡。
感言
上面罗列的都是我觉得经常会用到的，看一遍，用心记一下，很easy～～可能以后会不定时更新，看自己get到的情况～～
我也是最近才注意到这些“潜规则”，正巧最近也在看vue的源码，然后就发现:基本上网上能查到的性能优化的方面，或者编程的技巧都能在vue源码中找到佐证。vue源码的代码质量很高，非常值得我等小辈学习。
上面的技巧，若有任何不对，欢迎指正，也欢迎补充～～
过段时间一定要写源码阅读笔记（好怕打脸～～逃）

GPU云服务器云服务器小技巧 JAVASCRIPT技巧小技巧全集 javascript七大技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81203.html

19+ 个 JavaScript 快速编程技巧 — SitePoint

摘要：常规写法速记法判断变量是否存在速记法这可能会有些琐碎，但是值得一提。常规写法速记法注意这两个例子并不是完全相等，只要变量是一个真值，该表达式就是成立的。 19+ 个 JavaScript 快速编程技巧 — SitePoint 这确实是一篇针对于基于 JavaScript 语言编程的开发者必读的文章。在过去几年我学习 JavaScript 的时候，我写下了这篇文章，并将其作为 JavaS...

RobinTang 2019-08-20 18:00 评论0 收藏0
19+ 个 JavaScript 快速编程技巧 — SitePoint

摘要：常规写法速记法判断变量是否存在速记法这可能会有些琐碎，但是值得一提。常规写法速记法注意这两个例子并不是完全相等，只要变量是一个真值，该表达式就是成立的。 19+ 个 JavaScript 快速编程技巧 — SitePoint 这确实是一篇针对于基于 JavaScript 语言编程的开发者必读的文章。在过去几年我学习 JavaScript 的时候，我写下了这篇文章，并将其作为 JavaS...

wow_worktile 2019-08-01 17:10 评论0 收藏0
学Java编程需要注意的地方

摘要：学编程真的不是一件容易的事不管你多喜欢或是多会编程，在学习和解决问题上总会碰到障碍。熟练掌握核心内容，特别是和多线程初步具备面向对象设计和编程的能力掌握基本的优化策略。　　学Java编程真的不是一件容易的事,不管你多喜欢或是多会Java编程，在学习和解决问题上总会碰到障碍。工作的时间越久就越能明白这个道理。不过这倒是一个让人进步的机会，因为你要一直不断的学习才能很好的解决你面前的难题...

leanxi 2019-08-14 17:48 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0