Skip to main content

Javascript教程第十五章:模块化编程--工程化的重要一步

Javascript教程第十五章:模块化编程--工程化的重要一步

类的内部操作实际上就是原型操作 类语法糖本质上就是上面提到的构造函数,constructor是函数的特殊值,方法会自动添加到构造函数的原型当中

一.模块化编程

1.开发一个模块管理引擎

let myModule = (function(){
//定义容器存储模块
const moduleList = {};
function define(name,modules,action){
//定义模块依赖功能
modules.map((m,i) => {
modules[i] = moduleList[m]
})

moduleList[name] = action.apply(null,modules)

}
return {define}
})()
myModule.define("hd",[],function(){
return {
first(arry){
return array[0]
},
max(array,key){
return array.sort((a,b) => (b[key] - a[key]))[0];
}
}
})
myModule.define("lesson",["hd"],function(hd){
let data = [
{name : "js",price : 99},
{name : "css", price : 108}
]
console.log(hd.max(data,"price"));
})

2.模块的基本使用

<script type="module">
import {Tools} from "./myUser.js"
console.log(Tools);
</script>

3.模块延迟解析和严格模式

模块是默认最后加载的,并且默认在严格模式下

4.模块预解析的必要性

模块只会在第一次导入的时候进行调用,预解析一次,避免当多个模块导入的时候来重复操作该模块的数据或者功能

5.按需动态加载模块

使用场景:当我们点击"继续加载"时向列表追加十篇文章,或者点击提交时导入模块