不使用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 arguments对象应用介绍
Nov 28 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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生成静态页面的简单示例
2014/04/17 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
javascript 精粹笔记
2010/05/09 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
微信小程序 实现点击添加移除class
2017/06/12 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python实现ipsec开权限实例
2014/11/11 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python应用库大全总结
2018/05/30 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python中常用的os操作汇总
2020/11/05 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
高一家长会邀请函
2014/01/12 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
综合办公室岗位职责
2015/04/11 职场文书
学生检讨书怎么写
2015/05/07 职场文书
学校团代会开幕词
2016/03/04 职场文书