从千分位格式化谈JS性能优化

所谓的千分位形式,即从个位数起,每三位之间加一个逗号。例如“10,000”。针对这个需求,我起初写了这样一个函数:

// 方法一
function toThousands(num) {
	var result = [ ], counter = 0;
	num = (num || 0).toString().split('');
	for (var i = num.length - 1; i >= 0; i--) {
		counter++;
		result.unshift(num[i]);
		if (!(counter % 3) && i != 0) { result.unshift(','); }
	}
	return result.join('');
}

方法一的执行过程就是把数字转换成字符串后,打散为数组,再从末尾开始,逐个把数组中的元素插入到新数组(result)的开头。每插入一个元素,counter就计一次数(加1),当counter为3的倍数时,就插入一个逗号,但是要注意开头(i为0时)不需要逗号。最后通过调用新数组的join方法得出最后结果。

方法一比较清晰易懂,也在项目中用了一段时间。但是直觉告诉我,它的性能并不好。

动态创建iframe在IE下的两个问题

表单提交到动态创建的iframe

问题描述

以下代码,一般用于在当前页无刷新提交表单,其原理是把表单的target设为页面上某个iframe的id,使该iframe成为提交的目标,避免新开窗口或跳转。但这段代码在IE 6、7下无效。

<form action="http://www.baidu.com/" method="post" target="testframe">
	<input type="submit" value="Submit" />
</form>
<script>
var iframe = document.createElement('iframe');
iframe.id = 'testframe';
iframe.name = 'testframe';
document.body.insertBefore(iframe, document.body.firstChild);
</script>

解决方案

innerHTM

通过WebRTC获取摄像头影像

WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API,目前已经是W3C的推荐标准。本文主要阐述如何通过WebRTC的接口获取摄像头影像并截图。

获取摄像头影像

要播放摄像头的影像,首先需要一个video标签:

<video id="video"></video>

获取摄像头影像主要是通过navigator.getUserMedia这个接口,在caniuse.com上查询一下这个接口的支持情况,可以看到目前只有Chrome和Firefox支持得比较好,而且都要加上自家的前缀,移动端几乎全线不可用。

getUserMedia支持情况

为了便于使用这个接口,先做一下兼容性处理:

navigator.getUserMedia = navigator.getUserMedia
	|| navigator.webkitGetUserMedia
	|| navigator.mozGetUserMedia;

通过开发者工具监控事件触发

我们经常会通过这样的代码去判断某个元素的某些事件有没有被触发:

$('body').on("click", function(e) {
	console.log(e);
});

事实上,Chrome开发者工具以及Firebug都提供了内置事件监控方法——monitorEvents。下面我们介绍一下具体用法。

审查一个元素,此时,你可以在控制台中通过变量$0获取这个元素:

$0变量

在控制台中输入:

monitorEvents($0, 'click');

当然,这样也是可以的:

了解模块化开发

小A是某个创业团队的前端工程师,负责编写项目的Javascript程序。

全局变量冲突

根据自己的经验,小A先把一些常用的功能抽出来,写成函数放到一个公用文件base.js中:

var _ = {
	$: function(id) { return document.getElementById(id); },
	getCookie: function(key) { ... },
	setCookie: function(key, value) { ... }
};

小A把这些函数都放在_对象内,以防过多的全局变量造成冲突。他告诉团队的其他成员,如果谁想使用这些函数,只要引入base.js就可以了。

小C是小A的同事,他向小A反映:自己的页面引入了一个叫做underscore.js的类库,而且,这个类库也会占用_这个全局变量,这样一来就会跟base.js中的_冲突了。小A心想,underscore.js是第三方类库,估计不好改,但是base.js已经在

Javascript日期类型的妙用

获取某个月份的天数

相信大家读小学的时候就知道一年十二个月各有多少天了,这里面有个特殊的存在——2月。闰年的2月有29天,非闰年的2月只有28天。估计不少人跟我一样,已经不记得闰年的规则了,这时候,下面的这个方法就派上用场了。

var date = new Date(2013, 2, 0);
date.getDate();  // 28
date = new Date(2012, 2, 0);
date.getDate();  // 29

创建Date对象时可以传入三个参数,分别是年、月、日,如果日的参数为0,那创建出来的对象表示的就是该月的最后一天,如此就可以知道那个月有多少天了。

同样的,我们也可以通过这个方法判断某年是否闰年:

function isLeapYear(year) {
	return new Date(year, 2, 0).getDate() === 29;
}
isLeapYear(2012);  // true

获取时区

日期类型的 getTimezoneOffset() 方法可以获取格林威治时间和本地时间之间的时间差,以分钟为单位。例如:

var date = new Date();
var timezoneOffset = date.ge

工作经历(二)——网易下篇

  • 分类:其他
  • 浏览次数:365
  • 评论次数:3

文接上篇,本篇主要讲一下工作以外的事情。

入职

当年正式入职后,HR安排了一系列的培训,让新人熟悉公司的历史、文化、制度等。除此以外,公司还给应届毕业生组织了广州一日游,我虽是广州人,但广州的很多景点也没去过,所以也跟着一起去了。没想到这一去,还闹出大麻烦了。

旅游当天天气很热,车里面又有空调,结果进进出出,冷热切换频繁,导致重感冒,几天后的户外拓展也只好缺席了。

UED163.com

