Skip to content

sdc-alibaba/sui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bacafee · Jul 23, 2015
Jul 23, 2015
Sep 15, 2014
Jul 17, 2014
Aug 6, 2014
Feb 5, 2015
Jul 23, 2015
May 23, 2014
Jul 22, 2014
Jan 8, 2014
Jan 8, 2014
Jan 8, 2014
Oct 9, 2014
Jan 8, 2014
May 12, 2014
Jul 7, 2014
Feb 19, 2014
Mar 6, 2014
Aug 6, 2014

Repository files navigation

DPL

一,开发环境:

Grunt

之前的make脚本已经被改成grunt,除了常规的grunt安装,还需要安装hogan用来编译文档模板。grunt 中已经配置了如下几个任务:

  • dist:编辑css和js,包含两个任务dist-js和dist-css
  • docs:编译文档, 因为依赖关系,所以编译文档实际上也会执行dist
  • test:代码检查和单元测试
  • default:默认任务,等价于 test + dist
  • watch:监控文件改动实时编译

** 因为我们的代码构建放在了服务器端,而服务器端使用的npm源是 http://registry.npm.taobao.net,所以建议把在自己的电脑上也设置这个源。**

Gulp

gulp 暂时无人维护,不要用

iconfont

图标全部用iconfont实现。

git协作:

分支说明

  • master分支用来发布代码,不要在master上做任何改动。
  • dev分支用来预发布,所有测试通过准备发布的代码都先merge进dev。
  • build分支包含了所有打包编译出的代码,用在不方便安装node的环境。

每个人新建一个自己的分支,比如开发btn的分支就叫btn,开发完成后向dev发送一个merge request,另一个同学review完代码之后点击merge即可提交到dev。

开发时候只需要执行 grunt watch 就可以,会自动编译代码并刷新页面。最后提交的时候要执行 grunt test 保证没有错误再提交。

二,文件结构:

  • .package: 编译后的js和css文件,这个被gitignore,执行grunt会自动生成。

  • docs:文档,文档是用mustache模板写的,mustache是一个无逻辑模板语言(官网:mustache),用twitter自己写的一个编译器hogan来编译(hogan)。 每个组件都有自己的demo,开发一个组件就在这里新建一个demo,这里用的是jade模板生成的,执行grunt docs会自动把docs/template下的jade模板编译到docs目录下的同名文件。其中base.jade是公用模板,其他模板都应该继承base。如果模板名字以com-开头或者以-com.jade结尾,则不会被编译为html,适合中间组件. docs中注意如下几个文件:

    • assets:只在docs中使用的静态文件放这里,和bootstrap代码相关的比如bootstrap.css和fonts是从外面cp进来的。
    • example:示例,这个是没有用模板来写的,后面如果有必要我会用mustache改造一下。每完成一个组件都应该在这里面写一个详细的例子(或者在less下面建一个demo文件夹更好点?)。
    • template:官网页面,这个是用mustache来写的,里面有一个base和若干pages。
  • fonts: 字体描述文件,icon font字体是支持包括ie6在内的所有主流浏览器,只是每个浏览器支持的字体描述文件格式不同,这里提供了全部四种格式。但是因为icon用了:before和content来实现,所以ie8以下的浏览器还是不支持的。

  • less:css源码(注意这里面的test没有测试框架的支持,人肉检查组件而已) 模块结构可以在bootstrap.less中看的非常清楚,直接看bootstrap.less的代码。

  • js:重点注意单元测试,需要先学习qunit的用法。每一个js模块都对应一个单元测试。js代码的提交一定要通过单元测试。grunt test或者直接访问index.html都可以。(目前grunt qunit会有一个超时bug,暂时去掉了)

css组件规范:

  1. 尺寸规范: 元素的尺寸由line-height,padding,border,margin组成,还有不影响元素本身大小的是font-size 所以广义的元素尺寸包括了上述五个因素。 我们把组件都分成四种大小:mini,small,default,large。这四种大小分别对应四种不同的font-size,line-height,padding,border和margin,这些是在variables中已经定义好的。 一些基础css组件可能包含全部的四种尺寸,比如btn和input,大部分组件都是其中一种尺寸。 当然很多时候一个组件无法对应这四种尺寸之一,那就直接写死常量。 这方面bootstrap做的不好,大部分都是写死在代码中的常量。

  2. 颜色规范: 常用的颜色可能就十几种,定义在variables中,其他颜色最好能根据常用颜色算出来。这样换皮肤的话只需要把颜色配置换掉就好了。 比如btn-primary的颜色是这么定义的: @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);

  3. 浏览器分级 对浏览器分ABC级: A: 最优体验,视觉和功能完全保证 B: 功能保证,无法保证视觉美观 C: 不兼容

  4. 命名规范:

  • css中除了变量用驼峰法,其他都是’-‘分割(3.0全部改成减号分割)
  • 一个组件有不同的样式,应该把每一种样式都作为一个追加的classname,而不是修改原有的class。即 .btn.btn-primary,而不是直接用.btn-primary替换.btn 最重要的是语义化命名,参见后文。

js 插件开发规范:

js:单元测试规范:

TODO