最近学习require趁热打铁写了两个非常常见的组件,一个是侧边栏的插件,一个是轮播图或者叫他选项卡。不得不说组件化开发非常的清晰,便于管理,特别是利用好抽象思想,整个代码结构会非常的清晰,易于理解和修改。

Markdown

我认为组件化最重要的就是一个思维问题。尽量把相关的事情抽象成一个方法。比如说状态比较少,像是侧边栏 只有开启和关闭。就可以抽象成visBox和hidBox两个方法。如果状态很多,像轮播图的状态一般有很多种。可以抽象成一个方法。通过传参数的方式来达到修改的目的。抽象是一种非常重要的能力,可以让复杂的东西变的有序简单。

如果是一大串密密麻麻的代码 会非常难以后续增删代码。因为插入的位置成了一个很大的问题。也很难定位。

另外是一个命名空间的问题。我都利用了组件名+的方式 比如 `sbryouname` CSS也是如此

侧边栏插件

Markdown

<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