WEB前端开发

携程前端团队招聘以下职位：js前端设计师 – js资深前端设计师 – 网站重构设计师 – 资深网站重构设计师 – 资深视觉设计师

js前端设计师

• 专科以上学历
• 对前端开发有激情和兴趣，喜欢钻研
• 有团队合作经验，具备较好的沟通能力
• 需附带作品链接

必要技能：

• 能熟练手写JS代码；
• 能保证代码的高效执行，有数据结构基础；
• 能保证js代码的浏览器兼容性；
• 熟悉css,以及xhtml；
• 富有创造力，用不凡的创意和灵感提升界面操作效率，改善界面可用性；

优先考虑：

• 有jsframework书写经验者优先；
• 有php基础优先；
• 有mysql或mssql基础优先；
• 有cs端开发经验优先；
• 了解一种jsframework(jquery,prototype等)；
• .net界面控件编写；
• ajax或者其它dhtml技术；
• css3.0, xhtml2, xml, dom level3，javascript1.7；
• 表现形式和数据结构分离的原理，mvc架构和各种层次分离结构；
• metaprogramming或函数化编程； 继续阅读：[上海]携程前端开发团队招聘信息»

[杭州]StarNavig创业团队招募前端开发

我们是一个创业团队；

我们没有明星队员；

我们没有眩目的履历和光环；

我们没有指点江山的专家和颐指气使的BOSS；

我们有一个明确的目标；

我们富有激情；

我们是一群富有实干精神的偏执狂；

我们有一个不错的机会和相对丰厚的待遇；

我们还缺像你一样肯扎实干的优秀人才；

我们期待你的加入！

[职位说明]

要求：熟练掌握JavaScript、HTML、CSS、Ajax，熟悉HTML5、jQuery框架者优先。

薪资：面议（包吃住）

[联系方式]
Tel:    0571-89053575  或者 15358850983

Email: webmaster[a]starnavig.com （可投递作品）

前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图：

注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！

demo页面：http://www.css88.com/demo/tipbox/

公司简介：城市交通信息相关产品（包括网站）开发。为全国各大城市提供交通路况、实时分析软件产品

岗位职责：从事交通信息Web产品及本公司网站的研发

任职要求：

1. 两年以上html+css+js开发经验，深入理解html、css、js、ajax

2. 熟练掌握jquery等js库的其中一项

3. 掌握photoshop基本用法

4. 大专以上学历

优先考虑：

1. 有网站作品，设计感好

2. 有技术洁癖或伪技术洁癖

3. 喜欢整洁代码，喜欢用文本编写程序

4. 喜欢研究Web相关开发知识

待遇：年新8w+，多少视能力而定。

简历发至：job@tsnav.cn 标题注明“应聘Web前端开发工程师”

工作地点：北京市朝阳区 北辰融富中心B座2507 （距离天通苑、北苑、回龙观比较近）

交通方式：城铁5号线北苑路北站，快3天乐园小区站，758、751、803、836北苑北站

HTML5和CSS3逐渐成为WEB前端开发的必须技能，开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素：

function SUP_canvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};

是否支持WebGL：

function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

还有很多html5和css3其他属性…，值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的标 签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，MODERNIZR就会 在标签上添加video类，否则，添加no-video类。

最新的Modernizr是2.0.6版本的，如果你下载开发（development）版本，给我们提供全部的内容，如果要下载production版本的modernizr，我们会发现，我们可以根据自己的需要进行订制。在其下载页面上，我们选择自己所需的HTML和CSS特性，然后生成一个javascript文件。这么做会极大程度上减少冗余代码，减少不必要的检测，对web前端这个很看重用户体验的地方，性能就是一点一点压出来的。

使用Modernizr也非常简单，只要而且必须在标签里应用就可以了，无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里，最好放在css声明之后，因为HTML5 Shiv（用以在IE中启用HTML元素）必须在之前执行，而且要使用modernizr添加的class，需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态，如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类，从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况，以“no-”开头的，就是这个浏览器不支持的特性：

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异，比如,如果不支持标签，那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样，我们也可以在JavaScript利用这些特性检测的结果，代码：

