从2001年到2010年,IT从软件走向互联 网,Web从页面走向应用,这正是前端工程师职位从无到有快速成长的十年。在这个激情澎湃创意肆虐的十年,前端工程师们从单兵作战到团队协作,从刀耕火种到精耕细作,从手工作坊到自动流水线的并发处理,处处追求着设计与开发、效率与质量、商业与体验的平衡。在追求中成长,在成长中蜕变。
站在新十年的门槛前回首过去我们发现,绝大部分的前端创新都直接与用户体验相关,绝大部分的前端实现都可以自由看到原码,绝大部分的前端项目都是免费开源,这让前端成果借助于互联网的力量得到最大范围 的共享和最大限度的应用。共享最新成果,共创无限未来,这正是D2要带给你的。
昨天去逛豆瓣小站(“前端攻城师”)发现了豆瓣新上了五指擒魔 有兴趣的可以去看下
之前在使用Google Reader的时候就发现了快捷键来进行操作的方式,对用户体验也是一种提升,现在基本看reader都是用快捷键
今天正好有时间就把豆瓣的实现看了一下 豆瓣团队的分享精神是我一直钦佩的 尤其是kejun 多次听他的演讲都深有感触
拿豆瓣的代码做了一个小Demo 地址是
http://www.iamued.com/demo/hotkey/
很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。
作为前端开发工程师,目前也需要兼容更多的终端 或 做不同的版本去适应不同的终端 现在利用Chrome来模拟手机终端的显示效果吧
谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:
谷歌Android:
chrome.exe –user-agent=”Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1″
苹果Iphone:
chrome.exe –user-agent=”Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10″
诺基亚N97:
chrome.exe –user-agent=”Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124″
更多款手机的User-Agent:http://www.zytrax.com/tech/web/mobile_ids.html
今天帮同事修改一个Tip提示的效果 提示中 需要用到当前元素的几个属性,就帮忙改了改之前的demo
这里是一个局部实现 可以参考
查看临时Demo
实际应用的案例:http://www.iamued.com/demo/simpletip/template/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一个jquery的小模板机制-我是UED</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>
临时Demo的部分代码:
<script type="text/javascript">
function test(){
var testString="价格为{price}元,我是{name}"
alert(testString.replace(/{([^{}]+)}/g,function(word){
var _attr=word.replace(/({|})+/g,"");
return $("#test").attr(_attr);
}));
}
</script>
</body>
</html>
查看临时Demo
实际应用的案例:http://www.iamued.com/demo/simpletip/template/
在java中有private属性,强大的功能js不能实现就矮人一截,匿名函数,发扬广大
匿名函数没有实际名字,也没有指针,怎么执行滴?
其实大家可以看看小括号的意义就应该可以理解。小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把…
关于匿名函数写法,很发散~
//最常见的用法:
(function() {
alert('water');
})();
//当然也可以带参数:
(function(o) {
alert(o);
})('water');
//想用匿名函数的链式调用?很简单:
(function(o) {
alert(o);
return arguments.callee;
})('water')('down');
//常见的匿名函数都知道了,看看不常见的:
~(function(){
alert('water');
})();
//写法有点酷~
void function(){
alert('water');
}();
//据说效率最高~
+function(){
alert('water');
}();
-function(){
alert('water');
}();
~function(){
alert('water');
}();
!function(){
alert('water');
}();
(function(){
alert('water');
}());
//有点强制执行的味道~
Sorry :) 刚才忘记把转载地址附上了
转自:
http://blog.163.com/water_down/blog/static/1702765902010869124093/