js模块化加载器实现

『壹』 jquery layer插件,拓展模块layer.ext.js如何正确加载

jquery layer插件,拓展模块layer.ext.js正确加载需要进行全局配置。

解决方法如下：

layer.config(options)- 初始化全局配置

这是一个可以重要也可以不重要的方法，重要的是，它的权利真的很大，尤其是在模块化加载layer时，你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。而说它不重要，是因为多数情况下，你会发现，你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。

如果您是采用seajs或者requirejs加载layer，你需要执行该方法来完成初始化的配置。

如果你是采用<script src="?a.js&layer.js">这种合并的方式引入layer，那么您需要在script标签上加一个自定义属性merge="true"。

layer.ready(path, callback)- 初始化就绪

由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，layer.ready()会是一个不错的帮手。它也可以做一些layer.config可以做的事，比如指向layer.js所在目录。但是如果你已经通过layer.config配置了path，你在使用layer.ready时，是不需要path的

『贰』 labjs，requirejs，sea.js 哪个最好用为什么

LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。
RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 javaScript 的模块化开发变得更简单自然。
模块加载器一般可降级为文件加载器用，因此使用 RequireJS 和 SeaJS，也可以达成 LABjs 的性能优化目的。
RequireJS 和 SeaJS 都是很不错的模块加载器，两者区别如下：
1. 两者定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端
2. 两者遵循的标准有差异。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Moles/1.1 和 Node Moles 规范。
3. 两者社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，而采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
4. 两者代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。
5. 两者对调试等的支持有差异。SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能，还可以实现自动 combo 等功能，非常方便便捷。RequireJS 无这方面的支持。
6. 两者的插件机制有差异。RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采取的插件机制则与 Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。
还有不少细节差异就不多说了。
总之，SeaJS 从 API 到实现，都比 RequireJS 更简洁优雅。如果说 RequireJS 是 Prototype 类库的话，则 SeaJS 是 jQuery 类库。
最后，向 RequireJS 致敬！RequireJS 和 SeaJS 是好兄弟，一起努力推广模块化开发思想，这才是最重要的。

『叁』 怎样提高前端工程师开发效率，都在这里

（一）地图

那是在将军面前最基本的技能之一，我们使用PS图象处理软件或烟花基本可以交付给我们的设计方案的设计师，但对提高切削效率你必须使用一些技巧，如PS行动中的使用来实现“一张图”功能。

（二）编写

对于编码部分，我们首先需要找到一个合适的IDE工具。建议不要使用记事本+或Dreamweaver。这些工具不再符合前端的趋势，也不能使自己优雅地敲打代码。萧边在这里推荐崇高的文本，主要是原子或webstrom，因为它们除了人机界面和支持语法高亮，还可以安装各种插件来扩展你的IDE工具，下面主要介绍几种小崇高文本提高插件的开发效率：

元素用于快速编写HTML。例如，进入UL >里后，按下TAB键可以生成一个UL标签包含一个李标签，其官方文件的HTTP：/ /文档。埃米特。IO /小抄/。

JS jsformat格式；一种样式属性csscomb；html-css-js美化可以我们的HTML、CSS、JS规范的关键，和JSON格式；sublimetmpl可以快速创建新的HTML、CSS、JS文件；器是用来调用本地调色板功能。这些工具在一定程度上是非常实用的，以提高我们的编码效率。

（三）前端自动化

谈到提高开发效率，我们不得不提到一些前端自动化工具。毕竟，前端自动化是当前和未来的发展趋势。它可以大大减少前端的不必要的工作量，这样我们就可以把重点放在前端本身。

在这里，我们可以使用NPM管理我们的项目文件；使用WebPACK包装和压缩我们的代码；使用Node.js建立本地服务器；使用的业力和茉莉来测试我们的前端代码。

使用前端自动化工具可以帮助我们处理许多琐碎的事情，比如一个按钮压缩代码、图片、一键合并JS、检测文件更新等等。

（四）前端模块化

前端模块化的实现，有利于维护项目代码，实现按需加载，有利于提高项目的长期开发效率。

6出来之前，我们应该说，前端代码本身没有实现模块的功能。我们不得不使用一些插件库来实现，如require.js，sea.js等等。随着6的普及，工具如require.js和sea.js不再是必要的。所以在6基础开发环境，我建议使用ES6模块功能实现前端模块化。

（五）前端组件化

前端组件的概念也是由来已久的。我们可以将代码分为不同的组件，以实现公共和方便的维护，这也提高了我们的开发效率。以下是在流行的前端框架Vue单文件组件的概念图：

『肆』 requirejs模块化编程怎么理解

一、Javascript模块化编程

目前，通行的Javascript模块规范共有两种：CommonJS和AMD。

1、commonjs

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程，这标志”Javascript模块化编程”正式诞生。

在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。

node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。

假定有一个数学模块math.js，就可以像下面这样加载。

var math = require('math');

然后，就可以调用模块提供的方法：

var math = require('math');

math.add(2,3); // 5

因为这个系列主要针对浏览器编程，不涉及node.js，所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了。

2、AMD

AMD是”Asynchronous Mole Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

模块定义
define(id?, dependencies?, factory);
其中：

id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象。

模块加载

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([mole], callback);

第一个参数[mole]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require(['math'], function (math) {
math.add(2, 3);
});

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。

二、requirejs模块化编程

require.js加载的模块，采用AMD(异步模块定义规范) 规范。也就是说，模块必须按照AMD的规定来写。

require.js的两个重要的特点：

1、实现js文件的异步加载，避免网页失去响应

2、管理模块之间的依赖性，便于代码的编写和维护

加载requirejs：

<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

main.js常见实例：

require.config({
paths: {
moleA: '',
moleB:'',
moleC:''
}
});

require(['moleA', 'moleB', 'moleC'], function (moleA, moleB, moleC){
// some code here

});

1、require.config

require.config用来配置一些参数，它将影响到requirejs库的一些行为。

require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。

这里配置了paths参数，使用模块名“jquery”，其实际文件路径jquery-1.7.2.js（后缀.js可以省略）。

我们知道jQuery从1.7后开始支持AMD规范，即如果jQuery作为一个AMD模块运行时，它的模块名是“jquery”。注意“jquery”是固定的，不能写“jQuery”或其它。

注：如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。

如果将jQuery应用在模块化开发时，其实可以不使用全局的，即可以不暴露出来。需要用到jQuery时使用require函数即可。

2、require()函数

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moleA', 'moleB',
'moleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。