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.加载错误, ...
随机推荐
- bitset位图讲解
bitset可以用来处理位图问题,用位可以大大减少占用的空间内存,但是位图问题适合处理不重复的,在一定范围内的整数问题.用两个位图可以处理只出现一次问题 #include <bitset> ...
- 微软Build2014大会干货总结-2
继昨天微软在Build2014大会上宣布一系列重磅举措后,第二天的主题是微软云(Microsoft Azure)及开发者战略,CSDN记者继续从旧金山现场给您发来一线报道. 第二天的主角是新上任的微软 ...
- json里的日期字符串 怎么 转换成 javascript 的 Date 对象？
“/Date(1232035200000)/” 怎么转换成 javascript 的 Date 对象 做法:new Date(+/\d+/.exec(value)[1]); value就是json字 ...
- StreamWriter
public StreamWriter( string path, bool append ) 参数 path 类型:System.String要写入的完整文件路径. append 类型:System ...
- 教程-MessageBox 使用方法
对应对象:TApplication 声明:function MessageBox(Text,Caption:PChar;Flags:Word):Integer; 功能:MessageBox方法可以显示 ...
- fcntl记录锁实例
fcntl 函数是一个相当常用的对文件进行加锁操作的函数. 文件锁包括强制锁.建议锁.记录锁, 不过一般系统和内核都是用的强制锁. 以下为记录锁的例子:------------------------ ...
- PTA 5-12 How Long Does It Take (25分)
这题看不太懂题目啊~ 参考的http://blog.csdn.net/qq_26437925/article/details/49420089?locationNum=6&fps=1 先放着 ...
- 用document.title=“xxx”动态修改title，在ios的微信下面不生效
单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...
- [Ember] Creating Your First Ember.js Project with Ember-CLI
In this lesson, we'll setup Ember-CLI and use it to create and run our first Ember.js project. Insta ...
- QtSpeech会让Qt说话
想要多了解QtSpeech,那么随着本文的文字往下走吧!QtSpeech是一个Qt封装的跨平台TTS(文本变成语音输出)API,在不同平台下利用系统自带的TTS引擎.在Windows下使用SAPI, ...