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はいくつかのこまごました機能を実現するために用いられて、作用は比較的に単一で、このようにして1つの利点があります.initはこれらのこまごました機能を組織するために用いられ、その後のコンポーネント化とモジュール化開発に用いられる.このように、Idealオブジェクトを簡単にパッケージして、異なる機能を実現します.
役割2:説明データ
前楽屋相互作用では、①バックグラウンドからデータを持ってきて、データを処理する場合が二つあります.②データを処理して、バックグラウンドに転送します.
作用3:オブジェクト指向プログラミングとデータバインディングを行う
オブジェクト指向のプログラミングを使って、コードをモジュール化して管理することができます.機能を維持しやすく、拡張しやすく、修正しやすいです.プロジェクトに需要の変更があった場合、より良い対応ができます.一般的に私達は対象に向かってプログラミングします.ウェブページを開発します.基本的にはこの3つのモジュールがあります.init、bindDom、bindEvents.この3つは、それぞれ、initがデータを初期化するために使用され、bindDomが対応するhtml元素にデータをバインディングするために使用され、これにより、動的にウェブページを生成することができる.bindEventsは、イベントの処理のために、ページ内のイベントをバインドするために使用されます.その中で、私達は単独でこのデータを結び付ける必要があります.バックグラウンドのデータを入手した後、フロントのhtml元素に結び付けなければなりません.このようにして、ウェブページを動的に生成することができます.一般的なバインディング方式は以下の通りです.
①データスプライン(引引加法則)
②formate String 
③テンプレートエンジン       
 
これらの3つのデータバインディング方式をそれぞれ説明します.
① データスプライン:(引用プラスの法則)コードの断片例は以下の通りです.
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(); //      

② formate Stringフォーマット文字列、つまり正則で置換します.コードセグメントの例は以下の通りです.
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、baidu Template、undersscore Templateなど)は、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();