当年前端组和美术中心有一个团队博客,为了鼓励大家发文,每个月都会进行一次投票,得票最多的前几篇文章的作者,可获得华润万家购物卡。久而久之,优秀文章也不少,部分文章还被转到蓝色理想。

不过这个博客最终还是走向了没落,现在UED163.com已经不可访问了。

食堂与美食节

食堂在网易大厦10F,我刚入职那会儿,很多菜都是辣的,吃着很不习惯。后来换了家承包商,合口味多了。

工作经历(三)——3G门户篇

  • 分类:其他
  • 浏览次数:453
  • 评论次数:2

从网易离职之后,我选择了进入另一个领域——后端开发。之所以做这个选择,是想让自己的知识更全面些。后端技术中,我最熟悉的就是ASP.NET,找工作的时候自然也是往这个方向找。然而,做互联网的人都知道,能在自家产品中应用微软技术的,是少之又少,3G门户是其中一家。

用过手机上网的朋友都应该知道3G门户网站(3G.cn),它可以说是国内最早的移动门户网站。经过几轮面试,我顺利被这家公司录用,不过由于我在ASP.NET方面的经验并不丰富,所以薪资还是跟在网易的时候差不多。

公司给我安排的辅导员是一位项目经理(不过真正辅导我的是另一位同事),在他身上我学到了不少项目管理的经验,其中最有趣的是打牌。这里的打牌既不是锄大地也不是斗地主,而是评估某项功能工时的时候,每人以半天为时间单位打出自己的牌(比如1天,就打数字为2的牌)。如果大家评估的工时不一致,就得各自说明原因后再决定;如果大家都评估出较长的工时,则把这项功能分解为几项子功能后再评估。

工作了2个月左右,我发现这条前端转后端的路走得并不顺利。由于我在前端方面的优势,实际做项目的时候总是被安排负责前端的部分。比方在做网站流量统计系统时,我就负责解析后端JSON数据,并结合Highcharts展示在页面上,至于数据是怎么统计出来的以及怎么取出来的,就跟我没关系了。而且,最大的问题是,我发现自己也更愿意承担前端的部分。这样看来,当初选择转型是太鲁莽了,不过公司给了我

写在《高达SEED重制版》即将结束之际

  • 分类:其他
  • 浏览次数:516
  • 评论次数:2

我对《高达SEED》这部动画的印象是非常深刻的,除了剧情和机设的吸引,最重要的是它曾经带给我很多美好的回忆。

话说《高达SEED》首播期间,我在读高中。当时是每逢周六播一集,一般当天晚上就有生肉(没字幕的版本),第二天就有熟肉(带字幕的rmvb版本),大约一周后就有高质量的熟肉(带字幕的avi版本)。那会儿家里还是用的56K拨号网络,要下载一集时间成本和金钱成本都挺高的,所以主要还是求助于家里有ADSL的亲戚和同学帮忙下载,再用一个旧硬盘拷回来,再拷到家里电脑的硬盘上。那时候硬盘的容量就几十G,不断往里面塞东西的话,很快就会塞满,尤其是视频。所以在凑够一定集数之后,我就把它们刻录成光盘保存。班上几个感情比较好的同学也问我借这些光盘,拷回家里看(我成非法传播了)。

此外,我还开办了高达主题的网站和论坛,它们随着《高达SEED》的播出而红火,也随着《SEED Destiny》的结束而没落。这里面有我与几位网友的努力及不舍,因此论坛代码以及数据库,我都还保留着。

BBS.GundamGene.Net

看到《高达SEED》要出高清重制版的消息后,我并没有非常激动,不就是宽屏化、高清化,酒瓶换新装而已嘛。然而,看了第一集之后,虽然还是那样的剧情,还是差不多的画面,时隔9年,仍然觉得精彩。与之相比,同期播出的《高达AGE》简直弱爆了。

工作经历(二)——网易上篇

  • 分类:其他
  • 浏览次数:481
  • 评论次数:8

动网先锋篇中提到,由于各种原因,我并没有回到动网公司工作。后来,我在BlueIdea论坛看到网易招页面工程师的贴子,投简历后没多久就接到面试通知。 第一轮是技术面,跟美术总监以及前端主管聊了一会儿,过程非常简短;第二轮是HR面,其实也就是形式上过一下。之后没多久就接到主管电话,让我注册一个网易泡泡帐号,然后把我拉进前端组的泡泡群。不过正式入职还要等老板签字后,由HR通知。

这一等就是一个月, 刚好把毕业设计也做完了。当时前端组隶属美术中心,仅负责HTML+CSS页面制作。至于我的职位,既不是前端工程师也不是页面工程师更不是JS工程师, 而是美术编辑。工作方面,就是不断重复接工作单、做页面、提交这个过程。虽然可以提高技能水平,不过做的页面比较零散,没什么成就感。然而,没过多久,部门就重组了,主要变化是:

  • 前端组从美术中心划归技术中心。
  • 原技术中心的Flash组、模版组合并到前端组。

时至今日,还有人讨论前端应该隶属设计部门还是技术部门,站在自己的角度,我更偏向于后者。为什么呢?因为,我跟技术同事有更多的共同语言

部门重组之后,前端组的工作从HTML、CSS扩展到Javascript、Flash以及Velocity模版。其它还好,只有Javascript一直没有专门的团队或人员负责,属于空白领域。而且,我们很快就要迎接一件大事——奥运。起初

  1. 上一页
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. ...
  10. 11
  11. 下一页