12.其它細節-有解無憂

上面11篇論述了主要的原理，作為最后一篇，我們主要論述單頁面相比于多頁面的靈活的部分，如何使用最原始的html，js，css發揮web的最大魅力，

影片，過場影片

單頁面要比多頁面靈活，擁有過場影片是它最直觀的表現，并且頁面切換不會出現白屏的現象，

在底層ReplaceProto物件中，專門設定了兩個dom，一個dom作為放置當前頁面，另一個dom放置切換頁面，在切換程序中，通過兩個dom的過渡產生過場影片，影片方式在css3中定義，然后根據情況進行不同的影片切換，同時完成后退和前進兩個過場

進場影片，當切換到另一個頁面，另一個頁面就會以入場影片顯示到螢屏上；
出場影片，當切換到另一個頁面，當前頁面就會以出場影片退出螢屏中，

它們共同組成了頁面的影片效果

默認的影片由App物件里面定義，在附帶的app.css中定義行為

this.options = {
    changeClass: "app-change",
    backClass: "app-back",
    area: "change-state",
    in: { // 進場影片
        back: "page-out",
        change: "page-in"
    },
    out: { // 出場影片
        back: "page-in-reverse",
        change: "page-out-reverse"
    }
};

在切換頁面的時候，也可以通過傳入不同的類名，實作自定義影片，詳細見ReplaceProto的render方法，render: function (pagename, isReplace, option)
如果使用replaceState方法不會觸發影片，
其中第三個引數不僅可以傳資料，也可以傳影片配置，并且在_getReplaceClass方法中進行切換類名，達到影片的效果，

 _getReplaceClass: function (option) {
    var options = this.options;
    option = option || {};
    return {
        backStaticClass: option.backClass || options.backClass,
        changeStaticClass: option.changeClass || options.changeClass,
        areaClass: option.area || options.area,
        backActiveClass: this.isRenderBack ? 
            option.backClass || options.out.back : 
            option.backClass || options.in.back,
        changeActiveClass: this.isRenderBack ? 
            option.changeClass || options.out.change : 
            option.changeClass || options.in.change
    }
},

類似的在PopUp物件中同樣有頁面切換影片，PopUp物件還要有個彈出彈窗和關閉的影片，請看影片設定：

this.options = {
    className: "popup",
    changeClass: "popup-change",
    backClass: "popup-back",
    area: "popup-state",
    currentIn: { // 顯示頁面上的入場
        backClass: "popup-active-out",
        changeClass: "popup-active-in"
    },
    currentOut: { // 顯示頁面上的出場
        backClass: "popup-active-in-reverse",
        changeClass: "popup-active-out-reverse"
    },
    staticIn: "popup-static-out", // 彈窗進入頁面
    staticOut: "popup-static-in" // 彈窗隱藏
};

可以在PopUp配置或在show和hidden方法中設定不同的影片效果，

show: function (dom, config, target, isDismisBeforeShow) // config.staticIn

hidden: function (option, bk) // option.staticOut或show方法傳入的config.staticOut

對于組件的頁面切換影片和App的影片切換是一致的，

初始化頁面歷史快取

如果用戶從首頁進入網站，我們不用對history記錄做任何更改，這是一種常規情況，然而網站的入口是url，如果url不是進入首頁，而是從詳情頁或是付款頁進入網站，或者通過其它手段（掃碼等），

當用戶在該頁面進行了操作（如果不做任何操作，點擊后退應該是退出網站），為了讓用戶有一個瀏覽流程，在詳情頁點擊后退應該是回傳到串列頁，

原理很簡單，判斷進入初始頁，然后先pushState若干個頁面，然后渲染頁面，從App.initialize的方法來看，有一個_prevAttachHistory(prevHistory)操作，這就是為了該目的，這里的prevHistory是由開發初始化定義的App實體物件的getInitHistory來得到，這是一個url陣列，例如我們初始化定義

app.getInitHistory = function (pathname) {
    if (pathname === "/detail") return [ "/home" ]; // 也可以帶引數的url
}

通過這樣配置后，頁面直接打開詳情頁，在詳情頁操作后，點擊后退鍵回退到首頁，而不是退出該網站，注意，如果進入頁面后沒有任何操作，直接點擊退出，是不會退到首頁的，這是瀏覽器的一大特性，只有用戶與該頁面有互動，即使是touchstart，mousedown都能后退到首頁，后退到前頁面，因為歷史記錄中存的不是頁面快取，它是初始化一個新的Page物件，會走完Page的整個生命周期流程

