BUI基础-CMD 组织模块

作者: 学术报告板 | 来源:发表于2019-11-20 16:25 被阅读0次

BUI基础-CMD 组织模块
BUI入门系列-Hello BUI !
CMD、AMD、CommonJS 规范
CMD
JavaScript如何让你的插件兼容AMD,CMD和原生JS
2019-10-29 初识gradle
AMD与CMD的区别
BUI基础-使用样式文件
BUI入门系列-Combine 模块
BUI基础-工具类

模块

什么是模块？在前端领域可以把模块认为是完成一个系统一部分功能的代码片段，我们往往把模块定义在一个文件内，同时也会合并模块一起加载。Javascript的模块间的依赖，默认方式是按照script标签的前后顺序进行的，但是这种依赖关系十分脆弱，而且需要手工维护。

模块之间存在依赖关系，所以执行一个模块前，必须加载并执行它所依赖的模块，同时我们也要避免循环依赖，所以想在前端领域使用模块我们必须搞清楚模块的定义，依赖和加载方式，目前比较流行的2种方式是CMD和 AMD

CMD的概念

模块概念

CMD（Common Module Definition）是seajs推广过程中模块定义规范化的产物，写法类似于Nodejs的模块定义方式差异在于：

NodeJS 里，模块文件里的 this === module.exports；SeaJS 里，this === window。
NodeJS 里，模块文件里的 return xx 会被忽略；SeaJS 里，return xx 等价 module.exports = xx。
NodeJS 里，require 是懒加载 + 懒执行的。在 SeaJS 里是提前加载好 + 懒执行。
SeaJS 里，require(id) 中的 id 必须是字符串直接量。NodeJS 里没这个限制。

创建模块

通过以下示例了解CMD中模块的创建

define('hello', ['bui/common'], function(require, exports, module) {
var BUI = require('bui/common');
// 模块代码
});

</pre>

模块名称: 用于加载模块时使用，可以为空，根据路径和文件名作为模块名称
依赖的模块 : 设置依赖的模块，可以为空，则按照模块内部使用require函数时确定依赖的模块（未指定模块依赖关系时，不能更改require参数名称）
回调函数：模块执行时执行的函数，在第一次被require前，函数内的代码不会执行。

加载模块

seajs.use('hello',function(Hello){
});

</pre>

没有全局性的require函数
回调函数执行前，hello模块必须加载并执行完毕
hello依赖的模块也必须加载、执行完毕

AMD的概念

定义

AMD（Asynchronous Module Definition）,是基于requireJS指定并推广开来的一种模块定义方式，AMD基本兼容CMD 定义模块的方式，但是回调函数中，不提供exports和modules对象，只提供return 的方式定义模块

使用define方法定义模块，通过回调函数（factory）生成模块
定义模块时指定模块依赖（也可以省略）
多次依赖一个模块，只加载一遍
传递依赖的模块的引用到factory函数
不需要合并模块时，不需要指定模块id

模块创建

//Calling define with module ID, dependency array, and factory function
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});

</pre>

模块加载

require('myModule',function(MyModule){
});

</pre>

AMD的模块加载使用全局函数require

Kissy的模块

模块的创建

Kissy的模块定义跟CMD和AMD有相同点，但是也有不同点，依赖模块写在最后面，factory里传入的是模块引用。

KISSY.add('myModule',function(dep1,dep2){
},{
requires : ['dep1', 'dep2']
});

</pre>

模块的加载

KISSY.use('myModule',function(S,MyModule){
});

</pre>

Kissy加载模块时，跟CMD，AMD最大的差异在于，factory函数的第一个参数是KISSY本身

BUI加载模块

BUI的模块定义按照CMD的写法，无论使用seajs还是Kissy作为Loader。

加载模块时，可以按照seajs的写法，也可以按照Kissy的写法，但是一般情况下按照BUI封装的写法，可以兼容seajs和Kissy

BUI.use('myModule',function(MyModule){
});

</pre>

下一步学习

BUI的基础内容到这里告一段落，你可以去看一下BUI提供的工具类，然后进入到BUI控件编写的学习中。

网友评论

BUI BUIlive使用手册

本文标题：BUI基础-CMD 组织模块

本文链接：https://www.haomeiwen.com/subject/dzgoictx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

BUI基础-CMD 组织模块

模块

CMD的概念

模块概念

创建模块

加载模块

AMD的概念

定义

模块创建

模块加载

Kissy的模块

模块的创建

模块的加载

BUI加载模块

下一步学习

相关文章