组件类

1. 建议给出一个具体的指导风格，比如使用Control.extend()扩展原型。

2. 接口规范。

   一方面可以统一api，另一方面，可以更好在业务层面做控制。目前想到的一个必须实现的接口。 @jinzhubaofu @chriswong 看看呢，缺少这个规范，感觉对贡献者有点疑问。

   prototype.dispose()  释放资源
   

版本控制

根据之前沟通，使用上可以分为最新版，带版本号两种方式。版本号和release的三位号码一致。如：

require('ui/tabs');   //最新版
require('ui_0.6.8/tabs');  //带版本号

其中moye组件最新版前缀为'ui', 带版本号前缀格式为'ui_版本号'。

求拍。

目前moye有以下控件, 欢迎大家前来领养:

~~按钮 Button~~ ~~日历控件 Calendar ~~ ~~输入框 TextBox~~ ~~城市选择 City~~ ~~分页控件 Pager~~ ~~单选/复选 Raido / Checkbox~~ ~~浮层提示 Tip + 浮动提示 FloatTip~~ ~~下拉选项 Select~~ ~~图片延迟加载 Lazy~~ ~~选 项 卡 Tabs~~ ~~对 话 框 Dialog~~ ~~星号评级 Rating~~ ~~图片轮播 Slider~~

补充一些

图片上传 PicUploader 滚 动 条 ScrollBar 农历控件 Lunar 回到顶部 BackTop 表单 Form 标签 Tag

呃, 如果无人领养, 控件就要被移除了呢~

整理以下需求供大家讨论。优先级不分先后。

近期需求

(1) 新控件 - 表单、数据校验

由于中间页项目中有大量的表单需求，moye需要给予支持。

主要功能可能包含：

1. 数据字段校验
2. 提交事件处理

针对这两项功能，我们需要完成以下工作：

1. 设计InputControl基类（接口）
2. 整理目前已有的输入类型控件进行一次重构，使其继承InputControl基类（或实现InputControl接口）
3. 补充一些输入控件，例如Text, TextArea；

具体的设计/实现问题另开issue讨论。

(2) 通用 - 控件状态与皮肤

控件状态

常用的控件状态有禁用 只读，因此我们计划为Control添加以下方法来支持

• addState(state) 自动添加样式state-${state}
• removeState(state) 自动移除样式state-${state}

控件皮肤

目前moye控件只能通过覆盖less预定义变量重新生成样式，来生成自定义样式。这种方式会造成样式冗余。我们通过配置字段skin来添加自定义皮肤。

options: {
    skin: [ 'custom-skin-1', 'custom-skin-2' ]
}

如果按上边示例添加skin参数，控件自动获得样式skin-${skin}

(3) 通用 - 控件插件

由于moye自身定位是 轻 小 快 的小清新控件库，我们不能像esui一样集成大量功能到控件中。因此，考虑是否可以控件功能细化，以插件形式提供。例如：

var placeHolder = require('moye/text-placeholder');
var passwordStrength = require('moye/text-password-strength');
var text = new Text({
    onChange: function () { ... }
});
text.use(placeHolder( ... )).use(passwordStrength( ... ));

以上代码可以提供一个输入框控件，带有placeholder兼容功能以及密码强度验证功能

var validate = require('moye/validate');
var form = new Form({
    onSubmit: function () { ... }
});

form.use(validate({ ... }));

以上代码可以提供一个表单，带有校验功能

插件化既可以保持控件本身功能精简，又利用于扩展功能。

(4) 通用 - jQuery化

由于大搜索卡片全面使用jQuery，因此我们的lib绝大部分的功能都是冗余的。因此，我们需要开发一个基于jQuery的moye版本。

(5) lib.observable的事件对象规范化

现在observable对象在fire事件时，传入的事件对象不支持这些方法或对象：

• preventDefault() 阻止默认行为
• isPeventDefault() 是否已经阻止了默认行为
• stopImmediatePropagation() 立即阻止后续监听者的回调
• stopPropagation() 停止事件冒泡
• target对象

这些方法或对象在构建复杂逻辑时是必要的，特别是preventDefault()。

中远期需求

中间页控件规范化

在中间页项目使用标准样式、标准交互的控件

可以与中间页栅格化一同进行

控件库

对于中间页项目，我们推荐大家使用统一、标准的控件。当然，在某些情况下我们的标准库不能满足需求。我们希望可以形成一套机制，在满足基于统一接口的条件下，收录多种多样的控件。

欢迎大家讨论，有遗漏的问题欢迎大家补充

• 建议原型上的私有方法名称都以_开头，并补充在规范上，提醒开发者不要调用下划线开头的私有方法；或者，提供一个interface方法，指定哪些方法可以公开：

