Saber前端移动框架

联合创作 · 2023-09-25 01:00

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 库


SaberCSS 样式库 提供了基本的 样式工具库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

image


新建移动SPA项目


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

image


添加模块


edp mobile add /

修改模版文件


编辑src/index.tpl


image


启动测试服务器


edp mobile start

image

浏览 42
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报