[转载]从 JavaScript 数组去重谈性能优化

杰拉斯 杰拉斯 | 时间:2013-02-06, Wed | 15,250 views
前端开发 

缘由

JavaScript 数组去重经常出现在前端招聘的笔试题里,比如:

有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, '']

作为笔试题,考点有二:

1. 正确。别小看这个考点,考虑到 JavaScript 经常要在浏览器上运行,在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事,不信你继续读完这篇博客。

2. 性能。虽然大部分情况下 JavaScript 语言本身(狭义范畴,不包含 DOM 等延拓)不会导致性能问题,但很不幸这是一道考题,因此面试官们还是会把性能作为一个考点。

在继续往下阅读之前,建议先实现一个自己认为最好的版本。

直觉方案

对于数组去重,只要写过程序的,立刻就能得到第一个解法:

function unique(arr) {
	var ret = []

	for(var i = 0; i < arr.length; i++) {
		var item = arr[i]
		if(ret.indexOf(item) === -1) {
			ret.push(item)
		}
	}

	return ret
}

直觉往往很靠谱,在现代浏览器下,上面这个函数很正确,性能也不错。但前端最大的悲哀也是挑战之处在于,要支持各种运行环境。

(阅读全文…)

[代码收藏]设为首页和加入收藏的JavaScript代码(兼容多浏览器)

杰拉斯 杰拉斯 | 时间:2013-02-04, Mon | 6,178 views
前端开发 

其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已。

加入收藏:

/*
 * author : 2010-12-27 11:33:02 teresa
 * discription: add favorite
 */

function addFavorite() {
	if(document.all) {
		try {
			window.external.addFavorite(window.location.href, document.title);
		} catch(e) {
			alert("加入收藏失败,请使用Ctrl+D进行添加");
		}

	} else if(window.sidebar) {
		window.sidebar.addPanel(document.title, window.location.href, "");
	} else {
		alert("加入收藏失败,请使用Ctrl+D进行添加");
	}
}

设为首页:

/*
 * author : 2010-12-27 11:33:02 teresa
 * discription: set homepage
 */

function setHomepage() {
	if(document.all) {
		document.body.style.behavior = 'url(#default#homepage)';
		document.body.setHomePage(window.location.href);
	} else if(window.sidebar) {
		if(window.netscape) {
			try {
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			} catch(e) {
				alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true");
			}
		}
		var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
		prefs.setCharPref('browser.startup.homepage', window.location.href);
	} else {
		alert('您的浏览器不支持自动自动设置首页, 请使用浏览器菜单手动设置!');
	}
}

Highcharts: 非常漂亮的免费纯JavaScript图表库

杰拉斯 杰拉斯 | 时间:2013-02-01, Fri | 22,327 views
前端开发 

Highcharts是什么?

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。Highcharts

HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。现在官方的最新版本为HighCharts2.3.5。

(阅读全文…)

[前端]浅析外边距折叠(Collapsing Margins)

杰拉斯 杰拉斯 | 时间:2013-01-26, Sat | 10,819 views
前端开发 

我们在学习前端的过程中,有时候会出现一些奇怪的现象,Collapsing Margins便是其中之一,有时候我们想要某个元素离的第一个子元素能够下移一些,于是给它设置了margin-top,但奇怪的是这个margin-top属性却传递给了父元素,导致父元素的位置下移:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
		}
		.parent {
			height: 200px;
			background: #0099ff;
		}
		.child {
			width: 230px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">Child</div>
	</div>
</body>
</html>

这是个BUG吗?为什么各种浏览器都会有这样的“BUG”呢?其实,W3C规范认为margin折叠会使页面布局更加合理,比如两个段落(<p>)之间,段前间距跟段后间距应该只保留最大的一个,而不应该两者相加而导致段落之间间隙过大。下面,我们就来探究一下这个奇怪的Collapsing Margins。

(阅读全文…)