javascript中面向物件的三大作用
阿新 • • 發佈：2019-02-05
面向物件的三大作用
作用1：封裝框架
我們可以定義一個物件，去封裝一些不同的功能，這樣，別人無需瞭解內部功能如何使實現的，只需要知道如何呼叫就可以了，這就是所謂的拿來主義。比如一個物件有不同的功能模組，用下面的簡單程式碼來說明。其中run和do用來實現一些零碎的功能，作用比較單一，這樣做有一個好處就是解耦合，可以讓每個功能互不影響，排錯時也相對容易。而init可以用來組織這些零碎的功能，用於後來的元件化和模組化開發。這樣我們就簡單的封裝一個Ideal物件，來去實現不同功能。var Ideal = function() {}; Ideal.prototype = { init:function(){ this.run(); this.do(); }, run:function(){console.log('run')}, do:function(){console.log('do')} } var $ = new Ideal; // 其實這裡可以不加() $.init();
作用2：描述資料
在前後臺互動中，有兩種情況：① 就是從後臺拿來資料，然後進行資料的處理 。② 就是我們處理好資料，把資料傳遞給後臺。作用3：進行面向物件程式設計和資料繫結
用面向物件的方式程式設計，我們可以通過模組化方式來管理程式碼，使得功能更加易於維護，易於擴充套件，易於修改。當專案遇到需求變更的時候，可以更好的應對。一般我們面向物件程式設計都是開發網頁，基本都都會有這三個模組：init,bindDom,bindEvents。這三個分別是：init用於初始化資料，bindDom用於繫結資料到相應的html元素上，這樣我們就可以動態生成網頁。bindEvents用於繫結頁面中的一些 事件，用於事件的處理。其中我們需要單獨來說一下這個資料繫結，我們拿到後臺資料後，需要繫結到前臺的html元素上，這樣我們可以動態生成網頁。一般的繫結方式有：① 資料拼接：(引引加加法則) 程式碼片段舉例如下：
html結構：<div id="product">
</div>// 封裝的一個物件 var Product = function(data){ this.data = data || {}; this.config = {}; }; Product.prototype = { init:function(){ this.bindDom(); this.bindEvent(); }, bindDom:function(){ this.config.eleId=document.getElementById('product'); var str = ''; str += '<div class="pName">'+ this.data.name +'</div>'; str += '<div class="pPrice">'+ this.data.price +'</div>'; str += '<div class="pDesc">'+ this.data.desc +'</div>'; this.config.eleId.innerHTML = str; }, bindEvent:function(){} } // 模擬假資料 var data = {"name":"橘子","price":"5元/斤","desc":"這種橘子很好吃！"}; // 建立一個物件例項 var p = new Product(data); p.init(); // 初始化資料
② formateString 格式化字串，也就是用正則替換，程式碼片段舉例如下：
html結構：<div id="str"></div>// 封裝的一個物件
var Person = function(data){
this.data = data || {};
this.config = {};
};
Person.prototype = {
init:function(){
this.bindDom();
this.bindEvent();
},
bindDom:function(){
this.config.eleId=document.getElementById('str');
var str = "我有一個同學叫@(name),今年@(age)歲了";
this.config.eleId.innerHTML = this.formateString(str,this.data);
},
bindEvent:function(){},
formateString:function(str, data){
return str.replace(/@\((\w+)\)/g, function(match, key){
return data[key]
})
}
}
// 模擬資料
var data = {"name":"Tom","age":10};
// 例項化物件
var p = new Person(data);
p.init();③ 模板引擎 (世面上有很多模板引擎，artTemplate,baiduTemplate,underscoreTemplate等等) 以artTemplate為例，程式碼片段如下：
html結構：<div id="infoContent">
</div>
<!-- 下面是模板，需要有個id，並且script標籤的type的屬性值不能是 text/javascript -->
<script type='plain' id='tempId'>
<div>姓名：{{name}}</div>
<div>性別：{{gender}}</div>
<div>年齡：{{age}}</div>
</script>
<!-- 引包 -->
<script src="artTemplate.js"></script>
// 封裝的一個物件
var Info = function(data){
this.data = data || {};
this.config = {};
};
Info.prototype = {
init:function(){
this.bindDom();
this.bindEvent();
},
bindDom:function(){
this.config.eleId = document.getElementById('infoContent');
var html = template('tempId',this.data);
this.config.eleId.innerHTML = html;
},
bindEvent:function(){}
}
// 模擬假資料
var data = {"name":"Tom","gender":"man","age":20};
// 建立一個物件
var info = new Info(data);
// 初始化
info.init();