摘要:在中是有这种写法的,我们称为语法,就是通过关键词,引入所要依赖的文件。的语法的用法所有模块都通过来定义通过引入依赖通过对外提供接口或者通过提供整个接口的语法的模块功能主要通过两个关键字来实现和。是用来声明模块的默认接口的。
你带着你的同事联调的时候
????
从古至今,Javascript都没有自带的模块体系,能做的,也就只是将不同作用的代码写在不同的JS文件中,然后通过分别引入。这样做又一个非常致命的问题,那就是我们要定位一个方法变得非常的困难。
一个灵活的模块体系,能让你的代码之间的依赖关系更加直观,一个好的模块式的写法让没个方法都能很快的找到声明位置所在。
在NODE中是有这种写法的,我们称为CMD语法,就是通过require关键词,引入所要依赖的文件。
当然,随着前端在WEB开发中占据的比重越来越高,客户端JS的模块化也尤为重要。其实已经有比较成熟的前端框架来实现这个功能,比如RequireJs和Seajs。ES6的出现,让JS实现模块功能变得更�加简单。
//requirejs的语法 define(["moudleA"], function(){ function foo(){ doSomething(); } return { foo : foo }; }); //seajs的用法 // 所有模块都通过 define 来定义 define(function(require, exports, module) { // 通过 require 引入依赖 var $ = require("jquery"); var Spinning = require("./spinning"); // 通过 exports 对外提供接口 exports.doSomething = ... // 或者通过 module.exports 提供整个接口 module.exports = ... });ES6的Module语法
ES6的模块功能主要通过两个关键字来实现export和import。
从字面上不难看出,export是输出,即用来将模块内部的方法暴露出来,而import是输入,即引入其他模块的方法,便于在本模块中调用其他模块的方法。
正常来讲,我们可以将每个模块都写成一个独立的文件,由于Javascript作用域的问题,每个模块内部的变量及方法都是私有的,即只能内部访问,外部无法访问。要想使模块内部的方法可以从外部访问,就必须使用export关键字。
//moduleA.js var moduleA1 = "a"; var moduleA2 = "aa"; function moduleFunc(){ console.log(moduleA2); } export { moduleA1, moduleA2 as moduleA, moduleFunc as module };
如上面的代码所示,在模块中声明了变量和方法,我们只需要将变量名或者方法名,置于export的作用下,就可以被其他模块使用。
as关键词可以用来重命名,上面的例子中moduleA就等于moduleA2。
这里需要注意的是,export定义的是对外的接口,接口必须在模块内部被声明或实现过,不然就会报错。
var a = 1; export a;//不报错 export b;//报错
使用export定义了模块的接口之后,其他模块就可以通过import命令来引入这个模块
//moduleB.js import {moduleA1, moduleA} from "./moduleA.js"; import {module as moduleFunc} from "./moduleA.js"; moduleFunc();
如上面的代码所示,通过import关键字从moduleA.js中引入了moduleA1、moduleA2、moduleFunc()三个变量,这样在这个模块中就能使用A模块中的变量了。
需要注意的是,import关键字有提升效果,也就是无论写在哪个位置,都和写在模块顶部效果一样。import加载模块的过程是在编译阶段执行的,代码运行之前就已经完成了加载过程。
如果我们需要引入一个模块中的所有变量,可以用下面的方法
//moduleC.js import * as module from "./moduleA.js"; module.moduleA;//"a" module.moduleFunc();//"aa"
另外,import加载的文件是不会重复加载的
//moduleD.js import {moduleA1} from "./moduleA.js"; import {moduleA2} from "./moduleA.js"; //等同于 import {moduleA1, moduleA2} from "./moduleA.js";
moduleA.js只会加载一次。
export default是用来声明模块的默认接口的。
//hello.js var name = "dahan"; function sayHello(){ console.log("Hello"); } export default sayHello; //person.js import hello from "./hello.js"; hello(); //"Hello"
使用export default声明的接口,引入的时候不需要使用大括号,也不用指定特定的变量名。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91711.html
摘要:前端培训初级阶段语法变量值类型运算符语句前端培训初级阶段内置对象函数基础内容知识我们会用到。模块定义加载模块继承中的继承依赖于原型链继承。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 该文为前...
摘要:,微软发布,同时发布了,该语言模仿同年发布的。,公司在浏览器对抗中没落,将提交给国际标准化组织,希望能够成为国际标准,以此抵抗微软。同时将标准的设想定名为和两类。,尤雨溪发布项目。,正式发布,并且更名为。,发布,模块系统得到广泛的使用。 前言 作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。 这次的 why w...
摘要:以下简称是语言的下一代标准。因为当前版本的是在年发布的,所以又称。命令用于规定模块的对外接口,命令用于输入其他模块提供的功能。需要特别注意的是,命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。 最常用的ES6...
摘要:的主要思想是异步模块,主逻辑在回调函数中执行,这和浏览器前端所习惯的开发方式不谋而合,应运而生。是目前开发中使用率最高的模块化标准。 原文链接: http://yanjiie.me 偶然的一个周末复习了一下 JS 的模块标准,刷新了一下对 JS 模块化的理解。 从开始 Coding 以来,总会周期性地突发奇想进行 Code Review。既是对一段时期的代码进行总结,也是对那一段时光的...
摘要:感谢感谢和在推动模块化发展方面做出的贡献。与引用阮一峰老师的标准参考教程规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。规定了新的模块加载方案。与引用阮一峰老师的入门它们有两个重大差异。 前言 本篇我们重点介绍以下四种模块加载规范: AMD CMD CommonJS ES6 模块 最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 require....
阅读 2462·2021-11-15 18:14
阅读 1692·2021-10-14 09:42
阅读 3684·2021-10-11 10:58
阅读 3917·2021-10-09 09:44
阅读 2379·2021-09-26 09:55
阅读 2403·2021-09-24 10:38
阅读 2007·2021-09-04 16:48
阅读 3252·2021-09-02 15:21