不使用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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
JS原型链怎么理解
Jun 27 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
vue地区选择组件教程详解
May 04 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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 session和cookie使用说明
2010/04/07 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
实例讲解php数据访问
2016/05/09 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
Less 安装及基本用法
2018/05/05 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JS原型对象操作实例分析
2020/06/06 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python 实现波浪滤镜特效
2020/12/02 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
幼教求职信
2014/03/12 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
催款通知书范文
2015/04/17 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android