Control.extends(一堆方法).interface(['fn1', 'fn2', ...])  //fn1，fn2都在前面extends参数的对象中，但只有这些方法真正扩展到原型上了。

• lib和Control能否合并？仅仅因为可以在使用中减少一个请求 :)

大家看下呢？

1. 注释与实现不一致，如下配置项描述可以删除 @property options.prefix选项不存在 @property {HTMLElement=} options.stage 控件动画容器， @property {HTMLElement=} options.prevElement prev按钮的容器， @property {HTMLElement=} options.nextElement next按钮的容器， @property {HTMLElement=} options.indexElement 轮播索引按钮的容器，会将第一级子元素设为索引元素 @property {Function=} options.onChange 当播放索引改变时的事件
2. var index = target.getAttribute('data-index') 为啥ie7下会取出数字了？按规范来，都是字符串，用ie7模式下看也都是字符串。。
3. less 样式问题 transition按规范来必须指定属性，不能为all 此外值写错了: all 0.3s 0 linear 应为 all 0.3s linear 0 (0可以省略，默认值)
4. capacity 去掉，通过stage容器判断其children数量获取
5. stage容器通过 data-stage 来获取，而不是通过class: ui-slider-stage 即HTML模板，通过 data-stage 属性标识 stage 容器，而不是通过组件自动生成的 ui-slider-stage 样式
6. 把Slider 的 privates 定义方法提取出来放在prototype下，私用方法通过annotation标注
7. 删掉 Slider 的 refresh 方法，组件repaint/render/setXX方法可以替代，这个方法没感觉有存在的必要性，此外可以保持组件 API 一致性
8. Slider 自动轮播模式，自动强制 circle 设为 true，而不受外部传入的 circle 值影响
9. SliderAnim 的 lineer 改成 linear
10. SliderAnim 的 isBusy 实现逻辑有问题 this.timer !== 0; 改成 !!this.timer;
11. SliderAnim 访问 Slider 的 count 属性 改成 capacity
12. 修复测试用例无法通过问题及新增测试用例

我希望moye在使用时，尽量对开发者透明，自动引入css，即在require某个ui时，将整个css文件也放到页面上（所有ui的style已经合并到一个css文件）。

从引入时机来说，Control被require时，将css加到页面比较合适，但在Control中做这个事情似乎又不雅观，大家觉得如何实现比较好呢？

Radio: 百度汽车：http://car.baidu.com/ 百度健康： http://jiankang.baidu.com/Drug/index 百度教育：http://jiaoyu.baidu.com/query/juhe?categoryID=010202 Checkbox: 百度财富：http://caifu.baidu.com/fund?tn=NONE&zt=self&fr=-&qid=1422594395030340

用 .extend 创建的多层子类中，使用 .parent(name) 调用父类中方法时，会因为 this 一直是新建出来的实例，造成死循环的问题。

解决方法：

1. Prototype 中的重写方法，被 John Resig 借鉴过
2. 最早可能是 mootools 中的利用 augments.callee.caller

为什么需要预渲染模板？

moye广泛使用在中间页和卡片系统中，这两类页面对于性能要求非常高。在这种情况下，需要在尽可能早的时间点上提供用户正确和稳定的视觉展现。而使用js脚本来完成首屏元素的生成/渲染是不可取的。

因此，我们希望在组件的DOM是直接由smarty模板渲染完成的。我们通过实现一系列smarty函数来提供一种快捷实用的构建首屏控件dom。这样做有几个好处：

1. 性能更好
2. moye控件在页面中经常被重复使用多次，依照Don’t Repeat Yourself原则，我们应当把这些代码抽象出来，以减少重复代码，降低维护成本。
3. moye控件内部结构复杂，手动编写其dom结构对于使用者而言是非常痛苦的。难以记忆的同时，使用者对于控件的内部dom结构的过度关注也违背了开闭原则。对于一个控件来讲，应当支持对它的扩展，而不是去修改它。

如何使用预渲染模板

首先，需要在smarty模板中引入我们提供的函数库，例如

{%include file="path/to/moye/tpl/Button.tpl"%}

其次，生成一个控件配置参数。例如从某个配置文件中读取：

// ui.json.tpl

{
  "btn": {
    "id": "btn",
    "type": "Button",
    "text": "test"
  }
}

// index.tpl
{%include file="path/to/moye/tpl/Button"%}
{%include file="./ui.json.tpl" assign="ui"%}
{%$ui = $ui|json_decode:true%}

由于我们的参数配置文件也是一个smarty模板，所以我们可以在这个文件中尽情使用smarty的各项功能。

