javascript 模块加载器——coolie

1、javascript模块化

javascript 模块化是随着 javascript 的工作量逐步增加而产生的必然结果,近年来,javascript 模块化已经诞生了部分标准,也已经在下一代的 javascript 官方标准里提出了草案。

目前,主流的模块化规范是 AMD、CommonJS等,他们良好的规范,优雅的接口设计,合理的设计模式被很多前端开发工程师所接受,并且也有很多模块化加载器也支持他们,例如 requireJS、seaJS等。

2、javascript模块加载器

2.1、coolie 优势

coolie (苦力)是作者在近期书写的一款模块加载器,相比市面上的其他模块加载器,有以下优势:

  1. 轻量,良好的身材,仅支持高级现代浏览器,没有繁多的路径别名,和 NodeJS 一样,仅支持本地模块。

  2. 小巧,尽量少的接口(2个接口)和配置(2个配置)。

  3. 优雅,合理的接口和配置。

  4. 安全,尽量不侵入全局变量(2个,分别是 define 和 coolie),放心编程。

  5. 方便,配套的发布构建工具,为之量身打造。

  6. 省心,一键构建,无须人工干预,没有繁多和难以理解的构建配置。


2.2、本地开发环境

开发环境下,不显式模块ID和模块依赖,模块路径必须写完整:

模块入口:./index.js

// 开发环境不能写模块ID
define(function (require){
    // 模块依赖,不能省略文件后缀
    var num = require('./abc.js');
    var text = require('text!./def.txt');

    alert(num + text);
    // => "123这里是一串纯文本"
});

依赖模块:./abc.js

// 开发环境不能写模块ID
define(function (require, exports, module){
    // 模块导出
    module.exports = 123;
});

依赖文本:./def.txt

这里是一串纯文本

2.3、生产环境下:

发布之后,模块入口:./index.js?v=abc123

define('0', ['1', '2'], function (a){
    var b = a('1');
    var c = a('2');

    alert(b+c);
    // => "123这里是一串纯文本"
});
define('1', [], function (a, b, c){
    c.exports = 123;
});
define('2', [], function (a, b, c){
    c.exports = '这里是一串纯文本';
});

2.4、coolie配置

coolie.config({
    // * 入口模块的基准路径,也可以写绝对路径
    // `base`是相对于`coolie.js`所在的路径的,因此只要`coolie.js`路径不变,配置文件无论被哪个文件引用都没关系
    // 可选,默认为`coolie.js`所在的路径
    base: './',

    // * 模块文件版本,用于清除文件缓存,常用于发布到生产环境上,具体细节查看`coolie`发布工具
    // 比如入口文件是`index.js`,那么实际请求的路径为`/path/to/index.js?_=abc123`
    // 可选,默认为空
    version: 'abc123'
});

注意点

  1. base参数配置,与sea.js有些出入,请注意。

  2. base参数是相对于coolie.js所在路径的。

  3. base参数也是入口模块的相对路径。

  4. version版本号在开发环境下可以为空,构建时会自动更新版本号以便清除生产环境下的缓存。

2.5、coolie 使用

// 运行入口模块路径,注意这里没有回调
// 模块路径相对于`config.base`
coolie.use('./index.js');

注意点

  1. 必须手动调用.use()方法。

  2. 参数是入口模块路径,不是入口模块名称。

  3. 为了配置文件的重用性,当coolie.js所在的script指定了data-main属性,内联属性优先级最高,因此.use参数此时可以为空。 如:<script src="./coolie.js" data-main="./index2.js"></script>,此时入口模块就为相对于config.base./index2.js文件。 此种情况会在控制台输出提示。

3、模块构建工具

3.1、介绍

配套的模块构建工具 coolie(苦力),已在 npmjs 官方上线。作者之前也使用过 spm3 打包,感觉还是太复杂了,后来自制了 apb,再后来就索性自己写了一整套东西,包括模块加载器和模块构建工具。尽量保持它们的良好身材,只做它们擅长和分内的事情。

3.2、优势

相比其他构建工具,他有以下优势:

  1. 优雅,大众化和易理解的API。

  2. 易用,全部自动生成配置文件,每一步都有详细说明。

  3. 安全,不修改任何源文件。

  4. 极致,全部模块,压缩所有可压缩的内容,包括模块ID、模块依赖路径、局部变量等。

3.3、特点

更多API说明,请移步 github 项目,链接如下。

3、链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值