首页 > 代码库 > 我所知道的前端组件化与模块化
我所知道的前端组件化与模块化
序言：组件化？模块化？这都是什么鬼？这是最初看到这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多个，与外界的桥梁就是所传的参数。说的不够仔细，但或多或少能理解一点- -
想了解更多请移步：组件化、模块化
我所知道的前端组件化与模块化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。