Jsコンポーネントのいくつかの書き方_JavaScriptスキル

今日、Rank の記事 JavaScript スクリプト制御トピック を読んで、突然、JS コンポーネントの記述方法や、さまざまな人々のさまざまなコーディング スタイルをまとめたいと思いました。

まず、Prototype の記述を見てみましょう:

コードをコピーします コードは次のとおりです。 🎜>

var Class = {
create: function() {
return function() { this.init.apply(this, argument) }
}
}
var A = クラス .create();
A.prototype = {
init: function(msg) {
this.msg = msg;
fn: function( ) {
alert (this.msg);
}
}
var a = new A("myMsg");


気に入らない場合は、上記の Class.create などを実行することもできます:

コードをコピーコードは次のとおりです。 function A() { } //var A = function(){}

A.prototype = {

init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A() ;
a.init("myMsg ");
a.fn();


もちろん、関数 A(msg) に this.msg の初期化を入れることもできます。 {this.msg=msg;}。つまり、このように呼び出すのは面倒で、パラメータは固定で対応していることがわかります。
Class.create を大量に作成したくない、または呼び出しが不便な場合は、Prototype で var Class = {...} と var A = Class.create(); をマージします。取得:

コードをコピーします コードは次のとおりです: function A() {

this.init.apply(this, argument);

}
A.prototype = {
init: function(msg) {
this.msg =
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg"); 🎜>

これは非常にきれいに見えますが、ライブラリに多くのコンポーネントがある場合、Class.create を使用する場合、各コンポーネントは this.init.apply(this, argument); を記述するだけで済みます。 1 つのクラスを作成し、各コンポーネントで Class.create() を実行します。もちろん、コンポーネントごとに this.init.apply(this, argument) を記述することに問題はありません。これは個人の好みに依存します。また、プロトタイプ メソッドを一緒に書くか別々に書くかは、カプセル化の観点からは個人的な好みですが、場合によっては分けた方が明確です。たとえば、 A.prototype.init=function(msg){...} A.prototype.fn=function(){...}

次に、次のようなコンポーネントを記述することを好む人もいます。

コードをコピー

コードは次のとおりです。 var A = function(msg) { this.msg = msg; var _this = this;

var privateFn1 = function() {

alert(_this.msg)
}
var privateFn2 = function(); >alert(_this.msg) );
}
return { fn1: privateFn1, fn2: privateFn2 };
var a = new A("myMsg"); fn1();


実行時には、privateFn1 の関数本体の this は実際には {fn1:...,fn2 であるため、A によって構築されたオブジェクト this を一時変数 _this に入れてください。 :...} この匿名オブジェクトと同様に、 this.hasOwnProperty("fn1") を使用してテストできます。これは実行時にのみ意味を持ちます。さらに、このメソッドの各オブジェクトには privateFn1 と privateFn2 のコピーが含まれることになりますが、これはあまり良いことではありません。

(引き続き、さまざまなフレームワークのいくつかの記述方法について以下で説明します)
著者: JayChow