W3CGroup

模块化WEB开发指引

dh20156(风之石)

传统开发模式回顾

传统混合开发方式
开发人员涉及到所有开发领域:URL设定,页面,业务逻辑,数据
传统的MVC开发方式
开始具备前后端分离条件
后端涉及的开发领域:URL设定,业务逻辑,数据
前端负责页面
这两种开发方式中存在的问题
混合开发方式:
开发人员学习成本高,企业招聘困难;
开发方式只适用于小型WEB开发团队;
传统MVC开发方式:
前端开发页面时不了解数据真相;
后端整合页面时不了解HTML真相;

我们需要一种改善的开发方式

它需要满足以下特性
  • 前后端分离
  • 前后端无耦合
  • 前后端并行开发
  • 后端只需要玩转数据
  • 前端需要了解数据真相
  • 前后端可进行模块化开发

EasySC, OYE & 模块化

EasySC是什么?
它是一种前后端分离开发思想
  • Easy separation and collaboration的缩写
  • 可以有不同语言的实现: Java, Php, 或任何其他后端语言
它是一种改善的MVC开发模式
  • 后端关注 Model 的实现
  • 前端关注 Control 与 View 的实现
它以Data Interface为纽带,使得:
  • 前后端环境无耦合
  • 前后端可分离开发
  • 前后端可并行开发
  • 后端更专注于数据的来龙去脉
  • 前端通过Mock data了解数据真相

EasySC实现及应用

后端SDE 数据接口
+
指令
前端F2E
实现分离框架中相关指令的接口以返回真实数据
模块化:
数据与页面模块相对应
页面中调用分离框架中的指令读取模拟数据
模块化:
数据与页面模块相对应
分离框架
真实环境开关:true || false,动态切换数据来源,前端开发时为false,取模拟数据,当页面迁移到真实环境中,开关置为true,则自动切换取真实数据,对前端透明,保证前端代码只有一份,无需后端套页。

EasySC, OYE & 模块化

OYE是什么?
它是Commonjs AMD规范的实现
  • 目标单纯,只做模块化,超轻量
  • 不依赖Script onload事件,更稳定可靠
  • 完美支持具名、匿名模块
  • 支持模块提取完整依赖列表
  • 支持模块循环依赖检测
  • 支持require与define在同一个文档
它是application模块化开发方式的提供和管理者
它支持动态开发,静态部署,线上线下代码(结构)保持一致
它为跨项目的模块重用提供可能

OYE应用场景

线上 所有依赖模块打包 所有依赖模块打包 所有依赖模块打包
require 项目 1 项目 2 项目 N
define 项目1独有模块 项目2独有模块 项目N独有模块
底层框架,通用库,通用模块

EasySC, OYE & 模块化

模块化(Modularization)
后端
  • 抽象底层数据类
  • 为前端提供对应的Service
  • 每个Service可独立运行,接受或提供数据
前端
  • 模块定义
  • 模块划分
  • HTML/CSS模块化实现
  • Javascript模块化实现

模块化定义及划分

页头
前端模块,通常可以以视觉区块进行划分;
只有包含独立语义视觉区块才可以定义为一个模块
多个页面中出现的完全相同仅有部分差异的模块,可以提取为该项目的公共模块,如:页头,页脚
一个模块的HTML结构推荐写法:
<div id="模块名" 
  class="模块通用样式名 该模块独立样式名">
  <div class="模块名_hd">...</div>
  <div class="模块名_bd">...</div>
  <div class="模块名_ft">...</div>
</div>
<#include 用户信息模块 />

<#include 最新文章列表模块 />

<#include 最新评论模块 />
页脚

模块化贯彻前后端

底层框架,通用库,通用模块
模块 1 模块 2 模块 N
数据对应
Service 1 Service 2 Service N
数据抽象类

DEMO

Easy + OYE + 模块化 实践

http://www.w3cgroup.com/easysc/default.php