Hybrid框架UI重構之路：3、工欲善其事，必先利其器

時間  2019-12-11
標籤 hybrid 框架 之路 工欲善其事 必先利其器 欄目 Hybrid 简体版
原文   原文鏈接

上文回顧：Hybird框架UI重構之路：2、事出有因javascript

工欲善其事，必先利其器，事是重構的目標，器是開發環境。css

這篇文章將講述重構時的UI框架的目錄結構，且須要使用的開發工具。html

目錄結構java

demo : 開發框架的模板（單頁模式）node

demo-muti : 開發框架的模板（多頁模式）git

demo-scene : 示例模板。一個完整的示例，目的是給使用者稍做修改就可使用在項目上。github

demo-template : 給使用者使用的開發模板。chrome

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

dist : UI框架的提供的庫npm

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的安裝

一、nodeJs環境

由於grunt是基於nodeJs的，因此首先須要安裝nodeJS環境

二、安裝grunt

安裝grunt，由於咱們可能在任何目錄下運行打包程序，因此咱們須要安裝CLI

grunt的命令行：

npm install -g grunt-cli

三、編寫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壓縮

四、編寫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開發技術，如：HTML五、CSS三、Javascript等，開發出與原生程序具備相同用戶體驗的移動終端應用",
    "version": "3.1.0 Powered By 雲應用平臺部",
    "url": "XXXXXXXXXXXXXXX",
    "options": {
        "linkNatives": "true",
        "outdir": "./docs",
        "paths":"code/",
        "themedir": "../yuidoc-theme-blue-master"
    }
}

 這裏有兩個重要的屬性

outdir : 生成的文檔放置的文件路徑。

themedir : 這個是以前所說的主題模板，若是沒有設則模式使用yuidoc的默認模板。

 
總結

這篇工具的說明就到此了，工具的使用無非就是爲了方便開發，上面的描述也許不這麼詳細，但願是作到指引的做用。

 
本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程