台州市建设规划局网站6,万州网站制作公司,屯济宁做网站公司,新冠咳嗽一般要咳多少天模块化演变过程
阶段一#xff1a;基于文件的划分模块方式 概念#xff1a;将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块#xff0c;使用每个模块#xff0c;直接调用这个模块的成员 缺点#xff1a;所有的成员都可以在模块外被访问和…模块化演变过程
阶段一基于文件的划分模块方式 概念将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块使用每个模块直接调用这个模块的成员 缺点所有的成员都可以在模块外被访问和修改所有的模块都是直接在全局工作没有【私有空间】 模块多了之后会产生【命名冲突】 无法管理各个模块之间的【依赖关系】阶段二命名空间模式 概念每个模块只暴露一个全局对象所有模块成员都挂载到这个对象上通过将每个模块包裹成一个全局对象的方式实现类似于为每个模块添加【命名空间】的感觉。
var name module-a
function method1 () {cosnole.log(name #method1)
}
function method2 () {cosnole.log(name #method2)
}优点减少了命名冲突 缺点所有的成员都可以在模块外被访问和修改所有的模块都是直接在全局工作没有【私有空间】 无法管理各个模块之间的【依赖关系】
var moduleA {name: module-a,method1: function () {console.log(this.name #method1)}, method2: function () {console.log(this.name #method2)}
}阶段三IIFE 使用IIFE立即执行表达式为模块提供四有空间对于需要向外暴露的成员挂载到全局对象上的方式实现 优点模块有了私有空间 缺点无法管理各个模块之间的依赖关系。 有了私有成员私有成员只能在模块成员内通过闭包的形式访问
// (function(){})() : 自加载执行该方法
(function () {var name module-afunction method1 () {cosnole.log(name #method1)}function method2 () {cosnole.log(name #method2)}// 将需要向外暴露的成员挂载到全局对象上window.moduleA {method1: method1,method2: method2 }
})()阶段四 概念使用IIFE参数作为依赖声明使用 做法在第三阶段的基础上利用立即执行函数的参数传递模块依赖项 优点 使得模块之间的关系变得更加明显
(function ($) {var name module-afunction method1 () {cosnole.log(name #method1)$(body).animate({ margin: 200px})}function method2 () {cosnole.log(name #method2)}// 将需要向外暴露的成员挂载到全局对象上window.moduleA {method1: method1,method2: method2 }
})(jQuery)模块化规范总结 CommonJs 是运行在node.js环境下的模块化规范node的机制是在启动时加载模块执行时直接使用模块 一个文件就是一个模块每个模块都有单独的作用域 通过module.export导出通过require函数导入
该模块规范不适合浏览器的原因 浏览器在加载页面是如果需要同步加载所有模块必然导致性能低下所以早期的浏览器没有使用CommonJS规范
AMD 主要用于浏览器端通过define定义通过require导入异步加载模块CMD 主要用于浏览器端通用模范定义规范通过define定义通过require导入同步加载模块ESModule 浏览器和服务器通用用import和export关键字来导入和导出AMD和commonjs是运行时确定这些东西es6的模块化设计思想是尽量的静态化使得编译时就确定模块的依赖关系以及输入输出变量。
ES Module
基本特性
script typemoduleconsole.log(this) // 因为是module类型 所以是undefinedvar foo 100console.log(foo) // 100
/script
script typemoduleconsole.log(foo) // 报错 foo没有定义因为每个 ES Module 都是运行在单独的私有作用域中
/script自动采用严格模式不能直接采用this 每个ESM模块都是单独的私有作用域 ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本
导入导出
导入的是模块成员的地址并且是只读的
// 默认导出
var name foo module
export default name
// 默认导入
import fooName from ./module// 多个导入导出 {}是固定语法并不是数据解构
export const name hello
export const age 18
export default const sex 0import sex,{name,age} from ./module// 与commonjs的区别先将模块整体导入为一个对象再从对象中解构出需要的成员
export obj {name, age}
const { name, age } require(./module.js)使用方式
1.使用import导入模块路径必须是完整路径路径的./不能省略路径可以是绝对路径和url 2.只加载模块不提取成员
import {} from ./module.js
import ./module.js3.用*导出模块所有成员并将其放入一个对象中从对象中提取需要的成员
import * as mod from ./module.js4.动态加载模块:使用import()动态加载一个模块返回一个promise对象等异步加载完成之后会自动加载then指定的回调函数,获取参数
import(./module.js).then(function (module) { console.log(module)
})5.导入时直接导出
export { default as Button } from ./button.js
export { Avatar } from ./avatar.jsInterview Q
说说对模块化的理解
编程中的模块化,是遵守固定的规则是将程序代码拆分成独立模块的编程方式有两个基本的特征外部特征和内部特征外部特征是指模块跟外部环境联系的接口其余模块的引用和模块的功能。内部特征是指模块内部的环境具有的特点提高了代码的可复用性和易维护性实现按需加载路由通过定义模块之间的依赖和导入导出模式使得代码组织和管理更加的灵活和高效js中存在多种模块化语法和规范commonjs用于服务端通过module.exports导出通过require导入同步加载相当于浅拷贝了一份模块的内容AMD用于浏览器端通过define定义通过require导入异步加载模块CMD主要用于浏览器端通用模范定义规范通过define定义通过require导入同步加载模块ES6浏览器和服务器通用用import和export关键字来导入和导出AMD和commonjs是运行时确定这些东西es6的模块化设计思想是尽量的静态化使得编译时就确定模块的依赖关系以及输入输出变量。commonjs与es6模块化有什么区别
1、CommonJS模块是运行时加载而ES6模块是编译时输出接口2、CommonJS模块的require()是同步加载模块而ES6模块的import命令是异步加载3、CommonJS是对模块的浅拷贝ES6是对模块的引入
