首页  思维导图  详情



 



前端模块化开发分享

2022-10-13 10:08:07   1  举报





AI智能生成

前端模块化开发分享

前端模块化

前端

前端模块化开发

模板推荐

作者其他创作

大纲/内容

CMD&lt;br&gt;

实现&lt;br&gt;

浏览器端

sea.js

说明&nbsp;

整合了common.js 和 amd的特点

模块使用时再声明

模块的加载是异步的，模块使用时才会加载执行

基本语法

引入

同步

var fs = require(&apos;fs&apos;);

异步

require.async(&apos;./module3&apos;, function (m3) {&lt;br&gt;})

定义&amp;暴露模块

无依赖

define(function(require, exports, module){&lt;br&gt;&nbsp;exports.xxx = value&lt;br&gt;&nbsp;module.exports = value&lt;br&gt;})

有依赖

define(function(require, exports, module){&lt;br&gt;&nbsp;//引入依赖模块(同步)&lt;br&gt;&nbsp;var module2 = require(&apos;./module2&apos;)&lt;br&gt;&nbsp;//引入依赖模块(异步)&lt;br&gt;&nbsp;require.async(&apos;./module3&apos;, function (m3) {&lt;br&gt;&nbsp;})&lt;br&gt;&nbsp;//暴露模块&lt;br&gt;&nbsp;exports.xxx = value&lt;br&gt;})

es Modules

实现

浏览器端

使用Bable将es6转为es5

使用Browserify进行浏览器端编译

服务器端

正常使用

说明

是es6的模块引入方法，依赖需要提前声明好 import在顶层

基本语法

引入

import &apos;模块名&apos;

import a from &apos;模块名&apos;&nbsp; 将该模块引入为a

输出

export default 默认输出模块

export 输出模块

跟commonJs的区别

引入

common 运行时加载

因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成

es6 编译时输出接口

ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

输出

es6输出的是一个值的引用

ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

common 输出的是一个值的拷贝

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

AMD

实现

浏览器端

require.js

说明

依赖必须提前声明好

模块加载异步，指定回调函数

基本语法

引入

&lt;span style=&quot;font-size: inherit;&quot;&gt;require([&apos;module1&apos;, &apos;module2&apos;], function(m1, m2){&lt;br&gt;&lt;/span&gt;&nbsp; &nbsp;使用m1/m2&lt;br&gt;})

定义&amp;暴露模块

无依赖

define(function(){&lt;br&gt;&nbsp; &nbsp;return 模块&lt;br&gt;})

有依赖

define([&apos;module1&apos;, &apos;module2&apos;], function(m1, m2){&lt;br&gt;return 模块&lt;br&gt;})

commonJs

实现

服务器端

node

浏览器端

webpack

Browserify