腾讯Web前端开发框架JX(Javascript eXtension tools)
转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools)
JX – Javascript eXtension tools
一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ 等大规模的 WebApp
简介
JX 是模块化的非侵入式Web前端框架,最新开源地址:https://github.com/AlloyTeam/JX。 JX 框架同时适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模、工业级的Web App,腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发,兼容目前所有主流浏览器。
代码示范
JX 代码组织方式一(传统):
var J = new Jx();
J.out(J.version);
JX 代码组织方式二(推荐):
Jx().$package(function(J){
J.out(J.version);
});
设计理念
- 保持最优的执行效率
- 保持 Javascript 原有的代码风格,降低学习难度
- 不做任何的过度封装
- 更好的组织工业级 Javascript 应用程序
- 探索在前端使用 MVP、MVC 等模式来构建大型 WebApp
- 探索工业级 Javascript 的开发技术
特性
- 微内核设计:内核可完全分离出来,用于构建其他的框架
- 原生对象零污染:你懂的,随着js的App越来约复杂,对原生对象的零污染也体现的越来越重要了
- 模块封包:采用命名空间、闭包等方式建立了模块封包的体系,帮助更好的组织海量js代码
- 模块自由拼装:自身模块做了良好的架构分离,尽可能让各个模块之间可以自由的拼装组合
- 无缝集成各种js框架:与jQuery, YUI, Mootools, Prototype.js 等框架无缝集成;与多种局部框架无缝集成,如:Mini, Sizzle, cssQuery, xpath, JSON 等等
- 多版本共存:如采用的Jx版本过旧,旧有的Javascript代码不能与新版本Jx兼容,则可以采用多版本共存的方式保持程序的可延续性
- 分层设计:Javascript核心层,与Javascript解释引擎无关的封装和扩展;浏览器端Javascript层,对浏览器中的Javascript引擎部分的封装和扩展
架构
- 第一层:Core Javascript 扩展模块 / 代码组织模块(可用于NodeJs等其他js引擎,轻松组织大型应用,无缝接入其它js库)
- 第二层:Browser Javascript 扩展模块(跨浏览器,基础封装) / 可选模块(设计模式相关模块,选择器模块…)
- 第三层:UI 组件 / 实时动画模块 / 游戏引擎模块
发展规划
- 核心底层 – 纯Js底层功能封装/代码组织/无缝接入其它js库 – [完成]
- 基础扩展 – 跨浏览器封装/工具函数/设计模式相关 – [完成]
- UI 基础控件 – 按钮/面板/窗口/树形列表/Tab/lightbox/widgets…
- 实时动画系统 – 实时定时器/关键帧动画/加速度公式/物理引擎/声音控制器…
- 游戏引擎 – 角色控制/地图系统/游戏异步通讯系统/寻路算法/键盘控制/人工智能/…
JX 框架源码包格式下载地址
相关文档
- CheatSheet:http://alloyteam.github.com/JX/doc/jx_cheatsheet.html
- 核心文档:http://alloyteam.github.com/JX/doc/core/index.html
- UI库文档:http://alloyteam.github.com/JX/doc/ui/index.html
- 代码规范:http://alloyteam.github.com/JX/doc/specification/google-javascript.xml
腾讯Web前端开发框架JX(Javascript eXtension tools)的更多相关文章
- TFC2017 腾讯Web前端大会参会小结
简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...
- Bootstrap非常简单实用的web前端开发框架
今天无意间用firebug看网站的代码发现了Bootstrap,之前从来没有听说过这个东东,于是对它产生了好奇感,通过百度我了解到了Bootstrap是一款非常简单,强悍,实用,移动设备端优先使用的这 ...
- 进击的Python【第十四章】:Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- Web前端开发框架大全-详述
可以说,前端技术的发展是互联网自身发展的一个缩影! 前端技术的发展经历了web1.0时代,即网页只能展示信息,几乎没有交互可言: web2.0时代,web2.0不再是单维的,逐渐发展为双向交流,另一特 ...
- 2015腾讯web前端笔试题
1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...
- [转] Web前端优化之 Javascript篇
原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...
- 浅谈我对几个Web前端开发框架的比较
强调一下,这篇日志主要还是针对想学前端开发的新朋友写的,不是说我有什么独特见解,而是比较客观的状态,就各种框架的异同和应用场合,需要注意的地方做简单描述,不做具体深入分析,有的地方比较抽象,对于抽象之 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- 优秀的WEB前端开发框架:Bootstrap!
其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...
随机推荐
- SBT搭建Spark
http://www.cnblogs.com/yongjian/p/6211007.html http://www.aboutyun.com/thread-8587-1-1.html http://b ...
- ANT+JMETER集成1(生成报告)
配置build.xml文件时,网上找了各种版本的代码都会报错, 终于找到个可以生成报告的build源码了 链接: http://www.cnblogs.com/hanxiaomin/p/6731810 ...
- JMeter接口测试报错,反馈和postman不一样(二)
我总共现在有两个可以学习的接口,昨天测试一个接口发现问题解决后,今天测试另外一个发现又有问题了 这一次还是反馈显示不一样 要么 这种情况是直接从postman里面拿过来的数据,没做处理 报not j ...
- XML文件解析-DOM4J方式和SAX方式
最近遇到的工作内容都是和xml内容解析相关的. 1图片数据以base64编码的方式保存在xml的一个标签中,xml文件通过接口的方式发送给我,然后我去解析出图片数据,对图片进行进一步处理. 2.xml ...
- 写hibernate.cfg.xml时报错The content of element type "property" must match "(meta*,(column|formula)*,type?)".
原配置文件是这样的 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-ma ...
- 关于如何处理JSONObject.fromObject(Object obj)无法转换特殊日期(java.sql.Date,java.sql.Timestamp)格式的问题。
转:关于如何处理JSONObject.fromObject(Object obj)无法转换特殊日期(java.sql.Date,java.sql.Timestamp)格式的问题. 关于JSONObje ...
- Mac的搜狗输入法和QQ输入法加入⌘⌥⌃⇧自定义短语
搜狗输入法(Mac):http://pinyin.sogou.com/mac/ 创建名为『搜狗输入法自定义短语.ini』的文本文件(建议用Sublime Text),内容如下,然后偏好设置的自定义短语 ...
- 如何关闭 window10 自带的杀毒软件
打开运行,快捷键[win+R],输入[ gpedit.msc],点击确定 在打开的组策略窗口中,依次展开计算机配置>管理模板>Windows组件,选择[windows组件]中的window ...
- winform中DataGridView使用DataGridViewCheckBoxColumn实现RadioBox单选功能
private void dgvMaterial_CellContentClick(object sender, DataGridViewCellEventArgs e) { ; i < dgv ...
- git教程3-添加远程库与从远程库拷贝
一.添加到github 1.github上创建新的库learngit.git 2.git remote add origin git@github.com:moisiet/learngit.git ...