给 Tangram 扩展自定义方法

在使用 Tangram2.0 过程中,是否觉得有些接口的功能和你想像的功能还有些差异呢?是否觉得自己在长期的开发中也积累了一些功能,也想扩展到 Tangram2.0 中可以方便直接使用呢?以下的方法,将引导你如何可以方便的对 Tangram2.0 进行扩展。

链式调用的自定义方法扩展

以下通过一个简单的例子来描述如何扩展一个自定义的链式方法。 例如:假设我们需要扩展一个名称为 setBackground 的方法,该方法可以对选择器取到的所有 DOM 元素设置一个 class 名称并且对tagName 为 div 的元素设置一个背景颜色。我们可以通过以下的代码来完成:
扩展代码:
Tangram2
使用代码:
baidu('.testClass').setBackground();

重点说明

  • baidu.dom 中的extend 方法是每个链头都默认拥有的方法,可以用来扩展该链头的自定义链式方法,该方法接收一个 json 参数,json 中的 key 将会列为扩展方法的名字标识,value 需要是一个 function,标明该链式方法的执行函数。

  • 扩展方法中的 this 指向一个 tangramDom 对象,拥有 tangramDom 的一切功能,例如可以通过 this.size() 方法得到匹配集合的长度,可以通过 this.get() 方法来取得参数索引的每个项,可以通过 this.each() 方法来遍历,可以直接链式调用 tangramDom 的所有链式方法。

风险

使用 extend 方法扩展自定义链式方法,需要注意的是,如果在使用的自定义方法的名称已经是在链头对象中存在的方法名称,则后来扩展的自定义方法将会覆盖已有的方法,请谨慎使用 extend 来扩展自定义方法。