一般的に使用されるフロントエンド開発設計パターンは何ですか?

清浅
リリース: 2020-09-08 15:43:12
オリジナル
8312 人が閲覧しました

フロントエンド開発設計パターンには、1. モジュール パターン、2. コンストラクター パターン、3. ファクトリ パターン、4. 混合パターン、5. シングルトン パターン、6. サブスクリプション パブリッシュ パターンなどがあります。

一般的に使用されるフロントエンド開発設計パターンは何ですか?

一般的に使用されるフロントエンド開発設計パターンには、モジュール パターン、コンストラクター パターン、ファクトリ パターン、ハイブリッド パターン、シングルトン パターン、サブスクリプション パブリッシュ パターンなどがあります。

一般的に使用されるフロントエンド開発設計パターンは何ですか?

フロントエンド開発設計モード

モジュール モード:

式で定義された変数とメソッドは、外部の世界からはアクセスできず、外部の世界に提供されるインターフェイスを介して「制限付きで」のみアクセスできます。属性とメソッドのカプセル化の問題は、関数スコープを通じて解決されます。

var Person = (function(){    
var name = "xin";    
var age = 22;    
function getName(){        
return name;
    }    
function getAge(){        
return age;
    }    
return {        
getName: getName,        
getAge: getAge
    }
})();
console.log(age); // 报错:age未定义
console.log(name); // 报错:name未定义
console.log(Person.age); // undefined
console.log(Person.name); // undefined只能通过Person提供的接口访问相应的变量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22
ログイン後にコピー

コンストラクター パターン

function Person(name,age){    
this.name = name;    
this.age = age;
}
Person.prototype = {    
constructor: Person;
    printName: function(){        
console.log(this.name);
    },    printAge: function(){        
console.log(this.age);
    }
}var person = new Person('xin', 22);
person.printName(); // xin
person.printAge(); // 22
ログイン後にコピー

混合モード

function Person(name,age){    
this.name = name;    
this.age = age;
};
Person.prototype.printName = function(){    
console.log(this.name);
}function Student(name,age){
    //继承 Person 的属性
    Person.call(this,name,age);
}function create(prototype){    
function F(){};
    F.prototype = prototype;    
    return new F();
}
//让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){    
console.log(this.age);
}var student = new Student('xin',22);
student.printName(); // "xin"
ログイン後にコピー

ファクトリ パターン

function Person(name, age){    
var person = new Object();
    person.name = name;
    person.age = age;
    person.printName = function(){        
    console.log(this.name);
    };
    person.printAge = function(){        
    console.log(this.age);
    }    
    return person;
}
var person = Person('xin',22);
ログイン後にコピー

シングル インスタンス モード

var Singleton = (function (){    
var instance;    
function init(){        
return {
        };
    }    return {        
    getInstance: function(){            
    if(!instance){
               instace = init();
            }            return instance;
        }
    };
})();
ログイン後にコピー

パブリッシュ/サブスクライブ モード

パブリッシュ/サブスクライブ モードはオブザーバー モードとも呼ばれ、1 対 1 対を定義します。 - オブジェクト間の多数の関係 依存関係、オブジェクトの状態が変化すると、そのオブジェクトに依存するすべてのオブジェクトが通知されます

パブリッシュ/サブスクライブ モデルは非同期プログラミングで広く使用されており、コールバック関数の代替となります。複数のイベント処理関数が同じイベントをサブスクライブできます。イベントが発生すると、対応する複数のイベント処理関数が実行され、オブジェクト間のハードコードされた通知メカニズムが置き換えられます。1 つのオブジェクトが別のオブジェクトの特定の関数を明示的に呼び出す必要がなくなりました。インターフェースはモジュール間の結合度を下げるもので、お互いの詳細は不明だが相互通信には影響しない

アプリケーション

DOM イベント

DOM イベントは典型的なパブリッシュ/サブスクライブ モデルであり、dom ノードのイベントを監視し、dom ノードが動作すると、対応するイベントがトリガーされ、応答関数が実行されます。イベント関数は dom ノードを実行します。ノードはまったく不明です。そのため、イベントが何であるか、トリガーする方法について心配する必要はなく、ただ実行するだけです。

カスタム イベント

パブリッシャーの「パブリッシュ-サブスクライブ」関係を指定します。オブジェクトで表され、キーはイベント名を表し、値はイベント ハンドラーで構成される配列であり、サブスクライバーの名簿に相当します。メッセージをパブリッシュした後、キャッシュ リストが走査され、サブスクライバのコールバック関数が順番に実行されます

var EventCenter = (function(){  
    //将所有的"发布-订阅"关系放到events中    
    var events = {};
    //给事件绑定事件处理程序, 
    function on(evt, handler){
    //evt:事件名,handler:事件处理程序   
        events[evt] = events[evt]||[];
        events[evt].push({            
        handler:hander
        });
    }
    //发布消息(触发事件),并执行相应的事件处理程序  
    function fire(evt,args){   
     //evt:事件名,args:给事件处理程序传递的参数       
    if(!events[evt]){            
    return;
        }
        //遍历事件处理程序列表,执行其中每一个事件处理程序        
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }
    //使用模块模式的方式,向外界提供绑定事件处理程序和触发事件的接口    
    return {        
    on: on,        
    fire: fire
    }
})();
ログイン後にコピー

実用的なアプリケーション

var Event = (function(){  
    var events = {};    
    function on(evt, handler){
        events[evt] = events[evt]||[];
        events[evt].push({            
        handler:handler
        });
    }    function fire(evt,args){        
    if(!events[evt]){            
    return;
        }        
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }    function off(evt){        
    delete events[evt];
    }    return {        
    on: on,        
    fire: fire,        
    off: off
    }
})();
Event.on(&#39;change&#39;, function(val){    
console.log(&#39;change...  now val is &#39; + val);  
});
Event.on(&#39;click&#39;, function(val){    
console.log(&#39;click.... now val is &#39;+ val);
})
Event.fire(&#39;change&#39;, &#39;xin&#39;);
Event.fire(&#39;click&#39;, &#39;xin&#39;);
Event.off(&#39;change&#39;);
ログイン後にコピー

以上が一般的に使用されるフロントエンド開発設計パターンは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!