if(Modernizr.canvas){
//开始画图啦！

}else{
alert("fuck!");
}

Modernizr 2还提供了一种load机制，方便代码管理，比如：

Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : 'canvas.js',//如果支持标签及相应的属性那么加载canvas.js，
nope: 'no-canvas.js'//如果不支持标签及相应的属性那么加载no-canvas.js，
});

如果直接用的是development版本的modernizr，你会发现，根本就没有Modernizr.load，因为它是作为一个单独文件发布的：yepnope.js。而在production版本，我们选择将其包含在modernizr里。

官方网址：http://www.modernizr.com/

近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。

国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。

优点：

• 按需加载
• 无阻塞加载
• 依赖关系管理
• 颗粒化模块管理

如何使用？

A.引入In.js

<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可，这里有两个参数需要注意：

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址，并将它们加入到队列中去（仅仅是加入队列，并没有加载到页面中去）。

C.加载队列In(queue)

var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块，加载完后执行functionA和functionB，在此假设引入in.js时设置了autoload=true，那么队列中的加载顺序依次为：

jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后，demo会被赋值为一个数组，其中存放的是每个function的返回值：

demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)

In.ready('mod-b',function() {
	//do something
});

队列加载顺序：

jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点：

1. In.ready()中的队列只有在domReady之后才会执行
2. In.ready()没有返回值

E.监听变量变化，值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载，所以有时候为了特殊需求（比如后续的操作依赖队列中function的返回值），我们需要在确保队列执行完成后，再执行后续操作。这种情况下，可以用In.watch()监听return.complete变量，当return.complete==true的时候执行回调函数，代码如下：

var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些，它的可靠性也已经在几个大项目中得到了印证，除此之外，In也有智能的提示，比如如果用In()加载一个事先未声明的模块，就会提示你检查模块名。真心的希望有更多的前端朋友关注In，使用In，甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册：

在哪下载？

In.js是一个开源的项目，你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai （腾讯微博 / Twitter / Google+ / Blog）
Email/Gtalk: badkaikai@gmail.com

web前端工程师
工作地点：北京

工作经验：3-5年

招聘人数：5人

职位月薪：4001-8000元/月

任务：开发本公司旗下网站基于web应用平台
岗位要求：
1、大专以上学历，2年工作经验；
2、能把握网站整体架构和网站风格，理解公司企业文化并深入了解网站，能够将自己融入到网站中，不断发掘并创新、完善；
3、利用(X)HTML/CSS/JavaScript/DOM等各种Web技术进行网站/产品的界面开发。

职位描述：
1、熟练使用Photoshop/fireworks等设计软件进行切图。
2、精通各种Web前端技术，掌握XHTML/CSS/JavaScript代码，兼容主流浏览器，有相关经验；
3、高度的责任感，勤奋敬业、能吃苦耐劳；做事极积主动、认真细心；工作效率高。有较好的团队合作意识，能承受工作压力。
4、有设计作品优先考虑。
应聘者需提供相关网页（html,css）作品。

本职位提供行业突出的工资待遇和股票期权。

****************************************************************************

asp.net程序工程师
工作地点：北京

工作经验：3-5年

招聘人数：5人

职位月薪：4001-8000元/月

悉.NET环境下开发各种类型网站。了解ASP.NET MVC2,能独立开发网站
必备技术知识：XHTML，CSS，Ajax， Javascript， Jquery， C#，MSSQL2005
会熟练使用Silverlight的优先。了解CSS3 和HTML5优先

任务：开发本公司旗下网站基于web应用平台
岗位职责：
1、所有开发类项目的设计、开发；
2、线上系统代码级维护；
3、书写数据库设计文档；
4、书写详细设计文档；
5、设计重构、性能优化；
6、提供技术支持、技术咨询服务。
任职要求：
1、熟练运用微软C#语言，熟悉ASP.Net网站或应用程序开发平台和编程工具，JAVASCRIPT/C#等；
2、熟悉微软SQL SERVER平台，有相应的数据库环境开发工作经验；
3、熟悉一般熟悉网站运营流程、有大型网站、MIS及电子商务系统开发经验者优先；
4、较强的沟通和学习能力，能够胜任有压力的工作。

