【JCP模式實戰--ferrous-framework】ferrous前端開發框架邀您初體驗

     1、簡介

ferrous-framework是爲了迎合微服務架構而封裝的純前端開發框架。

以數據驅動爲核心理念，實現了一種介於單頁面和多頁面的開發模式，讓你們根據本身的須要對單頁面和多頁面進行切換或者共存。

頁面結構採用JCP(Javascript Client Page)模式，能夠很好得對前端頁面進行邏輯抽象和組裝。

 

     2、何爲JCP(Javascript Client Page)模式？

這個詞語的解釋詳見http://www.yomho.net/2017/09/04/javascript-client-page-mode/

此文還包含了JCP模式的架構圖。

下面代碼爲JCP文件的配置規範樣例

define(function (require) {
    return {
        metadata: {
            get: function () {
                return {
                    title: '登陸'
                }
            }
        },
        jcp: {
            js: [
                {
                    getJOM: function () {
                        return require('page/login/controller/loginController');
                    }
                }
            ],
            html: {
                layout: {
                    getDOM: function () {
                        return require('text!page/login/view/layout.html');
                    }
                }
            }
        }
    };
});

 

 

     3、技術整合

一、jquery+jquery-ui；

二、requirejs(爲頁面功能的組裝、壓縮和合並提供支持)；

三、backbone(實現了hash路由)；

 

     4、框架特性和封裝理念

一、JCP(Javascript Client Page)模式，讓您能夠更好地規劃系統子功能的業務實現 ，更大限度地重用代碼；

二、不過分封裝，對window對象無污染，方便集成各類框架；

三、深知單頁面和多頁面的優點，並可讓你們根據項目的特色進行選擇或混合；

四、初步寫了API開發樣例（表單、緩存、認證），讓你們能夠根據本身的設計依葫蘆畫瓢設計其餘的API；

五、一個頁面功能一個目錄，讓子功能能夠更好地的打包和管理；

六、。。。等大家發現

 

     5、框架缺陷

對SEO支持不是很好，這是單頁面模式的通病，若是須要SEO，請設計好hash值以迎合搜索引擎。

不過對於須要SEO的企業網站，仍是建議採用傳統的開發模式，讓數據從後端與視圖模板混合。

 

     6、github地址

https://github.com/yomho/ferrous-framework

涵蓋功能：登陸+主界面+登陸/主界面認證自動跳轉

測試帳號/密碼：admin/123456

如何運行？部署站點後打開index.html便可，這是整個web程序的容器，同時也是整個web站點的入口。

對於單頁面來講只有這一個容器。

對於多頁面來講也可能只有這一個容器（固然也能夠存在多個容器）--這也是用一個容器實現多頁面需求的一個閃光點。

若是使用過程當中有什麼好建議，大家懂的。

     總結和後續

最近一兩年，一直從事微服務架構的前端框架的研發和項目的開發，發現目前流行的前端開發框架都不是很好用。

一些雙向綁定的框架對window對象污染太嚴重，這對單頁面模式是不友好的，容易形成其餘問題（對象和變量釋放不及時，再次佔用內存過多）。

單頁面模式不太適合SEO，可是很是適合前端資源的版本管理；

單頁面模式讓前端的發佈更加輕鬆，並且開發的時候，還可讓開發人員把注意力集中在子功能的業務上。

後續將會繼續抽空完善整個框架的技術整合和demo封裝，請你們關注ferrous-framework。