TopCoat简介

在Cordova系列第四篇《Cordova应用解析》中简单提到过TopCoat。这里对它做一个简单的了解。

参考文章地址：http://sixrevisions.com/tutorials/intro-to-topcoat/

TopCoat是一个构建快速、高性能UI的CSS框架，是一个Adobe开源项目，目标是在速度和反应上使web应用更像Native应用。

TopCoat获得性能提升的方法之一是通过使用基准指标测试浏览器在渲染TopCoat组件时的表现。通过测量加载时间和每秒帧数(fps)找到表现低下的CSS属性。

安装

下面以使用TopCoat构建一个简单的用户界面为例。通过链接(https://github.com/topcoat/topcoat)下载TopCoat源码。下载解压后，进入demo文件夹打开index.html，可以看到TopCoat组件的使用示例说明。

TopCoat样式表

进入css文件夹，看到8个css文件：

topcoat-desktop-dark.css
topcoat-desktop-dark.min.css
topcoat-desktop-light.css
topcoat-desktop-light.min.css
topcoat-mobile-dark.css
topcoat-mobile-dark.min.css
topcoat-mobile-light.css
topcoat-mobile-light.min.css

可以看到分成了桌面和移动两个版本，并且各有dark和light两种主题。

画UI设计图

画UI设计图有助于帮助勾勒出需要哪些TopCoat组件。

![](img/01.png)

可以看出需要三种TopCoat组件：导航条、列表和按钮。

创建html

引用topcoat-mobile-light.css，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Online Banking Interface</title>
    <link rel="stylesheet" href="css/topcoat-mobile-light.css">
</head>
<body>

</body>
</html>

添加TopCoat组件：

在<body>标签中添加导航条、列表和按钮组件,打开浏览器浏览器测试一下：

<div class="topcoat-navigator-bar">
    <div class="topcoat-navigator-bar__item center full">
        <h1 class="topcoat-navigator-bar__title">Accounts</h1>
    </div>
</div>
<div class="topcoat-list">
    <h3 class="topcoat-list__header">Deposits</h3>
    <ul class="topcoat-list__container">
        <li class="topcoat-list__item">Personal Checking - $12,322.10</li>
        <li class="topcoat-list__item">Personal Savings - $25,322.10</li>
    </ul>
</div>
<div class="topcoat-list">
    <h3 class="topcoat-list__header">Loans</h3>
    <ul class="topcoat-list__container">
        <li class="topcoat-list__item">Mortgage - $662,322</li>
    </ul>
</div>
<div class="topcoat-list">
    <h3 class="topcoat-list__header">Investments</h3>
    <ul class="topcoat-list__container">
        <li class="topcoat-list__item">401k Account - $232,322.10</li>
    </ul>
</div>
<p><button class="topcoat-button--cta">Sign Out</button></p>

截图如下：

图片描述

使用自定义构建方式改进性能

可以通过构建自定义的样式表提高web性能，让它只包括会用到的Topcoat组件。

要使用定制的Topcoat构建方式，需要：

Node
npm
Grunt CLI
Grnnt

打开topcoat目录下的package.json，在dependencies中去掉不想用的依赖。这个例子中只需要以下依赖：

"dependencies": {    
    "topcoat-button-base": "0.6.1",    
    "topcoat-navigation-bar-base": "0.5.0",
    "topcoat-navigation-bar": "0.5.0",    
    "topcoat-list-base": "0.4.1",
    "topcoat-list": "0.5.0",
    "topcoat-button": "0.5.4",
    "topcoat-theme": "0.6.4",
    "topcoat-utils": "0.2.0"
  }

打开命令行工具，进入TopCoat目录，如果没有安装Grunt CLI使用如下命令安装：

npm install -g grunt-cli

使用不带参数的install命令安装所有需要的依赖

npm install

构建自定义的样式表用如下命令：

npm grunt

现在进入css文件夹注意到样式表文件变小了，这是因为去掉了一些没用到的样式规则。

关于TopCoat更多的提升Web应用性能的信息请关注GitHub资源库(https://github.com/topcoat/topcoat/wiki/Performance-First)。

作为Cordova系列的补充，对TopCoat的简单介绍就到先这里了。

TopCoat简介

安装

TopCoat样式表

画UI设计图

创建html

添加TopCoat组件：

使用自定义构建方式改进性能

AfternoonLeaf

引用和评论

使用Powershell实现自动登陆域帐号