一. 首先说下script标签上的的2个参数:async 、defer
1. 默认是 当解析到script标签会立即阻塞渲染,并立刻执行当前script内容
2. async是 解析到标签开始异步下载。不会阻塞渲染,解析完之后开始执行script
3. defer是 解析到标签开始异步下载。下载完成之后开始执行,并且阻塞渲染
**async defer 可以兼容到IE9。 async在IE9的某些浏览器可能会造成异步失效。所以最好是兼容IE9以上**
最早多个script标签引入的模块化开发,会造成全局污染的问题,不适合做一些大型项目
二.** 模块化的前夜 IIFE(语法侧的优化)**
尝试定义一个最简单的独立模块。
` const iifeModule = (() => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increse();
})() `
核心思想就是利用函数作用域的特性独立出来。
如果独立模块本身也有额外的依赖,该如何解决优化?
` const iifeModule = ((module1,module2) => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increse();
})(module1,module2) `// 可以利用传参的方式,把模块的依赖传进去。
三. 了解一下其他开源框架的模块化方案
` const iifeModule = ((module1,module2) => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increse();
return {
increase,
reset
}
})(module1,module2) `
这里值得说的就是设计模式里的揭示模式,基本意思就是上层的应用不应该干涉底层的一个实现方式,
底层应用内部做了哪些逻辑,上层应用是无感知的,上层应用只需要感知到底层应用暴露出来的接口就可以。
一些开源项目为何要把全局、指针以及框架本身引用作为参数?
(function(window, $, undefined) {
const show = function() {
$('#app').val('hello word')
}
window.webShow = show;
})(window, jQuery)
// 阻断思路(在写框架或者做架构有没有下面的这些考虑?)
window: 1.这里是要把全局作用域转换为局部作用域,增加查找速度,提升执行效率。
2.还有编译上的优化,当window当做参数传进来,他就是一个局部变量,他会
随着函数执行完而被销毁,对于一个全局存储立即清除销毁更优雅。所以他会优
化压缩成本和回收成本
jQuery: 因为jQuery是可以挂载自定义实例的,当把他转换为局部的时就可以独立的定
制的复写和挂载,这样就不会造成全局污染。
dundefined: 防止外部对这个模块的改写。不管你传进来什么,他始终是一个
undefined。保证一个安全问题。
四. cjs - CommonJS 模块化; 为nodejs所指定
特征:通过 module + exports 去对外暴露接口
通过require 引入外部模块
main.js 文件
const module1 = require('./module1')
const module2 = require('./module2')
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increse();
module.exports = {
increase,
reset
}
优点: 率先在服务端实现,从框架层解决了依赖、全局变量污染问题
缺点: 针对解决了服务端方案,对异步拉取依赖处理不是很完美。
那么何如解决异步拉取的问题呢?(那就是AMD规范)
五. AMD规范