es6新内容
class
class Person{
construcotr(name, age){
this.name = name;
this.age = age;
}
sayHello(){}
static sayHi(){}
}
class Student extends Person{
constructor(name, age, stuNo){
super(name, age);
this.stuNo = stuNo
}
}
解构赋值
var obj = {name: "张志潮", age: 30}
var {name, age} = obj;
var {name: name1, age: age1} = obj;
var arr = [1, 3, 4, 6]
var [num1, num2, ...num3] = arr;
扩展对象
var obj = {name: "张志潮", age: 31}
var obj1 = {...obj}
模块化
- 什么是模块化
- 模块的作用
- 怎么实现模块化
模块化的标准
- CommonJS
- AMD: 异步模块定义 Async Module Defination require.js
- CMD: 通用模块定义 Common Module Defination sea.js
requirejs
- 定义模块
define("名字", [依赖项], function(接收依赖项的返回值){
//模块自己的内容
//如果模块有需要提供给别人使用的内容
//需要使用return关键字进行返回
return 内容
})
define(function(){})
define([依赖项], function(接收依赖项的返回值){})
- 引用模块
require(["模块路径"], function(接收依赖项的返回值){
//在模块加载完成之后会执行的代码
})
requirejs的路径的三种情况
- 不做任何配置，路径会以当前引用模块的文件作为参照
- 使用data-main属性，路径会以data-main属性所指向的文件作为参照
- 使用require.config方法配置了baseUrl后，路径会以baseUrl作为参照
requirejs配置
require.config({
//设置基础路径
baseUrl: "这里一般都用绝对路径",
//设置模块的路径别名
paths: {
"别名": "模块具体路径（不带.js后缀）"
},
shim: {
//为不支持模块化的第三方内容设置依赖项以及导出项
"别名": {
//依赖项:
deps: ["依赖项别名", ...],
exports: "导出的内容的全局变量名（只能导出一个）"
}
}
})
//通过以上方法配置之后，模块的查找都会以baseUrl作为基础，如果path中有模块的别名配置，那么路径查找遵循 baseUrl+paths
//如果路径中出现了如下任意一种情况，则查找方式和baseUrl就没有任何关系了
//1. /开头的路径
//2. .js结尾的路径
//3. http:// https://开头的路径
es模块化
- 模块导出项设置
// 1. 在变量或者函数声明前直接加export
export var a = 10;
export var obj = {};
export function test(){};
//2. 通过花括号导出
var a = 10;
var obj = {};
export {a, obj}
//3. 默认导出项 一个模块只能有一个
export default function(){}
//4. 既导出默认项，又导出别的项
export {a as 别名, obj as default}
- 模块导入的方式
//对应第一种导出方式
import {变量名, 变量名} from "模块路径"
//对应第二种导出方式
import {变量名, 变量名} from "模块路径"
//第一和第二种导出方式都可以用如下方式导入
import * as 随便一个名字 from "模块路径"
//第三种导出方式对应的导入方式
import 随便一个名字 from "模块路径"
webpack的简单使用
安装
- 全局安装
npm install webpack -g
使用
webpack 入口文件路径 输出文件路径
webpack支持的模块化标准
webpack打包的时候认识下面这些标准的导入导出的代码，可以帮你做导入导出的事情！！
- CommonJS
- AMD
- ES6
