我所知道的前端组件化与模块化
序言：組件化？模塊化？這都是什么鬼？這是最初看到這2個(gè)新名詞的反應(yīng)。隨著時(shí)間的推移，似乎、可能、大概明白了一點(diǎn)，于是想說說自己的理解(僅僅是自己的理解)
一、組件化
忘記什么時(shí)候看到這個(gè)詞的了，由于用過bootstrap的前提下(一下簡(jiǎn)稱BS)，當(dāng)時(shí)第一反應(yīng)是這樣的，組件化不就是像BS那樣把html拆分為：按鈕組、柵格系統(tǒng)、導(dǎo)航組等等N多個(gè)組件，用的時(shí)候直接用BS提供class不就行了嗎？
當(dāng)然簡(jiǎn)單可以這么理解，但是跟深層次的理解應(yīng)該是這樣的，如你看到的一個(gè)html源碼可能是這樣的：
很多人咋一看可能回想，這tm是html標(biāo)簽嗎？當(dāng)然不是，只是自定義的組件標(biāo)簽，通過第三方去處理，好處就是互相不影響，用誰(shuí)放誰(shuí)，不用拿走，維護(hù)起來和多人協(xié)作更方便。
二、模塊化
前端模塊化更確切的說應(yīng)該是javascript的模塊化，其實(shí)就是一些功能以及業(yè)務(wù)邏輯的封裝，比如之前一個(gè)小例子：鼠標(biāo)懸停出現(xiàn)下拉框與鼠標(biāo)懸停切換（具體參看之前一篇：如何巧妙的用面向?qū)ο蠓庋b常用效果）
function Overitem(option){this.init(option); } Overitem.prototype={init:function(option){var _self=this;_self.btn=document.getElementById(option.btn)||'';_self.item=document.getElementById(option.item)||'';_self.addclassname=option.addclass;//2.0 綁定事件_self.btn.onmouseover=_self.showitem.bind(_self);_self.btn.onmouseout=_self.hideitem.bind(_self);},//2.1 定義事件showitem:function () {//如何讓this指向new Overitem;，在調(diào)用的時(shí)候用bind把this綁定上去this.btn.className=this.addclassname;this.item.style.display='block';},hideitem:function () {//如何讓this指向new Overitem;，在調(diào)用的時(shí)候用bind把this綁定上去this.btn.className='';this.item.style.display='none';} }; function Tabitem(option){this.init(option); } Tabitem.prototype={init:function(option){var _self=this;_self.btn=document.getElementsByClassName(option.btn)||'';_self.item=document.getElementsByClassName(option.item)||'';for(var i=0;i<_self.btn.length;i ){_self.btn[i].index=i;_self.btn[i].onmouseover=function(){for(var j=0;j<_self.item.length;j ){_self.btn[j].className=option.btn;_self.item[j].className=option.item;}_self.btn[this.index].className=option.btn ' ' option.btnaddclass;_self.item[this.index].className=option.item ' ' option.itemaddclass;//console.log(this);//console.log(_self); };}} };這就是2個(gè)簡(jiǎn)單的功能模塊，用誰(shuí)new誰(shuí)互不干擾，即使有n多個(gè)，與外界的橋梁就是所傳的參數(shù)。說的不夠仔細(xì)，但或多或少能理解一點(diǎn)- -
想了解更多請(qǐng)移步：組件化、模塊化
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的我所知道的前端组件化与模块化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于模板引擎handlebars.js基
- 下一篇： JZTK项目 驾照题库项目servlet