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.加载错误, ...
随机推荐
- iOS版 feedly 无法使用gmail账户的解决办法
印象中很长时间以来,iOS版 Feedly 总是使用不了gmail账户,原因就在于打不开登录界面.但奇怪的是在PC上又正常……非常无语!手机和PC真是两个不同的世界啊 其它RSS阅读软件不是收费,就是 ...
- oracle 临时表学习
临时表概念 临时表就是用来暂时保存临时数据(亦或叫中间数据)的一个数据库对象,它和普通表有些类似,然而又有很大区别.它只能存储在临时表空间,而非用户的表空间.ORACLE临时表是会话或事务级别的,只对 ...
- jsf服务器端验证用户输入
服务器端验证用户输入数据步骤 1 html页面上插入要输入数据控件 <h:inputText size="10" value="#{commodityBean.fo ...
- 小波变换和motion信号处理（二）(转)
写的太好,这是第二篇:http://www.kunli.info/2011/02/18/fourier-wavelet-motion-signal-2/ 这是<小波变换和motion信号处理&g ...
- PC-XP系统忘记密码怎么办
(一)以恢复本地用户"*****"口令为例,来说明解决忘记登录密码的步骤:1.重新启动计算机,在启动画面出现后马上按下F8键,选择"带命令行的安全模式".2.运 ...
- Laravle Introduction
Where To Start Learning a new framework can be daunting, but it's also exciting. To smooth your tran ...
- 在 windows 上面安装 tensorflow
这个是 tensorflow 官网地址, https://www.tensorflow.org/get_started/os_setup#pip_installation_on_windows 上面有 ...
- 特殊的反转单链表算法（C++）
普通的单链表反转算法 大学的时候也做过好几次单链表的反转,记得当时都是用三个变量不断修改next的值然后实现反转. ListNode* reverseList(ListNode* head) { Li ...
- 10个可以直接拿来用的JQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
- C++或者C#中如何拿到一个窗口的标题
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C++或者C#中如何拿到一个窗口的标题.