编写可维护的现代化前端项目

本文其实可以看成是对 接手前端新项目？这里有些注意点你可能需要留意一下 的补充，主要是我在平时写代码过程中得到的一些经验

使用 typescript

忘了从哪里看到的一句话，意思是使用了 typescript的项目，将比不使用的项目体积多出 30%，当然，这多出来的 30%代码只是你本地需要写的代码，项目打包完毕后，是否使用 ts，项目体积基本上是一样大的

ts的好处我就不多加赘述了，其最实用的就是类型检查，同时增强编辑器的提示功能，需要注意的是，既然接入了 ts，那就尽量把 ts的优势体现出来，不要为了偷懒把 typescript 写成了 anyscript，否则还不如不加

另外，经常听人说，小项目没必要接入 ts，只有大项目才需要，实际上，按照我的感觉，没必要分什么大的小的，容易造成迷惑，你为公司写的项目肯定不会小到哪里去的，而且肯定不是写完了就不管了，后续肯定需要多次迭代维护的，无脑接入就行了

至于你自己写的个人项目，那就看你自己心情了，因为代码都是你自己的，你自己应该知道自己在写啥

不要在模板里写太多的逻辑

无论是 react 还是 vue，模板或者 jsx中都不要写太多的逻辑，模板就是用来放布局的，尽量不要干其他的事情，逻辑最好全部放到 js中，掺杂了大量逻辑的模板，不仅会让模板面目全非，很难一眼看清楚页面布局，同时维护起来也很困难，因为模板中只是支持部分 js的语法，并不是全部，一段逻辑可能在 js中很轻易地就能实现，但在模板中，因为语法局限，要绕一大圈才能搞定

例如，当拍下一个商品后，会有一个对应的商品状态流传的进度页面，这个页面的底部可能存在按钮，当商品拍下还没发货时，显示 催发货，当商品发货后，显示 确认收货，当商品确认收货后，显示 去评价，这只是最基本的，复杂一点，可能有五种以上的按钮，搞不好还要根据当前流转的状态来决定要同时显示几个按钮，加起来十几种的按钮排列显示方式

对于这种情形，我看到过最多的解决方式就是直接在模板里 if..else，大 if 套小 if，if的判断体可能还要依赖于不止一个条件，那真是惨不忍睹，半屏幕的模板看下来，结果发现其实只是为了显示页面最底部那两个按钮，想改哪个按钮，首先得层层追踪清楚这个按钮到底写了哪些以及哪几层条件，为了兼顾 UI，还要确认一下改了之后会不会影响到显示效果，瞎浪费时间

<div class="bottom_btn">
  <div class="single" v-if="status === '1'">
    <button @click="buttonClick('sendBySelfBtn')" class="button">修改物流单号</button>
  </div>
  <div class="single" v-else-if="status === '2'">
    <button @click="buttonClick('moneyDetail')" class="button grey" >查看打款进度</button>
  </div>
  <div class="single" v-else-if="status === '3'">
    <button class="button grey" @click="buttonClick('cancelBtn')">取消寄卖</button>
  </div>
  <div class="single" v-else-if="status === '4