自定義jQuery插件Step by Step
隨著前端和后端技術的分離，各大互聯網公司對于Mobile First理念都是趨之若鶩的，為了解決網頁在不同移動設備上的顯示效果，其中一個解決方案就是Responsive Design...
1.1.1 摘要
隨著前端和后端技術的分離，各大互聯網公司對于Mobile First理念都是趨之若鶩的，為了解決網頁在不同移動設備上的顯示效果，其中一個解決方案就是Responsive Design；但我們今天不是介紹它，正由于前端開發已經十分重要了，所以我們將介紹如何使用jQuery自定義插件。
相信大家都使用過jQuery庫，甚至自定義過一些常用的jQuery插件，如果沒有學習過也無需擔心，接下來我們將從一些簡單的例子開始。
本文目錄
1.1.2 正文
現在，jQuery庫的功能已經很豐富了（The Write Less, Do More, JavaScript Library），但它也沒有辦法滿足用戶的所有需求，所以，它提供了一種機制：讓用戶給核心模塊增加自定義的方法和額外的功能；通過這種機制，jQuery允許我們創建自定義的插件封裝常用的方法，從而提高我們的開發效率。
控件模式
jQuery插件定義方式很簡單，如果我們需要定義一個插件，只需給jQuery的$.fn對象添加一個新的函數屬性就可以了，示例代碼如下：
$.fn.myPluginName = function() { // Your plugin logic. };
現在，我們定義了一個函數myPluginName()，這樣就創建了一個自定義插件了，但有一個問題我們要注意的是：由于美元符號（“$”）不僅僅只有jQuery庫會使用到，其他Javascript庫也可能使用到，假如其他庫中“$”也有特別的含義，那么就會引起不必要沖突了。
其實，我們可以通過定義自執行的函數（IIFE），然后把jQuery對象作為參數傳遞給該自執行函數，通過建立“$”和jQuery的對應關系，這樣“$”就不會在其執行范圍中被其他庫覆蓋了。
(function($) { $.fn.myPluginName = function() { // your plugin logic }; })(jQuery);
大家看到這里，我們的插件通過閉包的方式封裝起來了，這是為了確保我們使用“$”符號和其他JavaScript庫之間不會沖突。
上面我們通過匿名函數的方式給myPluginName()方法賦值，我們也可以通過另外一種方法來創建自定義方法，那就是使用jQuery的extend()方法，它允許我們定義多個方法，而且語意更加簡潔，示例代碼如下：
(function($) { $.extend($.fn, { myplugin: function() { // your plugin logic } }); })(jQuery);
SignUp表單
現在，我們對jQuery自定義插件有了初步的了解，接下來，我們將通過具體的例子介紹自定義的jQuery插件的實現。
假設，我們需要定義一個表單校驗的插件，也許有人會說：“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.rzrgm.cn/rush">Sign in</a>.</p> </div> </form> <!-- End Sign Up Form --> </div>
現在，我們需要驗證Password長度，Email地址和Weibo地址的合法性，首先我們在input標簽中添加validation屬性標記該輸入是否需要驗證，接著我們設置validation的值：required，email，password和url。
圖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; } } }
圖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; } }
圖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插件的實現有進一步的了解。
參考
|
關于作者:[作者]：
JK_Rush從事.NET開發和熱衷于開源高性能系統設計，通過博文交流和分享經驗，歡迎轉載，請保留原文地址，謝謝。 |
浙公網安備 33010602011771號