zoukankan      html  css  js  c++  java
  • 深入浅出ES6教程模块化

    大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化:

    JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了一个模块规范,主要分为两种,一个是用于服务器的CommonJs,比如nodeJs中的require;另一个是用于客户端的AMD,比如requireJs。后来ES6提供了通用的模块化方案:
    ES6专门提供了importexport这两个小可爱

    小白:那么它们都是用来做什么的呢?怎么用的呢?
    格格:首先要开启服务器,整个流程是在服务器下进行的,Apache也好,编辑器自带的也好;下面就让我们带着疑问一起来看一下:

    export:它是用来定义模块的,可以导出对象、函数、类、字符串等等

    // 1.js
    export const a = 1;
    console.log(a);
    // 1.html
    <script type="module">
      import './1.js';
    </script>
    

    上面的这个例子中,这两个文件是在同一目录下,但是引入的时候前面要加上(./)当前路径,不加就会报错,别问我为什么,大概是甲鱼的臀部,下面来看一下导出多个对象的例子:

    // 1.js
    const a = 1;
    let b = 2;
    function show(){
        console.log(10);
    }
    export {
        a,
        b as c,
        show
    }
    show();  // 10
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(c);  // c is not defined  因为在这个js里他还是b,只不过导出到另外一个文件里才叫c
    
    // 1.html
    <script type="module">
        import {a,c,show} from './1.js';
        show();  // 10
        console.log(a); // 1
        console.log(c); // 2
        console.log(b); // b is not defined  已经将导入的b更名为c,所以这里叫c
    </script>
    

    上面的例子中可以将export导出的内容通过as进行更名

    小白:import也可以有这样的操作么?
    格格:那是必须的呀,他们都是一家子的,这可不能偏心啊

    import导入的也可以通过as改名:

    // 1.html
    <script type="module">
        import * as goto from './1.js';  // * 代表1.js中导出的全部的内容,但是不能直接输出*,必须改名
        console.log(goto);  // 整个json对象
        console.log(goto.a);    // 1
        goto.show();    // 10
    </script>
    

    导出的方式还有另外一种:export default {}
    那么export和export default的区别就是:前者导出的东西需要在导入的时候加{},而后者则不需要

    // 1.js
    const a = 1;
    const b = 2;
    const c = 3;
    export {a,b}
    export default c;
    // 1.html
    <script type="module">
        import c,{a,b} from './1.js';  // 同时导入export和export default的时候,必须把默认的放在前面
        console.log(a,b,c);  // 1 2 3
    </script>
    

    另外,import除了以上特性之外,还有:
    引入的路径既可以是相对路径也可以是绝对路径,还可以是网络路径,比如引入网上的jquery.js;
    import还拥有提升特性,就像是var变量提升一样,在实行代码之前会被提到代码的顶部
    import可以动态引入,但是import不能放入放到代码块哦

    小白:什么是动态引入?
    格格:动态引入其实就是基于promise语法,根据promise机制来实现动态引入,首先来看一个例子:

    // 1.html
    <script type="module">
        import('./1.js').then(res =>{
            console.log(res.a); // 1
        });
    </script>
    

    有了这种机制就可以实现按需加载,比如先载入jquery.js再使用jquery的方法,或者根据条件选择动态加载哪个模块;
    关于模块还需要强调的一点就是它默认就是严格模式,也就是默认在顶部有一个‘use strict’

    小白:什么是严格模式?
    格格:所谓严格模式也就是改掉一些编程不好的习惯,可以理解为把一个山寨的土匪收编为正规军的感觉:

    严格模式相关规定还是挺多的:

    • 变量必须声明后再使用
    • 函数的参数不能有同名属性,否则报错
    • 不能使用with语句
    • 不能对只读属性赋值,否则报错
    • 不能使用前缀0表示八进制数,否则报错
    • 不能删除不可删除的属性,否则报错
    • 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
    • eval不会在它的外层作用域引入变量
    • eval和arguments不能被重新赋值
    • arguments不会自动反映函数参数的变化
    • 不能使用arguments.callee
    • 不能使用arguments.caller
    • 禁止this指向全局对象
    • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
    • 增加了保留字(比如protected、static和interface)
    • 其中,尤其需要注意this的限制。ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。


    作者:苏日俪格
    链接:https://www.jianshu.com/p/6c1b0e2b53c3
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    ubuntu python3 安装pip
    Windows远程桌面连接ubuntu 16
    Python 高级编程——单例模式
    学习资料推荐
    经典 测试开发面试题 (随时更新)
    mac上生成go文件失败报错,gRpc-- protoc-gen-go: program not found or is not executable
    小白从零开始学编程(五)--python数据类型--字符串
    小白从零开始学编程(三)--python基本概念
    小白从零开始学编程(二)--python虚拟环境和编辑器
    小白从零开始学编程--python安装与环境搭建
  • 原文地址:https://www.cnblogs.com/kelly-sunshine/p/10767791.html
Copyright © 2011-2022 走看看