從273二手車的M站點初探js模塊化編程

前言

      這幾天在看273M站點時被他們的頁面交互方式所吸引，他們的首頁是採用三次加載+分頁的方式。也就說分爲大分頁和小分頁兩種交互。大分頁就是經過分頁按鈕來操做，小分頁是經過下拉（向下滑動）時異步加載數據。

      273這個M站點是產品推薦我看的。第一眼看這個產品時我就再想他們這個三次加載和翻頁按鈕的方式，那麼小分頁的pageIndex是怎麼計算的。因此就順便看了下源碼。 提到看源碼時用到了Chrome瀏覽器的格式化工具（仍是朋友推薦個人，不過這個格式化按鈕的確不明顯，不會的話自行百度）。

 

三次加載和分頁思路分析

 

 

 

    一、從頁面最底部的分頁數量來看，只設置了25頁而不是隨着翻頁數量的變化而動態設置，也就是說只能看到最新的25頁數據。再換句話說這裏的分頁數量是固定死的，沒法查看歷史數據。

    二、從第一張圖中能夠看出，每頁的首屏數據是【同步的方式加載】。

    三、從第三張圖中能夠看出，當你第二次下拉和第三次下拉時從右邊的報文中看出，第二次和第三次分別是【異步刷新】加載數據。在NetWork中看出，異步加載數據時請求ajax.php?module=getCarSalePost. POST請求。重點就在POST請求的數據上。 第二次請求的POST數據：page:二、filter:/car/、need_bak。

 

異步記載數據時page是怎麼計算的？

      filter不用說是大分頁每次的頁碼和其餘附加條件。need_bak沒搞懂是什麼參數。OK，那看到這裏無非就是搞清楚這個page是怎麼計算的，一般咱們都是分頁公式，(pageIndex-1)* pageSize。Skip()、 Take()之類的方法。 一開始我就鑽了個牛角尖，忘了他每頁的【首屏數據是同步方式加載】的，這就計算了好幾回公式都不對。OK。思路通了就開始看他們的源碼。F12. 格式化、下斷點。

      從ajax.php?module=getCarSalePost關鍵字搜索，很容易就找到上面這段代碼。固然我最關心的就是這個方法的第二句代碼：s=3*n-(3-i)。還有就是ajax的success事件中他們用到了history.replaceState({page:999},"","#"+s);  改變地址url而頁面不刷新的。 HTML5 API新增的pushState()和replaceState()。n表明什麼？ i又是什麼值呢？

n就是大分頁的頁碼。第二頁那n=2. i的變量在下面找到定義i=2也就是說他這裏的計算是從小分頁第二頁開始的。 第一頁也就是是首屏是同步的方式記載的。看到這裏基本上這個三次加載和分頁的思路就摸清楚了。     

      分析完這個我又總體看到了下他們的代碼發現用到了define關鍵字。這就又開始瞭解下js模塊化編程。

 

初探js模塊化編程（CommonJs、AMD規範、CMD規範）

      初次接觸js模塊化編程是在學習node.js的過程，require、exports。衆所周知node.js是採用了CommonJs。 

      在接觸CommonJs、AMD、CMD前咱們先了解下什麼是模塊化、模塊化開發。

      模塊化是指在解決某一個複雜問題或者一系列的雜糅問題時，依照一種分類的思惟把問題進行系統性的分解以之處理。模塊化是一種處理複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊的方式。能夠想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對於軟件是一種何等意義的存在。對於軟件行業來講：解耦軟件系統的複雜性，使得無論多麼大的系統，也能夠將管理，開發，維護變得「有理可循」。

      還有一些對於模塊化一些專業的定義爲：模塊化是軟件系統的屬性，這個系統被分解爲一組高內聚，低耦合的模塊。那麼在理想狀態下咱們只須要完成本身部分的核心業務邏輯代碼，其餘方面的依賴能夠經過直接加載被人已經寫好模塊進行使用便可。

 

     首先，既然是模塊化設計，那麼做爲一個模塊化系統所必須的能力：

        一、定義封裝的模塊。

        二、定義新模塊對其餘模塊的依賴。

        三、可對其餘模塊的引入支持。

 

 

AMD和CMD

       node.js中的模塊化編程就是參照CommonJs實現的。在CommonJs中有一個全局方法require()。用於加載模塊。 有了服務端模塊之後，很天然你們就但願在瀏覽器端也有模塊化編程。並且最好二者可以兼容，在服務端和客戶端都能運行。

      CommonJs規範雖好但卻不適合瀏覽器環境，由於require是同步方式運行，每引用一個lib就必須等待加載完成，也就是說加載時間過程的話瀏覽器就會假死，整個應用會停頓在哪裏。所以，瀏覽器端的模塊不能採用不一樣的方式記載，只能採用異步的方式記載，這就是AMD規範誕生的背景。

      AMD（Asynchronous Module Definition）意思就是異步模塊定義。它採用異步的方式加載，模塊的加載不影響後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

     目前採用AMD規範實現的Javascript庫 require.js。

     require.js 主要解決兩個問題：

        一、  多個js可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器

        二、  Js加載的時候瀏覽器會中止渲染頁面，加載文件越多，頁面失去響應時間越長。

      CMD(Common Module Definition)，該規範明確了模塊的基本書寫格式和基本交互原則。在CMD規範中，一個文件就是一個模塊，基本定義以下：

define(factory) 。define是一個全局函數用來定義模塊，接受參數factory，factory能夠是一個函數，也能夠是一個對象或字符串。define({"foo":"bar"})。

 

    AMD和CMD又是什麼區別呢？  AMD是提早執行，CMD是延遲執行。AMD速度快，會浪費資源，預先加載全部的依賴，直到使用的時候才執行。CMD只有真正使用才加載依賴，性能較差，直到使用時才定義依賴。

 

總結

      瞭解了CommonJs、AMD、CMD的基本概念後還須要對其表明的典型框架投入使用，如requirejs、seajs。 主鍵改造項目中純function的現狀和項目迭代因人爲差別帶來的成本。

 

參考資料

http://www.cnblogs.com/skylar/p/4065455.html
https://github.com/seajs/seajs/issues/277
https://www.douban.com/note/283566440/
http://blog.chinaunix.net/uid-26672038-id-4112229.html