自定义jQuery插件Step by Step

时间  2019-11-05
标签 自定义 jquery 插件 step 栏目 JQuery 繁體版
原文   原文链接

自定义jQuery插件Step by Step

1.1.1 摘要

随着前端和后端技术的分离，各大互联网公司对于Mobile First理念都是趋之若鹜的，为了解决网页在不一样移动设备上的显示效果，其中一个解决方案就是Responsive Design；但咱们今天不是介绍它，正因为前端开发已经十分重要了，因此咱们将介绍如何使用jQuery自定义插件。 javascript

相信你们都使用过jQuery库，甚至自定义过一些经常使用的jQuery插件，若是没有学习过也无需担忧，接下来咱们将从一些简单的例子开始。 html

本文目录

1.1.2 正文

如今，jQuery库的功能已经很丰富了（The Write Less, Do More, JavaScript Library），但它也没有办法知足用户的全部需求，因此，它提供了一种机制：让用户给核心模块增长自定义的方法和额外的功能；经过这种机制，jQuery容许咱们建立自定义的插件封装经常使用的方法，从而提升咱们的开发效率。 前端

控件模式

jQuery插件定义方式很简单，若是咱们须要定义一个插件，只需给jQuery的$.fn对象添加一个新的函数属性就能够了，示例代码以下： java

$.fn.myPluginName = function() { // Your plugin logic. };

如今，咱们定义了一个函数myPluginName()，这样就建立了一个自定义插件了，但有一个问题咱们要注意的是：因为美圆符号（“$”）不只仅只有jQuery库会使用到，其余Javascript库也可能使用到，假如其余库中“$”也有特别的含义，那么就会引发没必要要冲突了。 jquery

其实，咱们能够经过定义自执行的函数（IIFE），而后把jQuery对象做为参数传递给该自执行函数，经过创建“$”和jQuery的对应关系，这样“$”就不会在其执行范围中被其余库覆盖了。 git

(function($) {
    $.fn.myPluginName = function() { // your plugin logic };
})(jQuery);

你们看到这里，咱们的插件经过闭包的方式封装起来了，这是为了确保咱们使用“$”符号和其余JavaScript库之间不会冲突。 github

上面咱们经过匿名函数的方式给myPluginName()方法赋值，咱们也能够经过另一种方法来建立自定义方法，那就是使用jQuery的extend()方法，它容许咱们定义多个方法，并且语意更加简洁，示例代码以下： web

(function($) {
    $.extend($.fn, {
        myplugin: function() { // your plugin logic }
    });
})(jQuery);

SignUp表单

如今，咱们对jQuery自定义插件有了初步的了解，接下来，咱们将经过具体的例子介绍自定义的jQuery插件的实现。 ajax

假设，咱们须要定义一个表单校验的插件，也许有人会说：“jQuery已经提供了表单校验插件，咱们真的有必要重作轮子吗？”，的确是这样，但这些插件功能十分丰富不利于刚开始的学习jQuery使用，咱们更但愿经过一个简单的例子介绍jQuery插件的定义。 后端

咱们有一个注册表单，它包含Name，Email，Password和Weibo等输入信息，如今，须要定义一个表单验证控件，验证用户的输入信息是否符合规则，表单的HTML代码以下： 

<div class="validation-demo"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h2>Sign Up</h2> <fieldset> <div class="fieldgroup"> <label for="name"> Name</label> <input type="text" name="name" validation="required"/> </div> <div class="fieldgroup"> <label for="email"> Email</label> <input type="text" name="email" validation="email"/> </div> <div class="fieldgroup"> <label for="password"> Password</label> <input type="text" name="password" validation="password"/> </div> <div class="fieldgroup"> <label for="weibo"> Weibo</label> <input type="text" name="weibo" validation="url"/> </div> <div class="fieldgroup"> <input type="submit" class="submit" value="Sign up"> </div> </fieldset> <div class="fieldgroup"> <p>Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p> </div> </form> <!-- End Sign Up Form --> </div>

如今，咱们须要验证Password长度，Email地址和Weibo地址的合法性，首先咱们在input标签中添加validation属性标记该输入是否须要验证，接着咱们设置validation的值：required，email，password和url。

validation0

图1注册表单

Validation对象

接下来，咱们要建立一个Validation类型（类）用于验证用户输入信息，它包含4个方法分别用于验证Name、Email、Password和Url地址信息。 

(function($) { // The validation function. // We adds validation rules for email, required field, password and url. var Validation = function() { var rules = {

            email: {
                check: function(value) { if (value) return isValidatedPattern(value, /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/); return true;
                },
                msg: "Please enter a valid e-mail address." },
            url: {
                check: function(value) { if (value) return isValidatedPattern(value, /^https?:\/\/(.+\.)+.{2,4}(\/.*)?$/); return true;
                },
                msg: "Please enter a valid URL." },
            password: {
                check: function(value) { if (value.length < 8 || value.length > 20) { return false;
                    } else { // Check the password strength enough. return isValidatedPattern(value, /(?=[A-Za-z0-9]{8,20})(?=.*[A-Za-z])(?=.*[0-9])[A-Za-z0-9]+/);
                    }
                },
                msg: "Your password must be at least 8 characters long." },
            required: {
                check: function(value) { if (value) return true; else return false;
                },
                msg: "This field is required." }
        } var isValidatedPattern = function(value, pattern) { var regex = pattern; var match = regex.exec(value); return match;
        } // Returns a publish method, then the user can custom validation rule. return {

            addRule: function(name, rule) {

                rules[name] = rule;
            },
            getRule: function(name) { return rules[name];
            }
        }
    } //Creates instance of our object in the jQuery namespace. $.Validation = new Validation();
})(jQuery); // We're passing jQuery into the function // so we can use $ without potential conflicts.

