中国建设人才信息网站官网,本地网站建设开发信息大全,网页与网站的区别是什么,网站建设要注意些什么幼年期#xff1a;无模块化 成长期#xff1a; IIFE是立即执行函数表 IIFE其实也就是匿名函数#xff0c;归根结底都是函数 一种是申明式#xff0c;一种是表达式。但是两种其实存在着不同#xff0c;其中第二种中存在着变量提升 function fn1() var fn function ()v…幼年期无模块化 成长期 IIFE是立即执行函数表 IIFE其实也就是匿名函数归根结底都是函数 一种是申明式一种是表达式。但是两种其实存在着不同其中第二种中存在着变量提升 function fn1() var fn function ()var b 1 ; (function () {var b 2console.log(b的值,b);})() console.log(b); 成熟期 CJS- commonj node.js 制定 特征通过moduleexport去对外暴露接口一个js文件就是一个模块 引入自定义模块 使用require(模块的路径)函数来引入模块 引入自定义模块时 模块名要以 ./或../开头 扩展名可以省略 在CommonJS中如果省略的js文件的扩展名node会自动补全扩展名 如果没有改js文件会找名字相同的文件进行引入 引入核心模块时 直接写核心模块的名字即可也可以在核心模块前添加node:可以加快查询效率 //引入自定义模块 const m1 require(./m1) //按需引入 const name require(./m1).name const {name,age,gender} require(./m1) //引入核心模块const path require(path)const path require(node:path)通过require进行其他模块的调用 const depModele1 require(./dependecncyModules1) const depModule2 require(./dependecncyModuse2) let count 0 const obj {increase:()count;reset(){count0} } exports.increase increase; exports.insertreset module.export{increase,reset } * 优点 CJS率先在服务实现了从框架层面解决依赖、模块化的问题* 缺憾 针对的是服务端对于异步依赖没有很友好地处理解决 AMD 规则 它采用异步方式加载模块 。实现了AMD规范的主要的两个JavaScript的两个库require.js和curl.js AMD跟CommonJS一样也是通过require来导入但是区别在于多了一个回调参数。用于导入后执行函数。 通过异步加载 允许定制回调函数 经典框架require.js 新增定义方式 jsdefine(id, [depModule], callback);require([module], callback);// 栗子 提前声明要依赖的模块define(amdModule, [depModule1, depModule2], (depModule1, depModule2) {let count 0;const obj {increase: () count;reset: () {count 0;// fn(depModule1);// depModule1, depModule2}}// ....})// 使用require([amdModule], amdModule {amdModule.increase();})UMD规则 factory 可以是一个函数或者字符串或者对象。如果 factory 是一个函数回调函数中会指定三个参数 require,exports,module表示的是该模块的构造函数。执行构造函数可以得到模块向外提供的接口。 ** 面试一个代码去兼容AMD和CJS ** js(function(){// UMD的出现})(// 目标一次性去区分CJS和AMD// 1. CJS factory// 2. module module exportsx// 3. definetypeof module Object module.exports typeof define ! function? // 是CJSfactory module.export factory(require, exports, module);: // 是CMDdefine)* 优点解决了浏览器中异步加载模块可以并行加载多个模块 * 缺点会有引入成本缺少考虑按需加载 js(function (root, factory) {if (typeof define function define.amd) {// AMDdefine([jquery, underscore], factory);} else if (typeof exports object) {// Node, CommonJS之类的module.exports factory(require(jquery), require(underscore));} else {// 浏览器全局变量(root 即 window)root.returnExports factory(root.jQuery, root._);}}(this, function ($, _) {// 属性var PI Math.PI;// 方法function a() { }; // 私有方法因为它没被返回function b() { return a() }; // 公共方法因为被返回了function c(x, y) { return x y }; // 公共方法因为被返回了// 暴露公共方法return {ip: PI,b: b,c: c}})); CMD规范 - sea.js 按需加载 jsdefine(module, (require, exports, module) {let $ require(jquery);let depModule1 require(./dependencyModule1);// ……})新时期ESM import : 引入 export 导出 jsimport depModule1 from ./dependecncyModule1;import depModule2 from ./dependecncyModule2;let count 0;const obj {increase: () count;reset: () {count 0;// fn(depModule1);// depModule1, depModule2}}export default {increase,reset}// 异步加载import(xxx).then(a {// ../}) 目标 1. 隔离每个模块的逻辑和作用域 2. 扩展共同协作的方便程度 可以将无数模块进行随意组装 万物皆模块前端工程化