不使用script导入js文件的几种方法


Posted in Javascript onOctober 27, 2016

方法一:原生

 adc.js内容如下:

var hello = "H9";

html.html

<script>
      var s = document.createElement("script");
      s.src = "abc.js";
      document.head.appendChild(s);
      s.addEventListener("load",function(){
        // 等待s的load事件加载完响应,防止未加载完就调用出错
        console.log(hello);
      })

      setTimeout(function(){//或者使用定时器保证其载入完后调用(不安全,不如监听事件好)
        console.log(hello);
      },1000);
     // $.getScript("abc.js");
  </script>

方法二:jquery.js

$.getScript("abc.js",function(){ alert("heheheh"); console.log(hello); });
<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button>
 

方法三:require.js

require.js分享2.1.1版本,注意是针对大项目使用,一边情况下使用jquery即可。

index.html

<!--设置入口文件main 可以省略js-->
<script data-main="main" src="require.js"></script>

main.js

console.log("你好世界");
require(["js1","js2","js3"],function () {
  // 是异步加载导入。js后缀可以省略
  console.log("你们加载完了么?");
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
})

使用requireJs可以很方便的导入js文件,但是要注意js文件中变量名方法名冲突的问题。 产生原因:浏览器js文件共用全局作用域,作用域中变量名方法名可能被覆盖

Javascript 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
JSON 必知必会 观后记
Oct 27 #Javascript
使用JSON作为函数的参数的优缺点
Oct 27 #Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 #Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 #Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python解析最简单的验证码
2016/01/07 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
自考生自我评价
2019/06/21 职场文书
创业计划书之校园超市
2019/09/12 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
springboot入门 之profile设置方式
2022/04/04 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers