JavaScript学习Day33笔记

最新推荐文章于 2024-06-04 14:04:24 发布

怒锤狗男人

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量139

点赞数

分类专栏：二阶段文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_57479061/article/details/118854544

版权

二阶段专栏收录该内容

33 篇文章 1 订阅

订阅专栏

模块化编程

一、什么是模块化

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。
块的内部数据与实现都是私有的，只是向外部暴露一些**接口（方法）**与外部其它模块通信。

二、模块化的好处

避免命名冲突（减少命名空间污染）。
更好的分离，按需加载。
更高的复用性。
高可维护性。

三、CommonJS规范

// 暴露模块
module.exprots = value
module.exports.xxx = value
// 引入第三方模块
let example = require('第三方模块名')
// 引入自定义模块
let example = require('自定义模块文件路径')
// 使用引入模块中的数据
console.log(example.xxx)

特点

模块可以多次加载，但是只会在第一次加载时运行一次，运行结果会被缓存，之后再加载，就直接读取缓存结果。
想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其再代码中出现的顺序。
在服务器端，模块的加载时运行时同步加载；在浏览器端，模块需要提前编译打包处理。

四、AMD规范

// 定义没有依赖的模块 
define(function(){
	return 模块
})
// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){
    return 模块
})
// 引入使用模块
require(['module1','module2'],function(m1,m2){
    使用m1/m2
})

RequireJS

RequireJS是一个工具库，主要用于客户端的模块管理

官网下载require.js并引入http://www.requirejs.cn/
将require.js导入项目：js/libs/require.js

创建项目结构

|-js
  |-libs
    |-require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

定义require.js的模块代码

<!DOCTYPE html>
<html>
	<head>
        <title>Modular Demo</title>
    </head>
    <body>
        <!-- 引入require.js并指定js主文件的入口 -->
        <script data-main="js/main" src="js/libs/require.js"></script>
    </body>
</html>

项目中引入

// alerter.js文件 定义有依赖的模块
define(['dataService','jQuery'],function(dataService,$){
    let name = 'Tom'
    function showMsg() {
        alert(dataService.getMsg() + ',' + name)
    }
    $('body').css('background','green')
    // 暴露模块
    return {showMsg}
})
// main.js文件 引入使用模块
(function(){
	require.config({
        baseUrl:'js/' //基本路径，出发点在根目录下
        paths:{
        	// 映射：模块标识名：路径
        	// 自定义模块
        	alerts:'./modules/alerter', // 此处不能写成alerter.js,会报错
        	dataService:'./modules/dataService',
        	// 第三方模块
        	jquery:'./libs/jquery-1.10.1' // 此处不能写成jQuery,会报错
    }
    })
    require(['alerter'],function(alerter){
        alerter.showMsg()
    })
}())

五、CMD

CMD规范专门用于浏览器端，模块的加载时异步的，模块使用时才会加载执行。

// 定义没有依赖的模块
difine(function(require,exports,module){
    module.exports = value
})
// 定义有依赖的模块
define(function(require,exports,module){
    // 引入依赖模块（同步）
    var module2 = require('./module2')
    // 引入依赖模块（异步）
    require.async('./module3',function(m3){ })
    // 暴露模块
    module.exports = value
})
// 引入使用模块
define(function(require){
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})

六、ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

// 定义模块 math.js文件
var basicNum = 0;
var add = function(a,b){
    return a + b;
}
export { basicNum,add };
// 引用模块
import { basicNum,add } from './math';
function test(ele){
    ele.textContent = add(99 + basicNum);
}

// 用export default命令，指定模块的默认输出
// export-default.js文件
export default function() {
    console.log('foo')
}
// import-default.js 引入模块
import customName from './export-default';
customName();  // 'foo'
// 模块默认输出，其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

七、总结

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。
AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。
CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在 Node.js 中运行，不过需要依赖 SPM 打包，模块的加载逻辑偏重。
ES6 在语言标准层面上，实现了模块功能，而且实现的相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

怒锤狗男人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript学习Day33笔记

模块化编程一、什么是模块化将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。块的内部数据与实现都是私有的，只是向外部暴露一些**接口（方法）**与外部其它模块通信。二、模块化的好处避免命名冲突（减少命名空间污染）。更好的分离，按需加载。更高的复用性。高可维护性。三、CommonJS规范// 暴露模块module.exprots = valuemodule.exports.xxx = value// 引入第三方模块let example = re
复制链接

扫一扫