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.加载错误, ...
随机推荐
- HW4.35
public class Solution { public static void main(String[] args) { double sum = 0; for(int i = 1; i &l ...
- 问题-Delphi记忆工程打开的单元(XE2设置项)
问题情况:每次在delphi中打开了N个单元的窗口,关闭delphi后,第二天还得一个一个打开单元窗口.问题原因:这是因为delphi的记忆功能未打开.问题处理:Tools->Options.. ...
- 用Regex类计算一个字符串出现次数是最好方法【转载】
我的一个朋友问我,怎么在c#或vb.net中,计算一个字符串中查找另一个字符串中出现的次数,他说在网上打了好多方法,我看了一下,有的是用replace的方法去实现,这种方法不是太好,占资源太大了.其实 ...
- HDU 3259 Wormholes
题意:就是给你一个n,m,t n代表有多少个点.m代表有多少个双向的边 t代表的是虫洞.如今要你判读是否还能够穿越到过去的点 虫洞的意思是给你的边是单向的,而且是负权值(输入的时候是正数) 思路 ...
- Web版的各种聊天工具
直到近期为止,我们经常使用的即时聊天工具(QQ.msn等)了Web版,大家不用下载庞大软件,直接打开网页就能够与自己的好友聊天,非常方便.在此将时汇总 便于大家查找 节约大 ...
- java11 Guava:谷歌开发的集合库
Guava:谷歌开发的集合库,通过build path->Add External JARs 把guava.jar包加进去. 版本控制工具:.CVS .SVN .git 所以需要下载git客户端 ...
- 标准I/O之实现细节
在UNIX系统中,标准I/O库最终都要调用文件I/O(read.write等).每个标准I/O流都有一个与其相关联的文件描述符,可以对一个流调用fileno函数以获得其描述符. 注意,fileno不是 ...
- .PIG File
.PIG File File extension: PIG File type: Texture File The PIG file type is primarily associated with ...
- C#泛型对类型参数的推断
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- apache solr简单搭建
首先,下载位置是:http://lucene.apache.org/solr/downloads.html 官网的学习资料:http://lucene.apache.org/solr/quicksta ...