【前言】
在大型項目的開發中，插件化是一種趨勢，將相似的多次使用的東西封裝成公共的插件，以提高開發效率。其他開發人員在調用插件的時候，只需簡單的一兩行代碼就可以實現非常復雜的內容或者效果。
在這一節里面我就跟大家分享一下，我是如何封裝一個輸入框插件的。
【呈現分析】
（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如何封裝輸入框插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
