腾讯Web前端JX框架入门教程(一)
2013-05-16 14:15
211 查看
什么是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文件,在里面加入以下代码:
逐行解释
<input type="button" id="myButton" value="Click me" />
我们加入了一个id为“myButton”的按钮(通过id,我们可以很高效地取得一个元素的引用)。
<script type="text/javascript" src="http://pub.idqqimg.com/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.com/JX/#download获取。下一篇:JX框架入门教程(二)
相关文章推荐
- 基于redux的前端框架dva入门教程
- Yii框架学习 入门教程(一)
- 关键字驱动框架入门教程-13-项目打包交付给手工测试人员
- Struts1.x系列教程(10):Validator验证框架入门
- Java Mybatis框架入门基础教程
- ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
- Yii框架入门教程(博客教程、权威指南、类手册)
- 基于DDD的现代ASP.NET开发框架--ABP系列之2、ABP入门教程
- CI(CodeIgniter)框架入门教程——第一课 Hello World!
- 前端框架React Js入门教程【精】
- prototype框架入门教程
- MiniUI快速入门教程(五)主框架布局
- ios开发--OS X 和 iOS 的测绘框架 - Core Plot 入门教程
- Yii2框架RESTful API教程(一) - 快速入门
- XHTML入门学习教程:框架标签使用
- HTML5移动开发框架 Sencha Touch 入门教程汇总
- AsWing 入门教程 1.3 给框架定位
- 使用jQuery Mobile框架开发移动端Web App的入门教程
- Dojo QuickStart 快速入门教程 (4) 简单的测试框架
- 软件框架的利器、TangramMini组件应用教程一:入门