Cabloy全栈JS框架微创新之一：不一样的“移动优先 PC适配”

摘要：前言目前流行的前端组件库都支持移动设备优先的响应式布局特性。充分利用了的优良特性，充分发挥其最大价值。不重复造轮子，而是采用业界最新的开源技术，进行全栈开发的最佳组合。

目前流行的前端UI组件库都支持移动设备优先的响应式布局特性。但基于Mobile和PC两个场景的不同用户体验，也往往会实现Mobile和PC两个版本。
PC场景下的Web工程，如大量的后台前端管理模版，虽然支持Mobile自适应，但其用户体验差强人意。
Cabloy采用不同的思路，仍然基于移动优先，同时通过特殊的布局优化，使得移动页面可以完整的用于PC场景，既保证了用户体验，又提升了开发效率，大大简化了开发工作量。

PC：https://admin.cabloy.com

Mobile：

Cabloy的PC布局将页面切分为若干个Mobile+Pad的组合，带来了与众不同的用户体验。
从此开发类似于微信公众号或H5混合开发的项目，再也不用建立两套独立的工程。

Cabloy前端基于Framework7，并一直跟进其最近的开发进度，从1.0到2.0，再到3.0。Cabloy充分利用了Framework7的优良特性，充分发挥其最大价值。
Cabloy的作者zhennann在Framework7的贡献图如下：

Framework7将页面分为若干个View，每个View对应一个Router，管理若干个Page，从而非常方便的实现Page之间的堆叠。
Cabloy的PC布局，将页面分为若干个Tab，每个Tab再包含若干个View。通过对Router的patch，实现Tab之间与View之间的URL跳转。

Cabloy通过不同的模块封装不同布局的实现逻辑，然后在根结点组件中针对页面的尺寸的变化渲染不同的布局。
需要特别说明的是，Cabloy中的模块是一个相对独立的实体，可以根据需要异步加载，提升页面加载性能。

egg-born-front/src/base/mixin/config.js:
config.js配置布局信息，可通过修改配置实现自己的布局管理逻辑

// config
const config = {
  modules: {},
  layout: {
    breakpoint: 800,
    items: {
      mobile: {
        module: "a-layoutmobile",
        component: "layout",
      },
      pc: {
        module: "a-layoutpc",
        component: "layout",
      },
    },
  },
};

egg-born-front/src/inject/pages/app.vue:
app.vue是根结点组件，动态异步加载所需的布局组件

Mobile布局组件源码参见：https://github.com/zhennann/egg-born-module-a-layoutmobile/blob/master/front/src/components/layout.vue

a-layoutmobile/front/src/config/config.js:
config.js可以灵活配置布局的显示元素

export default {
  layout: {
    login: "/a/login/login",
    loginOnStart: true,
    toolbar: {
      tabbar: true, labels: true, bottomMd: true,
    },
    tabs: [
      { name: "Home", tabLinkActive: true, iconMaterial: "home", url: "/a/base/menu/list" },
      { name: "Atom", tabLinkActive: false, iconMaterial: "group_work", url: "/a/base/atom/list" },
      { name: "Mine", tabLinkActive: false, iconMaterial: "person", url: "/a/user/user/mine" },
    ],
  },
};

Mobile布局组件源码参见：https://github.com/zhennann/egg-born-module-a-layoutpc/blob/master/front/src/components/layout.vue

a-layoutpc/front/src/config/config.js:
config.js可以灵活配置布局的显示元素

export default {
  layout: {
    login: "/a/login/login",
    loginOnStart: true,
    header: {
      buttons: [
        { name: "Home", iconMaterial: "dashboard", url: "/a/base/menu/list", target: "_dashboard" },
        { name: "Atom", iconMaterial: "group_work", url: "/a/base/atom/list" },
      ],
      mine:
        { name: "Mine", iconMaterial: "person", url: "/a/user/user/mine" },
    },
    size: {
      small: 320,
      top: 60,
      spacing: 10,
    },
  },
};

Cabloy是采用Javascript进行全栈开发的最佳实践。
Cabloy不重复造轮子，而是采用业界最新的开源技术，进行全栈开发的最佳组合。
欢迎大家拍砖、踩踏。
地址：https://github.com/zhennann/cabloy