widget组件开发框架

widget提供组件开发的一套规范，目标是让代码组件化、标准化，提高代码利用率，提供统一的公开方法和事件监听，方便调用，同时又不失代码的灵活性，让js和html组合一起可更方便开发组件；widget不限制大小，如播放器般庞大复杂的也可当作一个widget，如焦点图、页面头尾、登录功能、加载更多、dialog对话框、与APP交互接口等都可以开发为widget组件，相信即使一个复杂的页面可以完全由widget拼装起来。
## widget开发说明

依赖文件：**lib::letv/widget.js、jquery或zepto**
不特别说明时，下文所说的jquery和zepto是相同的。
## widget组件定义

**$.widget(name, factory, superClass)**
name：必选，widget名字
factory：必选，widget核心内容，基类中实现了部分接口，见列表
superClass：选填，父类，function，默认继承基类
widget组件继承基类，可直接使用这些方法

**基类说明：**

| 方法 | 含义 | 说明 |
| --- | --- | --- |
| _init | widget初始化 | 创建时调用，主要用作组件配置数据处理 |
| _create | widget创建 | 创建时调用，主要用作创建DOM等操作 |
| _options | 属性，组件配置选项 | |
| getEl | 获取widget使用节点 | |
| destroy | 销毁widget组件 | 子类中实现此方法，销毁节点、数据和事件绑定 |
| trigger | 发送事件 | 同时发送DOM和组件事件 |
| on | 添加事件监听 | |
| off | 移除事件 | |
| one | 添加一次性事件 | |
| template | 属性，组件渲染的模板 | 定义组件需要的模板 |
| tpl2html | 模板转化为html | |
## widget组件调用方式

两种调用方式：
1、dom中写widget="widgetName"，同时以“data-”形式配置参数，优点是不需要写JS，如分享组件：

``` html

```

2、$('#dom').widgetName({config:config});
第一种方式不涉及JS，使用简单，页面人员即可完成，接下来主要分析第二种方式。
## 获取widget对象

通过传递this字符串，实现获取widget对象，接下来就可在widget对象上边监听事件和调用公用方法了。

``` javascript
$('#fla_box').player('this');
```
## widget监听事件

widget监听事件可以在jquery对象和widget对象，两者使用完全相同，一般用户不用区分二者区别；
以播放器widget为例，仔细观察以下代码：
//实例化播放器widget

``` javascript
$('#fla_box').player({
flashvar: 'vid=21139315&ark=100',
version: 'http://player.letvcdn.com/p/201410/31/16/newplayer/LetvPlayer.swf'
});
```

//返回widget对象，此时player1可调用播放器widget上边的方法，如播放、暂停等

``` javascript
var player1 = $('#fla_box').player('this');
```

//监听widget组件上的事件

``` javascript
player1.on('statusChange', function(evt, status, data) {
outTxts[0].text(status + '\n'+ outTxts[0].text());
});
```

//player2获取的是jquery对象

``` javascript
var player2 = $('#fla_box2').player({
flashvar: 'vid=1915262&ark=100',
version: 'http://player.letvcdn.com/p/201410/31/16/newplayer/LetvPlayer.swf'
})
```

//在jquery对象上监听事件，与在widget组件上监听事件效果相同

``` javascript
player2.on('statusChange', function(evt, status, data) {
outTxts[1].text(status + '\n'+ outTxts[1].text());
});
```
## widget调用公有方法

有两种调用方法，以调用播放器的切换视频为例，以下两段代码是相同的：

``` javascript
$('#fla_box').player('playMovie'， {vid : 20732522});
$('#fla_box').player('this').playMovie( {vid : 20732522} );
```
## widget插件开发

组件小功能和可有可无的功能可以开发为插件，比方懒加载，焦点图的左右按钮，焦点图的标题，用户头像的提示信息等。
插件定义：

``` javascript
$.widget.Flip.register( 'lazyloadimg', {
_init: function() {
this.on( 'ready flipend', this._loadItems );
}
});
```

插件接口：

| 方法 | 含义 | 说明 |
| --- | --- | --- |
| _init | 插件初使化 | |
| _options | 扩展widget属性 | |
| template | 属性，插件渲染模板 | |
| tpl2html | 模板转化为html | |
## 最佳实践

1、私有方法和属性以_开头；
2、插件文件命名以$开头；
3、如果widget只有一个文件，可以直接使用$.widget，如果有多个文件使用define封装，可以使用外部定义的模块，如：

``` javascript
define(function(require, exports, module) {
$.widget('Player', {
options: {
flashvar : '',
wmode : 'direct'
},
_init: function() {
this._initModel();
},
_initModel: function() {
var lib = require('extend.lib');

lib.setCookie("tj_tg", 'value');

var br = require( 'extend.detect' );

if ( br.iPad ) doSomeThing();
}
});
});
```
## 播放器widget示例

Start by reading lib::letv/widget.js and inspect whether the documented widget and plugin APIs exist there. The issue provides a broad framework specification but does not identify a specific missing change, target files beyond that dependency, or tests defining completion.

Written by the indexing model from the issue text.