本地html 加载js 和 两种定义模块的方式, IIFE and 对象字面量

本地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);