先端モジュール化(一)

3261 ワード

実は、秋招犬として、前端に一年も書いていないのに、これらの歴史的な問題について大々的に話しに来たのは、確かに失格です.しかし、これは勉強の前端である学習者が避けられない問題です.それに、面接の質問も多いので、まとめてみます.
巨人の肩に立つ.参考資料:Javascriptモジュール化プログラミング(一):モジュールの書き方Javascriptモジュール化プロセス
モジュール
モジュールとは、特定の機能を実現する方法のことです.
最初はjsを勉強する時に、jsファイルを作って、直接に中で論理コードを書いて、それからscriptタグを導入すればいいです.小さいページは一つ二つでいいです.しかし、その後はロジックがますます複雑になり、コードの量がますます大きくなり、多重化の要求がますます多くなります.私もますます混乱しているjsファイルを見ていて、非常に焦ります.
そもそもjsは「おもちゃの言葉」として開発者の視野に入ってきただけです.さらにこの言語はわずか一ヶ月で創造されました.私たちが今見ているjsは、開発者とインターネットが絶えずに磨き上げてきたjsです.
だから開発者はソフトウェアエンジニアリングの方法を使って、ウェブページの業務ロジックを管理しなければなりません.
しかし、Javascriptはモジュール化プログラミング言語ではありません.クラスをサポートしないので、モジュールについてもっと議論する暇がありません.(策定中のECMAScript規格第六版は、正式に「クラス」と「モジュール」をサポートしますが、実用化にはまだ時間がかかります.)
「Don`t repeat yourself」は私たちの基準です.どうやってこの基準を実践すればいいですか?
関数パッケージ
直接ページの中で論理コードを書くのは私の最初のやり方です.後でゆっくりと繰り返しコードを一つの関数の中に入れることをマスターしました.必要な時に関数を呼び出すだけでいいです.関数の一つの機能は特定の論理を実現するためのステートメントパッケージであり、JavaScriptのスコープは関数に基づいているので、関数をモジュール化の第一歩とするのは自然なことです.
異なる関数(および状態を記録する変数)を簡単に同じモジュールにセットするだけでいいです.

function fn1(){
    statement
}
function fn2(){
    statement
}

このように関数が必要なファイルを後で読み込むと、関数を呼び出すことができます.
このようなやり方の欠点は明らかである.グローバル変数が汚染されていて、他のモジュールと変数名が衝突しないことを保証できないし、モジュールメンバーとは関係がない.
オブジェクト
グローバル変数を減らす方法が必要です.すると、対象の書き方は自然に現れます.

var myModule = {
    fn1: function(){
        statement
    },
    fn2: function(val){
       statement
    }
}

世界は少し美しいです.
モジュールを起動したい時には対応ファイルを参照してください.

myModule.fn1();

でも、このコードを見てみます.

var myModule = {
    var1: 1,
    var2: 2,
    fn1: function(){
        return var1;
    },
    fn2: function(val){
        var2 = val;
    }
}

みんなが発見したかどうか分かりません.直接に通ることができるのに.

myModule.var1;

直接var 1を取得して、fn 1を呼び出してreturnに行ってもいいですか?おかしいです.
そうです.よさそうな解決策ですが、欠陥もあります.このような書き方では、モジュール全員が暴露されます.内部の状態は外部に書き換えられます.パッケージの形がないです.
他の言語では簡単にプライベート変数、例えばjavaのprvateキーワードを実現できますが、jsは他の手段で実現する必要があります.
私たちは外部がこのように任意にアクセスしたり、変数を修正したりすることができないことを望んでいます.私たちが規定した特権的な方法でモジュールの変数にアクセスするしかないです.直接に内部の状態を書き換えることができなくて、クローズドがあります.
包みを閉じる
そうです.クローズドはまた現れました.最初はクローズドを勉強する時、ネット上の様々な文章はクローズドの定義、クローズドの特徴、そしてどうやってクローズドを実現しますか?
前述のJavaScriptの役割領域は関数に基づいていると述べましたが、この点を通じて隠したい変数を関数の役割領域に置くことができます.作用ドメインチェーンのアクセス原則により、外部層は変数にアクセスできません.
下のコードを見てください

var module1 = (function(){
　　　　var var1 = 0;
　　　　var fn1 = function(){
　　　　　　//...
　　　　};
　　　　var fn2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　fn1 : fn1,
　　　　　　fn2 : fn2
　　　　};
　　})();

ここは直ちに実行関数で、returnオブジェクトの内部の関数はvar 1に直接アクセスすることができます.外部はもう簡単にvar 1に訪問することができません.module 1の方法でしか訪問できません.世界はもっと美しいです.
PS:すぐに関数の本質を実行するのはすぐに実行するためだけだと思っていますが、なぜ不動産に概念が生まれたのか分かりません.もっといい答えがあれば、コメントを書いてください.
module 1はJavascriptモジュールの基本的な書き方です.
もちろんjqのような書き方もあります.

var module1 = (function ($, YAHOO) {
　　　　//...
　　})(jQuery, YAHOO);

独立性はモジュールの重要な特徴であり、モジュール内部はプログラムの他の部分と直接対話しないほうがいいです.
モジュール内でグローバル変数を呼び出すためには、他の変数を明示的に入力する必要があります.
グローバル変数を入力して、モジュールの独立性を保証するほか、モジュール間の依存関係が明らかになります.
上のものが分かりました.これは分かりやすいはずです.
次回予告:AMD/CMD/Communjs/ES 6
最近ずっと学校を総括して重点を募集して、あれらの重点は基本的に他の人の文章の中のを収集するので、送るのは少し他の人の文章を持って賛美をだますきらいがあります.
だから面接がある友達は私のブログを見に行って、交流して、一緒に向上します.
ブログに行ってきます

RegExp正則整合モードまとめ