jQuery如何封裝輸入框外掛程式_jquery

【前言】

　　在大型項目的開發中，外掛程式化是一種趨勢，將相似的多次使用的東西封裝成公用的外掛程式，以提高開發效率。其他開發人員在調用外掛程式的時候，只需簡單的一兩行代碼就可以實現非常複雜的內容或者效果。

　　在這一節裡面我就跟大家分享一下，我是如何封裝一個輸入框外掛程式的。

【呈現分析】

（1）預設展示：邊框為灰色，中間有輸入提示資訊

（2）擷取焦點：邊框為藍色，無輸入內容時中間有輸入提示資訊，有輸入內容的時候中間顯示輸入內容

（3）失去焦點：輸入正確邊框變成淺綠色，並有個√；輸入錯誤，邊框變紅，並有個×

【功能分析】

私人方法：不對外體現，外掛程式內部自己調用；

公有方法：對外提供的介面，其他開發人員可以調用

（1）繪製DOM（私人方法）：根據呈現分析裡面的html結構，使用jQuery動態將其繪製出來。

（2）焦時間點事件（私人方法）：給輸入框綁定移入移出等事件，不同的狀態輸入框應該做出不同的呈現。

（3）合法性檢驗（私人方法）：根據輸入的內容，校正輸入的合法性，並給出提示。

（4）長度校正（私人方法）：根據輸入的內容，校正輸入的長度，並給出提示。

（5）狀態展現（私人方法）：根據校正的結果（正確，錯誤，失去焦點，獲得焦點），展現不同的狀態

（6）設定大小（公有方法）：其他開發人員根據需要，可以通過此方法改變輸入框的大小

（7）置灰功能（公有方法）：有時候我們需要將輸入框置灰，禁止使用者對其值進行改變。

（8）值擷取（公有方法）：輸入框最重要的當然是裡面的值啦，這個方法必須要提供給其他開發人員調用啦。

（9）值重設（公有方法）：很多時候，我們需要將輸入框的賦予初始值，比如剛進入頁面的時候，所以這個方法也是必不可少啦。

（10）預設值（公有方法）：當其他開發人員需要定製化輸入框時候調用。

【開發步驟】

（1）繪製簡單的DOM

　　在我們封裝一個組件前，我們最好將其html結構寫出來，這樣有利於我們封裝的時候快速的布局。根據上面的需求其DOM結構如下：

<div class="input_container"><input type="text" class="input_text input_text_blur" placeholder=""><div class="input_result"></div></div>

（2）初始化外掛程式：將常用值儲存起來，同時調用繪製輸入框DOM結構的函數

// 初始化外掛程式init: function() {// 常用值儲存var _this = this;_this.type = _this.settings.type;_this.spec = _this.settings.spec;_this.length = _this.settings.length;_this.placeholder = _this.settings.placeholder;_this.isRequired = _this.settings.isRequired;// 初始化輸入框DOM結構_this._initInputDom();},

（3）初始化輸入框DOM結構：使用jQuery動態產生DOM結構，避免其他開發人員手動編寫，其實就是使用jQuery將第一步的三行HTML介面寫出來，寫的挺多，其實功能就一個(*^__^*) ……

