Saber前端移动框架
Saber 是 模块化、组合式 的前端移动框架。
她是提供了 JavaScript 模块、CSS 样式库 与 开发平台 的完整前端解决方案。
现在,她最擅长做移动端 SPA (Single Page App) 项目。
用她开发轻应用会是个不错的主意
示例:
![]()
访问地址:http://startupnews.duapp.com
源码地址:https://github.com/ecomfe/saber-showcase
二维码:
![]()
JavaScript 模块
JavaScript 模块是 edp 下的 AMD Package,通过edp import
他们的特点是:
细粒度拆分,每个模块专注做好自己的事情,项目中按需组合
抛开桌面浏览器的历史包袱,只为移动端设计,优先使用原生JavaScript
拥抱社区,受益于AMD规范,有众多可用的模块资源
| 模块名 | 模块说明 | 版本 | 文档 | 
|---|---|---|---|
| saber-ajax | Promise 风格的 Ajax 模块 | 0.1.3 | 文档 | 
| saber-cookie | Cookie 操作模块 | 0.1.3 | 文档 | 
| saber-dom | 静态函数风格的 DOM 工具库 | 0.4.0 | 文档 | 
| saber-emitter | 事件发射器 | 0.5.0 | 文档 | 
| saber-env | 浏览器环境检测 | 0.4.2 | 文档 | 
| saber-firework | MVP 开发框架,提供完整的 SPA 解决方案 | 0.2.6 | 文档 | 
| saber-geo | 地理位置信息 | 0.1.0 | 文档 | 
| saber-lang | 语言增强模块 | 0.3.1 | 文档 | 
| saber-matchmedia | 监测 CSS 的 media queries | 0.1.0 | 文档 | 
| saber-promise | Promise/A+ 实现 | 0.1.2 | 文档 | 
| saber-router | hash 路由控制模块 | 0.2.1 | 文档 | 
| saber-run | 动画支持模块 | 0.2.0 | 文档 | 
| saber-scroll | 区域滚动支持模块 | 0.1.2 | 文档 | 
| saber-storage | 本地存储模块 | 0.1.0 | 文档 | 
| saber-tap | 浏览器无延迟点击支持模块 | 0.1.2 | 文档 | 
| saber-uri | URI 处理模块 | 0.1.1 | 文档 | 
| saber-viewport | 页面视口管理,提供页面转场功能 | 0.2.9 | 文档 | 
| hammer | 外部模块,移动端手势库 | 1.0.10 | 文档 | 
| etpl | 适合 SPA 应用的模板引擎 | 2.1.0 | 文档 | 
CSS 库
Saber 的 CSS 样式库 提供了基本的 样式工具库 与 UI 样式库,请根据项目特点按需选用。
他们的特点是:
用Autoprefixer处理多数兼容性问题,面向 标准 CSS 开发
只在调用时才输出CSS代码,避免样式类污染 HTML 代码的语义
以npm package的形式管理版本,升级方便
rider
基于 Stylus、专注于移动端的 CSS 样式工具库。
提供了样式初始化、顺时针简写、缓动函数、图片、排版、单位转换、形状、动画、响应式工具 等功能。
rider-ui
基于rider的 UI 样式库,用于快速构建移动应用界面。
Platform
Saber 的 平台工具(edpx-mobile)是对edp功能的补充。
首次运行edp mobile开头的命令即会自动安装edpx-mobile,用法请参考使用教程。
一分钟入门
安装 edp
npm install edp -g
![]()
新建移动SPA项目
# 第一次使用mobile相关命令会自动安装edpx-mobile edp mobile init spa
![]()
添加模块
edp mobile add /
修改模版文件
编辑src/index.tpl
![]()
启动测试服务器
edp mobile start
![]()
评论