例如：

{
  "btn": {
    "id": "btn",
    "type": "Button",
    "text": {%if $a > 100%}"test"{%else%}hello, world{%/if%}
  }
}

最后，通过下边这条语句就可以得到Button的dom结构了：

{%call Button data=$ui.btn%}

渲染的结果：

<button type="button" class="ui-button" data-ui-id="btn">test</button>

如何开发控件的smarty预渲染函数

原则上，我们只生成首屏可视元素，以及必要的属性。首屏不可见的元素（如浮层）可以交由javascript来完成渲染

我们提供了一个base.tpl的基础函数库，提供了一些基础的方法，例如：

1. getPartClassName()等同于control.helper.getPartClassName()
2. getStateClassName()等同于control.helper.getStateClassName()

小伙伴可以使用这两个函数来辅助构建自己的控件模板。

示例：Button模板函数

{%function name=Button%}{%strip%}
<button type="{%if isset($data.mode)%}{%$data.mode|escape:html%}{%else%}button{%/if%}"
    class="{%getPartClassName data=$data%}"
    {%if isset($data.id)%}data-ui-id="{%$data.id%}"{%/if%}
    {%if isset($data.disabled) and $data.disabled%}disabled="disabled"{%/if%}>
    {%$data.text|escape:none%}
</button>
{%/strip%}{%/function%}

PS: 目前我们采用的提供模板函数的方式来实现。在编写过程中，操作数据是比较复杂的。同时，如果想要实现与javascript同等复杂逻辑的dom结构，也是比较痛苦的事情 。所幸，强大的smarty也提供了插件机制，我们也可以通过编写smarty插件的方式来实现上述的功能。感兴趣的同学可以调研一下。

整理了一下本次2.0版本需要完成的功能：

1. 基于jQuery的重构
2. 支持皮肤、状态
3. 支持插件
4. 拆分lib库
5. 新的控件生命周期机制
6. 新的demo站点
7. 新的全局api: moye.create() / moye.get() / moye.init()
8. 新的控件：Form / Tag等等
9. 与ecomui相一致的api设计
10. 新的less编写模式，提供大量的预置变量，以提供灵活的样式自定义调整
11. smarty预渲染模板

在之前一段时间里我们已经完成了其中的绝大部分开发工作，接下来我们的几个迭代将要继续完成的工作：

1. 完成smarty预渲染模板的开发 预计时间：0309 ~ 0322
2. 完成单测的编写 预计时间：0323 ~ 0405
3. 完成基于jsdoc3的api文档编写与生成 预计时间：0406 ~ 0419
4. 视觉设计标准化 预计时间：0406 ~ 0419

大家看是否OK，如有遗漏请大家补充。

1. 表单元素, 拥有属性name

2. 状态: 正常 / 聚焦(:focus) / 禁用(disabled) / 只读(readonly)

   

   

3. 校验功能

   1. 按配置进行校验
   2. 控件状态 校验成功(valid) / 校验失败(invalid) / 校验中(validating)

   

4. placeholder兼容

5. 自动提示

   

6. 多行文本输入

轮播图在opacity动画切换模式下，存在两个bug： 1、首屏展示的最后一张图片（应该为第一张） 原因：绝对定位图片叠加，默认最后一张在最顶层

2、IE8-轮播不好使，脚本错误 原因：https://github.com/ecomfe/moye/blob/master/src/ui/SliderAnim.js#L513, lib.type方法有兼容性问题。

如何复现：

1. 假设，target在正常文档流，相对于body的offsetTop是500px，此时Popup已经显示出来
2. 接下来，把target之前的内容清空，这时target的offsetTop就会变成0
3. 这时候Popup还停留在原地

这个问题的原因在于Popup的main元素直接挂载在body上。目前使用了Popup的组件都有这个问题。

我想到了两个办法

1. 把popup挂载到组件的main元素内部。这个方案伤筋动骨，动作太大。
2. 给body模拟一个offsetHeightChange的事件，性能上可能有问题

大家看看有什么好办法 @wuhy @michaelliu90316

主要修改点：

1. 将ecl-ui前缀改到Gruntfile中定义，同时修改了js、less、test代码
2. grunt中添加了用于www上线的两个任务：编译和测试，单测模板中使用线上的jQuery和esl，尽量和ps环境一致。
3. 将单个组件的css、js合并打包，这样模板开发时就不用关心css的引入问题了，同时也做到了按需引入，不浪费带宽；
4. 将lib、config（这个新增用于变量定义）和Control三个模块在grunt任务中打包到一起了。

grunt test-online 试试先，文档后续补上。