组件的封装有利用于代码的复用,封装统一的数据处理逻辑,对外提供接口,灵活配置与扩展,调用方便,利于维护。
原则
- 开闭原则:对内修改关闭,对外扩展开放
- 单例模式:同一个组件,在多次调用时,只使用一个单例
闭包
使用闭包:减少全局变量的污染,避免与其它插件冲突
严格模式 (strict mode)
使用严格模式:添加 use strict
标识
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。
组件说明
组件应添加组件说明,包含:组件名称、作者、版本、依赖项、使用方式、源码地址
/** |
构造函数
组件的状态和属性都应该在构造函数中进行初始化
插件定义
通用插件定义
- 在内部返回每一个jQuery对象,插件的实例缓存到jQ对象的
data
中 - 要的参数的类型调用组件不同的方法
function Plugin(option) { |
事件的命名空间
在开发较复杂的组件时,应添加事件命名空间,方便事件的管理,参见bootstrap modal组件
对外开放配置
组件通常有很多的配置,将配置接口对外开放,可方便用户对组件进行详情的配置与自定义
$.bn.button.defaults={ ... } |
注意: 组件内部使用到的模板、class、id等都应该放到配置中,以便使用者自定义
对外开放构造器
将构造器对外开放,可方便外部对插件进行扩展升级
$.fn.button.Constructor = Button; |
解决与其它重名插件的冲突
为防止组件名称与其它组件重名,应对外提供onConflict接口进行重命名。
var old = $.fn.button; |
生命周期
组件的生命周期包含:组件状态初始化、数据初始化、事件绑定、更新、销毁
结构
- PUBLIC CLASS DEFINITION:类定义,定义了插件构造方法类及方法。
- PLUGIN DEFINITION:插件定义,上面只是定义了插件的类,这里才是实现插件的地方。
- PLUGIN NOCONFLICT:插件命名冲突解决
- DATA-API:DATA-属性接口
模板
|