上面，咱们定义了一个Validation类型，经过一个私有的数组rules保存了验证Name、Email、Password和Url对象；每一个验证对象中都包含一个check()方法，如：email对象的check()方法，经过调用方法isValidatedPattern()，判断用户输入是否符合验证规则。

接着，咱们返回公开的方法addRule()和getRule()，让用户能够经过addRule()方法增长自定义的验证方法。

咱们在Validation类型中定义了公开的方法addRule()，经过该方法咱们能够添加自定义的验证方法，而无需修改咱们的插件代码。

接下来，让咱们添加自定义的验证方法，具体代码以下： 

// Adds custom rule. $.validation.addRule("CustomRule", {
    check: function(value) { if (value != "JK_Rush") { return false;
        } return true;
    },
    msg: "Must equal to the word JK_Rush." });

上面，咱们经过addRule()方法添加了自定义的验证规则，因为addRule()方法是公开的，因此咱们能够经过该方法往私有的rules数组添加自定义的验证规则。

表单对象

接下来，咱们定义一个Form类型，它表示DOM中的表单实例。 

// The Form type. var Form = function(form) { var fields = []; // Find the field has the validation attribute. form.find("[validation]").each(function() { var field = $(this); if (field.attr('validation') !== undefined) {
            fields.push(new Field(field));
        }
    }); this.fields = fields;
} // The Field type. var Field = function(field) { this.field = field; this.valid = false; //this.attach("change"); }

因为表单中有多个输入框，咱们使用jQuery的each()方法来遍历表单中全部的输入框，查找到输入框中包含valiation属性的输入框，而后把field对象保存到fields数组中。

Javascript原型对象

ECMAScript中描述了原型链的概念，并将原型链做为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。

前面，咱们建立一个类型Field用来表示表单中须要验证的输入框，那么Field实例对象必须有一个validate()方法，咱们直接给Field对象添加validate()方法，具体实现以下： 

var Field = function(field) { this.field = field; this.valid = false; //this.attach("change"); }

Field.validate = function() { // Your cdoe here. }

咱们注意到每当建立一个Field对象时，都会分配给该对象一个独立的validate()方法，若是咱们建立30个Field对象，那么就要给这30对象分配30次validate()方法，其实，validate()方法应该是共享的，也就是说每一个Field对象都应该调用用一个validate()方法；这时咱们可使用原型链方式共享validate()方法。

接下来，让咱们将在Field的原型属性（prototype）中添加validate()方法，具体实现以下： 

// The prototype of Field type. Field.prototype = { // Public method. attach: function(event) { // The object refers to Field object. var obj = this; // When the field changed, then invoked the validate method. if (event == "change") {
            obj.field.bind("change", function() { return obj.validate();
            });
        } // When Key up, then invoked the validate method. if (event == "keyup") {
            obj.field.bind("keyup", function() { return obj.validate();
            });
        }
    }, // Public method. validate: function() { var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass), // We can splits the validation attribute with space. // Gets all validation types. types = field.attr("validation").split(" "), // Gets the fieldgroud object. container = field.parent(),
                errors = []; // If there is an errorlist already present // remove it before performing additional validation field.next(".errorlist").remove(); for (var type in types) { var rule = $.Validation.getRule(types[type]); // If invalid displays the error msg. if (!rule.check(field.val())) {

                container.addClass("error");
                errors.push(rule.msg);
            }
        } if (errors.length) { // Unbinds the keyup event added before. obj.field.unbind("keyup") // Attaches the keyup event. obj.attach("keyup");
            field.after(errorlist.empty()); // Displays the error msg. for (error in errors) {

                errorlist.append("<li>" + errors[error] + "</li>");
            }
            obj.valid = false;
        } else {
            errorlist.remove();
            container.removeClass("error");
            obj.valid = true;
        }
    }
}
validation2

