angularJS1笔记-(20)-模块化加载机制seajs

发布时间:2017-7-1 11:36:01编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"angularJS1笔记-(20)-模块化加载机制seajs ",主要涉及到angularJS1笔记-(20)-模块化加载机制seajs 方面的内容,对于angularJS1笔记-(20)-模块化加载机制seajs 感兴趣的同学可以参考一下。

SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>seajs体验</title>    <script src="../../node_modules/seajs/dist/sea.js"></script>    <script>        //在seajs中模块的引用必须要用完整的相对路径或者是从根目录开始写完整        seajs.use('./calculator.js',function (calculator) {            console.log(calculator.add(1,3));            console.log(calculator.subtract(4,8));        })    </script></head><body></body></html>

  js:

//自定义一个模块 遵循seajs规范define(function (require, exports, module) {    //此处是模块的私有空间    function add(a,b) {        return parseFloat(a) + parseFloat(b);    }    function subtract(a,b) {        return parseFloat(a)-parseFloat(b);    }    //暴露模块的公共成员    exports.add = add;    exports.subtract = subtract;});

 这里通过use方法的方式引入模块,我们还可以通过require的方式引入模块,一般是js和js之间的调用,这种比较常用。

convertor.js:

define(function (require,exports,module) {    //公开一些转换逻辑    exports.convertToNumber = function (input) {        return parseFloat(input);    }})

  calculator.js:

define(function (require, exports, module) {    var convertor = require('./convertor.js');//此处是同步加载方式 如果用异步需要写成 require.async('',function(){})这个是没有返回值的加载完成后会执行回调函数    //此处是模块的私有空间    function add(a,b) {        return convertor.convertToNumber(a) + convertor.convertToNumber(b);    }    function subtract(a,b) {        return convertor.convertToNumber(a)-convertor.convertToNumber(b);    }    //暴露模块的公共成员    exports.add = add;    exports.subtract = subtract;});

  这里有个问题,如果exports.xxx = xxx;这样的方式暴露公共成员的话其实是都挂载在module下的,如果换成module.exports = XXX;那么就会只暴露出这一个成员变量出去.最终到处的以他为准。此外还可以使用return的方式暴露成员,return的优先级别最高。一般来说我们不用return,而是在exports.xxx和module.exports=xxx中做选择。


上一篇:微服务-十二要素
下一篇:webpack入门(四)——webpack loader 和plugin

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款