什么是前端模块化?
2019-06-11 18:30
1026 查看
前端模块化
模块化: 是具有特定功能的一个对象( 广义理解 )
模块定义的流程:
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 // 生产环境下使用
- 别人已经封装好的模块
- 这个模块具备一些特定的功能
- 这些模块存放在 www.npmjs.com 这个网站中
这些模块的文档也记录在内
格式: var/let/const 变量名 = require( 模块名称 )
总结:
第一步,使用npm/cnpm 安装
第二步,在文件中引入
第三步,在www.npmjs.com这个网站中找到这个模块的文档,根据文档来使用
相关文章推荐
- 什么是前端模块化?前端模块化开发到底有无必要
- 什么是前端模块化?前端模块化开发到底有无必要
- 到底什么是前端工程化、模块化、组件化
- 什么是前端组件化,模块化?
- 到底是什么是前端工程化、模块化、组件化
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
- 前端模块化,AMD与CMD的区别
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
- 自学WEB前端到什么程度才能就业
- 2016,前端在关注什么?
- 前端开发:模块化 — 高效重构
- 前端模块化发展简史
- 前端模块化、构建工具
- 模块化前端开发入门指南(三)
- 前端开发:模块化 — 高效重构
- 什么是前端路由
- 前端模块化(一):模块化那些事儿
- 什么是web前端开发
- 那些大佬公司的前端面试都喜欢问些什么?
- 前端页面有哪三层构成,分别是什么?作用是什么?