Uform 控件开发规范
12级学生,13级学生,14级学生均开发过控件，但每次开发完后不具有可维护性,一人一套代码规范，低年级学生要看懂代码不如重写一个，为了让大家写的控件有流传价值,需要解决如下问题：
1、控件调用名称的统一。。
例如：有些学生写的控件的调用方法是：U.MD.UI.Color.colorPicker(),U.MD.UI.calendar.create()
统一后调用方法为： U.MD.UI.calendar()，U.MD.UI.Color()
2、使用new和不用new的做法的区别。
多份实例才用面向对象的new方法，单份实例均用面向过程的方法。
3、主函数采用步骤式1,2，3..把界面铺出来。
在create函数中需要把界面及界面的事件写出来。如果代码很多，需要根据功能划分函数。
一、 控件开发文件放置规范
所有css文件均放置在UseStudio.Manage项目下css文件中的Controls中。
所有js文件均放置在UseStudio.Manage项目下js文件中的Controls中。
其中：电脑端控件文件放置咋：PC文件夹中，
手机端控件文件放置在：Mobile文件夹中。
JS命名规范：
主文件以命名控件做为文件命名
若有其余附属文件则以命名控件+文件功能命名。
Css文件命名规范：
主文件以js命名控件做为文件命名模板
如：城市控件的js文件命名为:Namespace.register("U.MD.UI.City"),
则城市控件中最大的元素的命名规则为:U_MD_UI_City.
若有其余附属文件则以主文件名称+附属文件功能命名。
二、 控件开发命名空间规范
电脑端控件开发统一命名空间格式为：
U.MD.UI + 控件名称
例：如果为城市控件,则命名空间为：
U.MD.UI.City
手机端控件开发统一命名空间格式为：
U.MT.UI + 控件名称
例：如果为图片控件,则命名空间为：
U.MT.UI.Image
三、 控件开发调用函数名称规范
JavsScript规范说明：
控件调用名称的统一为：命名控件主函数。
例：如果为图片控件,则命名空间为：U.MT.UI.Image
则调用图片控件的函数为：U.MT.UI.Image.
函数名定义原则：名字要能准确的描述出该变量所代表的事物，变量名长度最好控制在10~16个字符之间
1、函数采用命名空间+小驼峰命名法.
例如：U.UF.S.getFirstName=function(){},第一个单词小写,后面的单词首字母大写.
2、局部变量统一采用下划线带小驼峰命名法.
例如: _name="张三";
3、参数采用全小写命名方法.
例如：U.UF.C.jsonToStr(obj)
名词解释：小驼峰命名法：第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字。
函数注释：
1、 对每条函数进行作用使用说明
2、 对每个参数进行解释 包括类型 参数名 作用
3、 对函数的每一块内容进注释（尽可能做到每行注释）
已下面函数为例：
1、/** */内为函数作用使用说明，其中：@param 为参数说明。
2、函数内尽可能做到每行注释，主要说明其在函数中的作用。
/** 定义一个函数，做为对话框类，也相当与java或者net的构造函数
* @param string title 对话框标题
* @param object style 对话框样式
* @param function closecb 关闭回调
* @param function determinecb 确定回调
* @param string content 窗体内容
* @param element parentelement 窗体追加到的指定元素，默认是document.body
*/
U.UF.UI.dialog = function (title, style, closecb, determinecb, content, parentelement) {
this.title = title; //对话框标题
this.style = style; //对话框样式
this.closecb = closecb; //关闭回调
this.determinecb = determinecb; //确定回调
this.content = content; //窗体内容
this.parentelement = parentelement || document.body; //窗体追加到的指定元素，默认是document.body
//创建窗体
this.create(); //控件全部用create创建,必须
}
//包含创建这个控件的界面
U.UF.UI.dialog.create=function(){
//可包含判断控件是否存在，存在则显示，不存在则执行下面创建界面的过程
//这里包含了整个dialog的界面铺设，包括元素创建后赋值事件。
例如：
//创建标题栏
$$(“div”,{“onclick”: function(){}});//创建元素和事件的案例。
//创建内容区域
$$(“div”,{“onclick”: function(){}});//创建元素和事件的案例。
//创建尾部区域
$$(“div”,{“onclick”: function(){}});//创建元素和事件的案例。
}
/** 函数式写法案例
* 创建提示框
* @content {string/elemnet} 内容
* @callBackFun {function} 回调函数
*/
U.UF.UI.Dialog = function (content, callBackFun) {
//创建提示框主体
var _dialog = $$("div", { "style": { "cssText": "width: 100%; background: #fff; overflow:hidden; "} });
//创建内容区域
var _content = $$("div", { "style": { "cssText": "text-align: center; margin: 30px 20px 30px 20px; "} }, _dialog);
//判断内容是否为元素
if (U.UF.C.isElement(content)) {
$(_content).append(content); //如果为元素则动态添加到对话框中
} else {
_content.innerHTML = content || '内容'; //如果为文字则修改inerHTML。
}
//创建页脚部分
var footer = $$("div", { "style": { "cssText": "height:45px;" } }, _dialog);
//创建确定按钮 并绑定点击函数
$$("div", {
"style": {
"cssText": "text-align: center; color: #fff; width: 30%; padding: 5px; background: #307ed0; border-radius: 5px;float: right; margin: 0 12px 12px 0;"
},
innerHTML: "确定", // 绑定innerHTML
onclick: function () {
U.UF.C.isFunction(callBackFun) && callBackFun(); //判断是否存在回调 有则执行。
U.UF.F.closeWindow(_form.form); //关闭窗口函数
}
}, footer);
//调用Uform窗体创建函数将主体内容添加到窗体中
var _form = new U.UF.UI.form("提示框", _dialog,
{
"style": {
"cssText": "font-size: 16px; width: 300px; background:#fff; position: fixed; top: 100px; left: 40%; box-shadow: 0 0 10px 3px black; border-radius: 5px;"
}
},
null,
{
"style": { "cssText": "background: #3b5878; padding: 10px; color:#fff;"}
});
}
//错误事件赋值案例，由于在创建元素外赋值，很难能定位到哪个元素赋值了什么事件，这样会导致代码的易读性很差
bindEvent = function(){
this.a.onclick= function(){
}
}
构造函数（new方法）用与不用的说明：
1、 使用情况下使用new方法，什么情况下不使用new方法？
当控件为多份实例时使用new方法作为控件的创建方法，当控件仅需要创建（实例化）一份时采用函数式写法。
2、 尽可能采用函数式写法开发控件
由于构造函数写法不够直观易懂，且在调试过程中难度较大。为方便更多成员学习和更多成员的加入，因此规定尽可能的采用函数式写法开发控件。
3、 举例说明在什么情况下使用new方法
1) 窗体控件
在使用云操作系统的过程中，用户会打开多个不同的应用，而每个应有都由窗体包裹。
因此窗体控件在云操作系统中被将会被多次调用，但没个窗体的大小、位置，是否缩放，是否关闭等等的属性对于每个窗口来说都是不同的。
采用new方法时，同一个构造函数的对象实例之间无法共享属性或方法。这也对应我们的窗体的操作场景。
因此在这种情况下采用new方法创建窗体，对于各个窗体之间的操作管理就显得比函数式方法更加简便易懂。
2) 城市控件
对于城市控件这一类的控制，在页面我们一般只创建一个控件即可。因此对与此类控件不存在一个属性次使用的问题，即可采用函数式方法制作控件。
使用函数式编写控件时的注意事项：
1) 每条函数对应的功能要尽量单一，切勿多个处理在同一函数中进行。
2) 定义全局变量，一定要在主函数之后定义。
3) 函数命名采用驼峰法命名，传参采用全小写方法命名。
4) 函数内定义变量采用“_”+变量名 已区别与传参混淆。
5) 主函数采用步骤式1, 2,3..完成控件的编写。
使用构造函数编写控件时的注意事项：
1) 每条函数对应的功能要尽量单一，切勿多个处理在同一函数中进行。
2) 定义全局变量，一定要在主函数之后定义。
3) 函数命名采用驼峰法命名，传参采用全小写方法命名。
4) 函数内定义变量采用“_”+变量名 已区别与传参混淆。
5) 切勿在控件中定义全局唯一标识如id等属性。
Html规范说明：
• （1）、推荐使用div元素
• （2）、输入文字信息区域用input控件
• （3）、.输入文件上传文件用 < input type=file />控件
Css规范说明：
避免页面元素重名，命名采用与JS命名空间 + 样式作用
如：城市控件的js文件命名为:Namespace.register("U.MD.UI.City")。
则城市控件中最大的元素的命名规则为:U_MD_UI_City。
其他小元素均需带此前缀，比如城市控件中的头部区域命名为U_MD_UI_City_Head
内容区域命名为U_MD_UI_City_Content，。
除前缀需大写外,元素命名采用大驼峰表示法,并尽量使用英文含义进行注释。
