前端框架Fef

A lite clean frond-end framework

Points

  • Why Design Fef
  • How Design Fef
  • Fef API
  • Future Fef

Why Design Fef

  • 现有的require+jquery作为底层架构，但缺乏对业务代码层级的架构设计
  • Fef就是为了解决现在业务代码缺乏控制，以及因此引起的耦合度和复杂度高的问题。

How Design Fef

  • 优化扩展了目前的代码结构
  • 借鉴了一些优秀的前端框架，如backbonejs 、T3js

API

  • Fef.View
  • Fef.Context
  • Fef.Service
  • Fef.Sync

Fef.View

  • 什么可定义成View
    • 相对独立的可复用的前端模块
    • 单一任务原则，单一UI单元渲染任务或者单一交互任务，比如tab view，分页view，表格view等
    • 业务解耦，互相之间不能直接访问，只能通过消息传递通讯。

Fef.View

  • view都有哪些属性行为
    • constructor：func，定义局部变量 fetch data render view
    • events：{}， 封装事件
    • messages：[]，定义接受的外界通讯消息
    • onmessages: func，接受外界消息后，进行业务处理或UI重绘
    • setViewAttr：func，设置一些局部变量。
    • destory：func，销毁已存在的view instance。

Fef.Context

  • 负责全局环境的通讯消息传递
  • 事件发布
  • 业务解耦
  • 定义方法
    • Fef.broadcast
    • Fef.on
    • Fef.off

Fef.Sync

  • 负责与API Server通讯
    • 同步本地数据改动
    • 获取最新数据
  • View层解耦
  • 依赖与系统原有的封装请求API的方法

Fef.Service

  • UI无关的可共用的组件
  • 只能被 view层访问(Fef.Service.get)
  • 定义方法：
    • add(name,creator) 
    • get(name)

Future Fef

  • data-bind
  • virtual dom 
  • more lite api 

Reference

Q & A

Made with Slides.com