前端代码如何模块化

为何要模块化？

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。

<div class="e submit btn"></div> 

轻松看到哪个元素上绑定有事件，哪个元素上写的有样式。方便以后修改，对于需要删除带有事件class的元素时，可以连同事件一起删除。

css该如何模块化？

方便在删除html代码时，连同css一起删除。

1、在写的css标签前加上某模块session的class名称。

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、把一些常量或者方法写入一个对象当中

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选择器封装

<section class="e div1">
    <div class="e div2">2</div>
<section>

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专业模块化工具。

如何这两个工具还不能满足你需要，请用vue、reeact、anguler编写。