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

时间 2019-11-19

标签 angularjs1 angularjs 笔记模块化加载机制 seajs 栏目 AngularJS 繁體版

原文原文链接

SeaJS是一个遵循CMD规范的JavaScript模块加载框架，能够实现JavaScript的模块化开发及加载机制。html

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

html:node

<!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中作选择。async