工作经历(五)——56网下篇

工作生活  |  14天前

写好《上篇》并分享到微信朋友圈后,反响热烈。为了感谢大家的支持,我又很快地写好了下篇。下篇主要讲一下技术工作以外的事情。

公司特点

要说56网跟其他IT公司的区别,有以下这些:

  • 很少加班。平时下班后一小时内,公司大部分位置都空了;周末基本上只有客服在。
  • 妹子比例高。产品、运营大部分为妹子,后来测试组也全是妹子,男女搭配,干活不累。
  • 员工回流。虽然人数不多,但确实有几例已离职员工隔了一段时间又重新入职的情况,这在我以前工作过的公司里几乎没有听过。
156次阅读,3条评论

工作经历(五)——56网上篇

工作生活  |  15天前

在奔步公司萌生了辞职的念头后,我先后去了56网和酷狗面试,前者是通过内部推荐,后者则是猎头介绍。虽然酷狗给的待遇要更高一些,但无论是技术面还是HR面,56网要更加专业,所以我最终选择了56网。

初来乍到

第一天到公司报到,发现这里有不少原网易员工,其中一位设计师还曾经是网易以及3G门户的同事。当然,创始人更是网易创业帮的一员。

上了几天班后,基本上搞清楚了这边Web开发的概况。其中JS出现了职责分裂:前端主要负责UI方面的逻辑,后端PHP会编写一些数据加载、提交方面的逻辑。Web主管和前端主管有意把JS完全纳入前端工作范围,所以需要一个领头的人搭建架构规范代码指导开发,这也就是我的主要任务了。

195次阅读,3条评论

Javascript动画实现原理

前端开发  |  1个月前

假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的:

<div id="test1" style="width: 100px; height: 100px; background: blue; color: white;"></div>
function animate1(element, endValue, duration) {
	var startTime = new Date(),
		startValue = parseInt(element.style.width),
		step = 1;
	
	var timerId = setInterval(function() {
		var nextValue = parseInt(element.style.width) + step;
		element.style.width = nextValue + 'px';
		if (nextValue >= endValue) {
			clearInterval(timerId);
			// 显示动画耗时
			element.innerHTML = new Date - startTime;
		}
	}, duration / (endValue - startValue) * step);
}

animate1(document.getElementById('test1'), 200, 1000);

原理是每隔一定时间增加1px,一直到200px为止。然而,动画结束后显示的耗时却不止1s(一般是1.5s左右)。究其原因,是因为setInterval并不能严格保证执行间隔

7707次阅读,0条评论

Micro-Templating性能优化

前端开发  |  1个月前

这篇文章中,我简单介绍了前端模板引擎。John Resig写的tmpl函数麻雀虽小五脏俱全,足以满足日常开发需要。本文主要探讨一下tmpl的性能优化。

先复习一下tmpl的源代码:

var tmpl = (function() {
	var cache = { };

	return function(str, data) {
		var fn = cache[str];
		if (!fn) {
			fn = new Function("obj",
				"var p=[];" +
				"with(obj){p.push('" +
				str
					.replace(/[\r\t\n]/g, " ")
					.split("<%").join("\t")
					.replace(/((^|%>)[^\t]*)'/g, "$1\r")
					.replace(/\t=(.*?)%>/g, "',$1,'")
					.split("\t").join("');")
					.split("%>").join("p.push('")
					.split("\r").join("\\'")
				+ "');}return p.join('');"
			);
			cache[str] = fn;
		}

		return fn(data);
	};
})();
41次阅读,1条评论

iisnode折腾记

Node.js开发  |  1个月前

今年年初打算用Node.js基于Express框架重写博客程序,从此告别ASP.NET。然而,我目前用的VPS是Windows Server系统、IIS服务器,如果让Express和IIS都监听80端口,明显会产生冲突。幸好,有一个叫做iisnode的扩展可以把Node.js程序托管到IIS。而且,这样托管之后也意味着可以使用IIS里面的各种功能(进程管理、GZip压缩、日志、缓存、权限控制、域名绑定等)。

要使用iisnode,得安装:

装好之后,还是按照常规操作,在IIS管理器中创建站点,指向Express程序的目录,关键是还要增加一个web.config文件:

<configuration>
	<system.webServer>
		<handlers>
			<add name="iisnode" path="bin/www" verb="*" modules="iisnode" resourceType="Unspecified" requireAccess="Script" />
		</handlers>

		<rewrite>
			<rules>
				<rule name="all">
					<match url="/*" />
					<action type="Rewrite" url="bin/www" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>
33次阅读,0条评论

ECMAScript 5中的属性描述符

前端开发  |  7个月前

属性描述符是ES5中新增的概念,其作用是给对象的属性增加更多的控制。

Object.defineProperty

要研究属性描述符,首先要谈谈 Object.defineProperty 方法。这个方法的作用是给对象定义新属性或修改已存在的属性。其原型如下:

Object.defineProperty(obj, prop, descriptor)

使用示例:

var obj = { };
Object.defineProperty(obj, 'attr', { value: 1 });
149次阅读,0条评论

工作经历(四)——奔步

工作生活  |  9个月前

当初在3G门户离职时,我还没有找到下家公司,甚至是还没开始找(因为不想一边上班一边找工作)。后来去了几家公司面试,待遇和工作内容都不太理想,奔步算是稍微好一点的,但还是没达到我的期望。考虑到HR说转正之后还有加薪机会(事实上,转正之后并没有调薪,算是被坑了一把),而且暂时也没有更好的选择了,所以就勉勉强强把自己卖了。

严格来说,奔步不属于互联网公司而是外包公司。公司业务分为两大块——设计外包(包装盒、海报之类)和技术外包(企业内部系统之类),分别由奔步广告设计有限公司和奔步电脑有限公司负责。而我和另外一位PHP工程师被安排在广告设计公司负责技术开发工作,主要原因是接的单来自广告设计公司的客户。

336次阅读,2条评论

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

前端开发  |  11个月前

所谓的数字千分位形式,即从个位数起,每三位之间加一个逗号。例如“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('');
}
300次阅读,2条评论

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

前端开发  |  1年前

表单提交到动态创建的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>
634次阅读,1条评论

通过WebRTC获取摄像头影像

前端开发  |  1年前

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

获取摄像头影像

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

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

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

getUserMedia支持情况

1961次阅读,3条评论