接觸過(guò)Angularjs的都知道,ng支持雙向綁定，我們可以輕輕松松的通過(guò)ngModel將我們的值綁定到界面，當(dāng)修改了值提交表單的時(shí)候不需要再重新通過(guò)ID去重新抓取輸入框信息了。那對(duì)于我們開(kāi)發(fā)前臺(tái)網(wǎng)站，不用ng一類(lèi)的MVVM框架，只引用了Jquery，那么在處理表單的時(shí)候該怎么做呢。
一. 原始做法
<div id="form"> <select id='select1'> <option value="">--請(qǐng)選擇--</option> <option value="1">--1--</option> <option value="2">--2--</option> <option value="3">--3--</option> </select> <input id='radio1' type="radio" /> <input id='text1' type="text" /> <textarea id='textArea1' ></textarea></div>
程序員A會(huì)說(shuō),So easy,通過(guò)Jquery id 去獲取每個(gè)輸入框的值就OK。多簡(jiǎn)單。
function getEntity(){ return { select1:$("#select1").val(), radio1:$("#radio1").prop('checked'), text1:$("text1").val(), textArea1:$("textArea1").val() }}二. 升級(jí)做法.
程序員B說(shuō), 這樣不行哦，很多頁(yè)面都有表單提交, 那不是每個(gè)地方都要用Jquery去獲取值，如果以后新增了輸入框，每次HTML修改了，還要修改對(duì)應(yīng)的JS，多麻煩。于是愛(ài)偷懶的程序員B想到了一種方法，通過(guò)自定義標(biāo)簽來(lái)實(shí)現(xiàn)。
2.1 我們將表單包裝到一個(gè)form的div下，每個(gè)輸入的控件新增一個(gè)data-field屬性. data-field里面寫(xiě)構(gòu)建實(shí)體的屬性名稱，考慮到會(huì)出現(xiàn)嵌套的對(duì)象。所以data-field 里面屬性名稱通過(guò) . 點(diǎn)來(lái)隔開(kāi)，譬如 data-field='Person.Name' 后面就會(huì)構(gòu)建出 { Person:{ Name:xxx }} .下面的是沒(méi)有嵌套的對(duì)象的例子
<div id="form"> <select data-field='select1'> <option value="">--請(qǐng)選擇--</option> <option value="1">--1--</option> <option value="2">--2--</option> <option value="3">--3--</option> </select> <input data-field='radio1' type="radio" /> <input data-field='text1' type="text" /> <textarea data-field='textArea1'></textarea> </div>
2.2 提供一個(gè)getEntity方法。 讀取外層的Form然后找到所有的data-field 屬性去遍歷. 因?yàn)檩斎肟蛴衏heckbox和radio，input和select, 所以判斷類(lèi)型先取出值。然后調(diào)用getField方法構(gòu)建實(shí)體。代碼就不做詳細(xì)解答了。應(yīng)該都能看懂。只是想表達(dá)一下思路想法而已。
function getEntity(form) { var result = {}; $(form).find("[data-field]").each(function() { var field = $(this).attr("data-field"); var val; if ($(this).attr('type') == 'checkbox') { val = $(this).prop('checked'); } else if ($(this).attr('type') == 'radio') { val = $(this).prop('checked'); } else { val = $(this).val(); } // 獲取單個(gè)屬性的值,并擴(kuò)展到result對(duì)象里面 getField(field.split('.'), val, result); }); return result; }function getField(fieldNames, value, result) { if (fieldNames.length > 1) { for (var i = 0; i < fieldNames.length - 1; i++) { if (result[fieldNames[i]] == undefined) { result[fieldNames[i]] = {} } result = result[fieldNames[i]]; } result[fieldNames[fieldNames.length - 1]] = value; } else { result[fieldNames[0]] = value; }}2.3 下面來(lái)看看上面輸出的結(jié)果,哈哈值取到了。
2.4 下面我們來(lái)看看看嵌套的對(duì)象
<div id="form"> <select data-field='Person.Job'> <option value="">--職位--</option> <option value="java工程師">java工程師</option> <option value="net工程師">.net工程師</option> <option value="python工程師">python工程師</option> </select> <input data-field='Person.Desc' type="text" /> </div>
2.5 提供了獲取實(shí)體的方法，當(dāng)然也要提供賦值的方法呀。下面來(lái)看看賦值的方法
function setEntity(form, entity) { $(form).find("[data-field]").each(function() { var field = $(this).attr("data-field"); fieldNames = field.split('.'); var value = JSON.parse(JSON.stringify(entity)); for (var index = 0; index < fieldNames.length; index++) { value = value[fieldNames[index]]; if (!value) { break; } } if ($(this).attr("type") === "checkbox" || $(this).attr("type") === "radio") { $(this).attr('checked', Boolean(value)); } else { if (value) { $(this).val(value); } else { $(this).val(""); } } })} 
呵呵,值附上去了.
三. 總結(jié):
上面只是提供了解決方案, 雖然前臺(tái)系統(tǒng),不會(huì)考慮像后臺(tái)backend 系統(tǒng)那樣，用react,angularjs這種MVVM框架, 雖然只是用了一個(gè)Jquery而已。不過(guò)我們還是可以通過(guò)一些方法來(lái)簡(jiǎn)化項(xiàng)目代碼的。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
