首页 > 其他分享 >本地html 加载js 和 两种定义模块的方式, IIFE and 对象字面量

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

时间:2024-11-12 09:43:29浏览次数:1  
标签:function console script js IIFE html var 加载

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

相关文章

  • 关于JS框架的一点想法
    读了几页《vue.js设计与实现》,记录几点想法:1.Html是根本2.无论哪个框架,不管是运行时框架,还是编译时框架,最终都要通过标签“绘制”页面3.这个“绘制的过程”就是渲染,渲染由浏览器完成。4.静态网站的渲染是最快的,没有所谓的“编译”环节消耗。5.为啥搞这么多新技术出来呢?一是直......
  • [经典] 前端js将文件流导出为csv/excel文件
    前端将文件流导出为csv/excel文件有两种方式:1.后端直接返回文件连接:前端正常请求,后端返回一个静态文件链接,直接使用:window.location.href=url简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且直接暴露连接。2.后台返回二进制流:前台请求后台接口拿到二进制流转......
  • 基于nodejs+vue智慧医院信息管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于医院信息管理系统的研究,现有研究主要以传统的医院管理信息化为主,侧重于单一功能模块的优化,如单独的挂号系统或者病历管理系统等。专门针对整合多种......
  • 基于nodejs+vue智慧迎新系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于迎新系统的研究,现有研究多集中在系统的基本功能构建与流程优化方面,如学生信息管理、简单的流程自动化等,专门针对涵盖多部门(招生部、教务部、财务部......
  • 基于nodejs+vue智慧幼教服务系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于智慧幼教服务系统的研究,现有研究主要以幼儿教育的数字化管理为主,如部分研究聚焦于单一功能模块,像考勤系统或者课程资源数字化等方面的探索。专门针......
  • Qt构建与解析Json示例
    本文以B站UP主“明王讲QT”的【QT开发专题-天气预报】中的章节内容作为学习Qt中构建、解析Json的参考方法。1、Json文本{"info":{"asian":true,"captical":"beijing","founded":1949},"name":"China&qu......
  • System.Text.Json官方文档(链接)
    下面的微软官方文档中介绍了,如何使用System.Text.Json来序列化和反序列化JSON:JSONserializationanddeserialization其中这里讲解了如何避免循环引用序列化:HowtopreservereferencesandhandleorignorecircularreferencesinSystem.Text.Json其中下面的章节还介绍了......
  • 【开源免费】基于SpringBoot+Vue.JS美发门店管理系统(JAVA毕业设计)
    博主说明:本文项目编号T069,文末自助获取源码\color{red}{T069,文末自助获......
  • 【开源免费】基于SpringBoot+Vue.JS课程答疑系统(JAVA毕业设计)
    博主说明:本文项目编号T070,文末自助获取源码\color{red}{T070,文末自助获......
  • JavaScript on html
    我咋没发啊,丢草稿箱里给忘了,发一下好像早就写了首先你要会一点html一点都不会建议学了再来Vscode自带html+JS自动补全,比较好用不会运行JS建议多动脑子调用可以用<script>调用也可以以字符串形式写在超链接的地方弱类型语言,变量用var定义(=new()格式下可以不......