/OzJS

A microkernel for modular javascript, a toolchain for modern front-end, a micro-framework for growable WebApp

Primary LanguageJavaScript

>> 中文版  

OzJS

OzJS is NOT yet another script loader, but a microkernel that provides sorely-missing module mechanism at runtime (that means it mainly works at language-level, not file-level. Use Ozma.js to process files statically at build time based on the same mechanism) for large/complex javascript program, compatible with the de facto standards (AMD, NodeJS/CommonJS and traditional module pattern).

Even better, it was implemented earlier than the well-known RequireJS, so there are differences between similar APIs in philosophy and approach, which bring more value.

The API and code of oz.js are minimalist and stable. It won’t add new features that aren't truly needed (It's absolutely bad practice to meet new requirements through new configuration options or new plugins for a module mechanism provider!). The Oz project now focuses on providing bundles of powerful and yet micro-framework friendly AMD modules.

Toolchain  

OzmaJS

  • Intelligent autobuild tool for OzJS
  • Unique ability to support transparent dynamic dependence
  • Source code

grunt-ozjs

istatic

  • A static-file dependency manager more than a package manager
  • Let you quickly and automatically add modules of specified (or latest) version to your project
  • grunt-istatic

OzJS Adapter:

  • Mini define/require mplementation for old web page
  • Transform AMD module into traditional module pattern
  • Source code

Micro-framework  

It is time to stop using All-in-One JavaScript library or framework which bundle all functionalities and solutions within a single global namespace.

OzJS Project provides plenty of tiny, mutually independent, single purpose modules to help you build(mix and match) your own MVC(or suchlike) framework.

EventMaster

  • A simple, compact and consistent implementation of a variant of CommonJS's Promises and Events
  • Provide both Promise/Deferred/Flow pattern and Event/Notify/Observer/PubSub pattern
  • Source code

URLKit

  • A lightweight implementation of routing and URL manager
  • Automatic switch between html5 History API and IE's hashbang
  • Source code

DollarJS

  • A jQuery-compatible and non-All-in-One library which is more "Zepto" than Zepto.js
  • Focus on DOM operations and mobile platform, wrap native API wherever possible.
  • Source code

SovietJS

  • Standalone UI event delegate implementation
  • Provide multiple styles/modes: override, automatically preventDefault, partial matching, exact matching...
  • Source code

CordJS

  • A tiny, pure, event-based model-view-binder (MVB) library which is far more thin than Backbone
  • Coming soon...

ChoreoJS

  • An animation library which uses "stage" and "actor" as metaphors
  • Automatic switch between CSS transitions and JS tweening
  • Provide a flexible way to write asynchronous sequence of actions
  • Support CSS transform value
  • Source code

Mo

  • A collection of OzJS core modules that form a library called "Mo"
  • Modules overview
    • mo/lang
      • ES5/6 shim and minimum utilities for language enhancement
    • mo/domready
      • Non-plugin implementation of cross-browser DOM ready event
      • Based on OzJS's built-in module -- 'finish'
    • mo/browsers
      • Standalone jQuery.browsers supports skin browsers popular in China
    • mo/cookie
      • Simple wrapping for managing cookie
    • mo/template
      • A lightweight and enhanced micro-template implementation, and minimum utilities
    • mo/network
      • Standalone jQuery.ajax API and enhanced getJSON, and so on
    • mo/easing
      • An easing library supports jquery.js, standalone module and CSS timing functions
    • mo/mainloop
      • Implement and manage single loop for WebApp life cycle
      • Provide tweening API for both property animation and frame animation(canvas or css)
    • mod/uiproxy
      • Standalone and most efficient implementation of UI event delegation
      • Coming soon...
    • mo/key
      • Wrapping API for keyboard events
      • Support key sequence, multiple key press, ...
  • Source code

Moui

  • A collection of OzJS UI behavior modules that form a library called "Moui"
  • Modules overview
    • moui/stick
      • Stick a DOM element to anther from any clock position
    • moui/drag:
      • Standalone drag & drop library provides HTML5 shim
    • moui/danvas
      • Implement canvas API using DOM elements
    • moui/mention
    • moui/scrollbar
    • moui/mapviewer
    • moui/dialog
    • More coming soon...
  • Source code

