前端模块化开发分享
2022-10-13 10:08:07 1 举报AI智能生成
前端模块化开发分享
作者其他创作
大纲/内容
CMD<br>
实现<br>
浏览器端
sea.js
说明
整合了common.js 和 amd的特点
模块使用时再声明
模块的加载是异步的，模块使用时才会加载执行
基本语法
引入
同步
var fs = require('fs');
异步
require.async('./module3', function (m3) {<br>})
定义&暴露模块
无依赖
define(function(require, exports, module){<br> exports.xxx = value<br> module.exports = value<br>})
有依赖
define(function(require, exports, module){<br> //引入依赖模块(同步)<br> var module2 = require('./module2')<br> //引入依赖模块(异步)<br> require.async('./module3', function (m3) {<br> })<br> //暴露模块<br> exports.xxx = value<br>})
es Modules
实现
浏览器端
使用Bable将es6转为es5
使用Browserify进行浏览器端编译
服务器端
正常使用
说明
是es6的模块引入方法，依赖需要提前声明好 import在顶层
基本语法
引入
import '模块名'
import a from '模块名' 将该模块引入为a
输出
export default 默认输出模块
export 输出模块
跟commonJs的区别
引入
common 运行时加载
因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成
es6 编译时输出接口
ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
输出
es6输出的是一个值的引用
ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
common 输出的是一个值的拷贝
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
AMD
实现
浏览器端
require.js
说明
依赖必须提前声明好
模块加载异步，指定回调函数
基本语法
引入
<span style="font-size: inherit;">require(['module1', 'module2'], function(m1, m2){<br></span> 使用m1/m2<br>})
定义&暴露模块
无依赖
define(function(){<br> return 模块<br>})
有依赖
define(['module1', 'module2'], function(m1, m2){<br>return 模块<br>})
commonJs
实现
服务器端
node
浏览器端
webpack
Browserify
说明
模块加载同步，即资源加载完再执行
每个文件都可以是一个模块
服务器端
模块加载是运行时同步加载
浏览器端
模块加载是提前编译打包处理
基本语法
引入
第三方模块
var fs = require('fs');
自定义模块
var fs1 = require('./fs');
模块引入说明
读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错
输出
module.exports = 模块或者模块对象集合
exports.value = 模块名
输出说明
module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口
0 条评论
下一页
