腾讯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前端的积累一直没有停滞 ...
随机推荐
- java中如何将非整数保留到小数点后指定的位数
- 深入Spring:自定义注解加载和使用
前言 在工作中经常使用Spring的相关框架,免不了去看一下Spring的实现方法,了解一下Spring内部的处理逻辑.特别是开发Web应用时,我们会频繁的定义@Controller,@Service ...
- Spark 总结2
网页访问时候 没有打开 注意防火墙! 启动park shell bin下面的spark-shell 这样启动的是单机版的 可以看到没有接入集群中: 应该这么玩儿 用park协议 spark:/ ...
- 发现程序bug思路
大家有没有遇到过项目,程序出现个bug,但花了好久(真的是a long long time啊)才发现引发这个问题的原因,心想原来就这个原因导致的啊,要是早想到就好了! 其实我们确实的是方法,希望我的抛 ...
- php+JS进度条
<?phpini_set('max_execution_time','0');//设置本页面加载时间无限制 echo "<div style='border: 1px solid ...
- tp5 数据库Db增删改操作
添加数据insert $data = [ 'name_cn' => '张三', 'name_en' => 'jack', ]; $res = Db::name('style')->i ...
- jquery的队列问题
队列,可以当成一个数组,也可以当成一个空间. 使用的地方: 在js这种异步操作的时候,我们不知道什么时候一个js代码加载完成,并且你还要保护一段代码只有一个模块在执行(按需加载的时候) 这个时候我们就 ...
- idea配置sliksvn解决无法配置1.8 format 问题
1. 2. 3. 4. 5. 6. 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦拉拉拉拉啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...
- EDID真实数据块,请参考标准文档仔细核对
数据格式的详细说明:http://en.wikipedia.org/wiki/Extended_display_identification_data 下面是一个例子:
- 大数据框架对比:Hadoop、Storm、Samza、Spark和Flink——flink支持SQL,待看
简介 大数据是收集.整理.处理大容量数据集,并从中获得见解所需的非传统战略和技术的总称.虽然处理数据所需的计算能力或存储容量早已超过一台计算机的上限,但这种计算类型的普遍性.规模,以及价值在最近几年才 ...