• 关于前端复用的构思


     前端摩尔定律,每隔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库,达到自己“不写”页面的目标……

  • 相关阅读:
    网页加载进度条
    【转载】通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?
    前端知识复习:Html DIV 图文混排(文字放在图片下边)
    NOPI导出Excel
    C# 发送邮件
    DataSetToList 和 DataTableTolist 转换
    一个修改版的PHP ajax Tree树形菜单
    你的站为什么百度无动于衷——10年老站长的SEO肺腑之言 .
    关于php使用phpqrcode生成二维码的完整源码下载
    php结合phpqrcode生成带图片LOGO的二维码
  • 原文地址:https://www.cnblogs.com/dh-dh/p/5471779.html
Copyright © 2020-2023  润新知