不使用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框架中DOMReady事件的实现小结
Feb 12 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
vue-element-admin项目导入和导出的实现
May 21 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实现用户认证及管理完全源码
2007/03/11 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
治超工作实施方案
2014/05/04 职场文书
派出所所长先进事迹
2014/05/19 职场文书
早恋主题班会
2015/08/14 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL