全国咨询/投诉热线:400-618-9090

首页技术文章正文

Web前端开发培训之最全面的前端开发指南:JavaScript

更新时间:2017-06-21 来源:黑马程序员web前端开发培训学院 浏览量:

JavaScript性能
可读性,正确性和可表达性优于性能。JavaScript基本上永远不会是你的性能瓶颈。图像压缩,网络接入和DOM重排来代替优化。如果从本文中你只能记住一个指导原则,那么毫无疑问就是这一条。
[JavaScript] 纯文本查看 复制代码
1
2
3
// bad (albeit way faster)const arr = [1, 2, 3, 4];const len = arr.length;var i = -1;var result = [];while (++i < len) {  var n = arr;  if (n % 2 > 0) continue;
  result.push(n * n);
}// goodconst arr = [1, 2, 3, 4];const isEven = n => n % 2 == 0;const square = n => n * n;const result = arr.filter(isEven).map(square);
无状态
尽量保持函数纯洁。理论上,所有函数都不会产生副作用,不会使用外部数据,并且会返回新对象,而不是改变现有的对象。
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
// bad
const merge = (target, ...sources) => Object.assign(target, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }// good
const merge = (...sources) => Object.assign({}, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
本地化
尽可能地依赖本地方法。
[JavaScript] 纯文本查看 复制代码
1
2
// badconst toArray = obj => [].slice.call(obj);// goodconst toArray = (() =>  Array.from ? Array.from : obj => [].slice.call(obj)
)();
强制性
如果强制有意义,那么就使用隐式强制。否则就应该避免强制。
[JavaScript] 纯文本查看 复制代码
1
// badif (x === undefined || x === null) { ... }// goodif (x == undefined) { ... }
循环
不要使用循环,因为它们会强迫你使用可变对象。依靠array.prototype 方法。
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
// badconst sum = arr => {  var sum = 0;  var i = -1;  for (;arr[++i];) {
    sum += arr;
  return sum;
};
sum([1, 2, 3]); // => 6// goodconst sum = arr =>
  arr.reduce((x, y) => x + y);
sum([1, 2, 3]); // => 6
如果不能避免,或使用array.prototype 方法滥用了,那就使用递归。
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
// badconst createDivs = howMany => {  while (howMany--) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);// badconst createDivs = howMany =>
  [...Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);// goodconst createDivs = howMany => {  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");  return createDivs(howMany - 1);
};
createDivs(5);
这里有一个通用的循环功能,可以让递归更容易使用。
参数
忘记arguments 对象。余下的参数往往是一个更好的选择,这是因为:
你可以从它的命名中更好地了解函数需要什么样的参数
真实数组,更易于使用。
[JavaScript] 纯文本查看 复制代码
1
// badconst sortNumbers = () =>  Array.prototype.slice.call(arguments).sort();// goodconst sortNumbers = (...numbers) => numbers.sort();
应用
忘掉apply()。使用操作符。
[JavaScript] 纯文本查看 复制代码
1
const greet = (first, last) => `Hi ${first} ${last}`;const person = ["John", "Doe"];// badgreet.apply(null, person);// goodgreet(...person);
绑定
当有更惯用的做法时,就不要用bind() 。
[JavaScript] 纯文本查看 复制代码
1
// bad["foo", "bar"].forEach(func.bind(this));// good["foo", "bar"].forEach(func, this);
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
// badconst person = {
  first: "John",
  last: "Doe",
  greet() {    const full = function() {      return `${this.first} ${this.last}`;
    }.bind(this);    return `Hello ${full()}`;
  }
}// goodconst person = {
  first: "John",
  last: "Doe",
  greet() {    const full = () => `${this.first} ${this.last}`;    return `Hello ${full()}`;
  }
}
函数嵌套
没有必要的话,就不要嵌套函数。
[JavaScript] 纯文本查看 复制代码
1
// bad[1, 2, 3].map(num => String(num));// good[1, 2, 3].map(String);
合成函数
避免调用多重嵌套函数。使用合成函数来替代。
[JavaScript] 纯文本查看 复制代码
1
2
const plus1 = a => a + 1;const mult2 = a => a * 2;// badmult2(plus1(5)); // => 12// goodconst pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12
缓存
缓存功能测试,大数据结构和任何奢侈的操作。
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
// badconst contains = (arr, value) =>  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => false// goodconst contains = (() =>  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false
变量
const 优于let ,let 优于var。
[JavaScript] 纯文本查看 复制代码
1
2
3
// badvar me = new Map();
me.set("name", "Ben").set("country", "Belgium");// goodconst me = new Map();
me.set("name", "Ben").set("country", "Belgium");
条件
IIFE 和return 语句优于if, else if,else和switch语句。
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
// badvar grade;if (result < 50)
  grade = "bad";else if (result < 90)
  grade = "good";else
  grade = "excellent";// goodconst grade = (() => {  if (result < 50)    return "bad";  if (result < 90)    return "good";  return "excellent";
})();
对象迭代
如果可以的话,避免for…in。
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
const shared = { foo: "foo" };const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});// badfor (var prop in obj) {  if (obj.hasOwnProperty(prop))    console.log(prop);
}// goodObject.keys(obj).forEach(prop => console.log(prop));
map对象
在对象有合法用例的情况下,map通常是一个更好,更强大的选择。
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
// badconst me = {
  name: "Ben",
  age: 30};var meSize = Object.keys(me).length;
meSize; // => 2me.country = "Belgium";
meSize++;
meSize; // => 3// goodconst me = new Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2me.set("country", "Belgium");
me.size; // => 3
Curry
Curry虽然功能强大,但对于许多开发人员来说是一个外来的范式。不要滥用,因为其视情况而定的用例相当不寻常。
[JavaScript] 纯文本查看 复制代码
1
2
3
// badconst sum = a => b => a + b;
sum(5)(3); // => 8// goodconst sum = (a, b) => a + b;
sum(5, 3); // => 8
可读性
不要用看似聪明的伎俩混淆代码的意图。
[JavaScript] 纯文本查看 复制代码
1
// badfoo || doSomething();// goodif (!foo) doSomething();
[JavaScript] 纯文本查看 复制代码
1
// badvoid function() { /* IIFE */ }();// good(function() { /* IIFE */ }());
[JavaScript] 纯文本查看 复制代码
1
// badconst n = ~~3.14;// goodconst n = Math.floor(3.14);
代码重用
不要害怕创建小型的,高度可组合的,可重复使用的函数。
[JavaScript] 纯文本查看 复制代码
1
2
// badarr[arr.length - 1];// goodconst first = arr => arr[0];const last = arr => first(arr.slice(-1));
last(arr);
[JavaScript] 纯文本查看 复制代码
1
// badconst product = (a, b) => a * b;const triple = n => n * 3;// goodconst product = (a, b) => a * b;const triple = product.bind(null, 3);
依赖性
最小化依赖性。第三方是你不知道的代码。不要只是因为几个可轻易复制的方法而加载整个库:
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
// badvar _ = require("underscore");
_.compact(["foo", 0]));
_.unique(["foo", "foo"]);
_.union(["foo"], ["bar"], ["foo"]);// goodconst compact = arr => arr.filter(el => el);const unique = arr => [...Set(arr)];const union = (...arr) => unique([].concat(...arr));
compact(["foo", 0]);
unique(["foo", "foo"]);
union(["foo"], ["bar"], ["foo"]);
 


本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://web.itheima.com/ 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名