关于前端复用的构思

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

时间: 2024-08-25 01:50:44

关于前端复用的构思的相关文章

关于前端复用的实践

上篇说,我希望可以做到基本不写js代码而写一套站,这几天来网易,真心体会到了. 在公司做后台管理,不出意外用angular,也是那种比较小的应用,逻辑不复杂,但是页面不少.ngRouter没有换成uiRouter,oclazyload也没有涉及.给我印象最深的就是组件指令的复用. 就拿上次说的表单复用来说,我只需要写一个标签就做到了复用,我只需要给它赋一个name,然后写上检查属性就可以,比如 <input name="test" type="number"

琐碎前端之团队组建篇

前端的职能在互联网公司已经成为相对独立的一个模块,前端团队自然也需要及时进行合适的自身定位和团队建设.如何去评估一个前端团队的价值,去了解一个团队到底能做什么,可以先从以下几点分析. 1. 前端团队中有几种人: 前端技术人员从技术方向上分为两种:关注视觉展现(CSS):关注数据呈现和持久性维护(JS). 从具体项目来看,可以分为两种: 关注业务逻辑的人,关注前端技术(H5,CSS3,各种主流JS框架)本身的人.产品业务逻辑往往比较复杂,细节繁多,一个从事具体业务开发的人很难同时抽出时间去再深入解

前端UI组件复用工具

"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件. 首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证.轮播图效果.选

前端工程化(摘抄)

目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了.现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了.工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?... 前端工程化是前端架构中重要的一环,就是为了解决上述各种效率方面的问题的.而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程. 那么前端工程化需要考虑哪些因素?我认为前

一个前端练手作品——前端新人如何求职?

前言 最近在求职,作为一名没有项目经历的转行汪,结果相当悲催.没实战经历→公司不要→没实战经历,妥妥的鸡蛋相生无限循环.上万能的知乎求大神帮助,却发现没实战经验的妹子很受欢迎,没实战经验的汉子狗都不理.只能感叹,时代再变,处女情结依旧.知乎上也有很多大神建议先模仿,我觉得很有道理,决定模仿知乎,于是就有了下面这个东西(Demo & 源码):   CSS布局方案:没用知乎的布局方式,全面使用了弹性盒子,之所以选择弹性盒子是因为他使用超级方便,而且跟HTML的结构更加匹配.之前说过,浮动和绝对定位实

【前端vue开发架构】vue开发单页项目架构总结

为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (https://www.npmjs.com) webpack (https://github.com/webpack/webpack) vuejs (https://vuejs.org) babel (https://babeljs.io) 其他的比如sass等CSS预编译器,都可以先不考虑. 下面对以上涉

前端初识

前端 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分为HTML5.CSS3.JavaScript.jQuery前端框架及Bootstrap前端框架五个课程内容来介绍. 一.HTML5 HTML5是什么 HTML5就是html语言,数字5是该语言的版本号:html语言开发的文件是以.html为后缀,制作运行在浏览器上展现给用户使用的前端界面,采用的语言是超文本标记语言(H

前端大纲********

前端 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分为HTML5.CSS3.JavaScript.jQuery前端框架及Bootstrap前端框架五个课程内容来介绍. 一.HTML5 HTML5是什么 HTML5就是html语言,数字5是该语言的版本号:html语言开发的文件是以.html为后缀,制作运行在浏览器上展现给用户使用的前端界面,采用的语言是超文本标记语言(H

2015-2016前端知识体系

一.框架与组件 ?bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 响应式布局:布局.结构.样式.媒体.javascript响应式 第三方插件:插件管理 ?jQuery.zepto使用原理以及插件开发 支持amd.cmd.全局变量的模块化封装 $.fn.method = function(){} ?mvc/mvv