2016/6/21 团队工作会议

@GuoYongfeng 2016-06-21 12:49:07发表于 iuap-design/blog

#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,时刻知道你当前在什么分支,当前的文件处于什么样的状态