Web前端基础-JavaScript

• JavaScript
  • 认识JavaScript
  • 函数/原型(链)/作用域/闭包
  • ES6/7/8
  • NodeJS
• 工具链
  • 构建/打包
  • 模块化/加载器
• MVVM
  • Angularjs 1.x / Angular
  • React
  • Vue
• 作业

认识JavaScript

JavaScript重大事迹

• 1995，网景的布兰登·艾克为网景浏览器开发LiveScript
• 1995年底，为了搭上Java这个当时的热词，改名为JavaScript（Java与JavaScript的关系？）
• 1997，几大公司（微软，网景）定义了ECMAScript语言标准
• 2010，ES5发布
• 2015，ES6发布
• JavaScript Wiki

我们所认识的JavaScript

• JavaScript是解释性脚本语言（现在已经有JIT的可能性）
• 完整的JavaScript包含ECMAScript（语言核心）、DOM（文档对象模型）、BOM（浏览器对象模型）
• JavaScript成为ECMAScript标准的实现之一（还有哪些？）

函数/原型/作用域/闭包

函数

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。（标准定义）
• "定义式"申明函数
• "变量式"申明函数（区别是啥？）
• 扩展：函数和方法是什么关系？区别是什么？

Demo

function fun1() {

}

var fun2 = function () {

};

var obj = {
  fun3: function () {

  }
};
          

函数调用

• 方法调用
• 函数调用
• 构造器调用
• apply/call 调用

Demo

原型(链)

• 一般面相对象语言都有类这样的概念
• 但JavaScript仍然是基于原型的（ES6新增class关键字，只是语法糖）
• JS对象有一个指向一个原型对象的链，查找属性时，会层层向上，直到最顶部
• 实例的原型，指向它的构造函数的prototype属性
• JS继承的实现方式

Demo

作用域 （变量的可用范围）

• JS使用函数作用域
• 作用域在定义时确定，无法更改
• ES6新增块级作用域（let const)
• 全局作用域
  • 最外层函数和在最外层函数外面定义的变量拥有全局作用域
  • 所有末定义直接赋值的变量自动声明为拥有全局作用域
  • 所有window对象的属性拥有全局作用域

Demo

function global() {
  var i = 0;
  console.log(i);

  var inner = function () {
    var j = 1;
    console.log(i, j);
  }

  console.log(j);
}
          

闭包

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0);
}
          

ES6/7/8

新特性一览

• let / const
• Class关键字
• 解构赋值
• Set和Map(WeakSet, WeakMap)
• 箭头函数
• Promise
• async ... await
• Symbol
• 生成器
• 迭代器与 for...of
• 等等...

NodeJS

• NodeJS是运行时，并不是语言，也不是框架
• NodeJS是前端工具链的基础
• NPM：世界上最强大，同时也是最糟糕的包管理
• Demo：几句代码实现Web Server

构建/打包

构建

• 通过工具、库等，简化前端开发的过程，显著提高开发效率
• 作用
  • 创建脚手架
  • 拷贝文件
  • 文件合并/压缩
  • 预处理器编译
  • 自动刷新浏览器
• 辅助开发者处理重复劳动

构建工具

• Grunt 官网
  • 优点：
    • 配置化，对非开发人员友好
    • 生态庞大，完善
  • 缺点：
    • 执行速度慢
    • 流程不够清晰
• Gulp 官网
  • 优点：
    • 易用 - 代码优于配置
    • 高效 - 流式任务，不产生中间文件
    • 稳定 - 插件质量高
  • 缺点：
    • 需要编写代码，对非开发不友好

其他构建工具

• FIS3
• Brunch

打包

• Browserify 官网
• Webpack 官网

模块化/加载器

模块化

• 我们所遇到的问题
  • 命名冲突
  • 复杂的业务逻辑，二次修改的噩梦
  • 繁琐的文件依赖，怎么总是缺少文件
  • 超大JS文件，网页刷新不出来
• 为了解决这些，我们需要模块化
• 各种模块化规范就应运而生

CommonJS

• 伴随着NodeJS，我们有CommonJS规范
• 然而：
  • 服务端JS VS. 浏览器JS
  • 相同代码执行多次 VS. 代码从服务器分发到多个客户端
  • CPU和内存资源是瓶颈 VS. 带宽是瓶颈
  • 从磁盘加载 VS. 通过网络加载
• 由此可见，CommonJS并不适合客户端JS

浏览器模块化规范

• AMD
• CMD
• UMD
• ES6模块规范（浏览器暂未支持）
• 但是，这些规范都缺乏浏览器原生支持，我们要使用这些模块化方法，就不得不借助于加载器

加载器

• AMD => RequireJS
• CMD => Sea.js
• UMD => any
• ES6模块 => System.js

MVVM

• M - VM - View
• 

MVVM 框架/库

• AngularJS 1.x
• Angular
• React
• Vue