不使用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 confirm选择判断
Oct 18 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
jquery操作angularjs对象
Jun 26 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
深入php多态的实现详解
2013/06/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
JS删除数组元素的函数介绍
2013/03/27 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
绩效专员岗位职责
2013/12/02 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
园艺师求职信
2014/03/10 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB