腾讯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前端的积累一直没有停滞 ...
随机推荐
- 堆栈在linux内存中的使用
链接:https://www.zhihu.com/question/57013926/answer/151506606 1.Linux 内核中使用 task_struct 作为进程描述符,该结构定义在 ...
- 【2039】checker(Dp)
我今天脑子貌似又好使了一点,可以做一做DP中的水题了. 这个题难度蓝色,纯属是做的人太少了虚高. 这个题很显然的是可以用一个顺序一个逆序这两个大水转移方程轻松转移出到达这个地方最少需要的棋子数量,然后 ...
- IDEA运行debug为灰色无法运行
这种情况一般在使用他人项目的时候产生. 检查几个问题,本地环境是否配置好 然后进入项目的入口右键运行是否可以正常运行 如果不可以,就在 修改一下src文件 一般就可以正常使用了
- nova libvirt event
nova中利用libvirt 事件来更新vm的DB中的power状态 https://wiki.openstack.org/wiki/ComputeDriverEvents Nova compute ...
- IOC和DI,AOP的本质理解
IOC: Inversion of Control,控制反转, 控制权从应用程序转移到框架(如IOC容器),是框架共有的特性. 对于IOC的理解,可以把IOC看作是一个生产和管理bean对象的容器.原 ...
- npm package管理
每个项目都包含一个package.json文件用来管理项目依赖的包以及项目相关信息. 其中比较总要的就是dependencies和devDependencies两项,分别指定了项目运行所依赖的模块.项 ...
- java基础篇 -- 常用的日期加减和日期格式化工具类
平时我们遇到日期的加减,感觉是相当麻烦的,以下是常用的日志加减的方法,包括日的加减.月的加减等,也包括了一些常用的日期格式化,这样在我们以后碰到日期加减的时候会省去很多麻烦,欢迎大神指正和吐槽: pa ...
- Hibernate(1)
一.什么是hibernate 1. hibernate是开源的轻量级框架,应用在javaee三层结构中 dao层框架,使用orm思想对数据库进行crud操作 2 .在dao层里面做对数据库crud操作 ...
- 常用集合ArrayList浅度解析
首先,先看一下java中对ArrayList的定义代码: public class ArrayList<E> extends AbstractList<E> implement ...
- mysql前缀索引的应用
在mysql中有时需要索引的列很长,如果直接应用索引会造成索引过大的问题.因此我们可以取其中一部分字段来做索引,例: 添加索引:alter table * add key (field(3)); ...