加速加載優化，service延遲加載

從上面篇章提到，整個資源獲取都是按需加載的，即使組件中的小圖示的svg片段也是如此，特別一個大的首頁，里面包含著很多小圖示，引入很多組件js，片段html，需要等它們全部加載完會耗費很長時間，因此我們可以對常見的資源進行統一定義加載，

可以將多個組件的js放在一個js檔案中，因為獲取組件的時候，判斷是否存在已經加載過該組件, 需要手動關閉，在App.define, app.defineComponent, app.definePage, app.definePopup的第三個引數設為true，其中app為App的實體物件，
可以將引入的html當作字串, 注入到Http.cache物件中 App.setHttpCache(url, str); 由于轉換為字串編入js中(以字串形式編輯html比較困難，不建議全部放入js中)，

如果某個service服務僅僅與該方法有關，把引入代碼從頂部移到方法內，，比如

 clickHandler: function (ev) {
     App.require(["mapTool"], function (mapTool) {
         // dosomething
     })
 }

持續化資料和異步操作

對于Component，Page， PopUp，App物件中，都定義一個data，這是一個放置臨時資料的物件，特別是Page，這個data格式有嚴格的要求，必須是可序列化的，

在Page執行restore的時候，我們是無法獲取到在其他頁面改變了的全域資料，我們可以把資料存放在App實體物件的data里面，然后切換頁面的時候獲取App物件中的data資料，進行有效的區域重繪操作，這要比重新去后端獲取一次更合理，

如果在PopUp物件的Page物件，也可以用相同的方式放在PopUp的物件的data里面，統一放置方法可以用this.parent.data.key = value;

一個網站，很少使用大量的持久化資料，對于webapp，使用持久化資料卻很常見，我們可以使用同步操作的localStorage或異步操作的IndexedDB資料庫，在使用IndexedDB的時候要特別的注意，異步操作時頁面突然切換導致回呼函式執行錯誤，因此盡量在執行完后再執行跳轉，如果不可避免，可以仿照Ajax的封裝方式，跳轉頁面的時候讓獲取資料操作停止，存資料的回呼中判斷是否當前頁面是有效顯示頁，
對于不做中斷的異步操作，可以放在staticPage中執行，因為它是一直存在的，等執行完畢后通過觸發app.currentPage的自定義事件，進行相關的更新操作，

瀏覽器快取

瀏覽器快取可以提高頁面的加載速度，有時候卻成了我們更新專案的一大阻礙，特別在測驗公眾號的時候，因此我們通過后綴名版本來解決問題，比如我們在index.html上header的新建script上加一句App.version = 2.0; 再把str.js和index.js版本號更改相同的版本號，接著框架內部會把所有的引入的js以及獲取的靜態檔案都會加上?v=2.0重置所有的版本號

記憶體使用

單頁面對于記憶體的使用非常的苛刻，如果無限制的使用，會導致頁面奔潰或讓手機設備快速耗電，因此這里我們對每個模塊的參考都做了嚴格的處理，對于dom和事件，在頁面銷毀的時候都會自動去銷毀，而且參考外庫的時候，我們建議在init初始化資料，在dispose方法中進行資料清理，對于參考沒有資料回收操作的外庫的時候要特別小心，不能無限制的新建物件，這樣會導致頁面堆積越多的記憶體而無法銷毀，我們可以使用創建一個物件，然后進行無限制的使用(單例模式)，

通過異步按需加載的好處在于，能讓記憶體使用量盡可能的變少，在加載首頁的時候，我們的網頁的記憶體使用量基本和純使用靜態頁面的網站持平的，隨著組件量以及頁面的增加，我們快取了大量的js，靜態html，會讓記憶體使用量增多，而且快取在history的Page物件，也會提高記憶體使用量，盡管如此，我們的記憶體使用量也不會超過靜態頁面太多，在可以接受的范圍之內，

本地檔案打開

有時候我們需要本地直接打開，雖然用的很少，但還是會遇到的，比如原生App嵌入webview，在沒有網的情況下要打開網站，這時候只能通過打開本地頁面，雖然功能有點閹割，但是頁面布局還是可以復用原來的，我們需要做一下的調整：

