编辑器

1、Code Mirror

又一款 “Online Source Editor”,基于 Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。

随着 WebApp 突飞猛进的发展,Javascript 写的 WebApp 规模越来越庞大,比如典型的代表产品腾讯 WebQQ、HTML5 游戏等等,Javascript 越来越需要大量的开发人员多多人协作开发。同时 HTML5、CSS3 等新技术和 NodeJs 项目的高速发展,这几年 JavaScript 语言借着各种新 API 陆续被运用到从移动设备到服务器的多个” 新领域” 中。

每一字节代码都有其温度,而我们提供代码的温度计。

这个是 javascript 中一个简单 for 循环,声明 i 初始值为 0,判断 i 是否小于 100,若是则执行语句,然后 i 增加 1。所以 var i=0 只执行 1 次,条件条件表达式  i<100  会执行 101 次,增量 i++ 执行 100 次,console.log(i) 执行 100 次。

一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ 等大规模的 WebApp

by Tencent AlloyTeam

简介

JX 是模块化的非侵入式 Web 前端框架,开发于 2008 年,并于 2009 年开源于 GoogleCode - http://code.google.com/p/j-et/,于 2012 年切换到 Github,开始我们开源计划的新征途,请记住我们的最新开源地址:https://github.com/AlloyTeam/JX,欢迎访问我们的团队 Blog - http://www.alloyteam.com/2012/06/jx-framework/, 谢谢大家来支持^_^。

JX 框架同时适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模、工业级的 Web App,腾讯 WebQQ -http://web.qq.com、腾讯 Q+ http://www.QPlus.com 等产品都是采用 JX 框架开发,兼容目前所有主流浏览器。

TAT.Cson Js 对几何变换的简单封装
In HTML5,JavaScript,Web开发 on 2012年06月02日 by view: 4,249
2

如果是涉及到游戏或动画的编程,我们很可能会用到几何变换。如果在大学过线性代数的话,我们就会知道,无论是 2d 还是 3d 的几何变换,矩阵都是实现线性变换的一个重要工具。任意线性变换都可以用矩阵表示为易于计算的一致形式,并且多个变换也可以很容易地通过矩阵的相乘连接在一起。

业余时间做一些感兴趣的事情,积累了好多 test cases,其中有一些还是蛮有趣的,于是集中整理了一部分出来,其中有一些复刻的创意,有一些自己的 idea,也有一些是纯粹做测试用的,敬请围观。一期先传 40 个,持续更新 (^^)

以技术预研的心态做的一个东东。基于【双密度松弛算法】

目前来看应用价值不大,更多的是扩展一些思路,扩大前端方向,或者说是 js 能做的事的范围。大家路过围观一下就好。

源码不多,托管在 github/hongru/fluid 上,感兴趣的可以大致看一看。

TAT.Cson 圈泡泡游戏的几何知识点
In HTML5,HTML5游戏,JavaScript on 2012年04月18日 by view: 4,017
1

当我们进行游戏开发时,很多时候都需要用到一些几何知识,该文主要是抛砖引玉,通过一个 HTML5 的圈泡泡小游戏介绍下游戏开发中一些几何知识的运用。 游戏 demo 可以看这里:HTML5 圈泡泡小游戏 demo 游戏中一个最主要的操作就是通过鼠标的圈选,捕获选区内的小球并得分(或扣分)。我们一步步来分析这个操作。

Step1:画笔的形成。

首先是,怎样通过鼠标画出一个条条曲线?我们知道,HTML5 游戏的开发中,我们看到游戏里每个动作的更新,都是通过循环中每一帧对游戏元素属性的更新而形成的。因此我们只需要在每次帧更新的时候根据鼠标上一次更新时的位置与本次帧更新的位置画出一条线段,那么在游戏无数次的循环中,鼠标划过的位置就由 N 条线段连成一个轨迹,如果我们把线段都绘制出来,画布上就是一条条曲线或一个个圈。 因此我们也可以说,曲线是一条由多条线段首尾相连的线段组成的 。

什么是本地存储

以下内容从网上抄来的

HTML5 storage 提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和 cookie 相似,区别是它是为了更大容量存储设计的。Cookie 的大小是受限的,并且每次你请求一个新的页面的时候 cookie 都会被发送过去。HTML5 的 storage 是存储在你的计算机上,网站在页面加载完毕后可以通过 Javascript 来获取这些数据。
简单的说本地存储是 HTML5 的一部分。更为详细准确的说是本地存储过去是 HTML5 的标准中的一部分,而后来由于有些工作组的人表示 HTML5 太庞大了,于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

为什么要用本地存储

其实前面已经提到了,用本地存储有这些好处

  • 本地存储和 cookie 一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在
  • 大!虽然不同浏览器的标准可能不一样,主流的一般都在 5~10M,比 cookie 的 4k 强多了
  • 本地存储的数据不会被发到服务器,与 cookie 相比,节省带宽,加快响应速度

所以,如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

如何使用

首先,得检查浏览器是否支持本地存储
可以通过检测 window 下面是否有 localStorage 字段来判断,但是在 IE 下,本地文件是不能访问 localStorage 的,此时 localStorage 字段为空,所以还要加上判断

还有一种情况,假如页面里有 id 为 localStorage 的元素,某些浏览器可以通过 window.localStorage 索引到这个元素-___,-||
为了避免你的代码在遇到如此蛋疼的 DOM 时跪掉,我建议是使用特征检查


首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:



点击我查看 demo