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

新建一个RequireJS模块：作为jQuery验证插件进行使用。

一、前文的目录结构

二、相关文件的全部代码示下：

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

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

大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以"jQuery的方式如何开发插件",以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插 ...
代码高亮插件——wangHightLighter.js——demo演示
wangHighLighter.js demo 语言: 主题: 转换说明: wangHightLighter.js是一个可以将代码高亮显示的javascript小插件,支持常用的20多语言.多个 ...
【unity 保卫星城】--- 开发笔记（Demo演示篇）
[unity 保卫星城]- 开发笔记保卫星城一.游戏介绍 <保卫星城>是一款移动端2D横板射击类游戏,使用Unity3D引擎开,与一般的打飞机需要躲避子弹不同,本游戏需要玩家控制小飞机 ...
爱奇艺开源轻量级插件化方案 Neptune
爱奇艺近日开源了其轻量级插件化方案 Neptune,项目地址:https://github.com/iqiyi/Neptune 插件化框架可以在主程序不重新安装的情况下,针对单个业务模块进行动态加载达 ...
android：使用small一步步实现插件化与热更新
由于插件化开发与热更新最近貌似越来越火,新开的项目准备也使用插件化进行开发!其中遇到不少坑,在这里写了一个小的例子,记录一下开发流程,有助于自己,同时希望能够帮助大家理解,并且对于自身项目接入插件化有 ...
爱奇艺插件化之Neptune
2019独角兽企业重金招聘Python工程师标准>>> 爱奇艺APP从2013年就开始了插件化技术的研究和改造,截止目前一共有20多个独立业务模块以插件化的方式运行和并行迭代,其中包 ...
linux系统怎么安装爱奇艺_爱奇艺插件化之Neptune
爱奇艺APP从2013年就开始了插件化技术的研究和改造,截止目前一共有20多个独立业务模块以插件化的方式运行和并行迭代,其中包括APP首页的奇秀.文学.电影票.漫画等业务.开发插件化框架的Demo并不 ...
酷狗 Android App 插件化实施过程
什么是插件化框架插件化框架可以在主程序不重新安装的情况下,针对单个业务模块进行加载达到模块更新的目的,整个加载更新过程,对用户来说也是无感知的. 正式因为这样,新需求比起传统更新方式 ...
Autoware入门学习（三）——Autoware软件功能使用介绍（1/3）及demo演示
文章目录 1 Autoware 的官方 demo 演示 1.1 数据下载(点击链接or指令均可) 1.2 Demo 运行 2 Autoware 软件功能使用介绍(1/3) 2.1 Quick Star ...

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

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

一、前文的目录结构

二、相关文件的全部代码示下：

1、文件 `validation-plugin.js` 代码块：

2、文件 `main.js` 代码块：

三、总结 && 效果截图：

1. 总结：

2. 模块引用：前、后效果图，对比示下：

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

最新文章

热门文章

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

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

一、 前文的目录结构

二、 相关文件的全部代码示下：

1、文件 validation-plugin.js 代码块：

2、文件 main.js 代码块：

三、总结 && 效果截图：

1. 总结：

2. 模块引用：前、后效果图，对比示下：

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

最新文章

热门文章

一、前文的目录结构

二、相关文件的全部代码示下：

1、文件 `validation-plugin.js` 代码块：

2、文件 `main.js` 代码块：