Skip to content

sdc-alibaba/sui

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