不使用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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
微信小程序实现滑动删除效果
May 19 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
JS分页的实现(同步与异步)
Sep 16 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
Zend 输出产生XML解析错误
2009/03/03 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
JavaScript 异步调用
2017/10/25 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
JS删除String里某个字符的方法
2021/01/06 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
小学班主任寄语大全
2014/04/04 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
大学生实习推荐信
2015/03/27 职场文书
小学生暑假生活总结
2015/07/13 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS