摘要:在开发大型的项目中,可能会使用到管理的模块化工具。说道,学习过的同学会比较熟悉,是服务器模块的规范,采用了这个规范。可能是未来模块化解决方案的首选。
本文章记录本人在学习 JavaScript 中理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。
在开发大型的web项目中,可能会使用到管理js的模块化工具。但是在前端轮子漫天飞的时代。那一款js模块化工具真正适合我们应用到开发呢?目前比较流行的模块化工具有RequireJS 、SeaJS等等。而且模块化开发工具都有不同的规范去约束例如:AMD CMD CommonJS。
CommonJS说道CommonJS,学习过Node的同学会比较熟悉,CommonJS是服务器模块的规范,Node采用了这个规范。如果我们也想在浏览器中使用到CommonJS的规范的话,可以使用browserify。
下面用browserify做一个示例。首先需要安装Node和npm(假设你已经安装好了):
npm install browserify -g
接着使用npm安装browserify,记得要安装到全局环境中。然后新建两个js文件,分别是a.js和b.js。
// a.js module.exports = function () { console.log("This is a.js"); }; //b.js var a = require("./a"); a(); console.log("This is b.js");
我们编写好代码之后,在命令行中运行:
browserify b.js -o bundle.js node bundle.js // 运行 bundle.js This is a.js // 输出 This is b.js // 输出
然后我们就发现了目录下多了一个bundle.js的文件。这就是browserify根据我们写的代码最后编译出来的。上面只是用了browserify抛砖引玉的介绍了一下如何在客户端中CommonJS规范。
为什么要使用CommonJS规范呢?
如果经常写Node的同学可能会对CommonJS规范比较了解一些,上手比较容易。
外链
前端模块及依赖管理的新选择:Browserify
CommonJS规范
CommonJS Modules/1.0 规范
AMD说道模块化的话,大多数的同学都应该了解RequireJS,而且RequireJS是基于AMD规范的。下面也用一下小栗子来体验一下RequireJS。新建两个文件一个是a.js另一个是index.html。
a.js:
define(function () { console.log("hello RequireJS!"); });
index.html:
Document
接着用浏览器打开index.html,发现控制台输出了hello RequireJS!。就表示已经成功了。上面只是一个非常简单的栗子。体验了一下RequireJS。
为什么要使用AMD规范呢?
因为AMD是专门为浏览器中js环境设计的规范。它吸取了CommonJS的一些优点,但是没有全部都照搬过来。也是非常容易上手。
外链
RequireJS中文网
Javascript模块化编程(三):require.js的用法
AMD规范
CMD说道AMD的话,又会想起有个叫CMD的东西。而且SeaJS是推荐是用CMD的写法,那么就使用SeaJS来编写一个简单的栗子:
也是新建两个文件,greet.js和index.html:
greet.js:
define(function (require, exports) { function helloPython() { document.write("Hello,Python"); } function helloJavaScript() { document.write("Hello,JavaScript"); } exports.helloPython = helloPython; exports.helloJavaScript = helloJavaScript; });
index.html:
Document
看到页面上输出了Hello,JavaScript,就表示成功了。看了前面AMD和这个CMD的栗子之后,大部分人会感觉两者写起来好像没什么区别。虽然写起来像,还是有一些区别:
对于依赖的模块,AMD是提前执行,CMD是延迟执行。不过 RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇as lazy as possible。
CMD推崇依赖就近,AMD推崇依赖前置。
AMD的API默认是一个当多个用,CMD的API 严格区分,推崇职责单一。比如AMD里,require分全局require 和局部require,都叫require。CMD里,没有全局 require,而是根据模块系统的完备性,提供seajs.use来实现模块系统的加载启动。CMD里,每个API都简单纯粹。
以上区别都是摘抄自:AMD 和 CMD 的区别有哪些?玉伯的回答。
外链
Sea.js
Hello Sea.js
CMD规范
ES6 Module上面解决js模块化的方法都是使用第三方的库来解决的。但是欣慰的是,ES6帮我们解决了原生js能够不依赖第三方的库来使用模块解决方案。
历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。《ECMAScript 6 入门》 - 阮一峰
还是写一个小栗子了解一下,又是新建两个文件a.js和b.js:
// a.js var num1 = 1; var num2 = 2; export {num1, num2}; // b.js import {num1, num2} from "./a.js"; function add(num1, num2) { return num1 + num2; } console.log(add(num1, num2));
因为使用到了ES6的语法,所以需要转码器来把代码转换成ES5的代码。只需要使用npm安装traceur就行了。
npm install traceur -g
安装好之后,我们就通过traceur命令来运行b.js。就和Node运行js文件一样。
traceur b.js 3 // 输出
如果命令行中输出了3,就表示成功了。
为什么要使用ES6 Module规范呢?
不用依赖第三方的库来结局模块化的问题,语法简单简洁。上手简单。可能是未来模块化解决方案的首选。
外链
ES6 Module
ECMAScript 6 modules: the final syntax
最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91523.html
摘要:记录学习的点点滴滴,方便日后查看。笔记源于网老师安装官网下载安装官网下载与电脑配版本,说明一下是长期支持版本是当前最新版本。浏览器请求访问此地址会出现,第一个服务就完成了,是不是很简单。模块分类模块分为核心模块文件模块第三方模块。 记录学习 Node.js 的点点滴滴,方便日后查看。(笔记源于imooc网Scott老师) 1. 安装 Node.js官网:https://nodejs....
摘要:记录学习的点点滴滴,方便日后查看。笔记源于网老师安装官网下载安装官网下载与电脑配版本,说明一下是长期支持版本是当前最新版本。浏览器请求访问此地址会出现,第一个服务就完成了,是不是很简单。模块分类模块分为核心模块文件模块第三方模块。 记录学习 Node.js 的点点滴滴,方便日后查看。(笔记源于imooc网Scott老师) 1. 安装 Node.js官网:https://nodejs....
摘要:记录学习的点点滴滴,方便日后查看。笔记源于网老师安装官网下载安装官网下载与电脑配版本,说明一下是长期支持版本是当前最新版本。浏览器请求访问此地址会出现,第一个服务就完成了,是不是很简单。模块分类模块分为核心模块文件模块第三方模块。 记录学习 Node.js 的点点滴滴,方便日后查看。(笔记源于imooc网Scott老师) 1. 安装 Node.js官网:https://nodejs....
摘要:但是一直没有在语言层面支持模块,直到的出现。相信在不久的将来,的模块一定会全面取代和。的模块提供了个新的语法,分别是和。就是模块用来对外暴露数据的接口,具体用法如下。 本文同步自我得博客:http://www.joeray61.com 简介 在当今的Javascript程序中,模块的作用不言而喻,目前广泛应用的主要有AMD(浏览器端)和CommonJS(服务器端)。但是Javascri...
摘要:今天的内容涉及的原理运行机制和的内容,会有点沉闷,也会有点困难,建议像我一样做一些笔记。这个变量就是这个模块与外界的一个出口。中,变量就是在中暴露的函数。具体原因同样涉及到的内部处理。有兴趣的同学可以参考上面的那篇文章。 今天的内容涉及Node的原理、运行机制和CommonJS的内容,会有点沉闷,也会有点困难,建议像我一样做一些笔记。 模块 在开发大型应用的时候,我们常常会用到全局变量...
阅读 853·2021-11-24 09:38
阅读 1086·2021-10-08 10:05
阅读 2577·2021-09-10 11:21
阅读 2801·2019-08-30 15:53
阅读 1829·2019-08-30 15:52
阅读 1966·2019-08-29 12:17
阅读 3420·2019-08-29 11:21
阅读 1609·2019-08-26 12:17