715
我所知道的前端組件化與模塊化
序言：組件化？模塊化？這都是什麼鬼？這是最初看到這2個新名詞的反應。隨著時間的推移，似乎、可能、大概明白了一點，於是想說說自己的理解(僅僅是自己的理解)
一、組件化
忘記什麼時候看到這個詞的了，由於用過bootstrap的前提下(一下簡稱BS)，當時第一反應是這樣的，組件化不就是像BS那樣把html拆分為：按鈕組、柵格係統、導航組等等N多個組件，用的時候直接用BS提供class不就行了嗎？
當然簡單可以這麼理解，但是跟深層次的理解應該是這樣的，如你看到的一個html源碼可能是這樣的：
<body > <top-header></top-header> <common-content></common-content> <top-footer></top-footer> </body>
很多人咋一看可能回想，這tm是html標簽嗎？當然不是，隻是自定義的組件標簽，通過第三方去處理，好處就是互相不影響，用誰放誰，不用拿走，維護起來和多人協作更方便。
二、模塊化
前端模塊化更確切的說應該是javascript的模塊化，其實就是一些功能以及業務邏輯的封裝，比如之前一個小例子：鼠標懸停出現下拉框與鼠標懸停切換（具體參看之前一篇：如何巧妙的用麵向對象封裝常用效果）
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;，在調用的時候用bind把this綁定上去 this.btn.className=this.addclassname; this.item.style.display='block'; }, hideitem:function () { //如何讓this指向new Overitem;，在調用的時候用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個簡單的功能模塊，用誰new誰互不幹擾，即使有n多個，與外界的橋梁就是所傳的參數。說的不夠仔細，但或多或少能理解一點- -
最後更新：2017-11-05 11:34:18