把絕對參考全部改為相對參考，這一點都是可以支持的，通過改寫App.join方法統一更改js的加入；
無法使用按需加載（可以按需加載js），需要對所有的靜態資源進行統一加入，這一點難度雖然不大，但是操作起來比較繁瑣；
如果使用了strui框架，需要針對使用的組件進行資源統一加入，

雖然付出了一些努力，但是非常值得的，底層是支持本地檔案打開的，以下功能會受到限制：

無法使用ajax功能，無法與后端進行互動；
無法使用history api，在本地打開，會將這些方法全部過濾掉，

支持SSR

SSR對于單頁面相對多頁面是一個缺陷，盡管努力去彌補，但總是無法盡善盡美，而且單純在前端努力是無法完成的，這里我們通過以下手段來實作SSR：

如果是純粹單頁面，index.html的body元素應該只有參考script的，我們在body上加入data-preload屬性，代表它使用了SSR，然后加入{{{body}}}，代表著服務生成的html代碼；
接著在服務端，復制前端的renderHTML方法，根據瀏覽器訪問地址，拼裝填充{{{body}}}的html片段(這里后端使用nodejs，可以共享前端的js方法)；

index.js中的宣告App物件的時候，currentName需要根據pathname改變，如下代碼

// location.pathname = "/detail";
if (location.pathname == "/detail") app = new App("hello str", "static", "detail");
else app = new App("hello str", "static", "home");

雖然通過上面拼接成的html可以在瀏覽器上直接打開，然而瀏覽器畢竟沒有直接渲染組件的功能, 因此渲染的結果不會太好，只能讓搜索引擎獲取到, 然后通過下面的方法進行分別渲染：

if (preload === "true") {
    // 通過更改html，渲染組件
    var activeHtml = pageContainer.innerHTML;
    pageContainer.innerHTML = "";
    var staticHtml = document.body.innerHTML;
    if (staticPage.preload) staticPage.preload();
    staticPage.initialize(body, staticHtml, {}, function () {
        body.removeAttribute("data-preload");
        that._initCurrentPage(staticPage, currentPage, prevHistory);
        if (currentPage.preload) currentPage.preload();
        currentPage.initialize(that.changeDom, activeHtml);
    });
}
else {
    // 常規手段
    staticPage.render(function (html) {
        staticPage.initialize(body, html, {}, function () {
            that._initCurrentPage(staticPage, currentPage, prevHistory)
            currentPage.render(function (html) {
                currentPage.initialize(that.changeDom, html);
            });
        });
    });
}

超越web，支持electron等方式

現在web在通過electron打包成桌面App，因為electron使用了node技術，所以在獲取檔案或者資源的時候就不一樣了，我們可以更改fetch方法：

if (typeof __dirname === "string") {
    require("fs").readFile(url, "utf-8", function (error, result) {
        if (error) console.log(error);
        else Http.cache.dispatch(url, result);
    })
}
else {
    var obj = createRequest(this, url, undefined, function (result) {
        Http.cache.dispatch(url, result);
    }, {
        onabort: function (ev) {
            Http.cache.remove(url);
        }
    });
    this.http.ajax(obj);
}

更改獲取檔案路徑方法

App.join = function (url) {
    if (typeof __dirname === "string") return require("path").join(__dirname, url);
    return url;
};

還需要更改Page獲取資源路徑方法

function getBaseUrl(urlStr) {
    if (typeof __dirname === "string") {
        urlStr = require("path").join(__dirname, urlStr);
        return urlStr.split("\\").slice(0, -1).join("\\") + "\\";
    }
    return urlStr.split("/").slice(0, -1).join("/") + "/";
}

這樣子，就可以兼容electron的環境了，

使用pwa技術

有幸于web的發展行程都是圍繞了漸進增強的路線，所以很容易讓webapp支持pwa的各種技術

在index.html中加入以下js欄位

 if ("serviceWorker" in navigator) {
     navigator.serviceWorker.register("./sw.js")
         .then(function (registration) {
             console.log("ServiceWorker registration successful with scope: ", 
                 registration.scope);
         }).catch(function (err) {
             console.log("ServiceWorker registration failed: ", err);
         });
 }

然后在根目錄中加入sw.js，里面的內容自定義，代碼略，

總結

這一篇作為完結篇，主要對常見的開發問題進行了進一步的擴展，

推廣

底層框架開源地址：https://gitee.com/string-for-100w/string
演示網站: https://www.renxuan.tech/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172627.html

標籤：其他

上一篇：11.彈窗原理詳解

下一篇：javascript里面的this指向問題