不使用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 相关文章推荐
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
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
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python实现红包裂变算法
2016/02/16 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python实现获取Ip归属地等信息
2016/08/27 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python 转换文本编码实现解析
2019/08/27 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
高中数学教师求职信
2013/10/30 职场文书
个人自荐信
2013/12/05 职场文书
青年文明号复核材料
2014/02/11 职场文书
《穷人》教学反思
2014/04/08 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技