精华内容
下载资源
问答
  • 对es6模块化的理解
    2022-07-29 19:32:05

    模块化

    ES6语法、commonJS语法、AMD
    vue中的模块化、组件化,把部分html,独立成一个.vue文件,这个文件我们一般叫它为组件。
    组件化≠模块化。模块化是从文件层面上,对代码或资源进行拆分;而组件化是从设计层面上,对用户界面进行拆分。前端组件化更偏向 UI 层面,更多把逻辑放到页面中,使得 UI 元素复用性更高。

    es6模块化规范语法:

    1. 声明时导出,在声明变量、函数或类时前面加上export,但是这样导入时就得加上大括号
    2. 独立使用export声明,一个export关键字加上变量名列表,但是这样导入时就得加上大括号
      1. export { a, b, c } 对应 import { a, b, c } from ‘xx.js’
    3. export和default联合使用,export default表示导出一个默认变量值,后面可接表达式

    原始值都是不能成为指定对外接口=>export和export default都可以直接导出函数、对象

    export default后面不能接var?

    • default的本质是变量也是指定对外接口,而export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。
    • 直观解释default = var a = 1 或者说 b = var a = 1【很显然会报错】

    大致说说export和export default的区别

    1. export与export default均可用于导出常量、函数、文件、模块等
    2. 在一个文件或模块中,export、import可以有多个,export default仅有一个
    3. 通过export方式导出,在导入时要加{ },export default则不需要
    4. export导出的变量,import时导入该变量时会随着导出那个变量值的变化而变化;但是default不会,default拿的是值导出,export直接导出的是变量a

    查看原文

    更多相关内容
  • ES6模块化理解

    2022-02-21 23:55:12
    ES6模块化与commonJS区别: 一、 // CommonJS模块 let { state, exiets, redafile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let r

    ES6之前,虽然有commonJS和AMD两种模块加载方案,但是JS在语言标准的层面上是没有模块体系的

    为了解决这一问题,便引入了export import命令来实现模块化

    ES6模块化与commonJS区别:

    一、

    // CommonJS模块
    let { state, exiets, redafile } = require('fs');
    
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

    commonJS require的加载方式为‘运行时加载’,即require资源之后,生成一个对象_fs,然后再去_fs中读取需要的内容,只有在运行时才能得到这个引入的对象

    // ES6模块
    import { stat, exists, readFile } from 'fs';
    

    上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。

    因为是编译时加载,所以使用import命令时不能使用表达式和变量,这些只有运行时才能的得到结果的语法结构

    二、

    export 输出的接口,与其对应的值是动态绑定关系,即暴露的接口对应的值发生变化,import导入时是会动态更新的

    commonJS模块输出的是值的缓存,不存在动态更新

    export let num = 12
    setTimeout(() => num = 28, 500)
    

    export输出的变量num,值为12,500ms后,变为28

    export命令

    一个模块就是一个独立的文件,该文件内部的所有变量,在外部都是访问不到的,如果想要被外部访问到,那么就需要使用export命令导出

    export导出变量:

    export let a = 'Luffy'
    export let b = 'Zero'
    export let c = 'Sanji'
    

    还可以写成这样:

    let a = 'Luffy'
    let b = 'Zero'
    let c = 'Sanji'
    export {a, b, c}
    

    导入时使用的方法都是一样的:

    import {a, b, c} from '路径'
    

    export导出函数和类:

    export class myModule {
       constructor(){
         ...
       }
    }
      
    //或
    class myModule{
      
    }
    export {
    		myModule
    }
    
    export function add(x, y){
      return x + y
    }
    

    export 为导出的变量重命名

    let a = 'Jack'
    let b = 18
    export {
    	a as name,
    	b as age,
    	b as length
    }
    

    使用as 关键字 ,重新命名变量a和b的对外接口,并且变量b可以用不同的名字输出两次

    export命令不能用于块级作用域中

    function foo() {
      export default 'bar' // SyntaxError
    }
    foo()
    

    将export命令放在函数中,会报错,因为export是编译时执行的,放在块级作用域中无法做静态优化

    export defaut 命令

    使用import命令时,我们需要知道需要加载的变量名和函数名,否则无法正确加载。

    使用export default命令,可以使我们为模块指定默认输出,在导入时在为其命名

    //a.js 导出一个匿名函数
    export default funciton (){
      console.log('function')
    }
    
    //导入时可以为其随意命名,且import后面无需使用大括号
    import fn from './a.js'
    fn()    //funciton
    

    export default命令用在非匿名函数前,也是可以的。

    // export-default.js
    export default function foo() {
      console.log('foo');
    }
    
    // 或者写成
    
    function foo() {
      console.log('foo');
    }
    
    export default foo;
    

    上面代码中,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。

    export default 本质就是导出一个叫做default 的变量, 并在语句后面为其赋值

    因此:

    // 正确
    export var a = 1;
    
    // 正确
    var a = 1;
    export default a;
    
    // 错误
    export default var a = 1;
    

    import命令

    使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块

    // main.js
    import { name, age} from '路径';
    
    console.log(name, age)
    

    上面代码的import命令,用于加载对应位置的文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js`)对外接口的名称相同。

    重命名

    同样是使用as关键字

    import {name as username} from "路径"
    
    console.log(name)    // 错误
    console.log(username)   //正确
    

    import载入的变量都是只读的

    import载入的变量不允许修改,但是分数据类型

    基本数据类型不允许修改

    引用数据类型可以修改属性,但不能改变其指向,且修改过后,其他引入该变量的模块也会得到同样的结果

    //基本数据类型
    import {a} from '路径'
    a = 12    //报错
    
    //引用数据类型
    import {a} from '路径'
    a.name = 'Chopper'    //可以
    a = {name: 'Chopper'}   //报错
    

    路径

    import路径可以是绝对路径,也可以是相对路径

    但是,如果不带有路径名,只是一个模块名,必须通过相应配置,告知JS引擎该模块位置

    变量提升

    import语句存在变量提升,即会提升到模块头部,优先执行

    say()
    import {say} from '路径'
    

    上面的代码不会报错,因为import的执行早于say的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。

    不能使用表达式和变量

    由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

    // 报错
    import { 'f' + 'oo' } from 'my_module';
    
    // 报错
    let module = 'my_module';
    import { foo } from module;
    
    // 报错
    if (x === 1) {
      import { foo } from 'module1';
    } else {
      import { foo } from 'module2';
    }
    

    上面三种写法都会报错,因为它们用到了表达式、变量和if结构。在静态分析阶段,这些语法都是没法得到值的。

    加载整个模块

    import命令可以加在整个模块,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

    //a.js
    export function add(x,y){
      return x+y
    }
    export function multiply(x,y){
      return x*y
    }
    
    import * as methods from './a.js'
    
    console.log(methods.add(1,2), methods.multiply(1,2))   // 3, 2
    

    import方法

    用于export import命令是编译时执行的,只能运行在模块顶层,不能运行在块级作用域中

    因此导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import命令要取代 Node 的require方法,这就形成了一个障碍。因为require是运行时加载模块,import命令无法取代require的动态加载功能。

    ES2020提案中 引入import()函数,用于实现动态加载模块

    import(specifier)
    

    上面代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。

    与require方法不同的是,import方法是异步的,返回一个promise对象,require方法是同步的

    适用场合

    下面是import()的一些适用场合。

    (1)按需加载。

    import()可以在需要的时候,再加载某个模块。

    {
      path: '/login',
      component: () => import('@/views/login/index'),
      hidden: true
    },
    

    在我们实现路由懒加载的过程中,使用import() 命中 /login路由时,才会加载对应的模块

    (2)条件加载

    import()可以放在if代码块,根据不同的情况,加载不同的模块。

    if (condition) {
      import('moduleA').then(...);
    } else {
      import('moduleB').then(...);
    }
    

    上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。

    (3)动态的模块路径

    import()允许模块路径动态生成。

    import(f())
    .then(...);
    

    上面代码中,根据函数f的返回结果,加载不同的模块。

    注意点

    import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,我们可以随意操作得到的内容

    参考:阮一峰-ES6入门

    展开全文
  • 前段时间在网上看了一点关于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文件就可以正常使用啦

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

    展开全文
  • JS模块化ES6 模块化

    简介

    ECMA推出了官方标准的模块化解决方案,使用 export 导出,import 导入,编码简洁,从语义上更加通俗易懂。

    let name = 'now';
    let fun = () => {
        name = 'change'
    }
    export {
        name,
        fun
    }
    
    import { name, fun } from "../util";
    

    export

    一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

    // profile.js
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    

    上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。

    export的写法,除了像上面这样,还有另外一种。

    // profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    
    export { firstName, lastName, year };
    

    export命令除了输出变量,还可以输出函数或类(class)。

    export function multiply(x, y) {
      return x * y;
    };
    

    通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

    function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
    

    export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下一节的import命令也是如此。

    import

    使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

    // main.js
    import { firstName, lastName, year } from './profile.js';
    
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    }
    

    import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

    如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

    import { lastName as surname } from './profile.js';
    

    import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。

    import {a} from './xxx.js'
    a = {}; // Syntax Error : 'a' is read-only;
    

    但是,如果a是一个对象,改写a的属性是允许的。

    import {a} from './xxx.js'
    a.foo = 'hello'; // 合法操作,不建议
    

    import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径。如果不带有路径,只是一个模块名,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。

    import命令具有提升效果,会提升到整个模块的头部,首先执行。

    foo();//不会报错
    
    import { foo } from 'my_module';
    

    模块的整体加载

    除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

    // circle.js
    export function area(radius) {
      return Math.PI * radius * radius;
    }
    
    export function circumference(radius) {
      return 2 * Math.PI * radius;
    }
    
    import * as circle from './circle';
    
    console.log('圆面积:' + circle.area(4));
    console.log('圆周长:' + circle.circumference(14));
    

    export default

    使用export default命令,为模块指定默认输出。

    // export-default.js
    export default function () {
      console.log('foo');
    }
    

    上面代码是一个模块文件export-default.js,它的默认输出是一个函数。

    其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。这时import命令后面,不使用大括号。

    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'
    

    export default命令用在非匿名函数前,也是可以的。

    显然,一个模块只能有一个默认输出,因此export default命令只能使用一次

    export 与 import 的复合写法

    如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起。

    export { foo, bar } from 'my_module';
    
    // 可以简单理解为
    import { foo, bar } from 'my_module';
    export { foo, bar };
    

    模块的接口改名和整体输出,也可以采用这种写法。

    // 接口改名
    export { foo as myFoo } from 'my_module';
    
    // 整体输出
    export * from 'my_module';
    

    默认接口的写法如下。

    export { default } from 'foo';
    

    具名接口改为默认接口的写法如下。

    export { es6 as default } from './someModule';
    
    // 等同于
    import { es6 } from './someModule';
    export default es6;
    

    同样地,默认接口也可以改名为具名接口。

    export { default as es6 } from './someModule';
    

    浏览器中使用

    ES6模块化在浏览器上的支持并不是很好,大部分浏览器还是不支持,所以需要做转换

    • 不使用 webpack ,使用 gulp 等构建流工具,那么我们需要使用babel将 es6 转成 es5 语法,再使用 browserify 对模块规范进行转换。
    • 若使用 webpack ,webpack 是支持 es6 模块化的,所以就只要引用 babel-loader ,对 es6 的语法做处理即可
    展开全文
  • 模块化及ES6模块化

    2021-06-01 11:46:52
    在了解什么叫模块化之前,我们先了解一下在没有模块化之前所遇到的问题。 遇到的问题: 1,变量名冲突。当我们在做项目时可能会出现同时引许多不同的js文件,那不可避免的就会出现变量名重复,前面的会被后面的覆盖...
  • 首先我们来了解下CommonJS模块化规范,CommonJS规范将每一个JS文件都视为一个模块,在JS文件中通过module.exports对外暴露模块输出,通过require引入其他模块的module.exports。 那么为什么CommonJS规范下的JS文件...
  • ES6模块化 理解:在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来其进行暴露(输出)。 例子: b.js import { aa }...
  • 一、模块化的理解 1.什么是模块? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 ...这篇文章主要CommonJS和ES6模块化进行一个汇总整理(在nodejs上运行) 1.ES6模块化(...
  • ES6模块化及它的使用场景 module amd cmd CommonJS
  • ES6 模块化(概念)

    2021-06-06 19:47:26
    模块化 前端为什么用模块? 举例:要想实现一打开页面,弹框和页面效果同时加载 加载模块三种规范: 后端: CommonJS是主要为了JS在后端的表现制定的 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能...
  • ES6 模块化

    千次阅读 2022-03-26 17:06:51
    ES6 模块化 ...ES6模块化 1.回顾:node.js 中如何实现模块化 node.js 遵循CommonJS的模块化规范。其中 导入其他模块使用require() 方法 模块对外共享成员使用module.exports 对象 模块化的好处: ​ 大
  • 详解ES6 模块化

    千次阅读 多人点赞 2020-01-21 12:37:45
    本文我们学习ES6模块化,如何从模块中导出变量、函数、类并在其他模块中重用。 ES6 模块即为在严格模式下执行的JavaScript文件。意味着模块中声明的变量和函数不会自动增加至全局作用域中。 1. 浏览器中执行模块 ...
  • ES6模块化基本实现

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

    2020-06-26 20:30:02
    一、什么是ES6模块化 在ES6之前,JS一直没有模块体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法将他们拼装起来。尽管社区制定了一些模块加载方案,主要有CommonJS和AMD两种,但是这两种方案都有...
  • // ES6模块 import { stat, exists, readFile } from 'fs'; 上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效
  • 今天我们来学习ES6模块化系统,如何从模块中导出变量、函数、类,在其他模块中去使用。 在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量、函数不会添加全局作用域中...
  • 随笔-深入理解ES6模块化(三)

    千次阅读 2021-12-15 13:37:41
    ES6模块加载 和 CommonJS模块加载区别: 1、模块加载时机不同 ES6模块是在编译期间完成的加载 ES6模块加载的概念就是:编译期间完成模块间关联;即确定A模块输入接口,和B模块输出接口之间的联系。而输入变量和...
  • ES6模块化,前端工程的核心! 一、什么是模块化?为什么要模块化? 概念:         模块化把一个复杂的程序板块划分成多个小模块,每一个小模块实现某一特定的功能,目的是...
  • ES6之前已经出现了js模块加载的方案,最...ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就
  • 浅谈CommonJs规范和Es6模块化

    千次阅读 2022-03-20 22:13:22
    前言: 前端模块化一直被我们所提及,无论是前端框架应用还是Node.js,都离不开模块化,而现在最常用的就是CommonJS和ES6规范。 CommonJS (1)CommonJS规范是一种同步加载模块的方式,也就是说,只有当模块加载完成后...
  • 1.ES6入门 1.1 介绍 es6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,ES6 的第一个版本,在 2015 年 6 月发布了,...它 ES6 的支持度更高。 1.2 ES6入门 1.2...
  • 模块化:模块是一个文件 好处: 1.减少命名冲突 2.避免引入时的层层依赖 3.可以提升执行效率 **第一种方法*********************** 1.如何导出(暴露) export let run =function(){ ...
  • ES6模块化的学习

    2022-02-20 15:46:59
    ES6模块化规范2.1 ES6模块化规范中的定义2.2 在node.js中使用ES6模块化2.3 ES6模块化的基本语法2.3.1 默认导出与导入2.3.2 按需导出与按需导入2.3.3 直接导入并执行二、 Promise1. 回调地狱2. Promise2.1 Promise的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,649
精华内容 8,659
关键字:

对es6模块化的理解