JS基础之模块化

JS基础之模块化

JS模块化

模块化

JS DOM操作 代码规范管理的标准

  1. 不同模块间的管理
  2. 模块内部自组织 标准
  3. bundler (模块构建工具) ESNext TS -> ES5

前端发展

生态 ------------------ 诞生时间

Node.js -------------- 2009年

NPM(包管理器) ---- 2010年

requireJS(AMD) --- 2010年

seaJS(CMD) ------- 2011年

broswerify ----------- 2011年

webpack ------------ 2012年

grunt ----------------- 2012年

gulp ------------------ 2013年

react ----------------- 2013年

vue ------------------- 2014年

angular -------------- 2016年

redux ----------------- 2015年

vite -------------------- 2020年

snowpack ----------- 2020年

  1. 09年Nodejs出现
  2. 10年 npm 包管理器出现
  3. 10 年 requireJS amd async module definition 异步模块定义出现
  4. 11年 CommonJS 出现
  5. 11年 browserify 浏览器化
  6. webpack grunt gulp 构建工具,解决代码编码之后的标准化的产物
  7. 13 14年VDOM react vue
  8. 跨端
  9. vite snowpack truopack bun
    ...
  1. 对外:封装标准 ,组合
  2. 对内:私有化 scope 对外自定义接口方法

什么是模块?

  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起;
  • 块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信;

怎么定义模块化

思考:可以从哪方面出发?

闭包、自执行函数等

IIFE匿名函数自调用

匿名函数自调用(闭包)

  • 作用:数据私有化,外部只能通过暴露的方法操作
  • 编码:将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口

IIFE问题:

  • 依赖顺序问题
  • 代码可维护性问题
js 复制代码
//index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
	myModule.foo()
	myModule.bar()
	console.log(myModule.data)//undefined不能访问模块内部的数据
	myModule.data = 'xxxx'//不是修改的模块内部的data
	myModule.foo()//没有改变
</script>

//module.js文件
(function(window){
	let data = 'www.baidu.com';
	//操作数据的函数
	function foo (){
		//用于暴露的函数
		console.log(`foo is : ${data}`);
	}
	function bar(){
		//用于暴露有函数
		console.log(`bar is : ${data}`);
		otherFun();//内部调用
	}
	function otherFun(){
		//内部私有的函数
		console.log('otherFun()')
	}
	window.myModule = {foo,bar}//ES6写法
})(window);

最后得到的结果:

js 复制代码
foo is : www.baidu.com
bar is : www.baidu.com
otehrFun()
undefined
foo is : www.baidu.com

IIFE模式增强

这就是现代模块实现的基石:

引入JQuery库

js 复制代码
// module.js文件
(function(window, $) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
    $('body').css('background', 'red')
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar }
})(window, jQuery)

 // index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
  myModule.foo()
</script>

模块化的好处

  • 避免命名冲突(减少命名空间污染);
  • 更好的分离,按需加载;
  • 更高的复用性;
  • 高可维护性;

好啦这期我们就到这里啦,我们下期聊聊【模块化规范】

相关推荐
BillKu2 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL5 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
LZQqqqqo6 分钟前
C# 接口(interface 定义接口的关键字)
java·开发语言·c#
寒水馨13 分钟前
Java 9 新特性解析
java·开发语言·新特性·java9·jdk9
江城开朗的豌豆23 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~32 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
拓端研究室35 分钟前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
江城开朗的豌豆36 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue中key的妙用:为什么你的列表渲染总出bug?
前端·javascript·vue.js
Zz_waiting.1 小时前
Javaweb - 13 - AJAX
前端·javascript·ajax