2016/6/21 团队工作会议

[GuoYongfeng]

2016/6/21 团队工作会议

1.部门工作整体介绍

目前整体划分了八大板块内容：

1. 开始使用。包括框架说明、基础和进阶的开发指导、前端架构、反馈交流
2. 设计语言。包括模式和具体设计语言
3. CSS组件。包括全局样式和30+CSS组件（控件）的开发示例及开发文档
4. JS 插件。目前内容暂无，规划为展示内部开发的JS插件，以及链接相关的第三方插件
5. 模板库。前期包括部分领域的典型页面集合以及我们开发的默认页面实例
6. WebIDE。基于现有的调试页面，展示并增强样式板的效果。后续打造成易用的开发调试工具
7. Kero。原datable，赋予新的产品名并独立开发，原代码不修改，在官网展示详细的开发和示例文档内容
8. 定制下载。对框架的主题级定制、对控件和插件的打包定制。

   2.我们的代码仓库的介绍

   官网

   • iuap-design.github.io官网的代码
   • gitbook-plugin-iuap-design把我们的md文档转换成html的gitbook插件
   • generate-uui完成两件事情，将资源放在dist目录实现CDN分发、聚合其他各个相关仓库代码

     框架

   • iuap-design基于设计语言iUAP Design的UI框架
   • datetimepicker日期时间相关的
   • datatable 马上需要改名为kero，kero是一个基于ko的扩展的类库，做为MVVM架构中Model层的增强，主要用于处理企业级复杂数据交互。
   • tree 处理复杂树形数据展现的tree插件
   • grid

     生态

   • scaffold 标准化目录结构 -webpack-dev-boilerplate 基于webpack + react的脚手架
   • react-starter-kit 暂无内容
   • cloud-starter-kit 基于koa+gulp+require的项目脚手架
   • user-group 用户维护仓库

     团队

   • blog 团队博客

     3.官网和CDN构建的过程

     CDN

   • 我们的CDN资源分两个部分，generate-uui仓库的dist目录下的资源，通过在nginx服务配置软链接的方式，配置了CDN资源分发
   • 我们的官网下的所有静态资源都走了CDN加速

     官网构建

我们的官网展示很简单，但是资源较多

• 文档编译，在docs目录下写的文档，会构建到dist/pages目录，通过执行bin/gitbook-build.sh 脚本可以一键式的编译我们docs下的所有文档，在服务器上的钩子hook也是执行的这个脚本实现自动编译的
• node服务，我们官网整体是使用的koa起的web服务，在nginx服务器上也是一直起了这个服务，所以在调试的时候，执行node server/app.js 即可，另外，我把所以和server相关的东西都放在server目录下
• static目录下的CDN资源，我们在访问官网的static目录下的资源其实都是直接访问的generate-uui仓库的dist目录下的资源

  权限

目前大家都可以往github上的iUAP Design上面自由推送代码，但是服务器上部署的代码真正的生效，目前只有我有权限，而且需要我按固定的格式提交代码才会生效。这是因为我们使用的webhook做的钩子，实现的自动化部署，

4.代码规范

不要再去写面条一样的jquery代码

合理的组织js代码

纯函数式

/**
 * [task description]
 * @param  {[type]}  [description]
 */
function Init(){
    domRneder();
    handleEvent();
}

/**
 * [task description]
 * @param  {[type]}  [description]
 */
function domRneder(){
    console.log('domRneder.....')
}

/**
 * [task description]
 * @param  {[type]}  [description]
 */
function handleEvent(){
    console.log('handleEvent......')
}

单例模式

var Index = {
    /**
     * [task description]
     * @param  {[type]}  [description]
     */
    init: function (){
        this.domRender();
        this.handleEvent();
    },
    /**
     * [task description]
     * @param  {[type]}  [description]
     */
    domRneder: function(){
        console.log('domRender');
    },
    /**
     * [task description]
     * @param  {[type]}  [description]
     */
    handleEvent: function(){
        console.log('handleEvent');
        this.otherFn();
    },
    /**
     * [task description]
     * @param  {[type]}  [description]
     */
    otherFn: function(){
        console.log('todo....')
    }
};

Index.init();

构造函数加原型

• 3.1第一种

/**
 * [task description]
 * @param  {[type]}  [description]
 */
var Robot = function(){
    this.a = 'a';
    this.b = 'b';
    this.init();
 }

/**
 * [task description]
 * @param  {[type]}  [description]
 */
Robot.prototype.init = function(){
    this.say();
    this.work();
}

/**
 * [task description]
 * @param  {[type]}  [description]
 */
Robot.prototype.say = function(){
    console.log('say...')
}

/**
 * [task description]
 * @param  {[type]}  [description]
 */
Robot.prototype.work = function(){
    console.log('work...')
}

new Robot();

• 3.2第二种

/**
 * [task description]
 * @param  {[type]}  [description]
 */
function Detail(){
    this.init();
};

/**
 * [task description]
 * @param  {[type]}  [description]
 */
Detail.view = {
    "PRICE_BTN" : $("._price_btn a")
}

/**
 * [task description]
 * @param  {[type]}  [description]
 */
Detail.prototype = {
    init : function(){
        this.initUrl();
    },
    initUrl : function(){
        console.log('handle.....')
    }
}

new Detail();

ES6 Module

class Person {
    constructor(){
        this.a = 'a';
        this.b = 'b'
    }
    say(){
        console.log('say.....')
    }
}

new Person();

代码间隙

// 1
if ( a > 0 ) { }

// 2
var x = 20;

// 3
for ( var i = 0, len = arr.length; i < len; i++ ) {

}

注释

/**
 * [task description]
 * @param  {[type]}  [description]
 */
function Detail(){
    this.init();

    // 变量定义
    var a = 'xx';
};

公共的方法进行抽离

4个空格缩进

// bad
function a ( ) {

    if () { }
  for () {}

        if () { }
}

// good
function a ( ) {

    if () { }
    for () {}
    if () { }
}

命名

• 名副其实，见名知意
• 小驼峰

// bad
var x1 = 0, a_77 = b;

// good
var newFeature = [];

断行

// bad
$.a().b({a: b}).c().dd()

// good
$.a()
 .b({a: b})
 .c()

json格式

// bad
var a = {a: 9,c:0,cccc:'9409043'}

// good

var a = {
    a: 9,
    c: 0,
    cccc: '9409043'
}

5.git的使用和提交信息规范

1. 合理使用分支
2. 习惯用命令行，图形化工具可以作为辅助
3. 提交的信息要有意义，说明解决了什么bug，添加了什么feature功能
4. 习惯用 git status，时刻知道你当前在什么分支，当前的文件处于什么样的状态

[GuoYongfeng]

欢迎大家盖楼，提出建议和意见。