wordpress宾馆模板,seo快速排名软件网站,dnf免做卡怎么领取网站,在线制作图片上加字BV13W42197jR 个人笔记 目录 JS模块化基础知识1. 概述1.1 什么是模块化1.2 为什么需要模块化? 2 模块化规范3 导入导出4 CommonJS规范4.1 初步体验4.2 导出数据4.3 导入数据4.4 扩展理解4.5 浏览器端运行 5 ES6模块化规范5.1 初步体验5.2 Node中运行ES65.3 导出数据①分别… BV13W42197jR 个人笔记 目录 JS模块化基础知识1. 概述1.1 什么是模块化1.2 为什么需要模块化? 2 模块化规范3 导入导出4 CommonJS规范4.1 初步体验4.2 导出数据4.3 导入数据4.4 扩展理解4.5 浏览器端运行 5 ES6模块化规范5.1 初步体验5.2 Node中运行ES65.3 导出数据①分别导出②统一导出③默认导出 5.4 导入数据练习题6 AMD7 CMD JS模块化基础知识
1. 概述
1.1 什么是模块化
将程序文件依据一定规则拆分成多个文件这种编码方式就是模块化的编码方式。简单来说就是一个 .js文件太大了把它拆成几个js文件拆分出来每个文件就是一个模块模块中的数据都是私有的模块之间互相隔离。同时也能通过一些手段可以把模块内的指定数据“交出去”供其他模块使用。
1.2 为什么需要模块化?
随着应用的复杂度越来越高其代码量和文件数量都会急剧增加会逐渐引发以下问题: 1全局污染问题 2依赖混乱问题 比如script标签引入有顺序问题 3数据安全问题
2 模块化规范
历史背景(了解即可): 2009年随着Node.js的出现JavaScript 在服务器端的应用逐渐增多为了让Node.js 的代码更好维护就必须要制定一种Node.,js环境下的模块化规范来自Mozilla的工程师Kevin Dangoor提出了CommonJS规范(CommonJS初期的名字叫ServerJS随后Node.js 社区采纳了这一规范。
随着时间的推移针对JS的不同运行环境浏览器、服务端相继出现了多种模块化规范按时间排序分别为
1. CommonJS —— 服务端应用广泛
2. AMD
3. CMD
4. ES6模块化 —— 浏览器端应用广泛3 导入导出
模块化的核心思想就是模块之间是隔离的通过导入和导出进行数据和功能的共享。
导出暴露模块公开其内部的一部分(如变量、函数等)使这些内容可以被其他模块使用。导入引入模块引用和使用其他模块导出的内容以重用代码和功能。
4 CommonJS规范
一般用在node环境下
4.1 初步体验
导入 require
school.js
const name 大学
const slogan 厚德载物function getTel() {return 0101010
}function getCities() {return [beijing, shanghai, guangzhou, shenzhen]
}exports.name name
exports.slogan slogan
exports.getTel getTel
student.js
const name 李三
const motto 加油function getTel() {return 13555555
}function getHobby() {return [swimming, badminton, football, basketball]
}exports.name name
exports.motto motto
exports.getTel getTelindex.js
const school require(./school.js)
const student require(./student.js)
console.log(school);
console.log(student);入口文件运行
4.2 导出数据
在CommonJS标准中导出数据有两种方式 第一种方式module.exports value //赋值为新对象 第二种方式exports.name value
示例
***第二种方式*******************
exports.name name
exports.slogan slogan
exports.getTel getTel***第一种方式*******************
module.exports {name: name,slogan: slogan,getTel: getTel
}***简写*******************
module.exports {name,slogan,getTel
}注意点 ① 每个模块内部的: thisexports modules.exports 在初始时都指向同一个空对象该 空对象就是当前模块导出的数据如下图: ② 无论如何修改导出对象最终导出的都是 module.exports 的值。
③ exports是对 module.exports 的初始引用仅为了方便给导出象添加属性所以不能使用exports value 的形式导出数据但是可以使用module.exports xxxx导出数据。
4.3 导入数据
导入语法 const school require(./school.js)
常搭配对象解构使用 const {name, slogan, getTel} require(./school.js)
出现的问题多个require可能导致变量名冲突解决方法重命名 const {name: stuName, motto , getTel: stuTel} require(./student.js)
4.4 扩展理解
怎么做到模块之间是隔离的 怎么能直接使用moduleexports
一个JS模块在执行时是被包裹在一个内置函数中执行的所以每个模块都有自己的作用域 可以通过下面的语句打印验证 console.log(arguments.callee.toString())
内置函数的大致形式如下function(exports, require, module, __filename, __dirname) {}
4.5 浏览器端运行
CJS设计之初就是为了在浏览器中运行的以前的名字叫serverJS但是通过引入JS却无法在浏览器上运行。
Node.js 默认是支持CommonJS规范的但浏览器端不支持所以需要经过编译步骤如下: 第一步全局安装browserify npm i browserify -g 第二步编译 browserify index.js -o build.js 注index.js是源文件build.js是输出的目标文件 第三步在页面中引入使用script typetext/javascript src./build.js /script
5 ES6模块化规范
ES6模块化规范是一界官方标准的规范它是在语言标准的层面上实现了模块化功能是目前最流行的模块化规范且浏览器与服务端均支持该规范。
5.1 初步体验 school.js 导出
export const name 大学
export const slogan 厚德载物export function getTel() {return 0101010
}//没导出
function getCities() {return [beijing, shanghai, guangzhou, shenzhen]
}
index.js导入
import * as school from ./school.js
console.log(school);index.html 注意ES6要在页面中运行 这里一定要写为typemodule
bodyscript typemodule src./index.js/script
/body5.2 Node中运行ES6 方法一 如果node版本是12及以上可以直接把js文件后缀名改成 .mjs这样nodeindex.js就可以运行了 方法二
在工程文件中新增一个 package.json
package.json里面加这一句话
{type: module
}运行成功
5.3 导出数据
ES6模块化提供3种导出方式 ①分别导出 ②统一导出 ③默认导出 备注:「上述多种导出方式可以同时使用」
①分别导出
export const name 大学
export const slogan 厚德载物export function getTel() {return 0101010
}export function getCities() {return [beijing, shanghai, guangzhou, shenzhen]
}②统一导出
export {name,slogan,getTel} 这个不是对象
const name 大学
const slogan 厚德载物function getTel() {return 0101010
}function getCities() {return [beijing, shanghai, guangzhou, shenzhen]
}//统一导出
export {name,slogan,getTel} //这个不是对象③默认导出
默认的英文名是default export default name 这里是对象
export default {name:name,slogan:slogan,getTel:getTel
}用了三种导入方式后
5.4 导入数据
对于ES6模块化来说使用何种导入方式要根据导出方式决定。
1导入全部 通用
import * as school from ./school.js2命名导入对应导出方式——分别导出、统一导出
import {name, slogan, getTel} from ./school.js
console.log(name);
console.log(slogan);
console.log(getTel);可以改名 import {name as schoolName} from ./school.js
3默认导入对应导出方式——默认导出
4命名导入 与默认导入可以混合使用
5动态导入 (通用) 现在不想用以后用到的时候再导入
6import可以不接收任何数据 import ./log.js 这个JS模块可能是打印随机数的
解决了全局污染问题神奇的 type“module” script typemodule src./index.js/script
练习题
打印什么答案1 1 思考2使用CommonJS规范编写如下代码输出结果是什么?
let sum 1
function increment() {sum 1
}
module.exports {sum, increment}const {sum, increment} require(./data.js)
console.log(sum)
increment()
increment()
console.log(sum)答案1 1
思考3使用ES6模块化规范编写上述代码输出结果是什么?
答案1 3
是编写代码中很重要的部分export交出去就要只读了所以sum要用const修饰
ES6 import和export共用一块内存但CJS是复制
6 AMD
7 CMD
