JS高级之ES6+模块化

文章目录

    • 十四、es6内容
      • 14.1 数组API、正则API、字符串API
      • 14.2 模板字符串
      • 14.3 解构赋值
        • 14.3.1 对象的解构赋值
        • 14.3.2 函数参数的解构赋值
        • 14.3.3 补充:属性的简写
      • 14.4 函数的扩展
        • 14.4.1 rest参数
        • 14.4.2 箭头函数
      • 14.5 对象的扩展
      • 14.6 Promise
        • 14.6.1 回调地狱:
        • 14.6.2 Promise函数基本用法
        • 14.6.3 Promise函数实现多层回调
        • 14.6.4 Promise函数错误处理
      • 14.7 async
      • 14.8 generator
      • 14.9 class
        • 14.9.1 定义一个类
        • 14.9.2 添加实例方法
        • 14.9.3 添加静态方法
        • 14.9.4 类的继承
      • 14.10 module
        • 14.10.1 浏览器调试
        • 14.10.2 基本用法
        • 14.10.3 模块有多个导出
        • 14.10.4 模块导入导出取别名
    • 十五、模块化
      • 15.1 非模块化的弊端
      • 15.2 基本实现:闭包的自调用函数
      • 15.3 AMD模块化 -->requireJS
      • 15.4 其他模块化解决方案:
      • 15.5 AMD和CMD的不同之处
      • 15.6 requireJS —— AMD规范
        • 15.6.1 基本用法
        • 15.6.2 入口文件
        • 15.6.3 配置
        • 15.6.4 定义模块的返回值(返回值相当于模块的入口)
        • 15.6.5 案例——模块依赖子模块
        • 15.6.7 检测第三方库是否支持AMD规范
        • 15.6.8 常用的模块、文件夹路径的配置
        • 15.6.9 插件
        • 15.6.10 requirejs解决循环依赖
        • 15.6.11 requirejs和vuejs浅显的比较
        • 15.6.12 node中的模块化
        • 15.6.13 前端路由的意义
        • 15.6.14 前端路由的实现方式

十四、es6内容

可参考阮一峰的ECMAScript 6 入门

14.1 数组API、正则API、字符串API

14.2 模板字符串

  • 模板字符串的基本用法
var s1 = `abc`
  • 模板字符串的优势:
var obj={ name:"",age:5 };
var s1 ="我叫:"+obj.name+",今年:"+obj.age+"岁。"

14.3 解构赋值

14.3.1 对象的解构赋值

var obj={name:"张三",age:18}

var {name,age}=obj; 
//生成2个变量,
//  name值来自于obj.name、
//  age值来自于obj.age

var {name:title}=obj;
//生成一个变量:title,值来自于obj.name

14.3.2 函数参数的解构赋值

function f1(obj){
    console.log(obj.age);
    console.log(obj.height)
}
//等价于
function f1({ age,height }){
    console.log(age);
    console.log(height)
}
f1({age:5,height:180})

14.3.3 补充:属性的简写

var a = 3 ; 
var c = 10;
var b = { a,c } ;   
//b对象有一个a属性,a属性的值,来自于a变量  ,
//还有一个c属性,c属性的值来自于c变量
console.log(b)

14.4 函数的扩展

14.4.1 rest参数

使用背景:es6的
优点:arguments是伪数组,而rest参数是真数组

function fn(...args){
    console.log(args);  //数组:[1,2,3,4,5]
}
fn(1,2,3,4,5)

14.4.2 箭头函数

场景:用于替换匿名函数
基本用法:

//匿名函数
div.onclick=function(){
    console.log("你好")
}
//箭头函数
div.onclick=()=>{
    console.log("你好")
}

有一个参数的箭头函数

var fn=(a)=>{
    console.log("abc");
}
//等价于:
var fn=a=>{
    console.log("abc");
}

有2个及更多参数的箭头函数

var f=(a,b,c)=>{
    console.log("abc")
}

