博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularJS1笔记-(20)-模块化加载机制seajs
阅读量:5973 次
发布时间:2019-06-19

本文共 1599 字,大约阅读时间需要 5 分钟。

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

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

html:

    
seajs体验

  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中做选择。

 

转载于:https://www.cnblogs.com/yk123/p/7053917.html

你可能感兴趣的文章
ORA-02266: 表中的唯一/主键被启用的外键引用
查看>>
day-6 and day-7:面向对象
查看>>
CSU Double Shortest Paths 湖南省第十届省赛
查看>>
webgl像机世界
查看>>
php正则怎么使用(最全最细致)
查看>>
javascript数学运算符
查看>>
LC.155. Min Stack(非优化,两个stack 同步 + -)
查看>>
交互设计[3]--点石成金
查看>>
SCCM TP4部署Office2013
查看>>
SVN: bdb: BDB1538 Program version 5.3 doesn't match environment version 4.7
查看>>
jsp内置对象作业3-application用户注册
查看>>
redis主从配置<转>
查看>>
bootloader功能介绍/时钟初始化设置/串口工作原理/内存工作原理/NandFlash工作原理...
查看>>
Web应用工作原理、动态网页技术
查看>>
EXCEL工作表保护密码破解 宏撤销保护图文教程
查看>>
Catalan数(卡特兰数)
查看>>
python 数据库中文乱码 Excel
查看>>
利用console控制台调试php代码
查看>>
递归算法,如何把list中父子类对象递归成树
查看>>
hdu 1050 (preinitilization or postcleansing, std::fill) ...
查看>>