JS模块化开发的价值
时间:2022-05-06
本文章向大家介绍JS模块化开发的价值,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
非模块化方式开发的痛苦
(1)命名冲突
起初,我们定义了一个通用功能的JS文件,例如 utils.js(其中有一个 each 函数),谁需要谁调用即可
但随着项目和团队越来越大,就会出现问题
小杨在自己的 a.js 中也定义了一个 each 函数,这时有人同时引用了 utils.js 和 a.js,冲突就出现了,小杨只好把自己的 each函数名改为别的,再通知别人改名了,之后,不同开发人员之间不断出现这类问题
后来,团队决定引入命名空间,对 utils.js 进行改造
var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {};
org.CoolSite.Utils.each = function (arr) {
// 实现代码
};
这时,为了调用一个简单的each函数,就要记住一长串的包名
(2)文件依赖
团队又写了一个工具文件,叫 dialog.js,其中需要使用 utils.js 其中的函数,在文档中明确指出使用 dialog.js时必须要先引入 utils.js
有一个 b.js,使用了 dialog.js,页面中就必须引入多个文件,并且顺序不能错
<script src="util.js"></script>
<script src="dialog.js"></script>
<script src="b.js"></script>
现在就很容易的出现了两个问题
1)开发人员常忘记引用被依赖的文件
2)要使用某个功能时,要引入多个其他文件,最后页面中的引用可能会非常多
模块化开发的好处
现在已经有了多个JS模块化开发规范和相应的具体实现,我们只要选择其中一种,按照约定来开发,就可以完全避免命名冲突和文件依赖的问题
只需关心当前模块本身的功能开发,需要其他模块的支持时,在模块内调用目标模块即可
模块化开发示例
CMD是比较常用的模块化规范,下面就使用CMD方式作为示例
目录结构
|-js
|--|-common
|-------|-utils.js
|--|-a.js
//------utils.js------
define(function(require, exports) {
// 对外提供 each 方法
exports.each = function() {...};
});
//------a.js------
define(function(require, exports) {
// 调用其他模块
var utils = require('common/utils');
utils.each();
// ...
// 对外提供自己的 each 方法
exports.each = function() {...};
});
可以看到,非常简单,CMD规定一个文件就是一个模块,其中有3个重要的关键字:
1)define
定义一个模块
2)require
用来调用其他模块
3)exports
用来暴露自己对外提供的接口
- 厚土Go学习笔记 | 32. Readers读取数据流
- GoStub框架二次开发实践
- 厚土Go学习笔记 | 31. 错误 通常函数会返回一个error值来判断是否出错
- 厚土Go学习笔记 | 30. Stringers的一个练习
- 黑客游戏| Owasp juice shop (一)
- 厚土Go学习笔记 | 29. 接口
- Golang中Interface类型详解
- 反序列化| 我欲修仙,法力无边。
- Go语言的网络编程简介
- golang基于redis lua封装的优先级去重队列
- 厚土Go学习笔记 | 28. go语言没有类 却可以在结构体或任意类型定义方法
- 41. select阻塞一个gorountine上的多个通讯操作 | 厚土Go学习笔记
- 40. range和channel的close | 厚土Go学习笔记
- 48. 访问MySql数据库增删改查和连接池及空字段处理 | 厚土Go学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法