前端模块化解决方案（前端模块化）

本文从以时间为轴从以下几个方面进行总结JS模块化。从无模块化 => IIFE => CJS => AMD => CMD => ES6 => webpack这几个阶段进行分析。

方式

<script src="jquery.js"></script><script src="main.js"></script><script src="dep1.js"></script>

此处写法文件拆分是最基础的模块化（第一步）

* 面试中的追问

script标签的参数：async & defer

<script src="jquery.js" async></script>

总结

作用域的把控

let count = 0;const increase = () => ++count;const reset = () => {     count = 0;}

利用函数的块级作用域

(() => {     let count = 0;     ...})//最基础的部分

实现一个最简单的模块

const iifeModule = (() => {     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;     }     console.log(count);     increase();})();

优化1：依赖其他模块的传参型

const iifeModule = ((dependencyModule1,dependencyModule2) => {     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;     }     console.log(count);     increase();     .https://maimai.cn//可以处理依赖中的方法})(dependencyModule1,dependencyModule2)

面试1：了解jquery或者其他很多开源框架的模块加载方案

将本身的方法暴露出去

const iifeModule = ((dependencyModule1,dependencyModule2) => {     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;     }     console.log(count);     increase();     .https://maimai.cn//可以处理依赖中的方法     return          increase,reset    }})(dependencyModule1,dependencyModule2)iifeModule.increase()

=> 揭示模式 revealing => 上层无需了解底层实现，仅关注抽象 => 框架

CJS （Commonjs）

node.js指定

特征：

main.js

const dependencyModule1 = require('https://maimai.cn/article/dependencyModule1')const dependencyModule2 = require('https://maimai.cn/article/dependencyModule2')let count = 0;const increase = () => ++count;const reset = () => {     count = 0;}console.log(count);increase();exports.increase = increase;exports.reset = reset;module.exports = {     increase, reset}

exe

const {increase, reset} = require(https://maimai.cn/article/main.js)

复合使用

(function(this.value,exports,require,module){     const dependencyModule1 = require('https://maimai.cn/article/dependencyModule1')     const dependencyModule2 = require('https://maimai.cn/article/dependencyModule2')}).call(this.value,exports,require,module)

追问：一些开源项目为何要把全局、指针以及框架本身作为参数

(function(window,$,undefined){     const _show = function(){         $("#app").val("hi zhuawa")     }     window.webShow = _show;})(window,jQuery)

阻断思路

优缺点

=> 异步依赖的处理

新增定义方式：

//define来定义模块define（id, [depends], callback）//require来进行加载reuqire([module],callback)

模块定义的地方

define('amdModule',[dependencyModule1,dependencyModule2],(dependencyModule1,dependencyModule2) => {     //业务逻辑     let count = 0;     const increase = () => ++count;     module.exports = {         increase    }})

引入的地方

require(['amdModule'],amdModule => {     amdModule.increase()})

面试题：如果在AMDModule中想兼容已有代码，怎么办？

define('amdModule',[],require => {     const dependencyModule1 = require('https://maimai.cn/article/dependencyModule1')     const dependencyModule2 = require('https://maimai.cn/article/dependencyModule2')     //业务逻辑     let count = 0;     const increase = () => ++count;     module.exports = {         increase    }})

面试题：手写兼容CJS&AMD

//判断的关键：     1. object还是function     2. exports ?     3. define(define('AMDModule'),[],(require,export,module) => {     const dependencyModule1 = require('https://maimai.cn/article/dependencyModule1')     const dependencyModule2 = require('https://maimai.cn/article/dependencyModule2')     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;     }     console.log(count);     export.increase = increase();})(     //目标：一次性区分CJS还是AMD     typeof module === 'object' && module.exports && typeof define !== function ? //CJS     factory => module.exports = factory(require,exports,module)     : //AMD     define)

优缺点

define('module',(require,exports,module) => {     let $ = require('jquery')     let dependencyModule1 = require('https://maimai.cn/article/dependencyModule1')})

优缺点

新增定义：

面试：

// ES11原生解决方案import('https://maimai.cn/article/esMModule.js').then(dynamicModule => {     dynamicModule.increase();})

优点：
通过一种统一各端的形态，整合了js模块化的方案
缺点：本质上还是运行时分析

<script src="main.js"></script><script>   // 给构建工具一个标识位   require.config(__FRAME_CONFIG__);</script><script>   require(['a', 'e'], () => {    // 业务逻辑   })</script>define('a', () => {     let b = require('b')     let c = require('c')})

完全体：webpack为核心的前端工程化 + mvvm框架的组件化 + 设计模式

到此这篇前端模块化解决方案（前端模块化）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：前端跨域的解决方案（前端跨域解决方案cors设置星号）

下一篇：前端工程化什么意思（前端工程化）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/55350.html

方式