分享推文 Pin 邮件

什么是JX框架

JX框架(Javascript eXtension tools)是模块化的非侵入式Web前端框架，适用于Web Page和Web App项目的开发，特别适合构建和组织大规模、工业级的Web App，腾讯WebQQ、腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器。
JX框架具有以下特点：

微内核设计，内核可完全分离出来
原生对象零污染，随着Web App越来越复杂，对原生对象的零污染也体现的越来越重要了
模块封包，采用命名空间、闭包等方式建立了模块封包的体系，模块自身做了良好的架构分离，各个模块之间可以自由拼装组合
原子级封装，最大限度保留了代码的执行效率，接近原生的接口，降低了学习门槛
无缝集成各种js框架：jQuery, YUI, Mootools, Prototype.js，Mini，Sizzle，cssQuery，xpath，JSON等等

第一个程序

没错，正如你所想的，我们要写的第一个程序是“hello world”，通过这个程序，你可以对使用JX框架有个概括的了解。

新建一个html文件，在里面加入以下代码：

!DOCTYPE html>

html>

head>

title>Hello world/title>

/head>

body>

input type='button' id='myButton' value='Click me' />

我们从腾讯的CDN引入了JX框架的代码，通过charset声明引入代码的编码是UTF-8。我们也可以从自己的路径引入JX，根据需要定制引入的模块，后文会阐述。

1	Jx().$package('helloWorld',function(J){...});

这一行我们做了两个事情，通过全局方法“Jx()”获得了一个Jx对象，然后调用了Jx对象的$package方法。
$package方法的调用参数为：$package(name, func)
第一个参数是命名空间，第二个参数是一个function，其中的代码会在指定的命名空间中执行（即func的上下文对象this指向name）。JX支持以“.”分隔的多级命名空间，如果这个参数不传，只传一个func参数，则代码的上下文对象this指向window。
我们的function接收了参数J，这是一个Jx对象，我们可以通过这个对象调用Jx的全部方法。

1	function handler(e){...}

我们定义了一个handler方法。

1	var el=J.dom.id('myButton');

我们调用了Jx的dom包的id方法，通过元素的id取得元素的引用，并赋值给el。

1	J.event.on(el,'click',handler);

我们调用了Jx的event包的on方法，给el元素绑定了click事件，指定el被点击后执行handler。
到此，我们的hello world讲解完毕。

获得JX

JX的源码目前开源在Github，可以从http://alloyteam.github.com/JX/#download获取。

下一篇：JX框架入门教程(二)

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。