什么是前端模块化?

匿名 (未验证) 提交于 2019-12-02 23:40:02

前端模块化

模块化: 是具有特定功能的一个对象( 广义理解 )
模块定义的流程:
1.定义模块(对象)
2.导出模块
3.引用模块
好处:可以存储多个独立的功能块,复用性高
种类:

  • AMD( require.js)
  • CMD ( sea.js )
  • Common.js

CommonJs用在服务器端,AMD和CMD用在浏览器环境
三者的一个详细介绍:https://www.jianshu.com/p/d67bc79976e6

AMD定义一个模块:使用define来定义,用require来使用模块

// AMD /* 	目录 		admDir 			a.js 			index.js */ // AMD定义  a.js     define ({         a: 1,         b: 2,         add: function(){}     }) // AMD引用 index.js 	require([./a.js],function( moduleA ){         //moduleA指的就是定义来的对象 	}) 

CMD定义模块:使用define来定义,用require来使用模块

//CMD /* 	目录结构 		b.js 		index.js */  // 模块定义  b.js 	define(function(require, exports, module) {      	// 模块代码      }); //模块引用 index.js 	require('./b.js',function( moduleB ){         //moduleB就是b模块中导出的内容 	})  

Common.js:
Node.js使用了Common.js的规范

易错的理解:
common.js是属于node的 ×
node属于common.js ×

//common.js /* 	目录结构: 		name.js 		index.js */ //模块的定义 name.js 	const nameObj = {         name: 'zhan san ' 	} //模块的导出  name.js 	module.exports = nameObj //模块的引用 	const nameObj = require('./name.js') 

Node.js中Common.js规范的使用有三种类型:
第一种:内置模块( 内置模块指的是挂载在Node.js全局对象身上的api )
内置模块可以直接使用 ( require中直接书写模块名称 )
格式:const/let/var 变量名 = require( 模块名称 )
第二种:自定义模块
1.模块的定义(创建模块)

//举例 const student = {     id: 1,     name: 'li si' } const fn = function(){} 

2.模块的导出

// 第一种导出 module.exports = student // 安全性不高  默认导出一个 //第二种导出 module.exports = { //批量导出,按需引用     student,fn } 

3.模块的引用

// 这种引用对应第一种导出 const student = require('./xxx.js') // 这种引用对应第二种导出 const { student , fn } = require( './xxx.js ' ) 

注意:在自定义模块引用时,require一定要写好路径

第三种:第三方模块(别人封装好的模块)
格式:var/let/const 变量名 = require( 模块名称 )

$ npm init -y//创建package.json文件 
//-D  === --save-dev 下载模块 //举例  cnpm  i  jquery -D  === cnpm i jquery --save-dev  // 开发环境下使用 cnpm i jquery -S ===  cnpm i jquery --save // 生产环境下使用 
  1. 别人已经封装好的模块
  2. 这个模块具备一些特定的功能
  3. 这些模块存放在 www.npmjs.com 这个网站中
    这些模块的文档也记录在内

格式: var/let/const 变量名 = require( 模块名称 )

总结:
第一步,使用npm/cnpm 安装
第二步,在文件中引入
第三步,在www.npmjs.com这个网站中找到这个模块的文档,根据文档来使用

文章来源: https://blog.csdn.net/ThisOnly/article/details/91454294
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!