javascript中面向对象的三大作用

面向对象的三大作用

作用1：封装框架

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

[javascript] view
plain copy

 





var Ideal = function() {};  

Ideal.prototype = {  

  init:function(){  

    this.run();  

    this.do();  

  },  

  run:function(){console.log(
4000
'run')},  

  do:function(){console.log('do')}  

}  

var $ = new Ideal; // 其实这里可以不加()  

$.init();  

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

作用2：描述数据

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

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

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

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

html结构：

[html] view
plain copy

 





<div id="product">  

</div>  

JavaScript结构：

[javascript] view
plain copy

 





// 封装的一个对象  

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结构：

[html] view
plain copy

 





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

JavaScript结构：

[javascript] view
plain copy

 





// 封装的一个对象  

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结构：

[html] view
plain copy

 





<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>  

JavaScript结构：

[javascript] view
plain copy

 





// 封装的一个对象  

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();