目录前言:1.概念2.模块化的好处3.引入多个script标签后出现的问题一、Commonjs二、AMD三、CMD四、es6模块化前言: 1.概念 将一个复杂的程序依据一
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="Jquery.js"></script>
<script src="module.js"></script>
</head>
<body>
<div>123</div>
</body>
<script>
myModule.foo();
myModule.bar();
console.log(myModule.data) ;
myModule.data = 'xxxx';
myModule.foo();
</script>
</html>
//module.js IIFE(匿名函数自调用)
;(function(window,$){
let data = "www.baidu.com";
function foo() {
console.log(`foo() ${data}`);
//这里需要使用jQuery库
$('body').CSS('background', 'red')
}
function bar() {
console.log(`bar() ${data}`);
otherFun();
}
function otherFun() {
console.log(`otherFun()`);
}
window.myModule = { foo, bar };
})(window, jQuery)
特点:
语法:
js module.exports = value
或者 js exports.xxx = value
js require('xxx')
如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径CommonJS
规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
require
命令用于加载模块文件。require命令的基本功能是,读入并执行一个javascript文件,然后返回该模块的exports对象。如果没有发现指定模块,会报错。
CommonJS
模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
使用require.js
<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
//定义一个没有依赖的module1模块
define('module1', () => {
let count = 0;
const add = () => ++ count;
const reset = () => count = 0;
const upperCase = string => string.toUpperCase()
return {
add,
reset,
upperCase
}
})
//定义一个有依赖的module2模块,依赖module1
define('module2',['module1'], (module1) => {
const showMsg = () => module1.upperCase('hello-amd');
return {
showMsg
}
})
<!-- 在html文件中使用模块 -->
<body>
<script>
require.config({
paths: {
module1: './modules/module1',
module2: './modules/module2'
}
})
require(['module1', 'module2'], (module1, module2) => {
console.log(module1.add()) // 1
console.log(module1.reset()) //0
console.log(module2.showMsg()) //HELLO-AMD
})
</script>
</body>
使用sea.js
<script src="Https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>
//定义模块module1
define((require, exports, module) => {
let string = 'I am a string';
const readString = () => 'module1 show() ' + string;
//向外暴露
exports.readString = readString;
})
//定义模块module2
define((require, exports, module) => {
exports.msg = "正是在下啊"
})
//定义模块module
define((require, exports, module) => {
//引入依赖模块(同步)
var module1 = require('./module1');
console.log(module1.readString()) // module1 show() I am a string
//引入依赖模块(异步)
require.async('./module2', md2 => {
console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊
})
})
<!-- html文件使用module -->
<body>
<script>
seajs.use('./modules/module')
</script>
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。
两个关键字 import和export
//mian.js
export default {
showMsg() {
console.log('hahahahahah')
}
}
export const msg = "正是花好月圆时!"
//index.js
import module1 from "./module1"; //对应export default
module1.showMsg()
import { msg } from './module1'; //对应export
console.log(msg)
到此这篇关于JavaScript 模块化详解的文章就介绍到这了,更多相关JavaScript 模块化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript 模块化详解
本文链接: https://www.lsjlt.com/news/161002.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0