dexteryy/ozjs

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

OzJS Project

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 OzJS Project now focuses on providing bundles of powerful and yet micro-framework friendly AMD modules.

Toolchain

generator-ozjs

• Scaffolding tool for OzJS which offers a packaging workflow integrates toolchain, micro-framework and many best practices
• oz.js + bower + Grunt + Mo + Moui + ...
• Source code
• OzJS app template

OzmaJS

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

grunt-ozjs

• Grunt tasks for oz.js and ozma.js
• Source code
• gulp-ozjs - gulp tasks for oz.js and ozma.js

karma-ozjs

• A Karma plugin. Adapter for OzJS framework
• Source code

grunt-dispatch

• Bower mate, copy the necessary files of package(like bower\_components/) directory to your src/ directory
• Source code

grunt-furnace

• Transform code from one format to another
• template > AMD, AMD > CJS, CJS > AMD...
• Source code
• karma-furnace-preprocessor - A Karma plugin. Convert code from one format to another (like grunt-furnace)

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.

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/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)
  • mo/key
    • Wrapping API for keyboard events
    • Support key sequence, multiple key press, ...
  • mo/console
    • Debulg tool
• Source code

EventMaster

• A simple, compact and consistent implementation of a variant of CommonJS's Promises and Events
• Source code

NervJS

• A tiny, pure, event-based model wrapper for the MVC or MDV (Model-driven Views) pattern.
• Source code

DollarJS

• A jQuery-compatible and non-All-in-One library which is more "Zepto" than Zepto.js
• Source code

SovietJS

• Standalone UI event delegate implementation
• Source code

URLKit

• A lightweight implementation of routing and URL manager
• Source code

UI Toolkit

Moui

• OO-based UI behavior modules behind CardKit's view components
• Modules overview
  • moui/control
    • Minimal stateful component
  • moui/picker
    • Compose of Control objects
  • moui/overlay
    • Minimal overlay component
  • moui/actionview
    • Inherit from Overlay
    • Compose of Picker objects
  • moui/modalview
    • Inherit from Overlay
  • moui/growl
    • Inherit from Overlay
  • moui/ranger
    • Minimal range component
  • moui/util/stick
    • Stick a DOM element to anther from any clock position
  • More
• Source code

DarkDOM

• Design your own markup languages on a higher level of abstraction than HTML
• Build responsive cross-screen UI components
• Source code

CardKit

• A mobile UI library provides a series of building blocks to help you build mobile web apps quickly and simply, or transfer entire website to mobile-first web app for touch devices.
• CardKit building blocks are all use-html-as-configure-style (like Custom Elements, directive...) components built on DarkDOM and Moui.
• Source code

Momo (MoMotion)

• A framework and a collection for separate and simple implementation of touch gestures
• Source code

ChoreoJS

• An animation library which uses "stage" and "actor" as metaphors
• Source code

Tutorials

• Getting Started with oz.js and ozma.js
• define & require

Quick Start

Install the scaffolding/workflow tool then try the ozjs:app generator.

Demo App

• Doubanchou - Lottery / Draft app
• Doubanchou II: Pachislot - Lottery app
• BugHunter - Multiplayer "answer first game" or a competition responder system
• Demonstory - real time movie acts by web page elements
• TodoMVC: coming soon...

In the Real World

• Alphatown - 2D browser based virtual world
• Douban Reader - Web browser based e-book reader
• Douban's contributor system - Online self-publishing tool for Douban Reader
• Bubbler - Webapp to explore social music technology
• Code - Douban's Github clone for internal use

Follow @ozjs

• 新浪微博
• 豆瓣小站

More References

• d2forum2010: 通用JS时代的模块机制和编译工具(slide)
• d2forum2011: 新版阿尔法城背后的前端MVC实践(slide)

License

Copyright (c) 2010 - 2014 dexteryy
Licensed under the MIT license.

ozjs's Issues

`resolvename` error

exports.resolvename('http://img3.douban.com/aaa/bbb/../../ccc')
=> "http:/img3.douban.com/ccc"

.replace(/\/\//g, '/') 这里需要考虑下 http:// 的情况？

`module.export = function(){}` not work

http://jsbin.com/pihebipode/1/

翻了代码不是很明白这块的用意： L313..L319

上方 L310 对无返回的模块会对 result 赋值为 null。
这样一来 L313 中 result !== undefined ? 的判断逻辑是不是就没意义了？

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/16445000-module-export-function-not-work?utm_campaign=plugin&utm_content=tracker%2F227453&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F227453&utm_medium=issues&utm_source=github).

对 OzJS 的一些疑惑、建议与探讨

1. 源码中 forEach 的实现，以及 m.deps.forEach 的用法，使得 OzJS 在 IE9 以下无法运行。是有意不支持 Old IE？如果不需要考虑 IE6-8，则 32 行的代码可以省略掉，在文档中说明就好。只支持高级浏览器的话，代码应该还可以简化。

