JavaScript代码模块化的正规方法
RequireJS-CommonJS-AMD-ES6 Import/Export详解
为什么起了一个这个抽象的名字呢,一下子提了四个名词分别是:RequireJS,CommonJS,AMD,ES6,答案是因为现实很骨感,我们必须很勇敢才能正视这一段悲催的往事。如今的JavaScript平台正值如日中天,大家可能会忽略他的过去和弊端,这些弊端中一直被人诟病的就是JavaScript的包管理,比如类似Java中的import,其实理论上来讲这种基本元素的缺失大大的阻碍了人们对一种语言的认可,认为他难以担当大任,其实这么多年来JavaScript平台的发展主要还是他存在的位置比较有利,在浏览器中,有标准的支持和约束,跨平台等等,但是这种先天不足就没办法了,只能后天努力,这样从ES3-ES6不断地加入新的功能终于使JavaScript这门语言逐渐完备,这个漫长的过程让我们逐渐的明白了一个道理:社会的需求胜过十驾马车的力量可以催生一项技术不断的完善,进步。
正如前面提到的JavaScript没有包管理,不适合构建复杂应用,但是现实是就需要用JavaScript来构建复杂应用,因为随着社会的进步,人们对web应用的期许提高了,这都难不倒工程师,不是语言不提供么,我们有work around。先来说说CommonJS,
CommonJS的出发点是让JavaScript这门语言写出的代码可以跨前后端,(当然这里面指的是逻辑代码,不包含DOM, BOM操作)也就是可以在不同的宿主上跑,不如同一段代码可以跑在NodeJS也可以跑在Nashorn或者浏览器,但是事实上对CommonJS标准应用最多的是NodeJS平台,也就是NodeJS中的Require, 那么CommonJS Require为什么没有在浏览器里流行呢,主要原因是这个Require是同步的,这个浏览器接受不了,用户体验差,下面我们来说说浏览器中的AMD。
// sum.js
module.exports = {
sum: function(a, b) { return a + b; }
}; // app.js
var assert = require('assert');
var cal = require('./sum');
assert.equal(3, cal.sum(1, 2));
CommonJS在浏览器中不行我们再找一个方式,总会有适合的,下面我们来说说AMD (Asynchronous Module Definition) 对CommonJS稍加改变,构造一个异步的变种就得到了AMD,示例代码如下,这下变成异步的了,终于可以在浏览器中使用了
// sum.js
define("sum", function() {
return {
sum: function(a, b) { return a + b; }
};
}); // app.js
define("app", ["sum"], function(cal) {
console.log(cal.sum(1, 2)); // => 3
});
但是以上的代码直接写是没办法运行的,如果想在浏览器中直接运行,需要知道define是个什么鬼,所以需要先把RequireJS引入,这就是RequireJS的作用,在浏览器中实现define, 引入依赖包。
<script data-main="scripts/main" src="scripts/require.js"></script> // main.js
requirejs.config({ baseUrl: '/scripts' });
requirejs(['app']);
看着这种不一致的痛苦ECMAScript 6终于忍不了了,加入了import/export标准来统一JavaScript世界,这就是标准的力量,但是从语法上来看还是同步的加载,还是没有办法支持浏览器,不知道这块ECMAScript 6是怎么考量的。
// sum.js
export function sum(a, b) { return a + b; } // app.js
import * as cal from 'sum'; console.log(cal.sum(1, 2)); // => 3
综合以上的分析,在ES6还没有实现完成的今天如果想写一段同时支持前后台,支持AMD, CommonJS的代码要想下面这个样子。
;(function (root, factory, undef) {
if (typeof exports === "object") {
// CommonJS
module.exports = exports = factory(require("./core"), require("./cipher-core"));
}
else if (typeof define === "function" && define.amd) {
// AMD
define(["./core", "./cipher-core"], factory);
}
else {
// Global (browser)
factory(root.CryptoJS);
}
}(this, function (CryptoJS) { return CryptoJS.pad.Pkcs7; }));
总结
本文总结了RequireJS,CommonJS,AMD,ES6 import/export的前世今生,并且对每个部分给出了完整的代码样例,希望对大家有所帮助。
JavaScript代码模块化的正规方法的更多相关文章
- javascript代码模块化解决方案
我们用模块化的思想进行网页的编写是为了更好的管理我们的项目,模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能. 一.服务器和桌面环境中的Javascript代码模块化:CommonJS M ...
- C#执行Javascript代码的几种方法
一.开源项目 Javascript .NET 地址: http://javascriptdotnet.codeplex.com/ 它是Google Chrome V8引擎在.NET上的封装,功能完善, ...
- HTML文档插入JS代码的几种方法
在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间. 2.放置在由< script>标签的src属性指定的外部文件中 ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- alert一般用来调试客户端的javascript代码,以及更好的调试方法
alert一般用来调试客户端的javascript代码 调试利器--console.log 如今主流浏览器(Chrome,IE8及后续版本,FireFox,Opera等)都支持控制台功能. Chrom ...
- 编写高质量JavaScript代码的68个有效方法
简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版 ...
- js 的eval()方法 计算某个字符串,并执行其中的的 JavaScript 代码;
定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 Java ...
- javascript代码实用方法实现
javascript代码实用方法实现 针对现在大家平时开发中,都会写一些重复性的js处理代码,今天总结了几个比较常用的方法实现.获取get请求参数.去字符串空格. 1.获取get请求中的参数 ...
- 新书《编写可测试的JavaScript代码 》出版,感谢支持
本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代 ...
随机推荐
- 执行CSRF令牌所有形式使用POST方法
从而在并未授权的情况下执行在权限保护之下的操作,有很大的危害性. php CSRF Guardfunction csrfguard_generate_token($unique_form_name){ ...
- eclipse配置javah命令
1.找到javah命令所在的目录 我的为 /usr/bin/javah 2.打开eclipse 如图点击第二项 3.配置 如图 ${project_loc}/src -classpat ...
- ASP.NET MVC 多语言方案
前言: 好多年没写文章了,工作很忙,天天加班, 每天都相信不用多久,就会升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰,想想还有点小激动~~~~ 直到后来发生了邮箱事件,我竟然忘了给邮箱密 ...
- 【腾讯优测干货分享】Android 相机预览方向及其适配探索
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/583ba1df25d735cd2797004d 由于Android系统的开放策略 ...
- python自动化测试(4)-使用第三方python库技术实现
python自动化测试(4)-使用第三方python库技术实现 1 概述 关于测试的方法论,都是建立在之前的文章里面提到的观点: 功能测试不建议做自动化 接口测试性价比最高 接口测试可以做自动化 ...
- 探索C#之微型MapReduce
MapReduce近几年比较热的分布式计算编程模型,以C#为例简单介绍下MapReduce分布式计算. 阅读目录 背景 Map实现 Reduce实现 支持分布式 总结 背景 某平行世界程序猿小张接到B ...
- 用java PreparedStatement就不用担心sql注入了吗?
先感慨下,好久没写博客了,一是工作太忙,二是身体不太给力,好在终于查清病因了,趁着今天闲下来,迫不及待与读者交流,最后忠告一句:身体是活着的本钱! 言归正传,对java有了解的同学基本上都体验过JDB ...
- linux下使用adb连接android手机
一.新建文件 cat /etc/udev/rules.d/51-android.rules SUBSYSTEM==" 二.重启 udev sudo /etc/init.d/udev rest ...
- java.lang.IndexOutOfBoundsException at java.io.FileOutputStream.writeBytes(Native Method)
ss available : /usr/linkapp/data/linkapp/ddn_1440639847758_temp java.lang.IndexOutOfBoundsException ...
- android 获取屏幕宽度和高度
// 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480p ...