TOC
最近学习require趁热打铁写了两个非常常见的组件，一个是侧边栏的插件，一个是轮播图或者叫他选项卡。不得不说组件化开发非常的清晰，便于管理，特别是利用好抽象思想，整个代码结构会非常的清晰，易于理解和修改。
我认为组件化最重要的就是一个思维问题。尽量把相关的事情抽象成一个方法。比如说状态比较少，像是侧边栏 只有开启和关闭。就可以抽象成visBox和hidBox两个方法。如果状态很多，像轮播图的状态一般有很多种。可以抽象成一个方法。通过传参数的方式来达到修改的目的。抽象是一种非常重要的能力，可以让复杂的东西变的有序简单。
如果是一大串密密麻麻的代码 会非常难以后续增删代码。因为插入的位置成了一个很大的问题。也很难定位。
另外是一个命名空间的问题。我都利用了组件名+_的方式 比如 sbr_youname CSS也是如此
侧边栏插件
<div id="sbr_sidebar">
<ul class="sbr_sidebarContent">
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
<li><a href="#">列表4</a></li>
<li><a href="#">列表5</a></li>
<li><a href="#">列表6</a></li>
</ul>
</div>
//调用
require(["jquery","sbr"],function ($,sbr) {
new sbr.sbr({
triggerBtnId:"triggerBtn",
boxId:"sbr_sidebar"
}).on("visBox",function () {
console.log("vis");
}).on("hidBox",function () {
console.log("hid");
})
})
整体比较简单，利用了jquery的动画来实现。普通状态让侧边栏 right:-300px 也就是在屏幕外 然后触发时候就变成0。并且可以指定按钮的ID和侧边栏盒子的ID。也实现了自定义事件。
DEMO地址：https://github.com/zhangzhengyi12/require-sidebar
轮播图
<div class="js_tab tab" id="thisMyTab">
<p style="color: #fff;font-size: 12px;">切换方式：悬停 特效：淡入淡出 ：初始设定：4 自动播放：3秒 </p>
<ul class="tab_nav">
<li class="actived"><a href="javascript:void(0)">新闻</a></li>
<li><a href="javascript:void(0)">娱乐</a></li>
<li><a href="javascript:void(0)">电影</a></li>
<li><a href="javascript:void(0)">科技</a></li>
</ul>
<div class="content_wrap">
<div class="content_item current "><img src="img/a.jpg" height="200" width="290"></div>
<div class="content_item"><img src="img/b.jpg" height="200" width="290"></div>
<div class="content_item"><img src="img/c.jpg" height="200" width="290"></div>
<div class="content_item"><img src="img/d.png" height="200" width="290"></div>
</div>
</div>
//调用
new js.jstab({
"tabID":"thisMyTab",
"triggerType":"mouseover",
"effect":"fade",
"invoke":4,
"auto":3000
}).on("trigger",function () {
console.log("1");
});
是重写之前的一个版本。也实现了自定义事件，支持一些常见的属性。
DEMO地址：https://github.com/zhangzhengyi12/require-AdvTab