單頁WEB應(yīng)用（一），結(jié)構(gòu)和布局

quasiceo 2017-09-24

展開全文

原創(chuàng) 2017年02月10日 18:10:41

單頁WEB應(yīng)用（一），結(jié)構(gòu)和布局

前兩天買了兩本書，一本《基于MVC的Javascript Web富應(yīng)用開發(fā)》這本拿到手第二天大概的翻了一遍，沒怎么深入去看，主要前面講的基本的一些東西，后面的有些還沒太看懂，所以大概的過了一遍；目前主要看的是這第二本《單頁Web應(yīng)用》，這個看到了第三章 Shell開發(fā)，看到這里代碼也走了一遍，今天算是糾結(jié)在 uriAnchor 上糾結(jié)了一整天，最后才發(fā)現(xiàn)原來只是一個屬性值的問題，痛苦ing……

本來不太想寫這系列的博客記錄的，但是由于今天的糾結(jié)，還是決定把這本書的讀書筆記，寫下來，每個環(huán)節(jié)給記錄下，也方便自己理請思路，和研究其中相關(guān)的技術(shù)點和所用到的框架什么之類的，也方便以后再看第二遍的時候回顧下自己的思路和理解。

第一章和第二章主要內(nèi)容大概就是創(chuàng)建項目文件結(jié)構(gòu)，和一些基本文檔結(jié)構(gòu)定義和編碼，因此放這一起記錄。

單頁應(yīng)用文件結(jié)構(gòu)定義

現(xiàn)在大家都在講究模塊化了，雖然這里目前還沒用到這些，但是思想還是不能落下的，還是要劃分下文件結(jié)構(gòu)。

由于是單頁應(yīng)用，主頁面也就只有一個，本書思想大概是在單個頁面文件中定義出簡單的整體結(jié)構(gòu)，然后通過功能劃分定義每個模塊，最后通過組裝到一起形成整個應(yīng)用。

文檔結(jié)構(gòu)

都是簡單的目錄劃分，就沒必要一個個解釋了，下面的 shell 其實就是整個文檔結(jié)構(gòu)的核心部分，算是容器吧（剛拿到這本書，看目錄時候還以為是那種命令行的shell呢，要寫個 shell 嚇出身冷汗Σ( ° △ °|||)︴）


結(jié)構(gòu)中，css, js的文件名稱都一一對應(yīng)相應(yīng)的頁面來命名，比如：shell模塊的樣式，就用 spa.shell.css 等

---+ css
    ---- spa.css            // 對應(yīng)主頁面的樣式
    ---- spa.shell.css      // shell 模塊的樣式
---+ js
    ---+ jq             // 由于該書的應(yīng)用是基于 jQuery 實現(xiàn)的所以
        ---- jquery-1.9.1.js

        // 這個是個 URI 管理插件，是模擬瀏覽器后退前進(jìn)功能的關(guān)鍵，后面會單獨研究這個東西，被坑了一天（笨啊~~）
        ---- jquery.uriAnchor-1.3.3.js  
    ---- spa.js
    ---- spa.shell.js
---- spa.html   // 這個是單應(yīng)用主頁面
---- layout.html // 這個有點像是臨時用的，給模塊事先測試布局的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

布局和樣式編碼

頁面布局

結(jié)構(gòu)定義創(chuàng)建好了，接下來就是將整體的布局和樣式編碼弄起來了，至少能看著像個樣子，這里簡單的繪制了個布局圖

單頁應(yīng)用整體布局圖

單頁應(yīng)用布局圖

上圖中，文檔主體在：spa.html，其他部分其實都在 layout.html 中實現(xiàn)布局測試，然后生成 html 代碼字符串，形成shell模塊，通過initModule 添加到文檔主體的容器中。

主頁面：spa.html包含單頁應(yīng)用整體架構(gòu)容器

這個頁面代碼量不多，目前來說，后面應(yīng)該也不會太多，畢竟使用了模塊概念，這樣也避免了單頁代碼量太大的不良后續(xù)。

// spa.html
// spa.test.js 是自己加的一個測試模塊文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA</title>

    <link rel="stylesheet" href="css/spa.css">
    <link rel="stylesheet" href="css/spa.shell.css">

    <!-- 第三方庫 -->
    <script src="js/jq/jquery-1.9.1.js"></script>
    <script src="js/jq/jquery.uriAnchor-1.3.3.js"></script>

    <!-- 測試代碼 -->
    <script src="js/spa.test.js"></script>

    <script src="js/spa.js"></script>
    <script src="js/spa.shell.js"></script>

    <script>

        // 這里使用 jQuery 的加載接口，spa 的模塊初始化來加載 shell 模塊
        $(function () {
            spa.initModule( $('#spa') );
        });
    </script>
</head>
<body>
    <div id="spa"></div>    
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

shell 之 layout.html 頁面

想了下還是用 ‘某’ 之 ‘layout.html’ 頁面為標(biāo)題妥當(dāng)些，主體文檔頁面完成了，接下來就是整個文檔的核心架構(gòu)部分了，也就是 shell模塊

