TopCoat简介

阅读量：7118 次

发布时间：2019-06-28

本文共 1865 字，大约阅读时间需要 6 分钟。

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

参考文章地址：

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

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

安装

下面以使用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，代码如下：

    
        Online Banking Interface

添加TopCoat组件：

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

Accounts

Personal Checking - $12,322.10

Personal Savings - $25,322.10

Mortgage - $662,322

401k Account - $232,322.10

截图如下：

图片描述

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

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

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

Node

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资源库()。

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

转载地址：http://eysel.baihongyu.com/

你可能感兴趣的文章

安装

TopCoat样式表

画UI设计图

创建html

添加TopCoat组件：

Accounts

Deposits

Loans

Investments

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