requirejs实践二 加载其它JavaScript与运行
上一篇中介绍了requirejs加载JavaScript文件，在这一篇中介绍加载JavaScript后执行代码
这次是test2.html文件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test2</title>
</head>
<body>
<script data-main="scripts/test2" src="scripts/require.js"></script>
</body>
</html>
这次是加载test2.js文件，在test2.js中，有如下代码：
SayHello();
require(['test'],function(test){
SayHello();
});
test.js:
alert('加载了test.js');
function SayHello(){
alert('这是SayHello方法');
}
这里SayHello()是在test.js中定义的，而test2.js中通过require()方式加载test2，在浏览test2.html时可以看到有一个JavaScript错误：
这里报错的是第一句，因为此时test.js还没有加载，Sayhello没有定义，当注释或者删除第一句后，重新浏览test2.html，如下：
//SayHello(); //此处还没有加载test.js，于是调用SayHello方法就会报错
require(['test'],function(test){
//比如test.js定义了SayHello方法,此处是加载了test.js之后，就可以调用SayHello方法了
SayHello();
});
更通俗的例子，当我们需要使用jquery的datepicker（jquery ui中的日历插件），需要加载jquery.js、jquery.ui.js(此处省略版本号，下同)
test3.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test3</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
</head>
<body>
<input type="text" name="date" id="date" />
<script data-main="scripts/test3" src="scripts/require.js"></script>
</body>
</html>
test3.js:
//$('#date').datepicker(); //未加载jquery与jquery.ui ,此处会报错
require(['jquery-3.1.1.min','jquery-ui.min'],function(jq,ui){
$('#date').datepicker();
});
该例子与之前的目录文件结构不一样，此处多了jquery.js、jquery.ui.js、以及ui中的css文件，图片文件
浏览test3.html，点击文本框时候，发现已经绑定了日历
参考资料：
requirejs实践二 加载其它JavaScript与运行的更多相关文章
- requirejs实践一 加载JavaScript文件
首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 <!DOCTYPE html> &l ...
- AntiModerate – 渐进式图片加载的 JavaScript 库
AntiModerate 是一个渐进式图片加载的 JavaScript 库.我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像:而有的图片是先出现一个很低分辨率的图像轮廓,类似加了 ...
- RequireJS跨域加载html模版后被转成JS问题分析及解决
问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...
- RequireJS 主入口加载模块经常会加载失败的问题
在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...
- Mybatis源码解析(二) —— 加载 Configuration
Mybatis源码解析(二) -- 加载 Configuration 正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config. ...
- Android中插件开发篇之----动态加载Activity(免安装运行程序)
一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- [require-js]向下滑动ajax加载的javascript实现
define(function(){ function ScrollMoreInfo($wraper , loadDataFunc , json_ids , perNum , tpl_info) { ...
- jquery的promise实践--连续加载图片
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...
随机推荐
- Linux设备驱动编程中的中断与定时器处理
所谓中断是指CPU在执行过程中,出现某些突发时间急待处理,CPU必须暂停执行当前的程序,转去处理突发事件,处理完毕后CPU又返回原程序被中断的位置并继续执行. 中断分为(根据中断源来分): 内部中断 ...
- c语言 字符版 简易2048
花了两个多小时,用最蠢的方法写的……最简陋版…… 还不确定这么写逻辑对不对…… #include <iostream> #include <cstdio> #include & ...
- 细说Oracle数据库与操作系统存储管理二三事
在上大学的时候,学习操作系统感觉特别枯燥,都是些条条框框的知识点,感觉和实际应用的关联不大.发现越是工作以后,在工作中越想深入了解,发现操作系统知识越发重要.在实践中结合理论还是不错的一种学习方法.自 ...
- Redis在PHP中的基本使用案例
下载http://www.oschina.net/p/redis 解压后里面有:lib 源文件 .examples 例子.test测试 将lib目录拷贝到你的项目中,就可以开始你的predis操作了. ...
- Oracle数据库自我总结(转)
Oracle数据库自我总结 1.Oracle连接远程服务器,需要安装客户端的同时需要覆盖D:\oracle\product\10.2.0\db_1\NETWORK\ADMIN\tnsnames.ora ...
- 问题-delphi在某电脑(win7)上是界面超乱 DPL
问题现象:本机运行正常,但是在WIN7或个别的XP上,界面显示控件大小不一,界面超乱 问题原因:可以百度“delphi dpi”或者“delphi 控件自适应分辨率” 问题处理:将窗体的Scaled设 ...
- new Date() iso不支持兼容性问题
在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...
- C#- 泛型去除重复项
今天被这个问题纠结了好一会.如何去除重复项,我遇到的问题是,在判断是否重复的条件是有两个,一个信息来源,一个是信息标题. 最后使用了哈希后很好的解决,感觉挺高效的.代码贴下,做一个备忘 //防止群发, ...
- IOS GCD 使用(一) 简介
一 GCD简介 GCD(Grand Central Dispatch)是苹果为实现并发编程提供的新技术.从基本功能上讲,GCD有点像NSOperationQueue,他们都允许程序将任务切分为多个单一 ...
- C＋＋库研究笔记——生成一组随机数
当试图用 srand(time(0)) rand() 生成一组随机数时发现,生成的数字很多都是「一样」的 经过测试:srand(seed); rand() 生成随机数,当seed一样时,生成的随机数相 ...