箭头函数和普通匿名函数有哪些不同?

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  • (不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
    • generator函数现在经常用async替代

14.5 对象的扩展

  • Object.assign:实现拷贝继承
  • 对象扩展运算符
var obj1={ age:5,gender:"男" }
var obj2={ ...obj1 }
var obj3={ ...obj1 , age:10 }

14.6 Promise

为什么要有promise:解决回调地狱的问题

14.6.1 回调地狱:

//跟以前的if条件地狱很像
// if(){
//     if(){
//         if(){
//         }
//     }
// }

$.get("/getUser",function(res){
    $.get("/getUserDetail",function(){
        $.get("/getCart",function(){
            $.get("/getBooks",function(){
                //...
            })
        })
    })
})
//node开发:读取文件;开个服务器、接收一个请求、请求路径、访问数据库

14.6.2 Promise函数基本用法

var promise=new Promise((resolve,reject)=>{
    //b 把需要执行的异步操作放在这里
    $.get("/getUser",res=>{
        //获取数据的异步操作已经执行完毕了,等待下一步的执行,通过执行resolve函数,告诉外界你可以执行下一步操作了
        //c、
        resolve(res)
        //而执行的下一步操作,其实就是写在then的回调函数中的
    })
})
//a、
promise.then(res=>{
    //d、执行后续的操作
    console.log(res);
})

14.6.3 Promise函数实现多层回调

new Promise((resolve,reject)=>{
    $.get("/getUser",res=>{
        resolve(res)
    })
}).then(res=>{
    //用户基本信息
    return new Promise(resolve=>{
        $.get("/getUserDetail",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //用户详情
    return new Promise(resolve=>{
        $.get("/getCart",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //购物车信息
})

14.6.4 Promise函数错误处理

方式一

new Promise((resolve,reject)=>{
    $.ajax({
        url:"/getUser",
        type:"GET",
        success:res=>{
            resolve(res);
        },
        error:res=>{
            reject(res)
        }
    })
}).then(resSuccess=>{
    //成功的返回值
},resError=>{
    //失败的返回值
})

方式二:

new Promise((resolve,reject)=>{
    $.ajax({
        url:"/getUser",
        type:"GET",
        success:res=>{
            resolve(res);
        },
        error:res=>{
            reject(res)
        }
    })
}).then(resSuccess=>{
    //成功的返回值
}).catch(resError=>{
    //失败的返回值
})

14.7 async

async其实是一个promise的语法糖

async function get(){
    console.log('开始执行');
    var res = await timer()
    console.log('执行结束:',res);
}
function timer(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("你好");
        },1000)
    })
}
get();
  • await可以执行异步操作,但是await必须在async函数内执行
  • await操作可以有返回值,这个返回值表示promise操作成功的返回值
  • 如果await里面执行的异步操作发生了reject,或者发生了错误,那么只能使用try…catch语法来进行错误处理

14.8 generator

Generator是ES6的新特性,通过yield关键字,可以让函数的执行流挂起,那么便为改变执行流程提供了可能。

14.9 class

14.9.1 定义一个类

class Person {
    constructor(name) {
        this.name=name;
    }
}
//相当于:
function Person(name){
    this.name=name;
}

14.9.2 添加实例方法

class Person {
    constructor(name,age) {
        this.name=name;
        this.age=age;
    }
    //定义方法
    say() {
        console.log("大家好,我叫:"+this.name+",今年:"+this.age+"岁");
    }
    travel(){
        console.log("坐着飞机去巴厘岛");
    }
}

14.9.3 添加静态方法

  • 静态成员:静态属性、静态方法
  • 静态属性:通过类本身来访问:Person.maxAge
  • 静态方法:通过类本身来访问的一个方法:Person.born();
class Animal {
    constructor(){

    }
    static born(){
        console.log("小呆萌出生了")
    }
}
//访问静态方法
Animal.born();

14.9.4 类的继承

//父类
class Person {
    constructor(name){
        this.name=name;
    }
}
//Student类继承自Person类
class Student extends Person {
    //构造方法
    constructor(name,grade){
        //规定:必须调用父类构造方法,如果不调用就会报错
        super(name);    
        //调用父类构造方法,从而给子类的实例添加了name属性

        this.grade=grade;
    }
}
[1,3,5].map(function(value,index){})
[1,3,5].map((value,index)=>{})
//以前变量和字符串拼接,现在用模板字符串

14.10 module

14.10.1 浏览器调试

本地调试,会受浏览器同源策略的影响,需要开启web服务才能打开

<script type="module">
    //导入模块
</script>

14.10.2 基本用法

导出模块:

//common.js
export default { name:"abc" }

导入模块:(

//b.js
import common from "common.js"
console.log( common.name ) //"abc"

14.10.3 模块有多个导出

//person.js
export const jim = { country :"France" }
export const tony = { color:"gray" }
//默认的导出
export default { name:"abc" }
//index.js
import person , { jim , tony } from "person.js"

//person:{ name:"abc" }
//jim:{ country :"France" }
//tony:{ color:"gray" }

14.10.4 模块导入导出取别名

//person.js
export const tony = { color:"gray" }
export { tony as Tony }

//index.js
import { Tony } from "person.js"
import { Tony as man} from "person.js"

console.log(man)    //{ color:"gray" }

十五、模块化

15.1 非模块化的弊端

  • 代码杂乱无章,没有条理性,不便于维护,不便于复用
  • 很多代码重复、逻辑重复
  • 全局变量污染
  • 不方便保护私有数据(闭包)

15.2 基本实现:闭包的自调用函数

//日期控件
var DatePicker = (function(){
    return {
        init(){}
    }
})();

//Header
//  tabbar
//  login

//Content
//  sidebar
//  table

//Footer
var KTV=(function(){
    return {
        pay(){},
        xiaofei(){}
    }
})()

15.3 AMD模块化 -->requireJS

  • AMD:async module define:异步模块定义
  • AMD其实就是requireJS实现的模块化解决方案

15.4 其他模块化解决方案:

  • CommonJS:Node中使用的模块化解决方案
  • CMD(common module define):seajs中提出来的模块化解决方案
    • 其实CMD可以认为是CommonJS的前端实现
    • seajs由阿里的(玉帛)编写
    • seajs在2,3年前比较火,从去年开始已经停止更新
      • vue 、angular、react已经集成了各自的模块化
      • es6模块化
      • webpack也有模块化的解决方案

15.5 AMD和CMD的不同之处

  • amd需要依赖前置,cmd需要依赖就近
  • 导入导出方式不同:
    • amd通过define定义,return导出;
    • cmd通过不需要定义,只需要最后通过module.exports、exports导出

15.6 requireJS —— AMD规范

requireJS中文网

15.6.1 基本用法

//1、通过script标签导入requirejs源文件
//2、编写模块文件,基本格式如下:
//home.js
define([],function(){
    console.log('home模块');
})
//user.js
define([],function(){
    console.log('user模块');
})
//3、首页调用模块:
require(["home","product.js"],function(){ })

15.6.2 入口文件

15.6.3 配置

require.config({
    baseUrl:'js',
    paths:{
    	'jquery':'jquery.min.js',
    }
    
})

15.6.4 定义模块的返回值(返回值相当于模块的入口)

//user.js:
define([],function(){
    return {
        init(){},
        addUser(){}
    }
})
//首页:运行时加载
require(["cart"],function(cart){
    cart.init();
    cart.addUser();
})

注意:一般在导入模块的时候,需要将有返回值的模块[前面]导入,无返回值的模块[后面]导入

15.6.5 案例——模块依赖子模块

//userAdd.js
define([],function(){
    return {
        init(){
            console.log("添加用户");
        }
    }
})

//userEdit.js
define([],function(){
    return {
        init(){
            console.log("编辑用户");
        }
    }
})
    
//user.js   define(["userAdd","userEdit"],function(userAdd,userEdit){
    return {
        init(){
            console.log("用户初始化");
        },
        add(){
            userAdd.init();
        },
        edit(){
            userEdit.init();
        }
    }
})

//首页:
require(["user"],function(user){
    user.init();
    user.add();
    user.edit();
})

15.6.7 检测第三方库是否支持AMD规范

if ( typeof define === "function" && define.amd ) {
    define([], function() {
        return jQuery;
    } );
}

类似的还有:echarts

15.6.8 常用的模块、文件夹路径的配置

一般用于配置第三方模块,比如jquery、bootstrap、zepto等等

require.config(
    paths:{
        jquery:"js/lib/jquery-1.11.min",
        zepto:"js/lib/zepto.min",
        bootstrap:"assets/bootstrap/js/bootstrap.min"
    }
)
define(["jquery","zepto"],function($,$$){})
require(["jquery","bootstrap"],function($){})

15.6.9 插件

  • 插件列表:https://github.com/requirejs/requirejs/wiki/Plugins
  • i18n 国际化
  • text 加载文件(.html文件。。。)
    • 插件github地址:https://github.com/requirejs/text

15.6.10 requirejs解决循环依赖

  • a已经依赖了b
  • b中先添加require模块的依赖,然后再添加a的依赖,但是并不要去通过回调函数的形参获取返回值
    • define(["require","a"],function(require){})
    • 在需要执行a模块代码的时候,require("a")()

15.6.11 requirejs和vuejs浅显的比较

  • requirejs是一个库
    • 功能:只是一种模块化的解决方案
  • vue是一个框架
    功能:
    • 1、不仅仅是模块化的解决方案
    • 2、减少了DOM的操作(–>jquery的功能)

15.6.12 node中的模块化

  • require(“http”).createServer()
  • require(“fs”).readFile()
  • require(“common/type”).doSth()

15.6.13 前端路由的意义

  • 1、通过路由将各个功能从url上面就分辨出来了
    • /user/list
    • /user/3
    • /user/edit/3
  • 2、路由还可以进行前进、后退等导航操作

15.6.14 前端路由的实现方式

  • 1、监听window对象的hashchange事件
    • hash值:通过location.hash获取,获取的值以#开头
    • 也可以通过location.hash来设置hash值,当然设置的新hash也应该以#开头
  • 2、history对象:popState/pushState

你可能感兴趣的:(JavaScript)