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.加载错误, ...
随机推荐
- HW5.22
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- CentosX64使用yum快速搭建xen虚拟化环境
Xen的大名想必已经被众SA所熟知.Xen 是一个开放源代码虚拟机监视器,由剑桥大学开发.它打算在单个计算机上运行多达100个满特征的操作系统.操作系统必须进行显式地修改(“移植”)以在Xen上运行( ...
- HTML5终极备忘大全
二.文字备忘之标签 HTML5中新增的标签 <article> 定义文章 <aside> 定义页面内容旁边的内容 <audio> 定义声音内容 <canvas ...
- 将list转换为json失败
估计你是用的hibernate的自动注解,并且里面有一对多,多对一的关系,这是需要在不需要的字段上加上注解@JsonIgnore, 这样的话在list转json的时候就会忽略加上@JsonIgnore ...
- cocos2d-x 卡牌翻牌效果的实现
转自:http://blog.csdn.net/yanghuiliu/article/details/9115833 这个能实现翻牌的action就是CCOrbitCamera. static CCO ...
- 利用PS脚本自动删除7天之前建立的目录-方法1！
目前有一个备份目录,目录名称为d:\temp\bak目录,在这目录下,根据备份要求,自动生成了如下目录的列表: 20131012 20131011 20131010 20131009 20131008 ...
- 解决错误提示： 未找到 Oracle 客户端和网络组件。
问题描述: 环境:winxp运行程序连接远程Oracle数据库时报错:未找到 Oracle 客户端和网络组件.这些组件是由 Oracle 公司提供的,是 Oracle 8i 版 (或更高) 客户软件安 ...
- SQL Server解决死锁问题
用以下语句查询所有死锁的进程号和表名: SELECT request_session_id spid, OBJECT_NAME( resource_associated_entity_id ...
- jfinal文件上传和form表单值为null的解决方法
今天使用jfinal做上传提交的时候,遇到一个问题:添加了上传功能,原来的form表单submit提交时所有值都为null了,研究了很长时间,终于发现 在jfinal上传时候,jsp加 enctype ...
- [React Native] Basic iOS Routing -- NavigatorIOS
Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...