• JS里的模块化


    定义

    模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

    规范

    • AMD(依赖前置)
    • CMD(依赖就近)
    • CommonJS
    • ES6的模块化

    AMD规范(异步模块定义)

    AMD依赖前置,即在定义模块的时候就要声明其依赖的模块使用此规范的代表有requireJS。

    requireJS定义了一个函数 define,它是全局变量,用来定义模块.

    define(id?, dependencies?, factory)

    • id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
    • dependencies:是一个当前模块依赖的模块名称数组
    • factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
    • 在页面上使用require函数加载模块

    require([dependencies], function(){})

    • 第一个参数是一个数组,表示所依赖的模块
    • 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

    CMD规范(通用模块定义)

    CMD依赖就近,即只有在用到某个模块的时候再去require,使用此规范的代表有seaJS。

    Sea.js 推崇一个模块一个文件,遵循统一的写法。

    define(id?, deps?, factory)

    factory是一个函数,有三个参数,function(require, exports, module)

    • require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口:require(id)
    • exports 是一个对象,用来向外提供模块接口
    • module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

    CommonJS

    NodeJS就采用了CommonJS。

    //模块中使用module.export导出
    //使用则使用require导入

    ES6的模块化

    ES6提供的模块化

    // 导入用import
    // 导出用export

    import和require区别

    相同点:

    作用和行为上基本一致,都是以阻塞的方式载入模块

    区别:

     

    require

    import

    加载

    运行时加载(即动态加载)

    在编译时加载(即静态加载)

    导入

    导入整个模块对象,不能仅导入部分内容

    可以导入模块中的所有导出内容或者部分导出内容

    导出

    module.export 之后,导出的值就不能再变化(输出值的拷贝)

    export之后导出的值可以变化(输出值的映射)

     

     

    书写位置

    可以写在代码任何地方执行比如if判断当中

    必须写在文件的顶部

    性能

    性能较低,因为require是在运行时才引入模块并且还赋值给某个变量

    性能较高,因为import只需要依据import中的接口在编译时引入指定模块所以性能稍高

     值的拷贝和值的映射示例:

    var a = 6
    export default {a}
    a = 7  //在es6中的export可以
    var a = 6
    module.export = a
    a = 7   //在common.js中,这样是错误的

    import()动态导入

    webpack实际上会将ES导入转换为CommonJS规范

  • 相关阅读:
    <置顶>Eclipse和myeclipse常用快捷键-操作-设置
    Eclipse : Loading descriptor for ...错误解决
    ORA-00937: 不是单组分组函数
    An error has occurred,See error log for more details 错误解决办法
    [Error Code: 942, SQL State: 42000] ORA-00942: 表或视图不存在
    ORA-00001: 违反唯一约束条件
    eclipse 出现user operation is waiting
    [空格][空白][特殊]字符/文字
    powerdesigner16.5安装教程及破解步骤
    mybatis遇到日期类型数据时String到date的转化
  • 原文地址:https://www.cnblogs.com/suihang/p/13664957.html
Copyright © 2020-2023  润新知