About

Components

  • 49 util、13 lang、42 ui component over tens of large project proved

Themes Switch

  • Easily switch themes keep consistency in lifecycle of project

Module Loader

  • 49 util、13 lang、42 ui component over tens of large project proved

Themes Switch

  • JavaScript file and module loader quality of your code

Version

lastest version:

  • 0.1.4

update:

  • 2017-3-14
目录结构
├── README.md
├── onavo.js        // core打包文件
│   ├── app         // single page方法类
│   ├── core        // js核心文件
│   ├── lang        // 语言加强类
│   ├── lib         // 依赖第三方底层库,入jquery, highcharts等
│   ├── monitor     // 上报方法类
│   ├── ui          // ui 体系
│   ├── util        // 工具
页面dome
1.加载器

加载器核心是seajs,配置接口和seajs保持一致,onavo.config 的详细配置项可参考 seajs。

    onavo.config({
        "paths": {
            "site": "http://localhost/tags/0.1.4/src"
        },
        "vars": {
            "theme": "http://localhost/tags/0.1.4/src/ui/theme/default",
            "domain": "localhost"
        },
        "combo": false,
        "debug": true
    });
        onavo.use(['lib.jQuery', 'ui.Nodes.Button'], function($, Button) {
        console.log($().jquery);
        var _button = new Button({
            selector: '#button',
            sort: 'success',
            className: 'x11 x22',
            size: 'small',
            block: false,
            events: {
                click: function() {
                    alert("hello world");
                }
            }
        });
    });

2.换肤

ui换肤功能是一个重要特性,皮肤包可以指定路径,这个特性,可以让onavo库和项目环境分开部署,亦即,实现多个项目引用同一份 UI代码,而皮肤可以实现多套是十分轻松的事,业界的UI库大多需要host到本地,版本升级维护也十分方便

    "vars": {
            "theme": "http://localhost/tags/0.1.4/src/ui/theme/default"
    }
兼容性
支持这些浏览器的最新版本。在 Windows 平台,我们支持 Internet Explorer 7-11。请看下面列出的详细信息。
Chrome Firefox Internet Explorer Opera Safari
Android 支持 支持 N/A 不支持 N/A
iOS 支持 N/A 不支持 支持
Mac OS X 支持 支持 支持 支持
Windows 支持 支持 支持 支持 支持
组件介绍
1.app

SPA 项目的有力支撑组件

├── app
│   ├── Collection
│   ├── Model
│   ├── REST               // 基于ajax的REST协议封装,PHP团队要有比较成熟的规范约定
│   ├── RESTSync
│   ├── Router             // 路由
│   ├── View
2.lang

13个语言加强组件

├── lang
│   ├── browser            // 判断浏览器类型
│   ├── Class              // 基类
│   ├── dateTool           // 日期类转换工具
│   ├── each
│   ├── extend
│   ├── FormData
│   ├── inArray
│   ├── Inject
│   ├── isPlainObject
│   ├── JSON
│   ├── proxy              // 消除 var that = this; ……
│   ├── toArray
│   ├── trim
3.lib

几乎不可代替的底层轮子

├── lib
│   ├── Backbone
│   ├── Highcharts
│   ├── jQuery
│   ├── socketio
│   ├── underscore
│   ├── Zepto
4.monitor
├── monitor
│   ├── logger             // 等同 console.log
│   ├── SpeedReport        // 对接 isd 测速平台接口 (http://m.isd.com/itil/cms/)
5.ui

ui 体系其中一个最重要的概念是,原子组件Node是颗粒度最小的组件,其他与Dom相关的组件都继承于 Nodes.Node,与 YUI 的 Node 用法一致。目前公用42个ui常用组件。

使用方法 >>

├── ui
│   ├── less               // 组件 less 文件
│   ├── Nodes              // 原子组件
│        ├── Button
│        ├── Checkbox
│        ├── Node
│        ├── Popup
│        ├── Radio
│        ├── Textarea
│        ├── TextInput
│        ├── Tip
│   ├── Plugins            // 功能性插件,是组件具备XX的特性
│        ├── Cursor
│        ├── Drag
│        ├── DragDrop
│        ├── Overlay
│        ├── Pin
│        ├── Plugin
│   ├── theme               // 默认提供3套皮肤
│        ├── bootstrap
│        ├── default
│        ├── elegance
│   ├── widget              // 基于原子组件的组合型插件
│        ├── Autocomplete
│        ├── Clipboard
│        ├── ComboBox
│        ├── DatePicker
│        ├── Dropdown
│        ├── Editor
│        ├── FileUpload
│        ├── FileUploader
│        ├── Grid
│        ├── ICheckbox
│        ├── ImageCrop
│        ├── IRadio
│        ├── JScrollPane
│        ├── KindEditor
│        ├── LightTip
│        ├── Menu
│        ├── NumberSpinner
│        ├── Panel
│        ├── RichEditor
│        ├── Scrollspy
│        ├── Slider
│        ├── State
│        ├── Switchable
│        ├── TimePicker
│        ├── ZTree
│        ├── Gotop
│        ├── ImageViewer
│        ├── Pagination
6.util

目前共有43个辅助类组件

├── util
│   ├── Attribute
│   ├── Callbacks
│   ├── contains                // 判断元素是否具备包含关系
│   ├── Cookie                    // cookie 工具类
│   ├── css3Detect                // css3 属性检测工具
│   ├── defaults
│   ├── domain                    // 解析获取 domain
│   ├── Event
│   ├── eventProxy                // 事件代理组件,继承于backbone
│   ├── GUID                      // 唯一性 ID 生成器
│   ├── imageLoader               // 图片加载器
│   ├── installclick              // pushState 和 Ajax 技术,详见 http://instantclick.io/
│   ├── jsonp                     // jsonp 工具类
│   ├── localStorage              // 支持低版本IE的 sessionStorage
│   ├── md5                       // md5 加密算法
│   ├── mouseWheel                // 鼠标滚轮事件监控工具
│   ├── pinyin                    // 汉字拼音辅助工具
│   ├── postReport
│   ├── Promise
│   ├── ptloginHelper             // ptlogin 工具类
│   ├── Pubsub
│   ├── Range                     // 文案选区组件
│   ├── region                    // 国省市区4联下拉组件数据工具
│   ├── regionData                // 国省市区数据
│   ├── report                    // url Report
│   ├── requestAnimationFrame     // 支持低版本IE的 requestAnimationFrame
│   ├── RSA                       // RSA 加密算法
│   ├── Selection                 // 文本选择辅助类
│   ├── serializa                 // 序列化对象键值对,与jquery的serializa功能一致
│   ├── sessionStorage            // 支持低版本IE的 sessionStorage
│   ├── Shortcuts                 // 键盘快捷键辅助类 (https://craig.is/killing/mice)
│   ├── specialCharEscape         // 转义特殊字符
│   ├── Style                     // 样式辅助类,包括增加样式规则、head增加、删除样式文件
│   ├── Task                      // 任务管理器,页面超过两个以上的setTimeout后,你懂的
│   ├── TEA                       // ptlogin 加密算法
│   ├── template                  // Art template (https://github.com/aui/artTemplate)
│   ├── unique                    // unique key-value map from an array
│   ├── validform                 // 校验规则集
│   ├── Vailform                  // seanxphuang 开源的表单校验组件,业界口碑爆表
│   ├── xssFilter                 // xss 过滤器,包括对 html、uri、css、css color 的处理
│   ├── zIndexGenerator           // index 生成器