模块化

模块化是一种将复杂程序分解为独立块的技术,通过暴露接口进行通信,以降低复杂度、提高解耦性和便于维护。本文介绍了模块化的演变历程,包括全局function、namespace、IIFE模式以及CommonJS、AMD、CMD和ES6模块规范。每个规范都有其特点和应用场景,如CommonJS适合服务器端,AMD和CMD用于浏览器端的异步加载,而ES6模块需要编译打包。
摘要由CSDN通过智能技术生成

1理解:
什么是模块/模块化?
将一个复杂的程序依据一定的规范封装成几个块,并组合在一起
块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信
为什么要模块化?
降低复杂度
提高解耦性
部署方便
模块化的好处:
避免命名冲突
更好的分离,按需加载
更高复用性
更好维护
页面引入加载script
问题:
请求过多
依赖模糊
难以维护
2模块进化史
全局function模式 //污染全局
namespace模式 //不安全
IIFE模式
IIFE模式增强
load script
3

模块化规范

1.CommonJS
规范:
说明:
http://wiki.commonjs.org/wiki/Modules/1.1
每个文件都可当作一个模块
在服务器端:模块的加载是运行时同步加载的
在浏览器端:模块需要提前编译打包处理
基本语法:
暴露模块:
module.exports = value
exports.xxx = value
问题:暴露的模块到底是什么?
exports对象 (其实,module.exports原本就是一个空的对象。)
引入模块
require(xxx) //第三方模块:xxx为包名;自定义模块:xxx为模块文件路径
实现:
服务器端实现: node.js
http://nodejs.cn/
浏览器端实现: Browserify

			node.js模块化教程
						1.下载安装node.js
						2.创建目录结构
						 /-Modules  
						  /-modelu1.js
						  /-modelu2.js
						  /-modelu3.js
						 /-app.js
						 /-package.json
						   {
							   "name": "commonjs_node",
							   "version": "1.0.0"
						   }
						3.下载第三方模块
						 npm install uniq 
						4.模块化编码
						 module1.js
						   module.exports = {}
						 module2.js
						   module.exports = function(){}
						 module3.js
						   exports.foo = function(){}
						 app.js 
							 //引入第三方库uniq
							 let uniq = require("uniq")
							 //将其他模块汇集到主模块
							 let module1 = require('./modules/module1')
							 let module2 = require('./modules/module2')
							 let module3 = require('./modules/module3')
							 
							 module1.foo() //module1
							 module2()//module2
							 module3.foo()//module3
							 
							 let result = uniq(module3.arr)
							 console.log(result)    //[11,2,3,4,5]
						5.运行
						   node app.js
						   
						
						
			Browserify模块化使用教程
						/-js
						 /-dist  //打包生成文件的目录
						 /-src //源码所在目录
						   /-module1.js
						   /-module2.js
						   /-module3.js
						   /-app.js  //应用主源文件
						/-index.html
						/-package.json
						{
							name:"browserify-test"
							
						}
						2.下载browserify
						全局: npm install browserify -g
						局部:npm install browserify --save-dev   //--save运行依赖的包 -dev开发依赖的包
						3.定义模块代码
						
						4.打包处理js
						 browserify js/src/app.js -o js/dist/bundle.js
						5.页面使用引入
						<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>
						6.运行index.html到浏览器  

2.AMD
规范:
说明:
Asynchronous Module Definition (异步模块定义)
http://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端,模块的加载是异步的
基本语法:
定义暴露模块
//定义没有依赖的模块
define(function(){return 模块})
//定义有依赖的模块
define([‘module1’, ‘module2’],function(m1,m2){ return 模块 })
引用使用模块
require([‘module1’, ‘module2’],function(m1,m2){ 使用m1/2})
实现(浏览器端)
Require.js
http://www.requirejs.cn/

Require.js使用教程
	1.下载require.js 并引入
	官网 http://www.requirejs.org
	https://github.com/requirejs/requirejs
	将require.js导入项目js/libs/require.js
	2.创建项目结构
	/-js
	 /-lib
	  /-require.js
	 /-modules
	  /-alerter.js
	  /-dataService.js
	 /-main.js
	/-index.html
	3.定义require.js的模块代码
	dataService.js:
	//定义没有依赖的模块
	define(function(){
		let name= "dataService"
		function getName(){
			return name
		}
		
		//暴露模块
		return  {getName}
	})
	alerter.js:
	//定义有依赖的模块
	define(['dataService'],function(dataService){
		let msg = "alerter.js"
		function showMsg(){
			console.log(msg,dataService.getName())
		}
		$('body').css('background','deeppink')
		//暴露模块
		return {showMsg}
	})
	
	main.js:
	(function(){
		requirejs.config({
			//baseUrl: 'js/lib',  //基本的路径
			paths:{  //配置路径
				dataService: './modules/dataService',
				alerter: './modules/alerter'
				jquery:'./libs/jquery-3.4.1'
			}
		})
		requirejs(['alerter'], function(alerter){
			alerter.showMsg()
		})
	})()
	
	4.页面引入
	<script  src="js/libs/require.js" data-main="js/main.js" ></script>

3CMD
已经卖给国外
规范:
说明:
https://github.com/seajs/seajs/issues/242
专门用于浏览器端,模块的加载是异步的
模块在使用时才会加载执行
基本语法:
定义暴露模块:
//定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
)
//定义有依赖的模块
define(function(require, exports, module){
//引入依赖模块(同步)
var module2 = require(’./module’)
//引入依赖模块(异步)
require.async(’./module3’,function(m3){
})
//暴露模块
exports.xxx = value
)
引入使用模块
define(function(require){
var m1=require(’./module1’)
m1.show()
})
实现:
sea.js
http://www.zhangxinxu.com/sp/seajs
4ES6
规范:
说明:
http://es6runayifeng.com/#docs/module
依赖模块需要编译打包处理
语法:
导出模块:export
引入模块:import
实现(浏览器端):
使用babel将es6编译为es5代码
使用browserify编译打包js

ES6 Bable-Browserify使用教程
1.定义package.json文件
2.安装babel-cli, babel-preset-es2015, 和browserify //cli :command line interface命令行接口
npm install babel-cli browserify -g //全局安装babel
npm install babel-preset-es2015 --save-dev //当前项目安装
preset 预设(将es6转换成es5的所有插件打包)
3.定义.babelrc文件 (rc //run control //运行时控制文件)
{
“presets”:[“es2015”]
}
4.编码
js/src/module1.js:
//暴露模块 分别暴露
export function foo(){
console.log(“foo() module1”)
}

					export function bar(){
						console.log("bar() module1")
					}
					
					export let arr = [1,4,"bc"]
					
					js/src/module2.js:
					//统一暴露
					function fun(){
						console.log("fun() module2")
					}
					
					function fun2(){
						console.log("fun2() module2")
					}
					export {fun,fun2}
					
					 js/src/module3.js:
					 export default{
						msg:"默认暴露",
						foo(){
							console.log(this.msg)
						}
					}
					 main.js:
					//引入其他的模块
					//语法 import xxx form '路径'
					import {foo, bar} from './module1'  //必须用对象结构赋值的形式
					import {fun, fun2} from './module2'
					import module3 from './module3'
					foo()
					bar()
					fun()
					fun2()
					module3.foo()
				
				
				5.编译
				   使用babel将es6编译为es5代码(但包含CommonJS语法):babel js/src -d js/lib
				   使用browserify 编译js :browserify js/lib/main.js -o js/lib/bundle.js
				6.页面使用引入
				<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值