上文回顾: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"}
}

这里有两个重要的属性

outdir : 生成的文档放置的文件路径。

themedir : 这个是之前所说的主题模板,如果没有设则模式使用yuidoc的默认模板。

总结

这篇工具的说明就到此了,工具的使用无非就是为了方便开发,上面的描述也许不这么详细,希望是做到指引的作用。

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址:http://www.cnblogs.com/lovesong/p/4296871.html

本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/4296871.html  ,如需转载请自行联系原作者

Hybrid框架UI重构之路:三、工欲善其事,必先利其器相关推荐

  1. Hybrid框架UI重构之路:五、前端那点事儿(HTML、CSS)

    上文回顾 :Hybird框架UI重构之路:四.分而治之 这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中 ...

  2. Hybrid框架UI重构之路:一、师其长技以自强

    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...

  3. 安装包UI美化之路-Electron打包出界面美观,功能完善的安装包,这三步就够了

    这篇文章应该说是<安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导>的延伸与进一步应用,在可视配置的基础之上,生成供electron-builder打包的脚本! 一直有 ...

  4. 写一个易于维护使用方便性能可靠的Hybrid框架(一)—— 思路构建

    写一个易于维护使用方便性能可靠的Hybrid框架(二)-- 插件化 写一个易于维护使用方便性能可靠的Hybrid框架(三)-- 配置插件 前言 本来上一篇博文写完,我就告诉自己,这是最后一篇,之后不再 ...

  5. 58同城iOS客户端Hybrid框架探索

    作者:杜艳新,刘文军.58同城iOS高级研发工程师,专注于App Hybrid框架的架构研发,主导了58同城App的Hybird混合研发的系统架构以及研发. 责编:唐小引,欢迎技术投稿.约稿.给文章纠 ...

  6. 58 同城 iOS 客户端 Hybrid 框架探索

    [CSDN 编者按]58 同城 iOS 客户端的 Hybrid 框架在最初设计和演进的过程中,遇到了许多问题.为此,整个 Hybrid 框架产生了很大的变化.本文作者将遇到的典型问题进行了总结,并重点 ...

  7. Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具

    Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具 记得我的第一篇博客就是写Android Studio,但是现在看来还是有些粗糙了,所有重构了一下思路, ...

  8. 【quickhybrid】架构一个Hybrid框架

    前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一An ...

  9. 聚焦CSDN技术主题月:深度学习框架的重构与思考专场回顾

    10月15日下午,在北京兆维大厦,由CSDN社区主办的技术主题月系列之--<深度学习框架的重构与思考>活动成功举办.CSDN邀请了用友畅捷通人工智能负责人张俊林.创业公司大数据总监周步恋. ...

最新文章

  1. grep 使用 nsr 实现查找
  2. 操作系统面试知识点总结2
  3. 10 个 Python 工程师,9 个不合格!!
  4. sharedUserId
  5. linux wc命令参数及用法详解
  6. apt-clone:备份已安装的软件包并在新的 Ubuntu 系统上恢复它们
  7. php写cms,浅谈thinkPHP,国内写CMS利用率最高的框架
  8. 高盛的AI说,今年世界杯冠军是巴西
  9. php ajax session,Ajax处理用户session失效
  10. 【编译原理笔记16】代码优化:流图,常用代码优化方法, 基本块的优化
  11. 基于DEAP库的python进化算法--遗传算法实践--配词问题
  12. android中的回调简单认识
  13. 20155334 2016-2017-2 《Java程序设计》第三周学习总结
  14. 查看mysql服务器位置,查看mysql服务器ip地址
  15. 基于springboot在线租车管理系统
  16. AI:人工智能的本质与未来
  17. 程序员合同日期不到想辞职_辞职理由怎么说才合适?实话实说,随便编一个都不行...
  18. Tomcat配置登录拦截功能
  19. Docker基础讲解狂神笔记(1/2)
  20. 仿射密码破解——再别康桥

热门文章

  1. 2018 Multi-University Training Contest 10 - CSGO
  2. bzoj1131: [POI2008]Sta
  3. PHP的CI框架流程基本熟悉
  4. 可动态扩展的数据库模型设计
  5. java多线程编程--基础篇
  6. 1.MVC的工作流程
  7. 前阿里资深运营王殿进:SaaS产品经理所面临的苦恼
  8. 张小龙内部分享:一个产品只能有一个主线功能
  9. 一个视觉交互设计失败的案例
  10. 移动产品经理必须要知道的11件事