为何要模块化?
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编写。