什么是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文件，在里面加入以下代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Hello world</
title
>
</
head
>
<
body
>
<
input
type
=
"button"
id
=
"myButton"
value
=
"Click me"
/>
<
script
type
=
"text/javascript"
src
=
"<a onclick="
javascript:pageTracker._trackPageview('/outgoing/pub.idqqimg/lib/jx/1.0.1/jx-uiless.js');"
href
=
"http://pub.idqqimg/lib/jx/1.0.1/jx-uiless.js"
>http://pub.idqqimg/lib/jx/1.0.1/jx-uiless.js</
a
>" charset="UTF-8"></
script
>
<
script
type
=
"text/javascript"
>
Jx().$package("helloWorld",function(J){
function handler(e){
alert('Hello world!');
}
var el=J.dom.id('myButton');
J.event.on(el,'click',handler);
});
</
script
>
</
body
>
</
html
>
|
然后保存，我们的“hello world”就完成了。直接看demo
逐行解释
<input type="button" id="myButton" value="Click me" />
我们加入了一个id为“myButton”的按钮（通过id，我们可以很高效地取得一个元素的引用）。
<script type="text/javascript" src="http://pub.idqqimg/lib/jx/1.0.1/jx-uiless.js" charset="UTF-8"></script>
我们从腾讯的CDN引入了JX框架的代码，通过charset声明引入代码的编码是UTF-8。我们也可以从自己的路径引入JX，根据需要定制引入的模块，后文会阐述。
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的全部方法。
function handler(e){...}
我们定义了一个handler方法。
var el=J.dom.id('myButton');
我们调用了Jx的dom包的id方法，通过元素的id取得元素的引用，并赋值给el。
J.event.on(el,'click',handler);
我们调用了Jx的event包的on方法，给el元素绑定了click事件，指定el被点击后执行handler。
到此，我们的hello world讲解完毕。
获得JX
JX的源码目前开源在Github，可以从 http://alloyteam.github/JX/#download获取。下一篇：JX框架入门教程(二)
更多推荐
腾讯Web前端JX框架入门教程(一)
发布评论