Jsコンポーネントの書き方(一)

今日はrankのjavascriptスクリプトコントロールtopic編を見ましたが、突然JSコンポーネントを書く方法をまとめたいです.あるいは他の人の様々なcoding styleを言います.
まずPrototypeの書き方を見ます.
 

  
    

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

 
 
上のようなClass.reatの山が好きではないなら、あなたもいいです.
 

  
    

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

 
 
もちろん、this.msgの初期化をfunction A(msg)｛this.msg=msg｝に入れても良いです.つまり、このような呼び出しが面倒で、パラメータが固定対応であることが分かります.
Class.careatを山のように作りたくないなら、不便な呼び出しもしたくないなら、Prottypeの中のvar Class={…}とvar A=Class.create();合併する.取得:

  
    

   
     
   
      
   
     function
   
      A() {
 
   
     this
   
     .init.apply(
   
     this
   
     , arguments);
 }

 A.prototype 
   
     =
   
      {
 init: 
   
     function
   
     (msg) {
 
   
     this
   
     .msg 
   
     =
   
      msg;
 },
 fn: 
   
     function
   
     () {
 alert(
   
     this
   
     .msg);
 }
 }

 
   
     var
   
      a 
   
     =
   
      
   
     new
   
      A(
   
     "
   
     myMsg
   
     "
   
     );
 a.fn();
  
    

 
 
 
たくさんきれいに見えますが、もしあなたの倉庫にたくさんの部品があれば、各部品にthis.init.appyを書いてください.Class.createを使えば、クラスを一つ書いて、各コンポーネントにクラス.create()を実行すればいいです.もちろん、コンポーネントごとにthis.init.applyを書きます.悪くはないです.好みによって違います.また、原型を書く方法は合わせますか?それとも別々に書くかも個人の好みです.パッケージの角度から合わせたほうがいいです.例えば、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
   
     "
   
     );
 a.fn1();
  
    

 
 
 
こちらは必ずA構造の対象を臨時変数_に置いてください.thisの中には、実行時にprvateFn 1の関数として、実際には{fn 1:…、fn 2:…}という匿名のオブジェクトがありますので、this.hasOwnProperty(fn 1)を使ってテストしてもいいです.thisは運行時に意味があるものです.また、この方法は各オブジェクトにprvateFn 1とprvateFn 2のコピーがあります.この方法はあまり良くないです.
 
(未完の場合は、次のようにフレーム別の書き方をします.)