工作成长记录（一）组件相关思考

说明

我是一个还几乎没怎么用过框架的没写过什么项目，没多人协作写代码的经验的FW~~，所以以下内容只是我这个新手今天开始折腾的思考。。

为什么想着要做组件

今天需要做一个搜索页面，展示特定数据。搜索页面85%和订单页面是相同的。都是订单的展示以及相关的各种功能，比如进入详情页面啊，修改备注啊等等。这样就需要大量复制代码。如果之后其中一个地方逻辑或者ui发生了改变，就要两个地方一起修改，如果这样的事情出现了很多次，心态要炸的。而且很容易漏，导致出现很多bug。

然后想起来之前好像看到过vue，react这种有个叫自定义组件的东西。和平时面向对象写代码的思想差不多。这玩意听起来不错啊。于是乎就开始想着做组件

还是太年轻

尝试了一下发现我还是太年轻啊。遇到了一些问题。。。。

1. 组件只能做到样式复用，数据处理还是需要再外面做。
2. 显示内容并非完全相同还是有些许不同。如果靠外面用参数来控制也会非常麻烦（类似问题今天做的nativationBar组件优化也有遇到，之后详细写）

• 先说第一个，其实问题的关键就是这玩意不能和面向对象那样直接继承成员然后直接用直接改。或者通过return啊，参数传指针啥的直接改。反正就是很方便的改。如果数据是父组件通过参数传递给子组件的，那么要修改数据就必须子组件设置一个自定义事件，然后父组件再去绑定这个事件然后响应。最好的结果也就是将数据处理逻辑放到子组件内部，然后直接将处理完的结果交给父组件。但是昨天听公司一个大佬说数据处理一般都放在父组件。。这就让我更难受了。这要是样式都写在全局 组件存在的意义就只是一个html模板？？我想要的当然是一个组件比如显示订单的。只需要我给你一些必要参数比如用户信息，然后你全给我搞定了啊。
• 第二个，就是这玩意吧和代码封装还不太一样。。代码封装一个函数的功能不至于会太多样化，简单来说一个函数的代码量就不会太多。事情也少，要么就是类似md5啥的算法。本身算法复杂但是功能也很单一。但是这玩意吧。。。。可以说千变万化。。颜色不同啦。显示内容不太一样啊。。反正大体上看起来都差不多，但是就是不太一样。这就很难受。要是一个玩意封装好我去用它，配置要配置半天。那。。。。。。。。我又要说存在的意义是什么。我又想封装代码也不是一步到位，有一层一层的函数方法的嵌套。但是。。。。第一个问题啊。这破东西数据不通啊。。。这么搞，太伤身体了吧。。。

先搞个简单的功能比较单一的组件吧

看起来这个复杂的我今天是没戏了的。于是乎我就先折腾一个简单的组件了。然后很快，我担心的问题就出现了。

同事使用这个组件了，他需要修改一下颜色

往小了说，让他传一个颜色值给我问题就解决了。可是问题在于如果要修改其他的呢？

开始尝试

于是我想，你要修改样式，那么你自己写样式。这个不过分。那是不是就你css写完样式，然后告诉我类选择器的类名，我给dom加上不就行了。然后发现css不支持

.a{
    color: #FF8400;
    .a .b{
        margin: 0px;
        padding: 0px;
        font-size: 64rpx;
    }
}

只能

.a{
    color: #FF8400;
}

.a .b{
    margin: 0px;
    padding: 0px;
    font-size: 64rpx;
}

这样如果我有很多个节点。。这个类给谁呢？？？。。

百度了一下发现还真有支持的 好像叫less。不过嘛。。。好像这玩意就是让你这么写，然后通过第一个程序翻译成css。。。。。

想着是不是设置一堆参数然后都给默认值，要设置啥设置啥就行了。但是总感觉这样的方法，对于代码的函数方法那样还行。对于web简直就是开玩笑啊。

妥协的办法

最终我感觉还是组件里dom都加一个ex结尾的空类，然后需要修改哪个节点的样式就直接再父页面用类选择器写一下。这样至少要改啥开发者工具一看就知道类名了。但是这样没办法多个类名叠加 比如

<view class="flex_row">
    <view class="text_small text_gray">
        xxx
    </view>
    <label class="text_small text_gray">xxx</label>
</view>

如果要同时添加text_small text_gray就做不到了，但是这样的操作很多，至少我喜欢这样，把一种相对独立的样式抽离成一个类。我知道这样说有问题。不过。。懂就行了。然后要用了直接多个类叠加。

之后打算

我感觉我得去学下react啊vue啥的这些框架了。。。。。貌似我们公司这个也是要用react做的。。。想不学都不行了。。毕竟工作了。。。