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