javascript中面向对象的三大作用

面向对象的三大作用

作用1：封装框架

我们可以定义一个对象，去封装一些不同的功能，这样，别人无需了解内部功能如何使实现的，只需要知道如何调用就可以了，这就是所谓的拿来主义。比如一个对象有不同的功能模块，用下面的简单代码来说明。

[javascript] view plain copy

1. var Ideal = function() {};  
2. Ideal.prototype = {  
3.   init:function(){  
4.     this.run();  
5.     this.do();  
6.   },  
7.   run:function(){console.log('run')},  
8.   do:function(){console.log('do')}  
9. }  
10. var $ = new Ideal; // 其实这里可以不加()  
11. $.init();  

其中run和do用来实现一些零碎的功能，作用比较单一，这样做有一个好处就是解耦合，可以让每个功能互不影响，排错时也相对容易。而init可以用来组织这些零碎的功能，用于后来的组件化和模块化开发。这样我们就简单的封装一个Ideal对象，来去实现不同功能。

作用2：描述数据

在前后台交互中，有两种情况：① 就是从后台拿来数据，然后进行数据的处理 。② 就是我们处理好数据，把数据传递给后台。

作用3：进行面向对象编程和数据绑定

用面向对象的方式编程，我们可以通过模块化方式来管理代码，使得功能更加易于维护，易于扩展，易于修改。当项目遇到需求变更的时候，可以更好的应对。一般我们面向对象编程都是开发网页，基本都都会有这三个模块：init,bindDom,bindEvents。这三个分别是：init用于初始化数据，bindDom用于绑定数据到相应的html元素上，这样我们就可以动态生成网页。bindEvents用于绑定页面中的一些 事件，用于事件的处理。其中我们需要单独来说一下这个数据绑定，我们拿到后台数据后，需要绑定到前台的html元素上，这样我们可以动态生成网页。一般的绑定方式有：

① 数据拼接(引引加加法则)

② formateString 

③ 模板引擎        

 

下面我们分别来说说这三种数据绑定方式。

① 数据拼接：(引引加加法则) 代码片段举例如下：

html结构：

[html] view plain copy

1. <div id="product">  
2. </div>  

JavaScript结构：

[javascript] view plain copy

1. // 封装的一个对象  
2. var Product = function(data){  
3.   this.data = data || {};  
4.   this.config = {};  
5. };  
6. Product.prototype = {  
7.   init:function(){  
8.     this.bindDom();  
9.     this.bindEvent();  
10.   },  
11.   bindDom:function(){  
12.     this.config.eleId=document.getElementById('product');  
13.     var str = '';  
14.     str += '<div class="pName">'+ this.data.name +'</div>';  
15.     str += '<div class="pPrice">'+ this.data.price +'</div>';  
16.     str += '<div class="pDesc">'+ this.data.desc +'</div>';  
17.     this.config.eleId.innerHTML = str;  
18.   },  
19.   bindEvent:function(){}  
20. }  
21.   
22. // 模拟假数据  
23. var data = {"name":"橘子","price":"5元/斤","desc":"这种橘子很好吃！"};  
24. // 创建一个对象实例  
25. var p = new Product(data);  
26. p.init(); // 初始化数据  

② formateString 格式化字符串，也就是用正则替换，代码片段举例如下：

html结构：

[html] view plain copy

1. <div id="str"></div>  

JavaScript结构：

[javascript] view plain copy

1. // 封装的一个对象  
2. var Person = function(data){  
3.   this.data = data || {};  
4.   this.config = {};  
5. };  
6. Person.prototype = {  
7.   init:function(){  
8.     this.bindDom();  
9.     this.bindEvent();  
10.   },  
11.   bindDom:function(){  
12.     this.config.eleId=document.getElementById('str');  
13.     var str = "我有一个同学叫@(name),今年@(age)岁了";  
14.     this.config.eleId.innerHTML = this.formateString(str,this.data);  
15.   },  
16.   bindEvent:function(){},  
17.   formateString:function(str, data){  
18.     return str.replace(/@(\w+)/g, function(match, key){  
19.         return data[key]  
20.     })  
21.   }  
22. }  
23. // 模拟数据  
24. var data = {"name":"Tom","age":10};  
25. // 实例化对象  
26. var p = new Person(data);  
27. p.init();  

③ 模板引擎 (世面上有很多模板引擎，artTemplate,baiduTemplate,underscoreTemplate等等) 以artTemplate为例，代码片段如下：

html结构：

[html] view plain copy

1. <div id="infoContent">  
2. </div>  
3. <!-- 下面是模板，需要有个id，并且script标签的type的属性值不能是 text/javascript -->  
4. <script type='plain' id='tempId'>  
5.   <div>姓名：{{name}}</div>  
6.   <div>性别：{{gender}}</div>  
7.   <div>年龄：{{age}}</div>  
8. </script>  
9. <!-- 引包 -->  
10. <script src="artTemplate.js"></script>  

JavaScript结构：

[javascript] view plain copy

1. // 封装的一个对象  
2. var Info = function(data){  
3.   this.data = data || {};  
4.   this.config = {};  
5. };  
6. Info.prototype = {  
7.   init:function(){  
8.     this.bindDom();  
9.     this.bindEvent();  
10.   },  
11.   bindDom:function(){  
12.     this.config.eleId = document.getElementById('infoContent');  
13.     var html = template('tempId',this.data);  
14.     this.config.eleId.innerHTML = html;  
15.   },  
16.   bindEvent:function(){}  
17. }  
18. // 模拟假数据  
19. var data = {"name":"Tom","gender":"man","age":20};  
20. // 创建一个对象  
21. var info = new Info(data);  
22. // 初始化  
23. info.init();