JET(Javascript Extension Tools - Javascript 扩展工具包)

JET(Javascript Extension Tools - Javascript 扩展工具包)

 

 

站在巨人的肩上 Standing on shoulders of giants

JET 适用于 Web Page 和 Web App 的开发

据说是腾讯内部开发的！

 

JET 下载地址：http://code.google.com/p/j-et/downloads/list

特性

1. 微内核设计
   • 内核可完全分离出来，用于构建自己的框架
2. 自由拼装各个模块
3. 命名空间、原生对象零污染
4. 无缝集成各种js框架
   • 与jQuery, YUI, Mootools, Prototype.js 等框架无缝集成
   • 与多种局部框架无缝集成，如：Mini, Sizzle, cssQuery, xpath, JSON 等等
5. 多版本共存
   • 如采用的JET版本过旧，旧有的Javascript代码不能与新版本JET兼容，则可以采用多版本共存的方式保持程序的可延续性
6. 分层设计
   • Javascript核心层，与Javascript解释引擎无关的封装和扩展
   • 浏览器端Javascript层，对浏览器中的Javascript引擎部分的封装和扩展

代码示范

• JET 代码组织方式一(传统)：

var J = new Jet();
J.out(J.version);

• JET 代码组织方式二(推荐)：

Jet().$package(function(J){
        J.out(J.version);
});

 

JET设计理念

不要重复自己（Don’t Repeat Yourself）

//=================================================================

感谢 David Flanagan, John Resig, 以及 MooTools, YUI, Prototype, Dojo, ExtJs 的作者们！

//=================================================================

 

JET 下载：http://code.google.com/p/j-et/downloads/list

 

 

JET  

JET 简介

命名含义

• JET 是 Javascript Extension Tools 的缩写，即 Javascript 扩展工具套件的意思。
• jet 本意是喷气式飞机，所以同时借喻轻巧、快速的寓意。

设计理念

• 保持最优的执行效率
• 保持 Javascript 原有的代码风格，降低学习难度
• 更好的组织工业级 Javascript 应用程序

其他

• 探索在前端使用 MVP、MVC 模式来构建大型 WebApp (Build Web App with MVP)
• 探索工业级 Javascript 的开发技术

发展规划

1. 核心底层 - 纯Js底层功能封装/代码组织/无缝接入其它js库 - [完成]
2. 基础扩展 - 跨浏览器封装/工具函数/设计模式相关 - [完成]
3. UI 基础控件 - 按钮/面板/窗口/树形列表/Tab/lightbox/widgets...
4. 实时动画系统 - 实时定时器/关键帧动画/加速度公式/物理引擎/声音控制器...
5. 游戏引擎 - 角色控制/地图系统/游戏异步通讯系统/寻路算法/键盘控制/人工智能/...

结构图

第一层

Core Javascript 扩展模块

代码组织模块(轻松组织大型应用,无缝接入其它js库)

第二层

Browser Javasccript 扩展模块(跨浏览器,基础封装)

可选模块(设计模式相关模块,选择器模块...)

第三层

UI 组件

实时动画模块

游戏引擎模块

腾讯内部使用的js库也开源了— JET(Javascript Extension Tools – Javascript 扩展工具包)，很难得的一件事情，赶紧下了Jet 1.1.1版本的整个源码，包括说明文档来看看源码，看看腾讯强大的前端技术的后面会有一个怎样的js库来支撑的。http://code.google.com/p/j-et/wiki/JET

查看了Jet的使用方式之后，首先不禁冒出了一个词“复制”。是的，Jet复制了YUI3的编写方式，提供了“包”的概念package：

Jet().$package(function(J){
  //code here...
};

采用的也是颗粒化的方式，将负责不同功能的代码整理到独立的js文件里，比如：DOM、string、Event、http、fx、ui等等，不过Jet方法里并不能像YUI3那样直接导入该包的js文件，查看它的DEMO，需要自由组合几个js文件来实现想要的功能，做到了无缝的插入包，这个就得益于Jet中的微内核—jet.core.js。

 

上面是第一个“复制”，在查看jet.base.js这个文件源码的时候，看到了很多熟悉的函数呀：$try、clone、timedChunk、bind、random等等，这些都还是似乎直接复制。这个base文件包含了微内核、dom、browser、event、date、Class（用于继承和扩展的相关方法和属性）。但是，感觉看Jet的源码很爽，读起来很顺畅，整体来看Jet的各个文件的组织是：微内核来提供包以及仿照YUI3的这种操作方式，而其他的dom、event、browser等则是作为工具代码包的概念组织起来的。这就更像是一种函数功能集合，在各个包里对提供的各种接口API，也是过程函数的编写方式，增加、删除、修改都非常的容易，颗粒化的程度较高，这点非常赞~。核心逻辑简单了，代码组合的方式也就简单的多了。

Jet中Class的继承方式还是比较简单的，并且只提供原型的继承，对于父类中的使用this声明的方法和属性则不继承。这点不知道开发人员是怎么考虑的。

还有一个非常赞的地方，是event包中addEventListener、removeEventListener在IE下的处理方式。在IE下使用一个包装函数来对事件event对象做属性扩展，来使得跟W3C的事件的属性接口达成统一。同时通过一个事件储存容器，来储存每一个事件，在window设置了unload的情况下，删除全部已注册的事件。onDomReady原理跟我之前所写的类似，通过定时器来检测document、document.body、document.getElementById、document.getElementsByTagName是否可用来实现。

在代码的编写方式上也有值得借鉴的地方：在包的开头将全部的功能函数用变量声明了，之后实现每一个功能函数，最后把功能函数注册到包的命名空间下面。这样组织代码，看起来比较清晰，对实现代码的颗粒化也是有很大帮助。

不过在代码的细节上，还是有很多可以优化的地方：包括减少属性查询、执行语句，字符串的处理，以及在一些功能的实现上等等也都可以使用比较优雅的方式来实现的。但整体上来说是：简洁、代码组织有序、在兼容性方面做的也不错……