专业移动微网站设计,wordpress设置网站主题,绑定ip地址的网站,佛山app定制1. CommonJS Node.js基于CommonJS规范应运而生 1.1 commonjs规范语法导出模块
module.exports { a, b }1.2 commonjs规范语法引入模块
const mod require(./导出模块name)2. AMD 规范 RequireJS 是AMD规范的实现。是js文件和模块的加载器。 在没有单页应用#xff08;angu…1. CommonJS Node.js基于CommonJS规范应运而生 1.1 commonjs规范语法导出模块
module.exports { a, b }1.2 commonjs规范语法引入模块
const mod require(./导出模块name)2. AMD 规范 RequireJS 是AMD规范的实现。是js文件和模块的加载器。 在没有单页应用angular.jsvue.jsreact.js基于路由的形式一个 index.html主文件切换路由展示SPA形式的环境下使用。 依赖全加载完再执行js保证依赖没有问题。 有很多自己的语法。 宏观的先把需要的依赖都加载好加载费时开发效率高。 2.1 本地下载并引入第三方库 require.js
// 新建lib文件用来存放第三方下载库lib/require.js
script data-main js/main src lib/require.js /script
// data-main 入口文件2.2 添加 require.js 配置
require.confing({// 当前模块化解析的基本路径baseUrl: js,// 模块的映射paths: {jquery: ../lib/jquery.min, //never includes a .js extension since lodash: ../lib/lodash}
})2.3 使用ADM规范定义一个requireJS语法的模块
define([jquery, lodash], function($,_){// 这里就是RequireJS解决的问题等【】依赖全加载完再执行js
})2.4 使用ADM规范加载入口requireJS语法的模块
require([./index])3. CMD规范 Sea.js 遵循CMD规范。 可以像Node.js一般书写模块代码不用记语法。 官网五分钟上手。 微观的随用随加载分散开发效率但不需要加载耗时。 3.1 本地下载并引入第三方库 sea.js 3.2 添加 sea.js 配置 3.3 使用CMD规范定义一个seajs语法的模块
define(function(require, exports, module){// 通过require引入依赖const $ reauire(jquery)// 通过 exports 对外提供接口exports.doSomething ...// 或通过module.exports 提供整个接口module.exports ...
})3.4 使用CMD规范加载入口seajs语法的模块
seajs.use(../js/main)4. ES6 模块化规范 使用 babel 的插件 babel-cli 把es6转换成浏览器可编译的 es5 4.1 es6 俩种导出模块
// 单独模块导出
export function sum(a,b) {return ab
}
export function sub(a,b) {return a-b
}
// 默认整体导出
const user {name: lisi,age: 18,say: function() {console.log(My name is this.name)}
}
export default user4.1 es6 俩种导入模块
// 单独模块导入
import {sum, sub} from ./math
// 整体模块导入
import user from ./user
