精华内容
下载资源
问答
  • 前段时间在网上看了一点关于es6模块化的一些资料, 发现很多在es6的介绍里很多都只是介绍了es6的语法,并没有提到编译的过程,所以在这整理一下 ; es6的模块化语法很简单; 暴露用export,或export default, ...

    前段时间在网上看了一点关于es6模块化的一些资料,

    发现很多在es6的介绍里很多都只是介绍了es6的语法,并没有提到编译的过程,所以在这整理一下 ;

    es6的模块化语法很简单;

    暴露用export,或export default, 前者将暴露为一个对象,后者为自定义暴露;

    引入用import

    引入export的模块,用{}解构赋值来按需加载(我记得之前可以用obj.key的方式取值的,可昨天试了下直接用变量接收暴露的模块是个undefind,不知道咋回事,如果我写的有问题还望热心大神同行批评指正)

    引入export default 暴露的模块可直接用变量来接收,且接收到的值为暴露的值,即暴露啥东东就接受啥东东。

    下面是一个小demo,在src里分别创建两个js,用两种暴露方式,然后用index.js引入

    ./src/foo.js
    
    let a = '123456';
    function foo(){
        console.log('foo()')
    }
    export {
        a, foo
    }
    
    ./src/fun.js
    
    function fun1() {
        console.log('fun1()')
    }
    
    function fun2() {
        console.log('fun2()')
    }
    
    export default {
        fun1, fun2
    }
    
    ./src/index.js    //index.js 引入两个暴露的模块
    
    import {a, foo} from './foo';
    import module2 from './fun';
    
    console.log(a, foo);
    
    module2.fun1();
    module2.fun2()
    

    注意这时候在html里引入src/index.js,控制台会报错,因为浏览器对es6这些东西并不全部支持,像import、export这些,他不认识啊,那怎么办呢?

    现在要请出第一位大神,babel,简单来说,就是将你的es6的语法转成浏览器认识的es5,

    在你的项目路径下

    npm init 
    
    //全局/局部安装babel
    npm install --save-dev babel-cli
    npm install -g babel-cli
    
    //安装babel的转译器,简单来说就是帮babel做事的
    npm install --save-dev babel-preset-es2015
    
    //配置.babelrc文件,有的电脑不能直接创建这样空文件名的文件,试试随便给他一个文件名,然后重命名删掉,我是这么解决的;
    
    //至于.babelrc的作用嘛,官网上抄的,哈哈,看看吧
    //  1、如果没有.babelrc文件,或者没有在其他文件中设置过babel的presets的配置选型,并且命令行中也            
        //没有配置--presets,那么代码是不会转译的。原es6代码什么样,转译后的代码还是什么样。
    
        //2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器(presets),代码就会报错
    
        //3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候,以.babelrc中的配置为准
    {
        "presets": [
            "es2015"
        ]
    }
    

    这些都做好了,就可以在当前目录下cmd 输入命令 :babel src -d lib

    编译完后会生成一个lib文件夹里有三个js文件,文件名和src里一样

    估计有的童鞋估计就开始了,引入lib下的index.js,打开控制台运行,结果一段飘红的字体看的人心里一凉

    require is not defined???

    为啥?你不知道,其实浏览器,也不认识这玩意儿,哈哈

    所以要请第二尊大神出来browserify,browserify可以把nodejs的模块编译成浏览器可用的模块

    直接全局安装就行 npm install -g browserify,这样浏览器就能认识require这些奇怪的东西啦

    在当前目录下cmd 输入命令 :browserify src/index.js -o src/bundle.js

    这样在src文件夹下会生成一个bundle.js的文件

    在html里引入这个bundle.js文件就可以正常使用啦

    以上内容纯粹个人理解和一些整理,还望各位大神同行批评指正!

    展开全文
  • 文章目录模块化1 模块化优势2 基础模块封装说明3 CommonJS模块化规范3.1 导出module.exports3.2 导入require4 ES6模块化规范4.1 导出export4.2 导入import 模块化 1 模块化优势 防止命名冲突 代码复用 高维护性 2 ...

    模块化

    1 模块化优势

    1. 防止命名冲突
    2. 代码复用
    3. 高维护性

    2 基础模块封装说明

    • 自定义:在匿名函数内部定义一个对象,为对象添加需要暴露到外面的属性或方法,最后返回此对象,用一个变量接收。
    • 使用:直接使用接受的对象的属性和方法即可。
    //ma.js
    var _ma = (function(){
    	//1、定义一个对象
        var obj = {};
        //2、在对象内部添加属性和方法
        obj.name = 'Silly';
        obj.test = function(info){
            console.log(info);
        }
        //3、返回对象
        return obj;
    })();
    
    //mb.js
    console.log(_ma.name);
    _ma.test();
    
    • 常用模块化规范:CommonJSAMDCMDES6
      • 浏览器端:AMD(require.js)、CMD(sea.js)
      • 服务器端:CommonJS
      • 浏览器端与服务器端通用:ES6
        • 每一个js文件都是一个独立的模块
        • 导入模块成员使用import关键字
        • 导出模块成员使用export关键字

    3 CommonJS模块化规范

    • 典型:node.js

    3.1 导出module.exports

    • module.exports={} 空对象 引用类型
      • exports是module.exports的引用。
      • 可以把exports当做一个对象,在其上面添加属性和方法。
    //moduleA.js
    module.exports = {
        flag:true,
        test(a,b){
            return a + b;
        },
    }
    

    3.2 导入require

    //moduleB.js
    //解构导入
    let {flag,test} = require('./moduleA');
    //一般导入
    let _ma = require('./module');
    let flag = _ma.flag;
    let test = _ma.test;
    

    4 ES6模块化规范

    4.1 导出export

    • export {变量名/函数名}:用于向外暴露模块。

    • 导出方式

      • 导出方式1
      //hello.js
      var name= "Silly";
      function sayHello(a,b){
          return a + b;
      }
      export {name,sayHello}
      
      • 导出方式2:按需导出

      • 语法:export let name = 'Silly’

      • 按需导出在一个模块中可以使用多次。

      //hello.js
      //导出变量、函数、类
      export let name = 'Silly';
      export function sayHello(a,b){
          return a + b;
      };
      export class Person {
          run(){
              console.log("跑");
          }
      } 
      
      • 默认导出

        • 语法:export default {} 默认导出的成员

        • export default在一个模块内只能有一个。

        • 导出的时候可以不用带名字(例如函数)。

      //const address = "河南";
      //export default address;
      export default function(a,b){
          console.log(a +b);
      }
      
    • 对变量或函数名可以使用as重命名

      export {name as newName}
      

    4.2 导入import

    • import:用于引入外部模块。需要在HTML代码中引入js文件

    • 且类型应设置为module

      <script src="./hello.js" type="module"></script>
      
    • 导入方式

      • 按需导入
        • 语法:import {name} from '模块标识符’
        • 对变量或函数名可以使用as重命名起别名
      import {name.sayHello} from "./hello.js";
      
      • 默认导入

        • 语法:import 接收名称 from’模块标识符’

        • 可以随意命名,如randomName

      import randomName from './hello.js';
      
      • 统一全部导入
      import * as newName from './hello.js';
      
    • 特点:

      1. import具有提升效果。
      2. import是静态执行。
      3. import ‘模块路径’,直接执行模块中内容,且多次导入只会执行一次。
      4. 模块整体导入。import * as 别名 from ‘模块路径’
    • 推荐使用

      1. export {变量名或函数名,…}
      2. import {变量名或函数名,…} from ‘模块路径’
        • 对变量或函数名可以使用as重命名,再使用import导入时也必须使用重命名后的名称。
          1. export {变量名或函数名,as 重命名,…}
          2. import {重命名,…} from ‘模块路径’
    展开全文
  • ES6模块化

    2021-03-10 22:44:57
    ES6模块化简介 ECMA组织参考了众多社区模块化标准,终于在2015年,随着ES6发布了官方的模块化标准,后成为ES6模块化 ES6模块化具有以下的特点 使用依赖预声明的方式导入模块 依赖延迟声明 优点:某些时候可以提高...

    ES6模块化简介

    ECMA组织参考了众多社区模块化标准,终于在2015年,随着ES6发布了官方的模块化标准,后成为ES6模块化

    ES6模块化具有以下的特点

    1. 使用依赖预声明的方式导入模块
      1. 依赖延迟声明
        1. 优点:某些时候可以提高效率
        2. 缺点:无法在一开始确定模块依赖关系(比较模糊)
      2. 依赖预声明
        1. 优点:在一开始可以确定模块依赖关系
        2. 缺点:某些时候效率较低
    2. 灵活的多种导入导出方式
    3. 规范的路径表示法:所有路径必须以./或…/开头

    基本导入导出

    模块的引入

    注意:这一部分非模块化标准

    目前,浏览器使用以下方式引入一个ES6模块文件

    <script src="入口文件" type="module">
    

    模块的基本导出和导入

    ES6中的模块导入导出分为两种:

    1. 基本导入导出
    2. 默认导入导出

    在这里插入图片描述

    基本导出

    类似于 exports.xxx = xxxx

    基本导出可以有多个,每个必须有名称

    基本导出的语法如下:

    export 声明表达式
    

    export {具名符号}
    // 例
    const a = 1;
    export { a }; // 导出a,值为1,类似于CommonJS的exports.a = 1
    export { a as c }; // 导出c,值为1
    export { a as default }; //此时为默认导出,值为1,类似于CommonJS中的module.exports = {}
    

    由于基本导出必须具有名称,所以要求导出内容必须跟上声明表达式具名符号

    基本导入

    由于使用的是依赖预加载,因此,导入任何其他模块,导入代码必须放置到所有代码之前

    对于基本导出,如果要进行导入,使用下面的代码

    // 可理解为解构,但不是解构
    import {导入的符号列表} from "模块路径" 
    import * as obj from "模块路径"; // obj中包含所有基本导出的值
    

    注意以下细节:

    • 导入时,可以通过关键字as对导入的符号进行重命名
    • 导入时使用的符号是常量,不可修改
    • 可以使用*号导入所有的基本导出,形成一个对象

    默认导入导出

    默认导出

    每个模块,除了允许有多个基本导出之外,还允许有一个默认导出

    默认导出类似于CommonJS中的module.exports,由于只有一个,因此无需具名

    具体的语法是

    export default 默认导出的数据
    

    export {默认导出的数据 as default}
    

    由于每个模块仅允许有一个默认导出,因此,每个模块不能出现多个默认导出语句

    默认导入

    需要想要导入一个模块的默认导出,需要使用下面的语法

    import 接收变量名 from "模块路径"
    

    类似于CommonJS中的

    var 接收变量名 = require("模块路径")
    

    由于默认导入时变量名是自行定义的,因此没有别名一说

    如果希望同时导入某个模块的默认导出和基本导出,可以使用下面的语法

    import 接收默认导出的变量, {接收基本导出的变量} from "模块路径"
    

    注:如果使用*号,会将所有基本导出和默认导出聚合到一个对象中,默认导出会作为属性default存在

    点击下载DEMO

    ES6模块化的其他细节

    1. 尽量导出不可变值

    当导出一个内容时,尽量保证该内容是不可变的(大部分情况都是如此)

    因为,虽然导入后,无法更改导入内容,但是在导入的模块内部却有可能发生更改,这将导致一些无法预料的事情发生

    1. 可以使用无绑定的导入用于执行一些初始化代码

    如果我们只是想执行模块中的一些代码,而不需要导入它的任何内容,可以使用无绑定的导入:

    import "模块路径"
    
    1. 可以使用绑定再导出,来重新导出来自另一个模块的内容

    有的时候,我们可能需要用一个模块封装多个模块,然后有选择的将多个模块的内容分别导出,可以使用下面的语法轻松完成

    export {绑定的标识符} from "模块路径"
    

    在这里插入图片描述

    展开全文
  • ES6模块化基本实现

    2020-10-17 01:35:22
    1.js模块化的出现 ...es6模块化中模块与外部的数据传输是依赖于export(发送)和import(接收)这两个关键字的,下面通过一个例子来理解它们的用法 在module1.js中: export let name = 'aays';//发送

    1.es6模块化的出现

    ES5以及它之前的js是没有模块化的,如果要进行模块化操作,需要引入第三方的类库。随着技术的发展,前后端分离,前端的业务变的越来越复杂,终于在ES6中引入了模块化的操作。

    2.es6模块化基本用法

    es6中,一个模块就是一个js文件,所以我们新建一个模块(js文件)
    在这里插入图片描述
    es6模块化中模块与外部的数据传输是依赖于export(发送)和import(接收)这两个关键字的,下面通过一个例子来理解它们的用法
    在module1.js中:

    export let name = 'aays';//发送name这个变量
    

    创建一个外部文件index.html,并且码入:

       <script type="module">
            import {name} from './module1.js'//接收name这个变量
            console.log(name)//aays
        </script>
    

    如果报错且内容如下:(Access to script at ‘file:///C:/Users/27907/Desktop/xm/chatrobot/module1.js’),那么就是发生了跨域的错误,es6模块化是不能跨域使用的,不能在本地打开文件,你可以在搭建一个本地服务器来打开这个文件,具体参见https://blog.csdn.net/qq_44163269/article/details/105116173

    上面是最基本的用法,如果要输出多个变量可以将这些变量包装成对象进行模块化输出:

    //模块
    let name = 'aays',age = 18
    const sex = '男'
    export {
        name,
        age,
        sex
    }
    //外部
        <script type="module">
            import {name,age,sex} from './module1.js'
             console.log(age)//18
        </script>
    

    如果你想给传输过来的变量重新命名(可用于防止暴露模块当中的变量名字或者简化变量名),可以通过as来进行操作,上述代码修改为:

    //模块
    let name = 'aays',age = 18
    const sex = '男'
    export {
        name as myname,
        age as myage,
        sex as mysex
    }
    //外部
        <script type="module">
            import {myname,myage,mysex} from './module1.js'
             console.log(myage)//18
        </script>
    

    如果你不想将export过来的一一解构赋值,那么你可以使用*符号来直接获取整个模块,上述代码修改为

    //模块
    let name = 'aays',age = 18
    const sex = '男'
    export {
        name,
        age,
        sex
    }
    //外部
        <script type="module">
            import * as allmodule from './module1.js'
             console.log(`${allmodule.name}今年${allmodule.age}岁
             性别${allmodule.sex}`)//aays今年18岁 性别男
        </script>
    

    3.默认导出与混合导出

    一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致。

    //模块
    export default function(){
        return "默认导出一个方法"
    }
    //外部
    import fn from './module1.js'//fn可以是任意变量名
    console.log(fn())//输出“默认导出一个方法”
    //我们可以将要导出的东西都放在默认导出中,
    //然后取出来作为一个对象直接取里面的东西来用,比较方便
    

    混合导出即同时在一个export中导出默认数据与非默认数据,加个逗号就能实现

    //模块
    export default function(){
        return "默认导出一个方法"
    }
    export let name ="aays";
    //外部
    import fn,{name} from "./module1.js";
    console.log(fn()+name);//默认导出一个方法aays
    

    4.重命名export和import

    如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做:

    export let myName="我来自module1.js";//模块1中
    export let myName="我来自module2.js";//模块2中
    //外部
    import {myName as name1} from "./module1.js";
    import {myName as name2} from "./module2.js";
    console.log(name1);//我来自module1.js
    console.log(name2);//我来自module2.js
    
    展开全文
  • ES6模块化(重点)

    2021-06-20 20:40:37
    ES6模块化一、模块化规范1.1 前端模块化规范的分类1.2 ES6模块化规范定义1.3 配置步骤:1.4 默认导出导入1.5 注意事项1.6 按需导出导入1.7 按需导出导入注意事项1.8 直接导入并执行模块中的代码1.9 promise 解决回调...
  • 什么是模块 模块化的进化过程 全局function模式 : 将不同的功能封装成不同的全局函数 namespace模式 : 简单对象封装 2.3IIFE模式:匿名函数自调用(闭包) ...4.ES6模块化 ES6 模块与 CommonJS 模块的差
  • 模块化  1 IIFE  2 commonjs 3 浏览器中js的模块化   4 简单理解模块加载器的原理  5 es6  之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式(IIFE)的模式,...
  • es6模块化的导入与导出
  • 文章目录JavaScript 模块化发展史第一阶段第二阶段第三阶段第四阶段nodejsCommonJS模块的导出模块的导入CommonJS规范nodejsCommonJS的实现浏览器端模块化的难题AMDCMDES6模块化简介基本导入导出模块的引入模块的...
  • ES6模块化 理解:在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来其进行暴露(输出)。 例子: b.js import { aa }...
  • 后面又有了es6模块化(export/import)。 CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)} require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口...
  • 面临的问题: 如果你是未使用模块化之前的毕业生,你在接受项目时,可能会絮叨的问题:
  • 2.模块化理解 模块化是一种处理复杂系统分解为更好的可管理模块的方式。简单来说就是解耦,简化开发,一个模块就是实现特定功能的文件,可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要...
  • ES6模块化与常用功能

    2019-09-23 23:07:42
    一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。 模块功能主要由两个命令构成:export和import(注意有无default)。export命令用于规定模块的.....
  • ES6之前已经出现了js模块加载的方案,最...ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就
  • 之前一直对于前端的模块化理解的不太透彻,平常一直用的也只有ES6模块化,对于其他几种模块化规范用的也少,理解不够深,但是经常会见到一些面试题是问这几种模块化规范的区别,所以这次做一个整理总结 一、对于模块...
  • es6模块化导入导出

    2019-10-04 03:01:01
    ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchronous module definition) 和 AMD(common module definition) 两种。前者用于服务器,后者用于浏览器 /* CommonJS...
  • ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。...
  • 翻看公司某组价的代码时,export 和 export default 各种混用,再加上... 首先,ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。 1、export 一个模块就是一个独立的文件。该...
  • es6模块化开发

    2018-10-11 18:25:00
    export导出 import导入 export {a:b} Export default {a:b} 导入: import utils from “./utils” Vue.prototype.$utils = utils; 引用: this.$utils.returnFloat 转载于:...
  • CommonJS和ES6模块化

    2020-03-17 15:13:41
    并且必须以./或../开头,不然表示从npm的包目录下获取文件 ES6模块化简介 ECMA组织参考了众多社区模块化标准,终于在2015年,随着ES6发布了官方的模块化标准,后成为ES6模块化 ES6模块化具有以下的特点 使用依赖预...
  • ES6 模块化(概念)

    2021-06-06 19:47:26
    模块化 前端为什么用模块? 举例:要想实现一打开页面,弹框和页面效果同时加载 加载模块三种规范: 后端: CommonJS是主要为了JS在后端的表现制定的 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能...
  • JavaScript 模块化发展史 第一阶段 在 JavaScript 语言刚刚诞生,js只用于实现小的效果,js代码通常只有几百行,专业的前端工程师还没有出现,都是后端顺带完成前端工作 大事件 1996年,NetScape将JavaScript语言提交...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,506
精华内容 7,002
关键字:

对es6模块化的理解