2. 有个建议，文档上将 AMD 公共模块称呼为 AMD 具名模块，AMD 私有模块称呼为 AMD 匿名模块，这样可能更表意，呵呵。另外，对于 AMD 私有模块，模块 url 的获取，是通过串行加载来保证拿到的 url 是当前 define 的？没仔细看代码，想求证下。如果是串行的话，当开发时私有模块超过 20 多个时，豆瓣内部是怎么缩短模块加载时间的？（之前在淘宝遇到了这个问题，SeaJS 中改成并行才解决，但并行导致代码有些 hacky，不爽）

3. 异步模块的支持挺有意思，但感觉有悖模块加载器的本职工作。个人觉得模块加载器不应该涉及异步等待逻辑。如果需要等待，可以调整依赖来解决。

4. 远程模块的设计，个人觉得让 define 承担了不应该承担的职责。比如

   define("a", ["path/to/b.js"], "path/to/a.js")
   // 干了两件事情：
   // 给模块 a 动态添加了依赖 b
   // 声明模块 a 的路径是 path/to/a.js

   上面两件事情，是否通过 config 来配置会更明确？比如

   require.config({
     aliases: {
        "a": "path/to/a.js"
     },
   
     deps: {
        "a": ["path/to/b.js"]
     }
   })

   在 SeaJS 里，通过增加 shim 配置来实现，比如

   seajs.config({
    plugins: ["shim"], // 激活 shim 插件，有这个插件 shim 配置才生效
   
   shim: {
       // jQuery 的 shim 配置
       'jquery': {
         exports: function() { return jQuery; }
       },
   
       // jQuery 插件的 shim 配置
       'jquery-plugins': {
           match: /jquery\.[a-z].*\.js/, // 匹配所有 jquery 插件，自动化
           deps: ['jquery'], // 动态指定依赖
           exports: 'jQuery' 
       }
   }
   })

   shim 配置的方式，功能和 OzJS 的远程模块类似，但在批量处理上，感觉更方便些，比如上面 jquery-plugins 的声明方式，只要命名规则为 jquery.xxx.js 的插件，都自动添加好了依赖，使用上，直接 require 真实路径或 alias 就好。RequireJS 2.0 里，也是类似的处理方式。

5. 从源码上看，OzJS 中的 require 也是身兼多职。这是我一直很难接受 RequireJS 的重要原因之一。为什么不职责单一一些？全局中的 require 跟 参数中的 require 应该不一样，就像 NodeJS 中的 require 一样，每个模块的 require 是私有的，是有上下文环境的，这样相对路径的解析也更合理。可能是个人喜好，如有冒犯，请忽略。

6. new! 挺有意思，赞。

7. mo 里面的模块挺小巧实用的，和 Arale 的理念异曲同工，呵呵。有个小疑问，mo 的模块 id 都是固定的，比如 mo/cookie，这样，当 cookie 版本升级时，如果是一个老页面，有些功能点依赖 cookie 的老版本，但新功能点想依赖 cookie 的新版本，这种情况下，OzJS 里是如何处理的？Arale 里给每个模块都加了版本，比如 arale/cookie/1.2.0/cookie 这种方式，这样两个不同版本的 cookie，可以认为是完全两个不同的模块，因此可以并存。想知道豆瓣这一块是如何处理。

8. 建议 mo 里的模块可以每个模块一个独立库，这样通过简单的 transport 工具，可以和 Arale 的组件互通起来。对于生态圈，也想听听 @dexteryy 的想法。

先说这些，希望能对 @dexteryy 有所帮助，祝 Oz 能越来越好。

玉伯 / Feb 20, 2013

yo 的链接有问题。

https://github.com/dexteryy/OzJS/blob/gh-pages/generator-ozjs/index.html#L88

现在访问的地址为:

http://yeoman.io/gettingstarted.html

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

add a components.json file for bower

https://github.com/twitter/bower

两个问题

1 ozma 有个optimist的依赖 不知道能会否支持一下 package.json 标准从而可以直接用 npm install -g 安装.
2 ozma 里头关于require('../oz') 寻找js的oz库的部分能否写成ozconfig.json的配置文件 这样可以更灵活～ https://github.com/dexteryy/OzJS/blob/master/tools/ozma.js#L8

循环引用，不提示错误，也不运行

循环引用，不提示错误，也不运行：

a.js

define('a',function(require,exports,module){
var b = require('./b');
b.say()
exports.say = function(){
alert('hello a')
}
});

b.js

define('b', function(require, exports, module) {
var a = require('./a');
a.say('a')
exports.say = function(){
alert('hello b')
}
});

sea.html

<script> seajs.use('b') </script>

IE 中无动画

依然是 animate mod. 定义了 target, prop, from, to, duration, 但被操作元素没有动画, 直接出现在了 prop 的 to 的位置.

在 IE 中不支持无 `from` 属性的 `addStage` option 定义

有的时候一个元素的起始位置是不固定的, 无法在一个 stage 中明确定义, 这样一来 animate 模块就报错了.

`resolvename` error

exports.resolvename('http://img3.douban.com/aaa/bbb/../../ccc')
=> "http:/img3.douban.com/ccc"

.replace(/\/\//g, '/') 这里需要考虑下 http:// 的情况？