RequireJS模块的建立：插件化体验 - demo演示篇

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演示篇 ” 的全部内容。