本地html 加载js 和 两种定义模块的方式, IIFE and 对象字面量
需求
希望写一个不启动服务的页面,也不用vite webpack打包,就双击就能运行就行~
开始以为 requirejs
比较老,结果发现本地也不能运行,chrome报跨域,没有权限。
IIFE(立即执行函数表达式):
var myModule = (function() {
var privateVar = 'I am private';
function privateFunction() {
console.log(privateVar);
}
return {
publicMethod: function() {
privateFunction();
}
};
})();
myModule.publicMethod(); // 调用公共方法
对象字面量模式:
var myModule = {
privateVar: 'I am private',
privateFunction: function() {
console.log(this.privateVar);
},
publicMethod: function() {
this.privateFunction();
}
};
myModule.publicMethod(); // 调用公共方法
最后通过 动态加载,可以封装一个自己的require
var script = document.createElement('script');
script.src = "path/to/your-script.js";
document.head.appendChild(script);
这个代码发现一个问题,就是没有告诉js是否加载完成,加载代码需要更新一下
var script = document.createElement('script');
script.src = "a.js";
// 绑定load事件,当脚本加载完成时触发
script.onload = function() {
console.log('Script loaded and ready to use.');
// 在这里可以执行依赖于a.js的代码
};
// 绑定error事件,以便在加载失败时进行处理
script.onerror = function() {
console.error('Script failed to load.');
// 在这里可以处理加载失败的情况
};
document.head.appendChild(script);
标签:function,console,script,js,IIFE,html,var,加载
From: https://www.cnblogs.com/pengchenggang/p/18541132