# To B Web for TV Platform

## 1. 项目结构简述
- component目录用来存放UI组件相关代码
- util/API目录用来存在API请求相关代码
- util目录用来存放其他工具类
- 其他的照旧

## 2.代码规范简述（待补充）
- 类型命名，驼峰式命名，component内相关类型建议首字母大写，其他的根据情况可以首字母小写
- 变量命名，驼峰式命名
- JSON变量命名，全小写，下划线风格单词
- html中如无特殊情况class用来写样式，id用来js操作
- class命名字母小写，中划线风格（CSS中无法识别大小写）
- CSS书写顺序推荐：只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性
- 公共样式在mixins.less文件中，后续如再有公共样式再补充

| 显示属性    |  自身属性  | 文本类及修饰类属性 |
| --------   | --------  | --------          |
| display    | width     | font              |
| visibility | height    | text-align        |
| position   | margin    | text-decoration   |
| float      | padding   | vertical-align    |
| clear      | border    | white-space       |
| list-style | overflow  | color             |
| top        | min-width | background        |

### 附：
### API Mock方法
- 添加Mock API的返回数据json文件在 src/lib/mockapi/ 目录下如 src/lib/mockapi/test1.json
- util/API/APIClient.js中增加访问方法，比如：

```
static getMockData(callback){
    let apiUrl = AJAXHelper.genMockDataUrl('test1');
    AJAXHelper.get(apiUrl,callback);
}
```

- sence中引用APIClient

```
import APIClient from '../../../util/API/APIClient'
```

- scene业务程序中使用：

```
APIClient.getMockData((isTrue,res)=>{
    console.log(res);
});
```

### EFMarquee使用说明：
- 类型导入

```
import Marquee from '../../../component/EFMarquee.js'
```
- 代码中使用

```
this.marquee = Marquee.getInstance();
this.marquee.create(document.getElementById('title_marquee'),100);
this.marquee.setStr(document.getElementById('title_marquee').innerHTML);
this.marquee.start(true);
```

- 停止跑马灯

```
this.marquee.stop();
```


### ScrollEventPlugin使用说明：

>     针对阿里小程序Scroll控件定制的补充事件的插件类。
>     阿里小程序要求Scroll控件内必须有一个class为scroll-list的元素，这里我们的插件对scroll-list也有一定要求，
>     scroll-list相对于父级元素不要有高度的padding或margin的情况，否则会导致滚动计算不准确导致无法命中事件的情况

- 类型导入


```
import ScrollEventPlugin from '../../../util/ScrollEventPlugin'
```
- 代码中使用
    
```
//创建插件对象
this.rightScrollEvent = new ScrollEventPlugin();
//绑定目标Scroll widget
this.rightScrollEvent.bind(this.moye.root.getWidgetById('cl-right-content-scroll'));
//设置回调触发事件
this.rightScrollEvent.onScrollToBottom(()=>{
    console.log('on scroll to bottom');
});
//释放事件锁
this.rightScrollEvent.releaseEventLock();
```
>     本插件在触发“到底”或者“到顶”事件时，为了防止非自愿的再次触发，所以在触发事件之后，插件内部会加锁防止再次触发，
>     直到调用方完成了触发后的相关任务之后，认为可以再次处理触发事件时，可手工解锁。

### NotificationCenter使用说明

>     专门为moye框架下应用程序实现的全局观察者模式的消息中心，方便跨Scene的消息传递，局部状态变更。
>     使用时需要在Scene下引用NotificationCenter类

- 类型导入


```
import NotificationCenter from '../../../util/NotificationCenter';
```

- 注册观察者


```
// name:观察者名称
// selector：为观察者绑定的消息回调
static add(name, selector)
```

```
//调用示例
NotificationCenter.add('collection_refresh', this.collectionGlobalListener.bind(this));
```



>  同一个name可以依次绑定多个消息回调，可以在不同scene中为同一个name绑定消息回调


- 向已注册的观察者发送消息


```
// name:观察者名称
// obj:需要通过消息中心发送的数据对象（非必要参数）
static call(name, obj)
```

```
//调用示例
NotificationCenter.call('collection_refresh');
```

- 删除观察者

>  当观察者所在scene被destroy时，观察者也会失效，这时我们建议手动移除之前注册过的观察者

```
// name:观察者名称
// selector:之前注册的观察者，消息中心会通过比对找到之前注册过的同名观察者，然后移除
static remove(name, selector)
```

>  selector参数如果缺省，则删除该name下所有的观察者

```
//调用示例
NotificationCenter.remove('collection_refresh', this.collectionGlobalListener.bind(this));
```