javascript中面向对象的三大作用

面向对象的三大作用

作用1：封装框架

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

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

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

作用2：描述数据

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

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

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

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

② formateString 

③ 模板引擎        

 

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

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

html结构：

<div id="product">
</div>

JavaScript结构：

// 封装的一个对象
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>

JavaScript结构：

// 封装的一个对象
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>

JavaScript结构：

// 封装的一个对象
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();