RequireJS模块的建立:插件化体验 - demo演示篇
新建一个RequireJS模块:作为jQuery验证插件进行使用。
一、 前文的目录结构
结合前文的目录结构和相关文件,在lib文件夹下,新建js文件:lib/validation-plugin.js
二、 相关文件的全部代码示下:
1、文件 validation-plugin.js
代码块:
我们在该文件内,以jQuery插件形式编写验证模块,指定jQuery作为它的唯一依赖。
该模块检查某一个输入值,符合Email格式返回true,不符合返回false
/* validation-plugin.js */
define(["jquery"], function ($){
$.fn.isValidEmail = function (){
var isVaild = true,
regEx = /\S+@\S+\.\S+/;
this.each(function (){
if (!regEx.test(this.value)){
isVaild = false;
}
});
return isVaild;
}
});
2、文件 main.js
代码块:
前文参考: // 4. 内容分发网络和后备 的代码
// 4. 内容分发网络和后备
requirejs.config({
paths: {
"jquery": [
// CDN
"https://ajax.googleapis.com/ajax/jquery/1.10.2/jquery.min",
// 如果CDN不能正常运作,则从本地文件加载
"lib/jquery-1.11.1"
]
}
});
// 本次新增验证代码块
require(["jquery", "lib/validation-plugin"], function ($){
var $form = $("#form"),
$email = $("#email");
$form.on("submit", function (e){
e.preventDefault();
if ($email.isValidEmail()){
$form.get(0).submit();
} else {
$email.addClass("error").focus();
}
});
$email.on("keyup", function (){
$email.removeClass("error");
});
});
三、总结 && 效果截图:
1. 总结:
-
在调用define()函数进行模块建立时,省略了模块名这个可选参数。
-
这样,此模块就会以本文件相对于require.js文件的相对位置文件名进行注册。
-
其他对此模块有依赖的文件可以通过
“ lib/validation-plugin ”
这个模块名来引用此模块。
依赖项处理完毕,接着就是主应用脚本
main.js
的代码编写。
.
这里不打算用define()函数。
作为替代,可以使用RequireJS或AMD API都有的函数:require()函数
.
两者的区别:
- RequireJS适用于声明模块,以便以后使用;
- AMD API适用于不需要建立可重用的模块、只需要加载各个依赖直接执行的场合。
.
后者适用我们的main.js主应用脚本,即:一次性执行,不需要重用。
当所用事情结束,首页index.html文件在浏览器执行时,jQuery库将会先加载,然后是验证插件模块。你可能会注意到我在前文的定义验证模块时也指定了jQuery作为验证模块的依赖。
RequireJS的一个优点就是当遇到一个已经被引用过的依赖时,它会使用缓存在客户端内存中的值,而不是再次下载。
这样,我们就能专注于正确定义代码文件依赖,而不需要考虑所需要下载的数据量。
- 一旦所有依赖项加载完毕,匿名函数就会执行,来自于依赖项的返回值将作为匿名函数的参数传入函数体内。
- 因为我们把验证模块定义为了jQuery的一个插件,并没有指定返回值,它将会添加到jQuery的
$变量
【其他插件普遍都是这种做法】
2. 模块引用:前、后效果图,对比示下:
以上就是关于 “ RequireJS模块的建立:插件化体验 - demo演示篇 ” 的全部内容。