Vue 2 组件库开发实践

[ibufu]

辛苦了一个月，终于把订单来了的前端组件库第一版开发完毕了。这个组件库基于 Vue 2 开发，目前的组件可以满足基础业务的开发，并会在接下来不断的完善，地址：https://github.com/ibufu/dd-vue-component。 现在写一下开发组件库的一些感悟。

一、为什么要开发组件库

定制样式

首先，过去订单来了的前端组件一部分用的是第三方库，这当中有 JQuery 的插件也有 angular1 的组件。但是订单来了是有一套自己的UI设计的，为了将组件的样式定制化，一般要在样式里加入!important，因此样式文件里往往会充斥着大量的!important，一点都不优雅。那么有人会说可以修改源码啊，但是如今的前端组件大多是从npm上直接引用，直接修改 node_modules 文件下的代码如何让同事电脑中的代码保持同步？

复用与逻辑解耦

第二，先大概地看看如下一段代码：

<table>
    <tr ng-repeat="r in orderNew.rooms">
        <td><span>{{r.sn}}</span>&nbsp;({{r.name}})</td>
        <td>
            <span class="light">入住</span>
            &nbsp;<input type="text" class="datePicker" ng-model="r.sstartDate" readonly="true">
            <div class="date-table start">
                <div class="month-selector">
                    <div class="eluyun_left_outer spriteImg previous" ng-click="changeRoomStartDateMonth(r, -1, orderNew.type);$event.stopPropagation();">
                        <div class="eluyun_left"></div>
                    </div>
                    {{r.scanlerdarDate.split('-')[0]}}年{{r.scanlerdarDate.split('-')[1]}}月
                    <div class="eluyun_right_outer spriteImg next" ng-click="changeRoomStartDateMonth(r, 1, orderNew.type);$event.stopPropagation();">
                        <div class="eluyun_right"></div>
                    </div>
                </div>
                <div class="week-header">
                    <div class="item">一</div>
                    <div class="item">二</div>
                    <div class="item">三</div>
                    <div class="item">四</div>
                    <div class="item">五</div>
                    <div class="item">六</div>
                    <div class="item">日</div>
                </div>
                <div class="date-row" ng-repeat="row in r.scalendar">
                    <div class="item {{day.sclass}}" ng-repeat="day in row"
                         ng-click="changeRoomStartDate(r, day.date, day.sclass, orderNew.type);">
                        {{day.text || day.date.getDate()}}
                    </div>
                </div>
            </div>
            &nbsp;~&nbsp;<input type="text" class="datePicker" ng-model="r.sendDate" readonly="true">
            <div class="date-table end">
                <div class="month-selector">
                    <div class="eluyun_left_outer spriteImg previous" ng-click="changeRoomEndDateMonth(r, -1, orderNew.type);$event.stopPropagation();">
                        <div class="eluyun_left"></div>
                    </div>
                    {{r.ecanlerdarDate.split('-')[0]}}年{{r.ecanlerdarDate.split('-')[1]}}月
                    <div class="eluyun_right_outer spriteImg next" ng-click="changeRoomEndDateMonth(r, 1, orderNew.type);$event.stopPropagation();">
                        <div class="eluyun_right"></div>
                    </div>
                </div>
                <div class="week-header">
                    <div class="item">一</div>
                    <div class="item">二</div>
                    <div class="item">三</div>
                    <div class="item">四</div>
                    <div class="item">五</div>
                    <div class="item">六</div>
                    <div class="item">日</div>
                </div>
                <div class="date-row" ng-repeat="row in r.ecalendar">
                    <div class="item {{day.sclass}}" ng-repeat="day in row"
                         ng-click="changeRoomEndDate(r, day.date, day.sclass, orderNew.type);">
                        {{day.text || day.date.getDate()}}
                    </div>
                </div>
            </div>
            &nbsp;
            共{{r.duration}}晚
            <!--<div class="tips warning left">↑房间被占用</div>-->
            <!--<div class="tips warning right">↑房间被占用</div>-->
        </td>
        <td>¥{{r.fee}}<div class="sdelete" ng-if="orderNew.rooms.length > 1"
                           ng-click="deleteRoom(orderNew.rooms, $index);$event.stopPropagation();"></div></td>
    </tr>
</table>

这是我的某位兼职同事在赶工之下写的一段代码，不用细看，粗粗一扫就能感觉出这段html写得非常不优雅，大量的重复代码充斥其中。这段html里有两处需要选择时间的地方，所以我的同事就把相同的 datepicker 的代码复制了一遍。然而在整个html里还有许多地方也用到了 datepicker，于是这段代码出现了一遍又一遍。不禁是html中的重复，datepicker 的一般逻辑在js文件中同样出现了一遍又一遍。这种做法最大的坏处是造成代码的冗余，当 datepicker 的逻辑或者样式改变的时候，需要改动许多地方。并且，业务逻辑与公共组件逻辑的耦合，会给后期维护造成许多麻烦。当业务逻辑与公共组件逻辑分离之后，我们可以更清晰地维护代码业务代码。

提高业务开发效率

前人栽树后人乘凉。当一个能满足日常业务的组件库开发完后，再进行业务开发时，我们只需要很简单的几段代码就能轻松地使用需要的组件。

二、组件库项目结构

-examples  // 组件demo展示
-test  // 测试文件
-src  // 源码
|-components  // 组件代码
|-utils  // 各类工具
|-index.js  // 组件库主入口，向外暴露所有组件
 CHANGELOG.md  // 变动说明
 package.json  // 项目说明文件
 README.md
 webpack.config.js  // webpack 配置文件

三、组件的写法

四、业务开发时的引用

五、碰到的一些问题

Vue 2 废弃 $dispatch

六、总结