什么是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.com/lib/jx/1.0.1/jx-uiless.js');"` `href="http://pub.idqqimg.com/lib/jx/1.0.1/jx-uiless.js">http://pub.idqqimg.com/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.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框架入门教程(二)

腾讯Web前端JX框架入门教程(一)相关推荐

【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
使用腾讯前端Jx框架写自己的方法
使用腾讯前端Jx框架写自己的方法 <!DOCTYPE html> <html> <head><title>Demo Example</title& ...
html5移动web开发黑马掌上商城_这套web前端与移动开发教程，帮助了众多小白转行就业...
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带 ...
Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
web前端开源框架_9个用于前端Web开发的开源CSS框架
web前端开源框架当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...
Egg框架入门教程合集之插件/工具/教程/专栏/开源项目
Egg框架入门教程之示例合集 Awesome Egg.js 很棒的清单,精选了最好的Egg.js插件,工具,教程,文章等.欢迎公关! 内容博客文章讲解会议活动外挂程式应用领域样板构架 ...
4步带你从Web前端小白到入门！
Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,下面就给 ...
80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
Tornado框架入门教程
Tornado框架入门教程 Tornado在知乎广为使用,当你用Chrome打开网页版本的知乎,使用开发者工具仔细观察Network里面的请求,就会发现有一个特别的状态码为101的请求,它是用浏览器的 ...

腾讯Web前端JX框架入门教程(一)

什么是JX框架

第一个程序

逐行解释

获得JX

腾讯Web前端JX框架入门教程(一)相关推荐

最新文章

热门文章