#oojs-make codes easy oojs是一种编程方法, 使用oojs的轻量级的面向对象编程方法, 会让js代码更易阅读和维护.

oojs解决的不仅仅是模块包装或模块异步加载的问题, 而是让oo的思想作用在每一处代码逻辑, 通过减少函数嵌套和闭包引用, 来提高代码的可读性.

oojs是一套编程方法而不是类库, 任何人可以方便的将第三方库和oojs编程方式搭配使用.

##官方首页 http://www.develop.cc (网站备案中, 暂未开通)

oojs主要功能

• 使用json结构描述类.
• 兼容nodejs和browser两种环境.
• 使用命名空间组织代码

##oojs快速入门

• Step 1.引入base.js文件

  nodejs:

    require('./src/base.js');
      

  browser:

    <script type="text/javascript" src="./src/base.js"></script>

  src文件夹是js代码的根目录.里面使用命名空间组织代码. 需要将base.js放到根目录下, base.js会计算所在目录位置并记录在base.basePath中. base.js引入后, 会创建全局变量"base"和全局函数"define".

  base.js本身也是使用oojs框架创建和解析的, 十分便于阅读和修改.

• Step 2.创建一个类

  这里我们一个类string, 提供一个template方法用于模板和数据的拼接.

    define && define({
        name: 'string',
        namespace: 'base.utility',
        template: function (source, data) {
            var regexp = /{(.*?)}/g;
            return source.replace(regexp, function (match, subMatch, index, s) {
                return data[subMatch] || "";
            });
        }
    });

  define函数是base.js引入时创建的全局函数. 调用define时要传入一个用json描述的对象.

  此对象的以下属性是oojs系统使用的:

  • name: 类名, 比如上面的 string
  • namespace: 类所在的命名空间. 比如string类我们将其放在了base.utility这个存放工具类的命名空间下.
  • 名字为 类名 的函数: 类的构造函数. 使用base.create创建一个类实例时, 会执行的函数.
  • 名字为 "$"+类名 的函数: 类的静态构造函数. 当一个类引入到系统的时候, 会执行一次. 创建实例的时候不会执行.

  这里创建的string类没有构造函数和静态构造函数, 是一个最简单的类, 只有一个template方法.

• Step 3.使用类

  类的使用代码如下:

    //获取到类的引用
    var string = base.using('base.utility.string');
    //直接使用类的静态函数
    string.template('My name is {name}', {name:'ZiQiu'});
    //也可以创建一个类实例, create函数第一参数是类引用, 后面可以为构造函数传入其他参数.
    //在string类中下面的用法是没有意义的, 只是演示一下如何创建类实例.
    var myString = base.create(string, {name:'ZiQiu'});
    myString.template('My name is {name}', {name:'ZiQiu'});

  define函数会按照命名空间和类名, 将类挂载到全局. 要引用类的使用, 要通过base.using函数, 使用类的全限定性名(即 命名空间+类名)获取到类的引用. 然后就可以使用这个类了.

oojs依赖管理(加载器)

虽然我们可以使用requireJS, seaJS等类库与oojs一起使用, 但是为了方便开发者, oojs同样提供了很方便的模块加载功能, 这些都是作为base.js的扩展类提供的. 即如果你不需要这些功能, 或者想自己开发, 完全可以不使用.

oojs的加载器使用以下两个文件:

• ./src/base/base.ext.js
• ./src/base/utility/event.js

其中event.js是一个事件编程工具类, 类似于node中的EventEmitter, 或者开源的项目EventProxy. 不同之处在event.js是使用oo的方式实现的, 避免了大量的闭包, 而且支持动态的分组管理.

base.ext.js是base类的扩展, oojs支持分布类, 即可以将一个类, 分散到多个文件中. 当系统引入了base.ext.js文件后, base类就获得了加载器的功能.

###使用举例
var page = { name: "page", namespace: "", deps: { param: 'base.business.param' }, $page: function () { var param = base.create(this.param, { url: 'a.com' }); document.getElementById('log').innerHTML = param.getUrl(); } } define(page);

页面中, 首先引用了必要的js文件. 然后创建了一个page类.

page类的描述中, 使用 deps 属性描述page类的依赖. 其中属性名'param'表示以后可以通过this.param获取到类的引用. 属性值'base.business.param'表示这个类完整路径.

入口是define(page), 在define的时候, 会加载page所依赖的param类, 如果param类还有依赖, 也会递归的加载下去, 即直到所有的依赖类全部加载完毕, 才会触发page类的静态构造函数 $page.

为什么要用面向对象的思想写js?

oo不仅仅是一种编程方法, 而是组织代码的最小单位.

看几个使用AMD规范的例子就会明白, AMD中最后一个参数factory虽然美其名曰构造函数, 但是在这个函数中, 你可以做任何事情:创建局部function, function中再嵌套function, 使用闭包, 处理一些业务逻辑. 最后的结果是这个factory不易阅读和维护.

究其原因, js编程很容易陷入面向过程编程的方式中. 而AMD等规范只注重"模块"的开发, 却忽视了一个模块内部的代码如何组织和管理.

js中让代码不易管理的几个杀手包括: 闭包, 零散的函数对象, 异步机制(node中尤其重要).

oojs使用oo的思想, 减少闭包的使用, 让每一个函数对象都挂靠在类对象上, 减少孤零的函数对象的存在. 再配合event.js的事件机制, 解决异步编程中的事件嵌套噩梦.

可以说oojs为js的大规模开发提供了有效地基础保障.

加入我们

oojs还在发展中, 我们尽量不在核心的base.js中加入过多的功能, 保持核心精简. 同时通过oojs团队成员的努力, 让oojs适用于更多的场景.

欢迎有志之士加入到oojs的开发中来!

oojs项目现有团队成员列表:

• zhangziqiu/[email protected]

• fanwenjuan

• wangbin