关闭

如何去设计一个组件封装_前端组件化设计思路

时间: 2018-08-08阅读: 11140标签: 封装

目前前端三大框架vue.js, Angular.js, react.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。

组件封装有一定的不确定性,更多时候是在做几个方面的权衡,并且在业务不断变化中,可能还会面临一些调整和重构。

组件化开发的意义有很多,一些新手会狭隘地认为只是为了复用(包括对于模块化的理解),认为只有一个地方用就没必要抽取封装为组件,但实则不尽然:

  • 组件化是对实现的分层,是更有效地代码组合方式
  • 组件化是对资源的重组和优化,从而使项目资源管理更合理
  • 组件化有利于单元测试
  • 组件化对重构较友好


组件与模块

模块(Module)通常强调的是职责(分离、内聚),组件是可复用模块和相关依赖的封装。

组件可以如下定义:

  • 可复用的模块,完成既定功能
  • 有明确的接口规定
  • 有上下文依赖、外部依赖资源的定义
  • 可以独立发布

组件设计的原则

新手常常会更多地从实现(如所用的框架vue的组件实现方式)直觉角度定义组件,并且隘于视角较局限,经验较欠缺,对于职责划分不合理。

以下原则尽可能使用,用得越多就组件的复用性就越好。

  1. 适用单一职责原则
  2. 适用开放封闭原则
  3. 追求短小精悍
  4. 避免太多参数
  5. 缩小信赖范围和向稳定方向信赖
  6. 适用SPOT法则 (Single Point Of Truth,就是尽量不要重复代码,出自《The Art of Unix Programming》)
  7. 追求无副作用
  8. 追求引用透明
  9. 避免暴露组件内部实现
  10. 避免直接操作DOM
  11. 适用好莱坞法则 (好莱坞法则: Don’t call us, we’ll call you, 又称IoC, Inversion of control, 控制反转)
  12. 入口处检查参数的有效性,出口处检查返回的正确性
  13. 充分隔离变化的部分
  14. 组件和数据分享,信赖一致性的数据结构

自省的几个问题

以上原则有点太教科书,不结合长期的实践深刻理解,很难灵活运用,所以我设计了以下几个自省问题,在思考一个组件时候,从这几个问题入手,引导完善组件的设计。


这个组件可否(有必要)再分?

组件划分的依据通常是 业务逻辑、功能,要考虑各组件之间的关系是否明确(如组件树方式管理组件间依赖关系,兄弟组件不可见),以及组件的可复用度。

划分粒度的大小需要根据实际情况权衡,太小会提升维护成本,太大又不够灵活和高复用性。

每一个组件都应该有其独特的划分目的的,有的是为了复用实现,有的是为了封装复杂度清晰业务实现。


这个组件的依赖是否可再缩减?

缩减组件依赖可以提高组件的可复用度,常用的方法是IoC(依赖注入),对外弱类型依赖。


这个组件是否对其它组件造成侵入?

一个组件的封装性不够,或者自身越界操作,就可能对自身之外造成了侵入,这种情况应该尽量避免,确保组件的生命周期能够对其影响进行有效的管理(如destroy后不留痕迹)。

较常见的一种情况是:组件运行时对window对象添加resize监听事件以实现组件响应视窗尺寸变化事件,这种需求的更好替代方案是:组件提供刷新方法,由父组件实现调用(最终由根组件统一处理)。

次优的方案是,当组件destroy前清理恢复。

一个组件不应对其它兄弟组件造成直接影响。


这个组件可否复用于其它类似场景中?

需要考虑需要适用的不同场景,在组件接口设计时进行必要的兼容。


这个组件当别人用时,会怎么想?

接口设计符合规范和大众习惯,尽量让别人用起来简单易上手,易上手是指更符合直觉。


假如业务需要不需要这个功能,是否方便清除?

各组件之前以组合的关系互相配合,也是对功能需求的模块化抽象,当需求变化时可以将实现以模块粒度进行调整。  


原文来源:http://ijser.cn/2017-06-25-web-component-design-in-front-end/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/996

关闭

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。获取元素的属性的函数并进行了兼容性处理:

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

JS封装getScroll函数 & 案例:固定导航栏

封装getScroll函数:1. 获取页面向上或者向左卷曲出去的距离的值,2. 浏览器的滚动事件。固定导航栏获取scrollTop值后判断高度大于导航栏的高,就设置样式固定住

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

原生js实现ajax的封装

ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

原生js实现ajax请求封装,类似于jquery的操作

ajax可以实现不阻塞用户,达到无刷新更新部分页面的效果,它的异步请求都会首先考虑的是jquery,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?

ant design vue 表格a-table二次封装,slots渲染问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染

使用Promise封装小程序wx.request

现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!