阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Javascript 为什么要使⽤模块化?都有哪⼏种⽅式可以实现模块化,各有什么特点?

      问题

      Javascript 为什么要使⽤模块化?都有哪⼏种⽅式可以实现模块化,各有什么特点?

      答案

      使⽤⼀个技术肯定是有原因的,那么使⽤模块化可以给我们带来以下好处

      • 解决命名冲突
      • 提供复⽤性
      • 提⾼代码可维护性

      ⽴即执⾏函数

      在早期,使⽤⽴即执⾏函数实现模块化是常⻅的⼿段,通过函数作⽤域解决了命名冲突、污染全局作⽤域的问题

      (function(globalVariable){
          globalVariable.test = function() {}
          // ... 声明各种变量、函数都不会污染全局作⽤域
      })(globalVariable)
      

      AMD 和 CMD

      鉴于⽬前这两种实现⽅式已经很少⻅到,所以不再对具体特性细聊,只需要了解这两者是如何使⽤的。

      // AMD
      define(['./a', './b'], function(a, b) {
          // 加载模块完毕可以使⽤
          a.do()
          b.do()
      })
      // CMD
      define(function(require, exports, module) {
          // 加载模块
          // 可以把 require 写在函数体的任意地⽅实现延迟加载
          var a = require('./a')
          a.doSomething()
      })
      

      CommonJS

      CommonJS 最早是 Node 在使⽤,⽬前也仍然⼴泛使⽤,⽐如在 Webpack中你就能⻅到它,当然⽬前在 Node 中的模块管理已经和 CommonJS 有⼀些区别了

      // a.js
      module.exports = {
          a: 1
      }
      // or
      exports.a = 1
      // b.js
      var module = require('./a.js')
      module.a // -> log 1
      ar module = require('./a.js')
      module.a
      // 这⾥其实就是包装了⼀层⽴即执⾏函数,这样就不会污染全局变量了,
      // 重要的是 module 这⾥,module 是 Node 独有的⼀个变量
      module.exports = {
          a: 1
      }
      // module 基本实现
      var module = {
          id: 'xxxx', // 我总得知道怎么去找到他吧
          exports: {} // exports 就是个空对象
      }
      // 这个是为什么 exports 和 module.exports ⽤法相似的原因
      var exports = module.exports
      var load = function (module) {
          // 导出的东⻄
          var a = 1
          module.exports = a
          return module.exports
      };
      // 然后当我 require 的时候去找到独特的
      // id,然后将要使⽤的东⻄⽤⽴即执⾏函数包装下,over
      

      另外虽然 exports 和 module.exports ⽤法相似,但是不能对 exports 直接赋值。因为 var exports = module.exports 这句代码表明了 exports 和 module.exports 享有相同地址,通过改变对象的属性值会对 两者都起效,但是如果直接对 exports 赋值就会导致两者不再指向同⼀个内 存地址,修改并不会对 module.exports 起效

      ES Module

      ES Module 是原⽣实现的模块化⽅案,与 CommonJS 有以下⼏个区别

      1. CommonJS ⽀持动态导⼊,也就是 require(${path}/xx.js) ,后者⽬前不⽀持,但是 已有提案

      2. CommonJS 是同步导⼊,因为⽤于服务端,⽂件都在本地,同步导⼊即使卡住主线程影响 也不⼤。⽽后者是异步导⼊,因为⽤于浏览器,需要下载⽂件,如果也采⽤同步导⼊会对渲染有很⼤影响

      3. CommonJS 在导出时都是值拷⻉,就算导出的值变了,导⼊的值也不会改变,所以如果想 更新值,必须重新导⼊⼀次。但是 ES Module 采⽤实时绑定的⽅式,导⼊导出的值都指 向同⼀个内存地址,所以导⼊值会跟随导出值变化

      4. ES Module 会编译成 require/exports 来执⾏的

      // 引⼊模块 API
      import XXX from './a.js'
      import { XXX } from './a.js'
      // 导出模块 API
      export function a() {}
      export default function() {}
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录