上一篇中介绍了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,点击文本框时候,发现已经绑定了日历

参考资料:

http://www.requirejs.cn/

requirejs实践二 加载其它JavaScript与运行的更多相关文章

  1. requirejs实践一 加载JavaScript文件

    首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 <!DOCTYPE html> &l ...

  2. AntiModerate – 渐进式图片加载的 JavaScript 库

    AntiModerate 是一个渐进式图片加载的 JavaScript 库.我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像:而有的图片是先出现一个很低分辨率的图像轮廓,类似加了 ...

  3. RequireJS跨域加载html模版后被转成JS问题分析及解决

    问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...

  4. RequireJS 主入口加载模块经常会加载失败的问题

    在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...

  5. Mybatis源码解析(二) —— 加载 Configuration

    Mybatis源码解析(二) -- 加载 Configuration    正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config. ...

  6. Android中插件开发篇之----动态加载Activity(免安装运行程序)

    一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...

  7. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  8. [require-js]向下滑动ajax加载的javascript实现

    define(function(){ function ScrollMoreInfo($wraper , loadDataFunc , json_ids , perNum , tpl_info) { ...

  9. jquery的promise实践--连续加载图片

    在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...

随机推荐

  1. POJ-3070Fibonacci(矩阵快速幂求Fibonacci数列) uva 10689 Yet another Number Sequence【矩阵快速幂】

    典型的两道矩阵快速幂求斐波那契数列 POJ 那是 默认a=0,b=1 UVA 一般情况是 斐波那契f(n)=(n-1)次幂情况下的(ans.m[0][0] * b + ans.m[0][1] * a) ...

  2. 嵌套在母版页中的repeater自动生成控件ID

    注:如果直接在后台通过e.Item.FindControl()方法直接找控件,然后再通过对其ID赋值,在编译之后会出现“母版页名称_ID“类似的很长的ID值(详情点击) 解决方法:<asp:Co ...

  3. tcpclient 类

    1. 构造函数 1) 类对象将套接字与本地系统地址和一个随机的tcp端口号进行绑定. 在默认的tcpclient 对象创建后,必须使用connect方法与远程设备连接. TcpClient tc = ...

  4. 手把手教你入门web.xml:吃透监听器

    监听器的原理: 被监听对象→对象拥有的事件→捕获到事件变化→监听器捕捉事件→监听器处理该事件 Web服务器上有4个范围,抛开page范围,还有request范围,session范围,applicati ...

  5. Java字节转换类实现

    Java的类库支持完全不如C#,比如时间类,比如数据类型转换类等等,难道是我自己没找到吗? 下面是字节转换类,byte[]与short, int, long, float, double, Strin ...

  6. 用HiveDB横向切分MySQL数据库

    HiveDB是一个用来横向切分mysql数据库的开源框架,构建一个高性能和可扩展的基于mysql的系统需要大量的系统设计经验和良好的代码的实现,一个比较好的策略是将你的数据横向切分在多个server上 ...

  7. Fatal error: Call to undefined function mysql_connect()

    我在进行PHP环境搭建:Windows 7下安装配置PHP+Mysql+apache环境时,之前都没有什么问题,只是在验证PHP是否能连接Mysql时出现如下错误:Fatal error: Call ...

  8. 在配置XML时报的The reference to entity "dataSource" must end with the ';' delimiter错误

    <?xml version="1.0" encoding="UTF-8"?> <ECharts> <element>http ...

  9. 深入浅出JMS(一)——JMS简单介绍

    假设手机仅仅能进行实时通话,没有留言和短信功能会怎么样?一个电话打过来,正好没有来得及接上,那么这个电话要传递的信息肯定就收不到了.为什么不能先将信息存下来,当用户须要查看信息的时候再去获得信息呢?伴 ...

  10. openoffice转换过程中遇到繁体字文档转换失败的问题

    今天发现上线的文档转换功能中存在一个文档转换不成功,查看后台日志标志文档无法加载成功,提示日志如下: INFO: connected Jul 08, 2015 2:50:33 PM com.artof ...