• 模块化


    CommonJS

    默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染。

    browserify

    http://browserify.org/


    浏览器端的打包工具,和 webpack 类似

    打包后的bundle.js也是一个封闭的模块。在 index.html 中通过 script 标签引入后,也无法访问里面的变量
    如果需要,可以在模块中用 window.变量的方式将变量挂载到全局。

    导入导出方式

    // exports带s
    require();
    module.exports = value;
    module.exports.a = b;
    exports.a = b;
    

    AMD

    模块的加载是异步的

    定义一个只是对象的模块

    // moduleA.js
    define({
        name: "djh",
        nickname: "flyerya",
    });
    
    // app.js
    require(["moduleA"], function (obj) {
        //obj 就是 {name:'djh',nickname:'flyerya'}
    });
    

    定义没有依赖的模块

    define(function () {
        // 暴露模块
        return xx;
    });
    

    定义有依赖的模块

    define(["moduleA", "moduleB"], function (A, B) {
        // 暴露模块
        return xx;
    });
    

    ES6

    单个暴露

    export const a = "这是a";
    export const b = "这是b";
    export const c = "这是c";
    
    import { a, b, c } form ".js";
    

    export 没有 s,接受必须以{}接收

    统一暴露

    const a = "这是a";
    const b = "这是b";
    const c = "这是c";
    export { a, b, c };
    
    import { a, b, c } form ".js";
    

    export 没有 s,接受必须以{}接收

    默认暴露

    export default value;
    import value from ".js";
    

    只能默认暴露一次,多了会报错,直接接收暴露变量

  • 相关阅读:
    MVC之Ajax异步操作
    MVCHtmlHelper使用
    Xamarin.Forms初始
    .NET CORE2.0后台管理系统(一)配置API
    DDD领域驱动之干货(四)补充篇!
    基于官方驱动封装mongodb
    webApi签名验证
    在.Net下使用redis基于StackExchange.Redis
    DDD领域驱动之干货(三)完结篇!
    DDD领域驱动之干货(二)
  • 原文地址:https://www.cnblogs.com/flyerya/p/13955821.html
Copyright © 2020-2023  润新知