javascript组件怎么写

在学习怎么写之前我们来先看看什么是组件,我的理解是快速的完成一个特定的可以被抽象和复用并且可以扩展的功能模块,这里和使用什么框架没有关系 。
抽象、可复用、可扩展是其最主要的特点,下面我们来具体讲下Javascript组件该怎么写 。
抽象
抽象是什么呢?就是把实际业务需求中常用的东西总结成一个通用的范式 。比如bootstrap框架里面的众多组件,就拿弹出框组件来说,是实际业务开发过程中经常会被使用的,被抽象出来以后通过一些配置就能够快去开发 。

javascript组件怎么写

可复用
抽象完以后,我们就要考虑对它设计和开发,考虑如何才能提升它的可复用性 , 不能说只能在特定情况下才能使用,不可变更,这样就违背了组件的特性 , 也就不能被称为组件了 。
复用性提高的前提就是灵活的配置项,不约定死的html结构以及不强制依赖的css样式,组件提供功能的专一性,保持组件的单一性,对其它不关心的通通用配置进行解耦 。
我们还拿弹出框组件来说 , 弹出框可以有多种弹出方向,如下图
javascript组件怎么写

不同的弹出方向是通过attr属性来配置的,而其html结构并不会发生变动
javascript组件怎么写

可以看出不同的弹出方向其data-placement属性是不同的 , 而其它属性是相同的,其中data-toggle属性是用来识别运行组件的 。这样一来,html结构 , 样式就都是可以复用的,而只需要更改attr来实现不同的需求 。
可扩展
扩展性一般有两种 , 一个是通过广播的行为,一个是通过继承的方式,当然你还可以选择组合的方式来进行扩展行为 。
比如弹出框组件提供了许多事件
javascript组件怎么写

通过这些事件你可以很好的进行扩展,在不同的执行过程中去自定义自己的行为 , 从而实现业务需求 。
【javascript组件怎么写】
上面我说的只是一些基本操作,当然也会有更多高级的组织行为方法,针对,就当是抛砖引玉了 。

经验总结扩展阅读