JavaScrip面向?qū)ο罄斫?
JavaScrip的對象簡單來說一組無序的值，其中的屬性或方法都有一個(gè)名字动壤，面向?qū)ο蟾欣谄髽I(yè)對于網(wǎng)頁的開發(fā)乞封。
有所了解后，我們可以做一個(gè)例子來了解（表單生成器）
1.首先我們需要定義存儲結(jié)構(gòu)并將其轉(zhuǎn)化成對象
var elements = [? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {tag:'input', text:'姓 名：', attr: {type:'text', name:'user'}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {tag:'input', text:'性 別：', attr: {type:'radio', name:'gender'}, option: {m:'男', w:'女'}},? {tag:'input', text:'愛 好：', attr: {type:'checkbox', name:'hobby[]'}, option:? {swimming:'游泳', reading:'讀書', running:'跑步'}},{tag:'select', text:'住 址：', attr:? {name:'area'}, option: {'':'--請選擇--', bj:'北京', sh:'上海', sz:'深圳'}},? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {tag:'textarea', text:'自我介紹：', attr: {name:'introduce', cols:'50', rows:'5'}},? ? ? ? ? ? ? ? ? ? ? {tag:'input', attr: {type:'submit', value:'提交'}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?];
2.然后封裝生成器
(function(window) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var FormBuilder =function(data) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.data = data;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? };? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? window.FormBuilder =FormBuilder;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})(window);
上述代碼最外層是一個(gè)自調(diào)用的匿名函數(shù)习瑰，在調(diào)用時(shí)傳入的window 對象用于控制FormBuilder庫的作用范圍，通過“?window.FormBuilder =FormBuilder;”將FormBuilder作為傳入對象的屬性秽荤。由于window對象是全局的甜奄，因此當(dāng)上述代碼執(zhí)行后，就可以直接使用FormBuilder窃款。另一方面课兄，在匿名函數(shù)中定義的變量、函數(shù)晨继，都不會污染全局作用域烟阐，體現(xiàn)了面向?qū)ο蟮姆庋b性。
接下來創(chuàng)建form.html踱稍，用于調(diào)用FromBuilder生成表單
<script src="FormBuilder.js">
? ? // 這里并不是使用JSON語法保存數(shù)據(jù)（鍵和值都加雙引號，且對特殊字符轉(zhuǎn)義）? ? ? ? ?
{tag:'input', text:'姓 名：', attr: {type:'text', name:'user'}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {tag:'input', text:'性 別：', attr: {type:'radio', name:'gender'}, option: {m:'男', w:'女'}},? {tag:'input', text:'愛 好：', attr: {type:'checkbox', name:'hobby[]'}, option:? {swimming:'游泳', reading:'讀書', running:'跑步'}},{tag:'select', text:'住 址：', attr:? {name:'area'}, option: {'':'--請選擇--', bj:'北京', sh:'上海', sz:'深圳'}},? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {tag:'textarea', text:'自我介紹：', attr: {name:'introduce', cols:'50', rows:'5'}},? ? ? ? ? ? ? ? ? ? ? {tag:'input', attr: {type:'submit', value:'提交'}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?];
?document.getElementById('form').innerHTML =new FormBuilder(elements).create();
</script>
通過new FormBuilder()實(shí)例化了表單生成器對象悠抹，將elements數(shù)組通過參數(shù)傳入珠月，然后調(diào)用了create()方法，該方法用于返回HTML生成結(jié)果楔敌，將在后面的步驟中實(shí)現(xiàn)啤挎。
3.實(shí)現(xiàn)表單自動生成
編寫create()方法
FormBuilder.prototype.create =function() {
?var html ='';
?for (var kin this.data) {
? ? ?var item = {tag:'', text:'', attr: {}, option:null};
? ? ?for (var nin this.data[k]) {
? ? ? ? ? ? item[n] =this.data[k][n];
? ? }
? ? ? ? html += builder.toHTML(item);
? ? }
? ? return '<table>' + html +'</table>';
};
編寫buider對象
var builder = {
toHTML:function(obj) {
var html =this.item[obj.tag](this.attr(obj.attr), obj.option);
? ? return '<tr><th>' + obj.text +'</th><td>' + html +'</td></tr>';
? },
? attr:function(attr) {
? ? var html ='';
? ? for(var kin attr) {
? ? ? ?html += k +'="' + attr[k] +'" ';
? ? ?}
? ? ?return html;
? },
（item對象）
}
在上述代碼中，“this.item[obj.tag]()" 用于根據(jù)obj.tag的值來調(diào)用item對象中的萬法卵凑。例如庆聘，當(dāng)obj.tag的值為input時(shí)，就表示調(diào)用builder item.input()方法勺卢。item對象是builder對象的一個(gè)屬性伙判，該對象內(nèi)包含了input()、select()和 textarea()3個(gè)方法黑忱，分別用于生成<input>宴抚、<select> 和<textarea>表單項(xiàng)。
編寫item對象
item: {
input:function(attr, option) {
var html ='';
? ? if (option ===null) {
html +='<input ' + attr +'>';
? ? }else {
for (var kin option) {
html +='<label><input ' + attr +'value="'? + k +'"' +'>' + option[k] +'</label>';
? ? ? }
}
return html;
? },
? select:function(attr, option) {
var html ='';
? ? for (var kin option) {
html +='<option value="' + k +'">' + option[k] +'</option>';
? ? }
return '<select ' + attr +'>' + html +'</select>';
? },
? textarea:function(attr) {
return '<textarea ' + attr +'></textarea>';
? }
加上樣式對吼呈現(xiàn)的效果如下
總結(jié)來說JavaScript的面向?qū)ο蠛推渌Z言也差不多甫煞，對對象的而操作無非就是創(chuàng)建對象創(chuàng)建的方式用很多菇曲，自己也了解是很清楚，很多還得通過大牛講解抚吠，然后就是對對象的屬性進(jìn)行訪問賦值刪除常潮，也可以繼承。這些利于封裝框架楷力，利于數(shù)據(jù)處理喊式，邏輯清晰孵户，不會容易出現(xiàn)混亂。
