网站模板被抄袭怎么办,沈阳城市建设学院官方网站,淮北矿业集团工程建设公司网站,在哪里免费可以看片直播在做项目的时候越来越发现模块化的重要性#xff0c;做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率#xff0c;接下来整理一下模块化相关知识吧。
模块化开发的优点
封装方法、提高代码的复用性、可维护性和可读性隔离作用域#xff0c;避免污染全… 在做项目的时候越来越发现模块化的重要性做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率接下来整理一下模块化相关知识吧。
模块化开发的优点
封装方法、提高代码的复用性、可维护性和可读性隔离作用域避免污染全局作用域避免变量冲突
模块化开发的各种方法
立即执行函数IIFE
立即执行函数来创建模块将私有成员放在函数作用域以内不暴露在外部。将公共的方法返回。
var module (function() {var privateVar Private Variable;function privateMethod() {console.log(This is a private method);}function publicMethod() {console.log(This is a public method);}return {publicMethod: publicMethod};
})();module.publicMethod(); // Output: This is a public methodCommonJS
node中自带的同步使用require导入模块module.exports或exports导出模块适用于服务器端。
// math.js
function add(a, b) {return a b;
}function subtract(a, b) {return a - b;
}module.exports {add,subtract
};// app.js
const math require(./math);
console.log(math.add(2, 3)); // Output: 5
console.log(math.subtract(5, 2)); // Output: 3AMDAsynchronous Module Definition
使用define定义模块异步加载模块适用于浏览器、按需加载模块
// math.js
define([], function() {function add(a, b) {return a b;}function subtract(a, b) {return a - b;}return {add,subtract};
});// app.js
require([math], function(math) {console.log(math.add(2, 3)); // Output: 5console.log(math.subtract(5, 2)); // Output: 3
});CMD
使用define定义模块异步加载模块适用于浏览器、就近依赖
define(function(require, exports) {// 对外提供name属性exports.name myModule;// 对外提供hello方法exports.hello function() {console.log(Hello myModule);};
});!DOCTYPE html
htmlheadscript typetext/javascript srcsea.js/scriptscript typetext/javascript//加载一个模块在加载完成时执行回调seajs.use(myModule, function(a) {console.log(a.name);a.hello();});/script/headbody/body
/htmlES6模块
使用 import 导入模块使用 export 导出模块浏览器与服务器通用
// math.js
export function add(a, b) {return a b;
}export function subtract(a, b) {return a - b;
}// app.js
import { add, subtract } from ./math;console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3异步加载JS有哪些方法 1 设置script属性async async
脚本将异步加载并立即执行不会阻塞页面的解析和渲染、加载完成后将在页面任何位置执行
script srcscript.js asyncasyncscript
2 动态创建script DOM: 使用JS动态创建script元素通过设置src属性指定脚本的URL
var script document.creatElement(script);
script.src script.js;
document.head.appendChild(script)
3 defer属性
script srcscript.js defer/script
4 XmlHttpRequest脚本注入 利用对象加载脚本内容将其注入到页面当中使用eval函数执行脚本。
var xhr new XMLHttpRequest();
xhr.open(GET,script.js,true);
xhr.onreadystatechange function(){if(xhr.readyState 4 xhr.status 200){eval(xhr.responseText);}
};
xhr.send();5 异步加载库LABjs
LABjs是一个异步加载JS的库可以控制JS的加载顺序可用它来的API定义和加载依赖关系。 $LAB.script(A.js).wait().script(B.js)
6 模块加载器 Sea.js
用于web端模块化开发的加载器可以异步加载和管理模块加载完成后执行回调函数。
seajs.use([module1,module2],function(module1,module2){console.log(Hello)
});
7 Dederred Scripts(延迟脚本)
defer属性可以将脚本延迟到文档解析之后再执行并且会按照他们在文档中出现的顺序执行但在DOMContentLoaded事件触发之前执行。
script srcscript.js defer/script
8 Dynamic Import(动态导入)
import()可以异步加载JS模块并返回一个Promise对象链式调用
import(module.js).then(module {// 执行模块加载完成后的逻辑}).catch(error {// 处理加载失败的情况});9 Web WorkersWeb工作者
Web Workers运行在后台的JS脚本可以耗时操作而不会阻塞主线程。可以异步加载和执行JS脚本提高页面的响应性
var worker new Worker(worker.js);
worker.onmessage function(event) {// 处理从 Worker 返回的消息
};
worker.postMessage(start);参考文章
前端进阶之旅
第25题 谈谈模块化的发展历程以及各自的特_请定义一个文件模块mymodule.js,定义一个name变量及一个sayhello的方法,暴露_crazy的蓝色梦想的博客-CSDN博客
