フロントエンドコードのモジュール化

なぜモジュール化するのですか?
1、自分でコードを調べたり、修正したりするのに便利である.2、接盤侠に悪口を言わせない
htmlコードはどのようにモジュール化しますか?
1、bodyにclass="p-index"を加える. pコードpage、indexはindex.htmlページを表します.
ページにphp、java、.net環境を埋め込む必要がある場合、ルーティングにはバックグラウンド制御があることが多い.名前とはよく違います.
bodyにclassを追加すると、そのパスに対応するページが簡単に見つかります.
2、ある機能性を持つコードは、特殊なラベルで包むことができます.section、articeなど.コンテンツコードの機能を簡単に見つけることができます.
バックグラウンドスタッフがコードを抽出してモジュール化管理を容易にする.
3、書き込みスタイルのclass名と書き込みイベントのclass名を分離する.イベントのclass名を書く前に特殊なclassを追加できます. eです.

section.nav>div{}
section.nav p{}

2、less、sessで書くことができる

section.nav{
   div{}
   p{}
}

jsコードはどのようにモジュール化しますか?
1、利用可能  {} 常時モジュール化

{
    let a=4;
    alert(a);
}

2、関数パッケージを利用して、共通機能のコードを同じ関数に書き込む

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

3、一定量や方法を1つのオブジェクトに書き込む

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

4、自己実行関数を利用して機能性モジュールをカプセル化する.

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

5、jqueryセレクタによるパッケージ

    
2


var $div1=$(".div1");
$(".div2",$div1).on("click",function(){
    alert(1);
})
   
var $div1=$(".div1");
if($div1.length>0){
    $div1.find(".div2").on("click",function(){
        alert(1);
    })
}

利点:親要素が存在するかどうかを判断し、バインドします.このイベントがモジュールにバインドされていることをすぐに認識し、メモリの消費量を削減できます.
モジュール化は一つの思想であり、モジュール化をどのように行うかを常に考えなければならない.さらにモジュール化するにはrequest.js,sea.jsプロフェッショナルモジュール化ツールを使用します.
どのようにこの2つのツールがまだあなたのニーズを満たすことができないかは、vue、reeact、angulerで書いてください.