【JCP模式实战--ferrous-framework】ferrous前端开发框架邀您初体验

时间:2024-10-11 19:37:26

一、简介

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。