• 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>
    
  • 相关阅读:
    基于SAAJ的客户端
    SOAP消息的结构
    服务端的思考
    最简单的Web Service实现
    PLSQL的注释技巧
    复杂分支图示
    Tomcat常见错误
    maven常见错误
    SpringMvc参数传递中乱码问题
    springmvc常遇到的错误
  • 原文地址:https://www.cnblogs.com/ltfxy/p/15044997.html
Copyright © 2020-2023  润新知