图2 Field原型对象

咱们在Field的原型中添加了两个方法，attach()方法用来绑定验证输入框的keyup和change事件，而validate()方法封装了调用具体校验方法。

如今，每一个Field对象均可以调用继承于原型的attach()和validate()方法，假设表单中包含30个须要校验的输入，那么咱们该如何遍历每一个Field对象而且调用其validate()方法呢？

其实，Field对象都包含在Form对象中，因为咱们在Form类型中定义了fields属性，它存储了包含validation属性field对象，因此咱们能够经过访问Form的fields属性遍历每一个field对象。

这里咱们给Form的原型添加两个方法，validate()用来校验表单对象中的field，isValid()方法判断field对象是否符合验证规则，若是不符合规则就把焦点定在该输入框中。 

// The prototype of Form. Form.prototype = { // Validates all the fields in the form object. validate: function() { for (field in this.fields) { this.fields[field].validate();
        }
    }, // If the field invaild, focus on it. isValid: function() { for (field in this.fields) { if (!this.fields[field].valid) { this.fields[field].field.focus(); return false;
            }
        } return true;
    }
}

validation3

图3 Form原型对象

插件使用

如今咱们给Form对象添加了validate()和isValid()方法，接下来，咱们将使用jQuery的扩展方法（$.extend），使全部的jQuery对象均可以访问咱们自定义的插件方法。 

// Extends jQuery prototype with validation and validate methods. $.extend($.fn, {

    validation: function() { // Creates a Form instance. var validator = new Form($(this)); // Stores the Form instance in Key/Value collection. $.data($(this)[0], 'validator', validator); // Binds the submit event. $(this).bind("submit", function(e) {
            validator.validate(); if (!validator.isValid()) {
                e.preventDefault();
            }
        });
    }, // Checks the field is validated or not. validate: function() { var validator = $.data($(this)[0], 'validator');
        validator.validate(); return validator.isValid();

    }
});

咱们在jQuery的扩展方法（$.extend）中添加了两个方法，它们分别是validation()和 validate()；validation()建立了一个Form对象，接着绑定了页面的submit事件，当页面方式提交时，验证表单输入是否正确。

如今，咱们已经完成了自定义的jQuery插件了，那么接下来咱们将使用该插件验证signupform。

咱们在表单的HTML中引入jQuery库和自定义插件，具体代码以下： 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.formvalidation.js"></script>

固然咱们也把jQuery库下载到本地，而后引入到咱们项目中。

接下来，咱们在HTML页面中添加如下代码： 

$(function() { // jQuery DOM ready function. // Get the form object. var signUpForm = $("#signup-form"); // Invokes the validation method. signUpForm.validation();
});

当DOM加载完毕后，就调用validation验证插件，当用户对页面进行提交或输入框的修改都会触发validate()方法。

1.1.3 总结

本文介绍了如何自定义jQuery插件，首先介绍了jQuery插件的定义方式，经过给jQuery的$.fn方法添加自定义方法来实现咱们的插件。

接着，咱们引入了表单验证控件例子来介绍jQuery插件的实现；咱们在插件中定义了Form和Field类型，而后经过原型链方式共享Form和Field的方法，使得每一个Form或Field对象实例能够调用其共享的方法。

但愿你们在阅读本博文后，对jQuery插件的实现有进一步的了解。

参考

Demo下载

Jackson Huang

关于做者:

[做者]： JK_Rush从事.NET开发和热衷于开源高性能系统设计，经过博文交流和分享经验，欢迎转载，请保留原文地址，谢谢。
[出处]： http://www.cnblogs.com/rush/
[本文基于]: 署名-非商业性使用 3.0 许可协议发布，欢迎转载，演绎，可是必须保留本文的署名 JK_Rush （包含连接），且不得用于商业目的。如您有任何疑问或者受权方面的协商，请与我联系 。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程