我所知道的前端组件化与模块化
生活随笔
收集整理的這篇文章主要介紹了
我所知道的前端组件化与模块化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
序言：組件化？模塊化？這都是什么鬼？這是最初看到這2個新名詞的反應。隨著時間的推移，似乎、可能、大概明白了一點，于是想說說自己的理解(僅僅是自己的理解)
一、組件化
忘記什么時候看到這個詞的了，由于用過bootstrap的前提下(一下簡稱BS)，當時第一反應是這樣的，組件化不就是像BS那樣把html拆分為：按鈕組、柵格系統、導航組等等N多個組件，用的時候直接用BS提供class不就行了嗎？
當然簡單可以這么理解，但是跟深層次的理解應該是這樣的，如你看到的一個html源碼可能是這樣的：
很多人咋一看可能回想，這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多個，與外界的橋梁就是所傳的參數。說的不夠仔細，但或多或少能理解一點- -
想了解更多請移步：組件化、模塊化
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的我所知道的前端组件化与模块化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于模板引擎handlebars.js基
- 下一篇： JZTK项目 驾照题库项目servlet