JavaScript模块化

Stella981
• 阅读 779

前言:模块化开发需求

在JS早期,使用script标签引入JS,会造成以下问题:

  1. 加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长。
  2. 容易污染全局变量。
  3. js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。
  4. 引入的JS文件过多,不美观,且不易于管理。

一、CommonJS规范

CommonJS Modules/1.0规范,服务器端规范。

Node.js推广使用。该规范的核心是:允许模块使用require方法来同步加载所依赖的其他模块,然后通过exports或module.exports导出需要暴露的接口。

特点:

  1. 一个模块是一个文件

  2. 使用module.exports或exports导出模块

        // module.js
        exports.add = (a, b) => a+b
    
        module.exports = {
          add: (a, b) => a + b
        }
    
  3. 使用require加载模块

        a. require命令第一次加载模块时,执行整个脚本,在内存中生成对象
        b. 多次执行require命令再次加载该模块时,不会再执行该脚本,直接从缓存中取值
        c. CommonJS加载模块是同步加载模块
    

Tips:

  1. 为什么CommonJS规范不适合作为浏览器的规范

        由于CommonJS是同步加模块,在服务端加载模块时都是从本地硬盘中加载,读取速度很快。但是在浏览器端加载模块时,需要请求服务器端,涉及网速、代理的问题,一旦等待时间过长,浏览器会处于“假死”状态。
    

二、ADM规范

AMD(Asynchronous Module Definition)异步模块定义,客户端规范。 采用异步方式加载模块,模块加载不影响它后面语句的代执行。

AMD是require.js在推广使用过程中对模块定义规范化的产物。

在使用时,需引入require.js

特点

  1. 使用define()定义模块

        /**
         * @param id 模块名称,如果为空,模块的名字默认为模块加载器请求的指定脚本名
         * @param dependencies 模块依赖
         * @param factory 工场函数,模块初始化执行的函数或对象
         */
        define(id? dependencies? factory)
    
  2. 使用require加载模块

        require([module], callback)
    

    AMD是依赖前置模块

三、CMD规范

CMD(Common Module Definition)通用模块定义,异步加载模块。

CMD是sea.js在推广过程中对模块定义的规范化产物。

在使用时,需引入sea.js

特点:

  1. 使用define()定义模块,使用require()加载模块

        define(function (require, exports, module) {
            let a = require('a')
            let b = require('b')
            exports.eat = a.eat
            exports.run = b.run
        })
    

    CMD模块加载是推崇就近依赖的,需要到某个模块时再进行require加载

  2. 使用seajs.use加载使用模块

        seajs.use(id, callback?)
    

四、UMD规范

UMD(Universal Module Definition)通用模块定义,为了兼容AMD、CMD和无模块化开发规范

/**
 * UMD-Universal Module Definition 通用模块定义
 * */
 (function (root, factory) {
     // 判断是否是AMD/CMD
     if (typeof define === 'function') {
         define([], factory)
     } else if (typeof exports === 'object') {
         // Node CommonJS规范
         module.exports = factory()
     } else {
         // 浏览器环境
         root.someAttr = factory
     }
 })(this, function () {
     let add = function (a, b) {
         return a + b
     }
     return {
         add,
         module: 'UMD'
     }
 })

五、ES6模块

ES6通过imort和export实现模块的输入与输出,import命令用于输入其他模块提供的功能,export命令用于规定模块对外的接口。

特点:

  1. 使用export导出模块

        // test.js
        export let module = 'ES6 Module'
        export let hello = function () {}
        let demo = function () {}
        // 默认导出
        export default demo
    
  2. 使用import导入模块

        // 导入默认模块
        import demo from './test.js'
    
        // 导入指定模块
        import { hello, module } from './test'
    
        // 导入指定模块,并重命名
        import { hello as hi, module } from './test.js'
    
        // 导入全部模块,并重命名
        import * as test from './test.js'
    

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞收藏呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。 胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
晴空闲云 晴空闲云
3年前
script使用integrity属性进行安全验证
script标签引入文件在html中,script标签可以通过src属性引入一个js文件,引入的js文件可以是本地的,也可以是远程的。1.引入本地文件开发环境一般多引入本地js文件。html2.引入远程文件部署到线上后,一般会分发到cdn,需要引入远程文件,形如:html只是引入远程文件存在一个问题,如果对应的文件被篡改了,那么可能会对用户造成影响。
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
JavaScript模块化开发
1:发展历史早期的Javascript是作为浏览器的脚本语言,使用<script标签直接引入,没有所谓的模块化。也就是说如果我们需要一个js文件,我们就加一个<script标签,把需要的js引入进来。这种方式的特点在于:简单粗暴。但是当项目越来越大,依赖越来越多时可能就会出现问题,比如逻辑越来越混乱,页面也越复杂,然后可维护性就变
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这