****************************************************************************

北京鼎盛天下科技开发有限公司

公司网址：http://www.jituan.net/ http://www.7551.com.cn
联系人：管小姐
电话：13240976282
传真：010-67504759
E-amil：hr@7551.com
地址：北京丰台区北甲地路10号2-26D

云计算是 IBM 极为重要的战略方向，也是全球几乎所有IT企业都在极力抢占的技术和市场制高点。

我们正在 IBM 中国系统与科技研发实验室(CSTL)组建一个大规模的团队，负责 IBM 基础架构云计算平台(IBM Cloud Foundation)的研发。IBM Cloud Foundation 将广泛支持 Power 服务器, X86 架构服务器，刀片服务器，存储设备和网络设备，广泛支持业界主流的虚拟化平台，帮助企业客户快速将 IT 基础设施建设成为基础架构即服务的云计算模式，提供虚拟化计算池，存储池，按需获取计算资源，按需获取存储资源，自动化快速部署，自助服务，按使用量计费，工作负载优化，高并发高可用等重要功能, 我们期待能够真正实现将计算，网络，存储变成像水和电一样的公共基础设施。

我们的团队将全面负责 IBM Foundation 的架构设计, 开发工作以及测试工作。 在后台研发的同时，我们将与IBM的售前、咨询、服务团队紧密合作，直接参与许多国内外大型企业的云计算基础架构的咨询，规划和建设。同时，我们还在和几十家国内著名的软件公司紧密合作，共同打造基于 IBM Cloud Foundation 开发云计算解决方案的生态系统，和程序员杂志 CSDN 共同建设 IBM 云计算开发社区(http://dragoncloud.csdn.net/)。基于 IBM Cloud Foundation的 CloudStarter 云计算解决方案已经在国内外数家大型电信运营商和银行投入使用。

云计算时代刚刚起步，还有大量的富有挑战的工作等待我们去完成，我们虚位以待，期待你辉煌的职业生涯与辉煌的云计算时代一起成长！

职位信息如下：
****************************************************************************
UI(Javascript) Developer for IBM Cloud Foundation

Hire No: 3-5
Level: Band 6 – Band 8

Skill Requirements:
- Good programming skills in Javascript/HTML/CSS.
- Good knowledge on Javascript Framework,such as jQuery/Ext/YUI.
- Good trouble shooting skills
- Excellent communication skills and excellent team player
- Fluent English
- Good knowledge on DOJO is big plus
- Good knowledge on Java is big plus

Other requirement
-应届毕业生计算机相关专业硕士以上学历；
-社招，计算机相关专业本科以上学历，工作2年以上；
-工作地点：北京；
起薪是10k/m；

Please send your resume to qintj@cn.ibm.com

****************************************************************************

PS.

满足条件的前端工程师还是蛮有竞争力的 这是非常非常缺人的岗位：）
而且也不会像互联网那样为上线产品通宵=。=

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

查看demo：http://www.css88.com/demo/isParent/index1.html

感谢 留痕 网友提交的bug，bug主要原因是我忽视了多个广告轮播和样式重名的问题；经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播，焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

这次这个插件主要解决了两个问题:

1.当焦点图只有一张的时候不滚动；

2.当鼠标经过右下角图片选择的控制点上加了延时，避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码：

/**
 * @author 愚人码头
 * User: feiwen
 * Date: 11-7-11
 * Time: 下午4:30
 * Settings:{
 *     speed:滚动速度
 *     timer:滚动的时间间隔
 * }
 */
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer=$(".img-box li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var $selItem=$("<ul></ul>",{
            "class":"flash_item",
            html:function(){
                var $selItemHTML="";
                if(size==1){
                    return;
                }else if(size>1){
                    for(var i=0;i<size ;i++){
                        i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "top": -i * slideH }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

demo演示地址：http://www.css88.com/demo/slide1/