JavaScript設計モード(1)-フレキシブルなJS書き方

はじめに

JavaScript          , js    ,   "    "
         ,  js      ,  js      "  "  

    JS    ,      JS       

二、JSの書き方

         ,  ,       

1,白の書き方(おすすめできません)

function checkUserName(){}
function checkPassword(){}
function checkEmail(){}

同じ値:

var checkUserName = function(){}
var checkPassword = function(){}
var checkEmail = function(){}

          ,             ,        "  "
           ,                      

2,オブジェクト編集変数

var checkUserInfo = {
    checkUserName : function(){},
    checkPassword : function(){},
    checkEmail : function(){}
}

checkUserInfo.checkUserName();

同じ値:

var checkUserInfo = {};
checkUserInfo.checkUserName = function(){}
checkUserInfo.checkPassword = function(){}
checkUserInfo.checkEmail = function(){}

checkUserInfo.checkUserName();

       ,                      ,
                 
         ,                 

3,関数はオブジェクトに戻ります.

var CheckUserInfo = function(){
    return {
        checkUserName : function(){},
        checkPassword : function(){},
        checkEmail : function(){}
    }
}
var checkUserInfo = CheckUserInfo();
checkUserInfo.checkUserName();

                  , 3 check        
                   
                   CheckUserInfo,      " "   
    function         ,    

4、類の書き方

var CheckUserInfo = function(){
    this.checkUserName = function(){}
    this.checkPassword = function(){}
    this.checkEmail = function(){}
}

//     ,    
var checkUserInfo = new CheckUserInfo();
checkUserInfo.checkUserName();

          ,             ,
     new         ,          this           ,      
        ,     new   ,              ,    
            ,  new         ,        

5,プロトタイププロトタイプに属性を追加する(混在カバー問題に注意)

var CheckUserInfo = function(){};
CheckUserInfo.prototype.checkUserName = function(){}
CheckUserInfo.prototype.checkPassword = function(){}
CheckUserInfo.prototype.checkEmail = function(){}

var checkUserInfo = new CheckUserInfo();
checkUserInfo.checkUserName();

同じ値:

var CheckUserInfo = function(){};
CheckUserInfo.prototype = {
    checkUserName : function(){},
    checkPassword : function(){},
    checkEmail : function(){}
}

var checkUserInfo = new CheckUserInfo();
checkUserInfo.checkUserName();

  prototype           CheckUserInfo       
  new     ,                ,      prototype      
                                prototype
               ,    prototype        ,       prototype

6、チェーンの書き方6.1対象の編集属性または方法のチェーンの書き方:

var checkUserInfo = {
    checkUserName : function(){
        return this;
    },
    checkPassword : function(){
        return this;
    },
    checkEmail : function(){
        return this;
    }
}

checkUserInfo.checkUserName().checkPassword().checkEmail();

6.2種類のプロトタイプの原型オブジェクトのチェーン式の書き方

var CheckUserInfo = function(){};
CheckUserInfo.prototype = {
    checkUserName : function(){
        return this;
    },
    checkPassword : function(){
        return this;
    },
    checkEmail : function(){
        return this;
    }
}

var checkUserInfo = new CheckUserInfo();
checkUserInfo.checkUserName().checkPassword().checkEmail()

             prototype             
  function        ,          
          ,                    

7,拡張元Functionオブジェクト方式(推奨しない)

Function.prototype.checkUserName = function(){}

var func = function(){};
func.checkUserName();

var func1 = new Function(){};
func1.checkUserName();

       JS   Function  ,          Function   prototype     ,
      function       
          JS  Function  ,            ,            

8,元のFunctionオブジェクトを開拓する-追加方法機能を追加する

//   Function        
Function.prototype.addMethod = function(name, fn){
    this[name] = fn;
}

//   function
var funcMothods = function(){};//  var funcMothods = new Function();

//     
funcMothods.addMethod('checkUserName',function(){
    // checkUserName
})

//     
funcMothods.checkUserName();

      Function     ,      function       ,    Function   
   ( new)  function ,function         
           function ,   

               Function(  "  "    ),     Function
  addMethod         function  ,         

thisを返します.チェーンの追加とチェーンの呼び出しができます.

//   Function        
Function.prototype.addMethod = function(name, fn){
    this[name] = fn;
    return this;
}

//   function
var funcMothods = function(){};//  var funcMothods = new Function();

//       
funcMothods.addMethod('checkUserName',function(){
    return this;
}).addMethod('checkPassword',function(){
    return this;
})

//       
funcMothods.checkUserName().checkPassword();

クラスで実現することもできます.

//   Function        
Function.prototype.addMethod = function(name, fn){
    this[name] = fn;
    return this;
}

//   Mothods 
var Mothods = function(){};
//     (  )
Mothods.addMethod('checkUserName',function(){
    // checkUserName
}).addMethod('checkPassword',function(){
    // checkPassword
});
//     
var methods = new Mothods();
methods.checkUserName();

       Function  ,        
  function     ,         (       )
  new         ,    

エンディング

                    ,    JS          
 JS    ,   "    "

   JS        ,      JS