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