转自: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 框架源码包格式下载地址

.zip
.tar

相关文档

腾讯Web前端开发框架JX(Javascript eXtension tools)的更多相关文章

  1. TFC2017 腾讯Web前端大会参会小结

    简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...

  2. Bootstrap非常简单实用的web前端开发框架

    今天无意间用firebug看网站的代码发现了Bootstrap,之前从来没有听说过这个东东,于是对它产生了好奇感,通过百度我了解到了Bootstrap是一款非常简单,强悍,实用,移动设备端优先使用的这 ...

  3. 进击的Python【第十四章】:Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  4. Web前端开发框架大全-详述

    可以说,前端技术的发展是互联网自身发展的一个缩影! 前端技术的发展经历了web1.0时代,即网页只能展示信息,几乎没有交互可言: web2.0时代,web2.0不再是单维的,逐渐发展为双向交流,另一特 ...

  5. 2015腾讯web前端笔试题

      1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...

  6. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  7. 浅谈我对几个Web前端开发框架的比较

    强调一下,这篇日志主要还是针对想学前端开发的新朋友写的,不是说我有什么独特见解,而是比较客观的状态,就各种框架的异同和应用场合,需要注意的地方做简单描述,不做具体深入分析,有的地方比较抽象,对于抽象之 ...

  8. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  9. 优秀的WEB前端开发框架:Bootstrap!

    其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...

随机推荐

  1. 分布式任务调度平台XXL-Job集群版搭建

    如果集群: 保存后: 启动两个 job 第二个job的配置: # web port server.port=8082 # log config logging.config=classpath:log ...

  2. 【bzoj2423】最长公共子序列[HAOI2010](dp)

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2423 题目大意:求两个字符串的最长公共子序列长度和最长公共子序列个数. 这道题的话,对于 ...

  3. Shell脚本报错--syntax error near unexpected token for((i=0;i<$length;i++))

    现象: shell脚本使用Nodepad++进行本地编辑,在编辑后上传到linux机器进行执行时提示“syntax error near unexpected token for((i=0;i< ...

  4. 笔记<c# 调用DLL解密密文>

    using DTcms.Common; using System; using System.Collections.Generic; using System.Linq; using System. ...

  5. JavaScript -- 操作input CheckBox 全选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue v-on v-model 组合使用

    v-on vue可以使用v-on指令来监听事件,方便与用户进行交互.我们不需要修改DOM中的数据,所有的操作都由Vue来实现,你编写的代码只需要关注底层逻辑.这也是Vue强大的地方之一 <!DO ...

  7. js中介者模式

    中介者模式(Mediator),用一个中介者对象来封装一系列对象交互.中介者使各对象不需要显示地相互引用,从而使其松散,而且可以独立地改变它们之间的交互. 从生活中例子自然知道,中介者模式设计两个具体 ...

  8. 配置标准的 ActiveMQ 组件

    简单地说,使用 ActiveMQ 的方式是固定且直接的:启动 ActiveMQ 服务器,发送消息,接收消息.但你并未理解 ActiveMQ 背后运作的详情.在一些要求更高的场景里,需要理解并有能力自定 ...

  9. python切片、迭代、生成器、列表生成式等高级特性学习

    python高级特性 1行代码能实现的功能,决不写5行代码.请始终牢记,代码越少,开发效率越高. 切片 当我们要取一个list中的前n各元素时,如果前n个少的话,我们还可以一个一个的取,但是若前n个元 ...

  10. poj2112 最大流+floyd+二分

    题意:给一堆点,一部分是牛,一部分是机器,每头牛必须要走到一个机器,每个点之间有距离,要求每头牛都能找得到一台机器(机器有最大容量)的情况下,走的最远的牛距离最小 题解:二分答案,小于该距离的边才能加 ...