一、简介

ferrous-framework是为了迎合微服务架构而封装的纯前端开发框架。

以数据驱动为核心理念，实现了一种介于单页面和多页面的开发模式，让大家根据自己的需要对单页面和多页面进行切换或者共存。

页面结构采用JCP(Javascript Client Page)模式，可以很好得对前端页面进行逻辑抽象和组装。

二、何为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');

                    }

                }

            }

        }

    };

});

三、技术整合

1、jquery+jquery-ui；

2、requirejs(为页面功能的组装、压缩和合并提供支持)；

3、backbone(实现了hash路由)；

四、框架特性和封装理念

1、JCP(Javascript Client Page)模式，让您可以更好地规划系统子功能的业务实现 ，更大限度地重用代码；

2、不过度封装，对window对象无污染，方便集成各种框架；

3、深知单页面和多页面的优势，并可以让大家根据项目的特点进行选择或混合；

4、初步写了API开发样例（表单、缓存、认证），让大家可以根据自己的设计依葫芦画瓢设计其他的API；

5、一个页面功能一个目录，让子功能可以更好地的打包和管理；

6、。。。等你们发现

五、框架缺陷

对SEO支持不是很好，这是单页面模式的通病，如果需要SEO，请设计好hash值以迎合搜索引擎。

不过对于需要SEO的企业网站，还是建议采用传统的开发模式，让数据从后端与视图模板混合。

六、github地址

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

涵盖功能：登录+主界面+登录/主界面认证自动跳转

测试账号/密码：admin/123456

如何运行？部署站点后打开index.html即可，这是整个web程序的容器，同时也是整个web站点的入口。

对于单页面来说只有这一个容器。

对于多页面来说也可能只有这一个容器（当然也可以存在多个容器）--这也是用一个容器实现多页面需求的一个闪光点。

如果使用过程中有什么好建议，你们懂的。

总结和后续

最近一两年，一直从事微服务架构的前端框架的研发和项目的开发，发现目前流行的前端开发框架都不是很好用。

一些双向绑定的框架对window对象污染太严重，这对单页面模式是不友好的，容易造成其他问题（对象和变量释放不及时，再次占用内存过多）。

单页面模式不太适合SEO，但是非常适合前端资源的版本管理；

单页面模式让前端的发布更加轻松，而且开发的时候，还可以让开发人员把注意力集中在子功能的业务上。

后续将会继续抽空完善整个框架的技术整合和demo封装，请大家关注ferrous-framework。