布吉做棋牌网站建设哪家便宜/百度投诉电话客服24小时-专业网站定制开发

上文回顾：Hybird框架UI重构之路：二、事出有因

工欲善其事，必先利其器，事是重构的目标，器是开发环境。

这篇文章将讲述重构时的UI框架的目录结构，且需要使用的开发工具。

目录结构

demo : 开发框架的模板（单页模式）

demo-muti : 开发框架的模板（多页模式）

demo-scene : 示例模板。一个完整的示例，目的是给使用者稍作修改就可以使用在项目上。

demo-template : 给使用者使用的开发模板。

demo-whole : 可在PC上演示的示例模板

dist : UI框架的提供的库

doc : 文档目录

libs : UI框架依赖的库，注明版本。

node_modules : node工具

src ： UI框架源码

Gruntfile.js : Gruntfile.js配置css、image、javascript、html合并、压缩等

package.json : package.json文件来声明项目中使用的node模块

PS:这个是一级目录，其他层级的也就不截图了。

less

关于less的这个工具的文章很多，我也就不详细说，主要为了方便 CSS 的书写及维护、复用。

其实使用less，有利也有弊，但总归利大于弊。

利：

1.一看就了解样式应用的范围（这是我觉得最好的地方），比纯css好理解。

.module {div {a {//styles}}
}

2.LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。

弊 :

1.毕竟最后生成的样式跟最初less样式还是有些区别，当页面样式做调整的时候（一般是在chrome调试），调试完样式后，又要将自己修改的样式写成less样式，看起来麻烦很多。

例：

自己增加了

.module li {line-height:18px;
}

后面写回less样式

.module {li {line-height:18px;}
}

然后再重新生成css文件。

PS:简单来说就是调试麻烦。

另外我使用的也只有两条简单的命令

lessc xxx.less > xxx.css
lessc -x xxx.less > xxx.min.css

后面那条是压缩后的文件。

grunt

grunt这个工具（nodeJs的命令行工具），我用来做Javascript文件的合并、压缩和复制。

以前UI框架的版本是一个大文件bingotouch.css，js也是。这是不利于我们开发的，于是我将他们拆分成模块，拆分之后又面临合并的问题，于是就使用grunt这个工具。

grunt的安装

1、nodeJs环境

因为grunt是基于nodeJs的，所以首先需要安装nodeJS环境

2、安装grunt

安装grunt，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI

grunt的命令行：

npm install -g grunt-cli

3、编写package.json（声明项目中使用的node模块）

{"name":"BingoTouch","version":"3.0.0","engines":{"node":">= 0.8.0"},"devDependencies":{"grunt":"~0.4.0","grunt-contrib-concat":"~0.3.0","grunt-contrib-copy" : "~0.4.1","grunt-contrib-cssmin" : "~0.6.0","grunt-contrib-uglify":"~0.2.0","express":""}
}

grunt-contrib-concat ：文件合并

grunt-contrib-copy ：文件复制

grunt-contrib-cssmin : css压缩

grunt-contrib-uglify : js压缩

4、编写Gruntfile.js

module.exports = function(grunt){grunt.initConfig({pkg : grunt.file.readJSON('package.json'),concat : {'dist/bingotouch.js' :['demo/js/ui.js',"demo/js/module/ui.GarbageCollection.js",'demo/js/module/ui.plugins.js','demo/js/module/ui.Utils.js','demo/js/module/ui.Element.js','demo/js/module/ui.Transition.js','demo/js/module/ui.Page.js','demo/js/module/ui.IScroll.js','demo/js/module/ui.alias.js','demo/js/module/ui.Popup.js','demo/js/module/ui.Skin.js','demo/js/module/ui.Menu.js','demo/js/module/ui.Tab.js','demo/js/module/ui.SwipeListview.js','demo/js/plugin/zepto.extend.js','demo/js/plugin/zepto.ui.js','demo/js/plugin/zepto.ui.slider.js','demo/js/plugin/zepto.ui.navigator.js','demo/js/plugin/zepto.ui.navigator.iscroll.js']/*,'dist/bingotouch.css' : ['demo/css/base.css','demo/css/module/*.css']*/},uglify : {target : {files : {'dist/bingotouch.min.js': 'dist/bingotouch.js'}}}/*,cssmin : {target : {files : {'dist/bingotouch.min.css': 'dist/bingotouch.css'}}}*/,copy : {target : {files : [{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-muti/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/link/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/news/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/business/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-template/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-whole/js/'} ,{expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'doc/api-doc/'} ,{expand: true,cwd: 'demo/js/plugin/',src: ['linkplugins.js','sharesdkplugin.js'],dest: 'doc/api-doc/'},{expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-muti/css/'} ,{expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/link/css/'} ,{expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/news/css/'} ,{expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/business/css/'} ,{expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-template/css/'} ,{expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-whole/css/'}]}}});grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');/*grunt.loadNpmTasks('grunt-contrib-cssmin');*/grunt.loadNpmTasks('grunt-contrib-copy');grunt.registerTask('default', ['concat','uglify'/*,'cssmin'*/,'copy']);
}

这文件的配置是我重构后，css和js的合并、压缩、复制。细心的人会发现cssmin的功能我没使用，这是因为我的css是less编写的，所以css文件的合并压缩也就由less工具完成。

yuidoc

文档是作为框架必不可少的一部分，如果快捷方便生成文档也是我们考虑的。

这是我之前对文档化工具的调查：http://www.cnblogs.com/lovesong/p/3267047.html

我选择了yuidoc作为文档化工具，下面是我生成的文档。

在此说下一些YUIDoc的信息

是什么？

YUIDoc是个NodeJS应用，能将你JS代码中的注释生成HTML格式的API文档。

支持语言？

事实上，不仅是JS，任何支持块注释（指/* */）的语言都能用。

特性：

只解析YUIdoc的注释块，不解析源代码。

安装步骤：

1.安装NodeJS，下载地址：http://nodejs.org/download/

2.打开cmd，执行命令npm -g install yuidocjs，即可安装YUIDoc。

YUIDoc注意事项

1.设定一个类即@class之后，YUI默认把之后函数或属性归属为这个类,直到有类重新定义。

2.注释方式

/**YUIDoc会认这以两个星开头的
*/
/*YUIDoc不认一个星开头的
*/

3.每个注释块中能有且仅有一个主标签

YUIDoc标签

由于标签的介绍内容太多，就不在这里介绍了。

YUIDoc模板

页面生成模板。根据我们注释的标签（充当数据源），在根据页面模板（视图），生成文档。

github上有很多主题模板，而上面图片的使用的模板是我觉得最好看的，所以就选择了这个。

PS:github是好东西，善用能帮我们很多。

yuidoc.json

生成文档有个命令，一般我是准备好注释好的js文件，在加上一个yuidoc.json的配置文件，然后是控制台cd到这个目录，执行命令。

 yuidoc .

简单描述下yuidoc.json的东西

{"name": "BingoTouch API","description": "让开发人员可以使用Web开发技术，如：HTML5、CSS3、Javascript等，开发出与原生程序具有相同用户体验的移动终端应用","version": "3.1.0 Powered By 云应用平台部","url": "XXXXXXXXXXXXXXX","options": {"linkNatives": "true","outdir": "./docs","paths":"code/","themedir": "../yuidoc-theme-blue-master"}
}