_initInputDom: function() {var _this = this,inputContainer = $('<div></div>'),inputContent = $('<input type="' + _this.type + '">'),inputResult = $('<div></div>');inputContainer.addClass('input_container');inputContent.addClass('input_text input_text_blur');inputResult.addClass('input_result');inputContainer.append(inputContent);inputContainer.append(inputResult);_this.element.append(inputContainer);// 記錄當前需要操作的dom_this.input = _this.element.find('input');_this.container = _this.element.find('.input_container');if (_this.placeholder !== null) {//placeholder提示資訊_this.input.prop('placeholder', _this.placeholder);}_this._initEvent();},

（4）綁定事件：擷取焦點focus，失去焦點blur，值改變change，需要注意一點，就是當輸入框唯讀話，是不需要綁定事件的

// 綁定事件_initEvent: function() {var _this = this;// 擷取焦點focus,失去焦點blur,值改變change// 如果輸入框唯讀話就不操作_this.input.focus(function() {if (!$(this).attr('readonly')) {_this._setStatus(this, 'focus');}}).blur(function() {if (!$(this).attr('readonly')) {if (_this.getValue() === '') {if (_this.isRequired) {// 必填項失去焦點_this._setStatus(this, 'error');} else {// 非必填項失去焦點_this._setStatus(this, 'blur');}} else {// 有值得情況直接進行值校正if (_this._checkSpec()) {_this._setStatus(this, 'right');} else {_this._setStatus(this, 'error');}}}}).keyup(function() {_this._checkLenght();});;},

（5）值正確性校正：通過讀取輸入框值的規則，來校正輸入內容的正確性

//校正輸入框輸入內容_checkSpec: function() {var _this = this;return _this.spec.test(_this.getValue());},

（6）長度校正：通過讀取輸入框值的長度規則，來校正輸入長度的正確性

//檢驗輸入框輸入長度_checkLenght: function() {var _this = this,inputLength = _this.length,//8-32這種格式的範圍currentLength = _this.getValue().length,// 長度是否在範圍內lengthFlag = true;if (/^\d+-\d+$/.test(inputLength)) {// 區間範圍var valueRange = inputLength.split('-');//當前值長度小於定義範圍if (parseInt(valueRange[0], 10) > currentLength) {lengthFlag = false;}//當前值長度大於定義範圍，屏蔽輸入if (currentLength > parseInt(valueRange[1], 10)) {_this.setValue(_this.getValue().substring(0, parseInt(valueRange[1], 10)));}} else if (/^\d+$/.test(inputLength)) {// 固定長度// 當前長度不等於設定長度if (currentLength !== parseInt(inputLength, 10)) {lengthFlag = false;}}// 長度不在區間飄紅if (!lengthFlag) {_this._setStatus(_this.input, 'error');} else {_this._setStatus(_this.input, 'focus');}},

（7）設定輸入框狀態：根據校正的結果，顯示不同的狀態

//設定輸入框狀態，正確，錯誤，失去焦點，獲得焦點_setStatus: function(inputObj, status) {$(inputObj).removeClass('input_text_focus input_text_blur input_text_right input_text_error');$(inputObj).siblings('.input_result').removeClass('input_result_right input_result_error');if (status === "right") {$(inputObj).addClass('input_text_right');$(inputObj).siblings('.input_result').addClass('input_result_right').text('√');} else if (status === "error") {$(inputObj).addClass('input_text_error')$(inputObj).siblings('.input_result').addClass('input_result_error').text('×');} else if (status === "blur") {$(inputObj).addClass('input_text_blur');} else if (status === "focus") {$(inputObj).addClass('input_text_focus');}},

（8）設定輸入框大小：提供了簡單的介面設定輸入框的大小small,big,或者數字

//設定輸入框大小setSize: function(size) {var _this = this;var scaleSize = 1;if (size === 'small') {scaleSize = 0.8;} else if (size === 'big') {scaleSize = 1.2;} else if (parseInt(size, 10) !== NaN) {scaleSize = parseInt(size, 10)};_this.container.css('transform', 'scale(' + scaleSize + ')');},

（9）置灰操作：禁止輸入任何內容

//輸入框置灰setGrey: function(flag) {var _this = this;if (flag) {_this.input.prop('readonly', '');} else {_this.input.removeAttr('readonly');}},

（10）擷取值，重設值實現

//擷取輸入框值getValue: function() {return this.input.val();},//設定輸入框值setValue: function(str) {this.input.val(str);}

（11）定製化輸入框介面

// 預設參數$.fn.CreateInput.defaultValue = {// 輸入框類型：text,passwordtype: "text",//輸入框規則spec: null,//長度length: null,//描述輸入欄位placeholder: null,//是否必填isRequired: false};

【如何調用】

//產生輸入框$("#username").CreateInput({type: "text",spec: /^[0-9]\d*$/,length: '5-8',placeholder: '不可為空，只能輸入數字，長度為5-8',isRequired: true});//調用公有方法var myInput = $("#username").data('CreateInput');myInput.setValue("1245"); 

以上所述是小編給大家介紹的jQuery如何封裝輸入框外掛程式，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！