• js模块化 cmd规范


    1 关于cmd

    cmd规范用于浏览器端,在cmd中模块的加载是异步的,模块代码在使用时才会执行
    Sea.js实现了cmd规范
    官网: http://seajs.org/
    github : https://github.com/seajs/seajs

    使用define+module.exports或exports来暴露模块
    使用require来引入模块

    2 暴露模块

    和amd不同的时,cmd规范的依赖引入define的数组形参上,而是可以在回调函数中任意地方引入

    2.1 暴露没有依赖的模块

    // 定义没有依赖的模块
    // module1.js
    define(function(require,exports,module){
        console.log('module1 loading')
        function showModule(){
            console.log('module:module1')
        }
        exports.showModule = showModule
    })
    
    // module2.js
    define(function (require, exports, module) {
        console.log('module2 loading')
        
        module.exports = {
            showModule: () => {
                console.log('module:module2')
            }
        }
    })
    

    2.2 暴露有依赖的模块 异步引入依赖

    和amd不一样,依赖不再define形参上声明,但需要在回调函数中引入

    // 定义有依赖的模块
    define(function (require, exports, module) {
        let showModulesArr = []
        
        // 异步导入模块
        let module1 = require.async('./module1', (m1) => {
            showModulesArr.push(module1.showModule)
        })
        let module2 = require('./module2')
    
        let data = "module3"
        console.log(data + ' loading')
    
        function showModule() {
            console.log("module:module3")
        }
        showModulesArr.push(module2.showModule, showModule)
        Array.prototype.forEach.call(showModulesArr,(v)=>console.log(v)) 
        console.log(showModulesArr.length)// 2
        
        exports.showModulesArr = showModulesArr
    })
    

    3 使用sea.js

    定义入口文件main.js

    define(function(require,exports,module){
        let showModulesArr = require('./module/module3')
        Array.prototype.forEach.call(showModulesArr,(fn)=>fn())
    })
    

    在html文件中引入sea.js,拿到全局seajs属性,使用seajs.use执行入口文件代码

    <!-- 导入sea.js 全局注入seajs属性 -->
    <script src="../../lib/sea.js"></script>
    <script>
        // 执行入口文件
        seajs.use('./main.js')
    </script>
    
  • 相关阅读:
    POJ-1035 Spell checker---字符串处理
    hdu-3572 Task Schedule---最大流判断满流+dinic算法
    BZOJ4826: [Hnoi2017]影魔
    BZOJ4825: [Hnoi2017]单旋
    BZOJ3504: [Cqoi2014]危桥
    BZOJ4407: 于神之怒加强版
    BZOJ2818: Gcd
    BZOJ4542: [Hnoi2016]大数
    BZOJ4540: [Hnoi2016]序列
    BZOJ4537: [Hnoi2016]最小公倍数
  • 原文地址:https://www.cnblogs.com/ltfxy/p/15044997.html
Copyright © 2020-2023  润新知