owo: 一个高效、易用、干净的html框架
1. 项目特点
- 所有dom元素都不是虚拟的,完美兼容传统MVC框架,且对搜索引擎友好。
- 内置将一个页面分离成多个组件,组件可以方便的移植到其他项目中使用,支持加载远程地址组件。
- 支持使用less, sass, pug等写法(需要安装对应插件),能够自动将支持性不友好的js、css代码转换为兼容各个浏览器的代码。
- 框架在各种浏览器乃至IE8版本以下浏览器均能使用。
- 支持资源统一管理,自动处理html、css、js中的资源引用,支持无损压缩图片输出等功能。
- 框架能够进行智能分析,对框架中没有使用到的方法不会打包到项目工程里,真正做到干净。
- 内置路由系统,内置数十种页面切换效果,可以方便的制作SPA页面。
- 内置多种内置方法,并支持扩展。
- 支持对js,css进行美化输出
2. 快速上手
安装
npm i -g @owo/pack
创建示例项目
owo init test
打开示例文件夹
cd test
安装依赖包
npm i 或 yarn
运行或者编译
owo dev 或者 owo build
3. 内置方法
- $go - 跳转到其他页面
参数 | 含义 | 类型 | 必须 |
---|---|---|---|
pageName | 页面名称 | string | 是 |
in | 页面入场动画 | string | 否 |
out | 页面离开动画 | string | 否 |
4. 其他
1.getPopPosition
/**
* 智能计算弹窗合适出现的位置
* @param {number} areaW 区域的宽度
* @param {number} areaH 区域的高度
* @param {number} boxW 弹窗的高度
* @param {number} boxH 弹窗的高度
* @param {number} x 出现点的X轴坐标
* @param {number} y 出现点的Y轴坐标
* @return {object} 返回合适的位置信息
*/
2.getScreenInfo
/**
* 获取屏幕信息
* @return {object} 屏幕信息
*/
3.smoothChange
/**
* 平滑的改变值
* @param {number} startValue 初始数值
* @param {number} endValue 结束数值
* @param {number} time 持续次数
* @param {number} step 步长
* @param {function} callBack 回调函数
* @return {object} 控制信息
*/
4.toast
/**
* 显示toast提示
* @param {number} text 显示的文字
* @param {number} time 显示时长
*/
5.getQueryString
/**
- 获取URL参数中字段的值
- @param {string} name 参数名称
- @return {string} 返回参数值 */
更新日志
2019年4月11日
- 美化html输出
- 修复 “动画”集合为空 依然打包动画css的问题
- 依赖包优化
- 修复@for数组报错
2019年4月5日
-
增加模板缓存功能,重复的模板不需要重复处理
-
修复重复使用同一模板 css和js会重复打包的问题