这是我参与「第四届青训营 」笔记创作活动的第3天
一口吃下月影大佬对优化前端代码逻辑所构建的知识体系对本人而言还是比较艰难，本篇笔记还是以理解在学习 JavaScript 中一些比较重要的知识点为主，关于JS的基础语法，在此就不再赘述了。
三大原则
还是以写好 JavaScript 的三大原则为开篇，这是优化代码的底层基石
各司其职
让 HTML, CSS 和 JavaScript 职能分离。 前两节课的学习中我们多次提到，网页由 HTML，CSS，JavaScript 构成，分别控制网页的内容，样式，交互。在开发和维护过程中，往往需要面对复杂的代码，让“三剑客”只负责自己该负责的部分，避免不必要的让 JS 直接操控样式，能提供很大的便利。
组件封装
好的UI组件具备正确性，扩展性，复用性。 如果将一个页面的几百行，甚至上千行的代码逻辑写在一个 JS 文件中，随着开发进度添加新功能，或者移除一些老功能，我想对任何人来说都是极其痛苦的。前端中的组件（component） 类似于后端中的包（package），将网页页面的数据层，视图层，控制层封装到一个“黑盒子”里，外部按照组件设定的属性，函数及事件处理等进行调用。
实现组件的步骤：结构设计、展现效果、行为设计。
三次重构：
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
应用函数式编程思想。 函数式编程属于声明式编程中的一种，它的主要思想是 将计算机运算看作为函数的计算，也就是把程序问题抽象成数学问题去解决。
- 纯函数：相同的输入总会得到相同的输出，并且不会产生副作用的函数。
- 高阶函数：可以加工函数的函数，接收一个或多个函数作为输入、输出一个函数。
Lambda 表达式
将匿名函数复制给变量的简写方式的函数称为 lambda 表达式。
在 Java 8 中，对于匿名内部类，引入了 Lambda 表达式的写法：( ) ‐> { 代码语句 }
public static void main(String[] args) {
Thread thread = new Thread(new Runnable() {
@Override
public void run() {
System.out.println("Hello World!");
}
});
thread.start();
}
public static void main(String[] args) {
Thread thread = new Thread(() -> {
System.out.println("Hello World!");
});
thread.start();
}
当然，其并不是简单的语法糖替换，不过暂且按下不表。
而在 ES6 中，也引入了箭头函数() => {}:
hello = function() {
return "Hello World!";
}
hello = () => {
return "Hello World!";
}
带参数：hello = (val) => "Hello " + val;
不带括号：hello = val => "Hello " + val;
this 关键字
-
在常规函数中，关键字
this表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。 -
对于箭头函数，
this关键字始终表示定义箭头函数的对象。
回调与异步
回调
JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。回调 (callback) 是作为参数传递给另一个函数的函数,这种技术允许函数调用另一个函数,回调函数可以在另一个函数完成后运行。
function f1(e) {
console.log(e);
}
function f2(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
f2(5, 5, f1);
异步
与其他函数并行运行的函数称为异步（asynchronous）。JavaScrip 是单线程的，当我们有一个任务需要时间较长时，如果使用同步方式，就会阻塞之后的代码执行。回调函数是异步操作的最基本方法。
闭包
JavaScript 变量属于本地或全局作用域，全局变量能够通过闭包实现局部私有。
全局变量
- 访问函数内部定义的所有变量
function f() {
var a = 4;
return a * a;
}
- 访问函数外部定义的变量
var a = 4;
function f2() {
return a * a;
}
生命周期
全局变量“活”的与网页一样悠久，局部变量在函数调用时创建，在函数完成后被销毁。
嵌套函数
在 JavaScript 中，所有函数都有权访问全局作用域。
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
内部函数 plus() 可以访问父函数中的 counter 变量。
闭包是由函数以及声明该函数的词法环境组合而成的。该词法环境包含了这个闭包创建时作用域内的任何局部变量。
