不使用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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
vue实现移动端返回顶部
Oct 12 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
json 定义
2008/06/10 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
一个超级简单的python web程序
2014/09/11 Python
Python类属性与实例属性用法分析
2015/05/09 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python清空文件并替换内容的实例
2018/10/22 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
《菜园里》教学反思
2014/04/17 职场文书
施工工地安全标语
2014/06/07 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
招标授权委托书样本
2014/09/23 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
python神经网络Xception模型
2022/05/06 Python