該模塊包含的頁面元素，這里不得不說下，命名方式問題，作者的這種方式命名值得推薦的，畢竟頁面的元素很多，能夠根據(jù)具體模塊名來連接命名，將更加方便以后的閱讀和維護(hù)，更由于長期從事維護(hù)工作，看過的代碼風(fēng)格太多太多，看到下面這種風(fēng)格還是比較耳目一新，很爽的（當(dāng)然，太長了是不是有點~~~）。
```
// layout.html ->> shell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Layout</title>
    <link rel="stylesheet" href="css/spa.css">
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <div id="spa">
        <div class="spa-shell-head">
            <div class="spa-shell-head-logo"></div>
            <div class="spa-shell-head-acct"></div>
            <div class="spa-shell-head-search"></div>
        </div>
        <div class="spa-shell-main">
            <div class="spa-shell-main-nav"></div>
            <div class="spa-shell-main-content"></div>
        </div>
        <div class="spa-shell-foot"></div>
        <div class="spa-shell-chat"></div>
        <div class="spa-shell-modal"></div>
    </div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```
上面的代碼結(jié)構(gòu)，和上圖的結(jié)構(gòu)中元素一一對應(yīng)
1. spa：大容器；
2. spa-shell-head：對應(yīng)頭部，其中包含 *-logo, *-acct, *-search 元素；
3. spa-shell-content: 內(nèi)容部分就兩塊，導(dǎo)航nav和具體內(nèi)容content，這里有個地方需要記錄下，就是內(nèi)容塊的擴(kuò)張方式，通過給父元素添加樣式來設(shè)置導(dǎo)航的寬度和內(nèi)容的left來實現(xiàn)導(dǎo)航隱藏和顯示；
4. spa-shell-foot：底部，spa-shell-chat：聊天窗口，spa-shell-modal：漂浮的窗口。

頁面樣式

兩個頁面樣式都是簡單的樣式定義，shell 布局都是通過決定定位實現(xiàn)，這里記錄下內(nèi)容塊擴(kuò)展樣式

// 通過下面樣式定義，然后在父元素上添加和移除 'spa-x-closed' 樣式就可實現(xiàn)導(dǎo)航隱藏顯示和內(nèi)容區(qū)擴(kuò)展和收縮
// 還是經(jīng)驗不足腦子抽，沒想到過這種方式 

.spa-shell-main {
    top     : 40px;
    left    : 0;
    bottom  : 40px;
    right   : 0;
}

.spa-shell-main-content,
.spa-shell-main-nav {
    top     : 0;
    bottom  : 0;
}

.spa-shell-main-nav {
    width   : 250px;
    background  : #eee; 
}

.spa-x-closed .spa-shell-main-nav {
    width   : 0;
}

.spa-shell-main-content {
    left    : 250px;
    right   : 0;
    background  : #ddd; 
}

.spa-x-closed .spa-shell-main-content {
    left    : 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

測試代碼文件：spa.test.js

/**
 * 測試代碼文件
 * @authors zc li (ccc_simon@163.com)
 * @date    2017-02-09 16:53:58
 * @version $Id$
 */

function isObject( arg ) {
    return Object.prototype.toString.call( arg ) === '[object Object]';
}

function spa_debug( arg, name ) {

    // 對象輸出方式
    if ( isObject( arg ) && name  ) {

        console.log( name + '------------>' );
        console.log( arg );
        console.log( '<------------' + name );

        return;
    }

    console.log( arg );
}


var TEST = (function () {

    var
        // 測試開關(guān)
        switcher = false,

        elements = {
            chat: $('spa-shell-chat')
        },

        // 滑塊
        showChatSlider, hideChatSlider,

        // 取消測試代碼
        closeTest, openTest, voidFn;

    showChatSlider = function ( fn ) {
        setTimeout(function () { fn && fn( true ); }, 3000);            
    };

    hideChatSlider = function ( fn ) {
        setTimeout( function () { fn && fn( false ); }, 8000 );
    };

    voidFn = function () {

        spa_debug( 'I am void function, nothing to do......' ); 
    };

    // 增加 need 參數(shù)，可以在總開關(guān) switcher 關(guān)閉的情況下，啟用單個測試用例函數(shù)
    function getFn( fn, need ) {

        return need ? fn : (switcher ? fn : voidFn);
    }

    return {
        showChatSlider: getFn( showChatSlider ),
        hideChatSlider: getFn( hideChatSlider )
    };

}());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

總結(jié)

上面就是簡單的頁面結(jié)構(gòu)，布局和樣式的一些記錄，這中間并沒什么難點，和糾結(jié)點地方，也快下班了，控制邏輯部分就留到下篇再說吧。

一寫就停不下來，忍不住啰嗦啰嗦 ~~~~~~~~~~?。。?/p>

新年上班第一周問題不多，偶爾能有一兩個都OK了，也都是順手KO掉。最近也在考慮是否該換個環(huán)境了，才剛?cè)腴T呢，就一直做著維護(hù)對自己的發(fā)展畢竟不是很有益，前端更新又如此之快，不趕緊上手實踐更多的知識，自己都不敢說是做前端的（事實上現(xiàn)在也都不敢跟別人說是前端（工程師），囧囧囧囧囧囧囧囧囧囧