关于前端复用的构思

 前端摩尔定律，每隔18个月，前端难度难一倍。

确实是这样。。想当初只用jquery一个一个赶页面是多么……

接触了一些前端框架，他们都是为了解决了一些特定的场景而生，一堆一堆的api要记，前端学习成本一个一个框架就上去了。

不要盲目的追框架，若是它提升你工做效率就用，若是不能那为何要用？框架还有学习成本和踩坑成本，原生维护成本相对较高。复用就是一个提升工做效率的一个点。

框架和原生均可以表现出复用的思想，太简单的复用就不讲了，听过一些大神们的分享以后，我想谈一下组件级的复用的思考。最近不是流行web components么。

1，关于原生

原生js，html搭建的网页是蛮难维护的，好比一个表单验证，一大堆if else确定之后维护或者添加功能上面就麻烦不少。

原生的复用也就是代码复用，把代码功能抽象出来，表单验证的功能都相似吧？把功能抽象到方法，好比验证字符串的个数，compare，密码是否是相等，邮箱，手机的验证，正则表达式的验证。

传参验证。每次我只须要定义验证规则和传入input的值就能够。这样一个验证的类，我就把此生所须要写的全部表单验证的逻辑写完了。

项目有两个页面须要验证，不要写2遍if else，调用这个类，传相应参数。

加功能怎么办，拓展类，拓展规则。这样，你原来的代码不用改，你不须要知道之前一堆jq是什么鬼，你只须要拓展这个类就能够了。一种好的代码规范就是拓展而不是修改。

2，angularjs
咱们不盲目崇拜框架，我有原生的一套js验证，好，那么我angular也调用这个类。angular好的实践就是在controller里面不要加太多业务逻辑和dom操做。若是咱们想复用就别让它依赖当前controller。

angular的指令分装饰型指令和组件。通常复用就要组件不依赖外部环境，这样你才能把这个指令用到任何地方。咱们把该指令分离，他须要的数据经过属性传进去，相似vue和react的props，

而后内部就是操做自身逻辑，咱们须要复用逻辑，把“脏”东西扔出去。这点angular作的不是很好，angular1.*并无讲组件这个概念，这点会在ng2中有所改变。

一个angular组件，数据在属性中传递，中心验证我还用原来的那套。好比一个组件

<verify name="username" verify-type="string" model-type="class" />

 

一个验证组件就相似这样，我要显示的组件名好比用户名，我传一个username，我要验证的类型，好比我验证它是否是字符串，用一个verify-type传入string，经过那套js验证后返回验证结果。

验证结果能够用个form-error的指令来封装一个错误类型的指令。每次出错都复用这个指令，固然出错信息props传入。最后能够定制model-type，指令的样式，传入一个js对象，能够定制。

3.reactjs

react就提倡的web components，它的每一个部分都是一个组件，固然数据是props传入的，他都给想好了。这个组件就比较好复用了，它维护自身的state，一个组件一个state，两个组件基本上没有任何的耦合。那么复用就好作多了。组件的通讯就经过props，子与父组件的通讯就须要全局的事件系统了。react复用是作的很好了，可是它没有双向绑定，验证表单写起来较ng麻烦一点，组件间的通讯也很麻烦。因此写react应用的时候，子组件通常就充当渲染组件，上面传什么参数我渲染什么，并且react组件不要嵌套太深，好的实践是扁平化，若是用了redux,就会发现若是嵌套太多组件，state是很难维护的。

 

总结：随便闲扯了几句，主要是但愿咱们工做效率可以提升，我只须要写html给它传递相关属性来定制一套页面，这是多么爽，一句js也不用写，页面就写完了，功能和风格都是统一的，并且它仍是好维护的。纯理论，但愿之后根据公司业务逻辑写一套本身的开发框架，用公司的ui库，达到本身“不写”页面的目标……