模块化开发

1.什么是模块化开发?

模块化开发:面向对象思想
模块:一个js文件就是一个模块,每个模块都有自己的作用域

2.如果模块化开发没有工具怎么实现?

<1>如index.html中引入的js文件,每个js用自执行函数包裹起来,使这些文件处在不同的作用域中(函数),因为模块化开发就是js有自己独立的作用域  <2>.webpack打包后的样子?每个js文件都会被自执行函数包裹起来

3.四种模块化开发方式

<1>AMD    require.js     依赖前置

<2>CMD sea.js    按需引入

<3>commonJS规范  前端中使用CommonJS规范编写代码,需要使用工具编译,

1.commonJS规范(node.js)
一个js文件就是一个模块,每个模块都有自己的作用域.
引入模块:require('路径')
向外输出模块内容 module.exports = 向外输出的内容;
前端中使用commonJS规范编写代码,需要使用工具编译

2.在电脑上安装node(安装node后,npm包管理工具也就安装好了)
命令 node -v
npm -v
执行nodejs文件
命令行中执行: node 需要执行文件的路径(系统绝对路径,相对路径)

3.//引入需要使用的模块
路径的写法
<1.直接写路径名字 require('path');
如果是node内置模块优先级更高

查找方式:找node_modules文件夹的内容
->找node内置模块
->报错

<2.如果不是内置模块,也不是在node_modules文件夹之下,写路径需要写成:
require('./path');
require('../path');
require('./../path');

<3.require('./tools'),写文件夹,找的是文件夹下的index文件

<4 eg:main.js引入os模块,因为os模块是内置模块,node中带有的模块,如果node_modules中也有自己写的os.js模块,内置模块会被先引用,内置模块优先级比node_modules文件中的js文件更高

<4>es6模块化方式

es6模块化方式(ESM)
现代浏览器不支持es6模块化方式,需要使用工具编译
import {}
export
export default

 

posted @ 2018-06-19 12:44  凯尔Grant  阅读(175)  评论(0编辑  收藏  举报