自定義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教程