1. 开源软件
  2. 大数据
  3. 手机Web开发框架
  4. Saber

Saber - 前端移动框架

手机Web开发框架
未知
跨平台
HTML/CSS

软件简介

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](https://github.com/ecomfe/saber-ajax) Promise 风格的 Ajax 模块 0.1.3 [文档](https://github.com/ecomfe/saber-ajax/blob/master/README.md)
[saber-cookie](https://github.com/ecomfe/saber-cookie) Cookie 操作模块 0.1.3 [文档](https://github.com/ecomfe/saber-cookie/blob/master/README.md)
[saber-dom](https://github.com/ecomfe/saber-dom) 静态函数风格的 DOM 工具库 0.4.0 [文档](https://github.com/ecomfe/saber-dom/blob/master/README.md)
[saber-emitter](https://github.com/ecomfe/saber-emitter) 事件发射器 0.5.0 [文档](https://github.com/ecomfe/saber-emitter/blob/master/README.md)
[saber-env](https://github.com/ecomfe/saber-env) 浏览器环境检测 0.4.2 [文档](https://github.com/ecomfe/saber-env/blob/master/README.md)
[saber-firework](https://github.com/ecomfe/saber-firework) MVP 开发框架，提供完整的 SPA 解决方案 0.2.6 [文档](https://github.com/ecomfe/saber-firework/blob/master/README.md)
[saber-geo](https://github.com/ecomfe/saber-geo) 地理位置信息 0.1.0 [文档](https://github.com/ecomfe/saber-geo/blob/master/README.md)
[saber-lang](https://github.com/ecomfe/saber-lang) 语言增强模块 0.3.1 [文档](https://github.com/ecomfe/saber-lang/blob/master/README.md)
[saber-matchmedia](https://github.com/ecomfe/saber-matchmedia) 监测 CSS 的 media queries 0.1.0 [文档](https://github.com/ecomfe/saber-matchmedia/blob/master/README.md)
[saber-promise](https://github.com/ecomfe/saber-promise) Promise/A+ 实现 0.1.2 [文档](https://github.com/ecomfe/saber-promise/blob/master/README.md)
[saber-router](https://github.com/ecomfe/saber-router) hash 路由控制模块 0.2.1 [文档](https://github.com/ecomfe/saber-router/blob/master/README.md)
[saber-run](https://github.com/ecomfe/saber-run) 动画支持模块 0.2.0 [文档](https://github.com/ecomfe/saber-run/blob/master/README.md)
[saber-scroll](https://github.com/ecomfe/saber-scroll) 区域滚动支持模块 0.1.2 [文档](https://github.com/ecomfe/saber-scroll/blob/master/README.md)
[saber-storage](https://github.com/ecomfe/saber-storage) 本地存储模块 0.1.0 [文档](https://github.com/ecomfe/saber-storage/blob/master/README.md)
[saber-tap](https://github.com/ecomfe/saber-tap) 浏览器无延迟点击支持模块 0.1.2 [文档](https://github.com/ecomfe/saber-tap/blob/master/README.md)
[saber-uri](https://github.com/ecomfe/saber-uri) URI 处理模块 0.1.1 [文档](https://github.com/ecomfe/saber-uri/blob/master/README.md)
[saber-viewport](https://github.com/ecomfe/saber-viewport) 页面视口管理，提供页面转场功能 0.2.9 [文档](https://github.com/ecomfe/saber-viewport/blob/master/README.md)
[hammer](https://github.com/ecomfe/dep-hammer) 外部模块，移动端手势库 1.0.10 [文档](https://github.com/EightMedia/hammer.js/wiki)
[etpl](https://github.com/ecomfe/etpl) 适合 SPA 应用的模板引擎 2.1.0 [文档](https://github.com/ecomfe/etpl/blob/master/README.md)

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，用法请参考使用教程。

一分钟入门

[](https://github.com/ecomfe/saber/wiki/Getting-

Started#%E5%AE%89%E8%A3%85-edp)安装 edp

npm install edp -g

[](https://github.com/ecomfe/saber/wiki/Getting-

Started#%E6%96%B0%E5%BB%BA%E7%A7%BB%E5%8A%A8spa%E9%A1%B9%E7%9B%AE)新建移动SPA项目

# 第一次使用mobile相关命令会自动安装edpx-mobile
edp mobile init spa

[](https://github.com/ecomfe/saber/wiki/Getting-

Started#%E6%B7%BB%E5%8A%A0%E6%A8%A1%E5%9D%97)添加模块

edp mobile add /

[](https://github.com/ecomfe/saber/wiki/Getting-

Started#%E4%BF%AE%E6%94%B9%E6%A8%A1%E7%89%88%E6%96%87%E4%BB%B6)修改模版文件

编辑src/index.tpl

[](https://github.com/ecomfe/saber/wiki/Getting-

Started#%E5%90%AF%E5%8A%A8%E6%B5%8B%E8%AF%95%E6%9C%8D%E5%8A%A1%E5%99%A8)启动测试服务器

edp mobile start

软件首页