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