Other recommended modules

  • db.js:
    • Forked from Aaron Powell's db.js, removing Deferred, using EventMaster instead

Getting Started  

Download oz.js

You might also need a domReady module: domready.js

Put them into your project directory, like ./js/lib and ./js/mo

In your web page:

<script src="js/lib/oz.js"></script>
<script>
require.config({
    baseUrl: 'js/'
});

define('jquery', 'lib/jquery.js');

define('app', [
    'jquery', 
    'mo/domready'
], function($){
    var app = {
        // do something with jquery
    };
    return app;
});

require(['app'], function(app){
    // do something with app 
});
</script>

That's all! But for development environments only.

Better practice for real production environments:

<script src="dist/js/main.js"></script>
<script>
// define modules need demand loading outside main.js
define('module(dynamic dependence)', 'CDN_URL/filename_with_timestamp.js');
</script>

Put main.js into ./js (not ./dist/js)

require.config({
    baseUrl: 'js/',
    distUrl: 'dist/js/'
});

// same as above

Install ozma.js through NPM:

npm install ozma -g

Create a configure file for ozma. The default file name is ozconfig.js, located under the same directory as main.js. In this way you can omit --config parameter for ozma.

{
    "baseUrl": "./js/",
    "distUrl": "./dist/js/",
    "loader": "lib/oz.js",
    "disableAutoSuffix": true
}

Build distribution files (one or more):

ozma js/main.js

GRATS! That's all you need! See ./dist/js/main.js for build results, then refresh the web page, see Network Panel in your browser's developer console.


See usage for more detail:

Tutorials  

In the Real World

Follow @ozjs

More References

Release History  

  • 2013.1.18
    • 项目网页更新内容,增加微博和豆瓣小站的链接
    • SovietJS v0.0.1 发布
    • mo/lang 增加OOP工具.construct()
    • mo/lang 拆分子模块
    • ozma.js 支持windows
  • 2012.12.2
    • 新的API文档:define & require
    • oz.js v2.5 和 ozma v1.4 发布。支持在模块名中使用别名和相对当前文件的路径
    • oz.js: 内建模块module的值改为nodejs的形式,支持module.exports =的用法
    • oz.js: this不再指向全局变量oz
    • mo/ChoreoJS/URLKit/DollarJS v1.0.1: 用this取代内建模块host,需要oz.js v2.5+
  • 2012.11.21
    • OzJS仓库中的/mod拆分为7个子项目和独立仓库
    • mod/event 改名为 EventMaster
    • /mod中的模块重命名为 MoMoui
    • 网站重构
  • 2012.11.21
    • 首页文档重新组织,增加模块列表和描述
    • ChoreoJS v1.0.0 发布
    • mod/event 增加disable/enable, progress/notify, merge等方法
    • mod/mainloop 更新
    • mod/lang 更新
    • mod/animate 改名 ChoreoJS
    • mod/url 改名 URLKit
    • mod/domcanvas 改名 mod/danvas
  • 2012.11.13
  • 2012.10.18
    • oz.js: require.config增加debug参数,可将已发布的线上代码映射到本地源文件
    • ozma.js 1.3
      • 完善了CJS风格模块在构建中自动转换为AMD风格的特性
      • config文件增加ignore选项,支持传统网站多页面项目的文件组织方式
      • 构建过程中支持远程模块的串行加载,避免额外的Unrecognized module警告
  • 2012.10.15
  • 2012.10.13
  • 2012.10.11
  • 2012.9.26
    • mod/lang 增加示例
  • 2012.9.21
    • ozma.js 1.1,npm可更新
    • ozma.js对动态加载模块的多路径依赖问题提供完善的构建支持
  • 2012.9.20
    • ozma.js 支持第三方包管理系统Jam示例和用法
    • oz.js默认启用define.amdozma.js能更好的解析非AMD文件。
  • 2012.9.10
    • bugfix: oz.jsnew!插件