WEB前端开发

21CN网站（世纪龙信息网络有限责任公司）成立于1999年，是中国电信集团的全资子公司，中国十大门户之一，也是华南最大的门户网站。

注：以下岗位招聘长期有效

职位1、前端开发工程师
职位要求：

1. 熟练编写结构良好的语义化的(X)HTML和浏览器兼容的CSS
2. 熟练使用javascript，编写高性能的javascript代码，了解ajax技术原理
3. 熟悉页面性能的优化，能解决各种浏览器的兼容问题
4. 有后端技术基础(.net,java,php等)，并有项目经验
5. 能够深入理解后端架构，与后端工程师配合，为项目提供最优化的技术解决方案

=====================华丽的分割线===============

职位2、页面重构工程师
职位要求：

1. 精通(X)HTML，CSS， 能编写结构良好兼容各浏览器的CSS，语义化的符合W3C标准的HTML
2. 熟练使用PS，FW等切图工具，能快速实现页面高保真原型
3. 了解SEO、用户体验；逻辑分析能力强，有良好的团队合作精神
4. 有javascript基础，能进行常规web效果开发的优先考虑

=====================华丽的分割线===============

职位3、html5产品研发工程师
职位要求：

1. 1年以上WEBAPP开发经验或2年以上前端开发经验
2. 精通JavaScript、html5语言，对JavaScript高性能程序开发有一定的认识
3. 有android客户端（native+WEBAPP混合开发）项目开发经验优先

=====================华丽的分割线===============

职位4、体验设计师
职位要求：

1. 负责产品的用户研究，分析用户的使用习惯、情感和体验需求
2. 负责原型/产品用户体验评估工作，参与产品的交互界面的设计，分析影响产品用户体验的因素
3. 定期开展用户测试，观察用户使用产品的情况，评估可用性水平，并协调相关合作团队及时提升产品体验
4. 收集和采集客户对于网站产品使用的反馈，借助适当的技术提升客户体验

=====================华丽的分割线===============

职位5、高级设计师
职位要求：

1. 有丰富的设计理论知识和对流行趋势敏锐的洞察力，对GUI设计趋势有灵敏触觉和领悟能力，推动团队的设计能力
2. 有多年网页设计经验，对视觉设计的方法和理念有独到的见解
3. 对互联网产品可用性有深入的认识，对用户体验方面的理论有深刻的理解，能够为产品提供切实可行的视觉改进方案
4. 有着宽广的设计观和国际化的设计眼光，对设计流行趋势有敏锐的把握
5. 有良好的设计能力和创新意识，能独立完成项目的设计

薪酬：面议，具体视本人能力而定

公司地址：广州市天河区龙口中路211号华天国际大厦东苑首层

联系方式：020-85115377  蔡生

简历投递：cailx[at]corp.21cn.com，（将“[at]”替换成“@”）标题请注名：“应聘【职位名称】_姓名”，请附上个人作品或网址

闲着无聊看了jQuery event部分的代码，发现一个小惊喜，嘿嘿，可能我奥特曼了。以下一jQuery 1.4.4版本说事，更高级版本稍有不同，但是关系不大。

jQuery 在元素上绑定事件的时候，会在该元素上添加一个自定义属性“events”，这个属性包含了通过jQuery绑定事件的事件集合，例如：
这样一个元素：

<a id="bind" href="#">这是一个绑定了事件的元素(bind)</a>

我在这个元素上绑定两个click事件，一个采用“bind”，一个直接用“click”：

$("#bind").bind("click.hello",function(event){
event.preventDefault();
console.log("bind");
});
$("#bind").click(function(event){
event.preventDefault();
console.log("bind1");
});
var $events = $("#bind").data("events");
console.log($events);

打印出来的结果如下，

这样我们就可以做很多事情，比如事件的命名，自定义事件，判断元素上是否绑定了jQuery事件等等，

经进一步的测试发现了几点情况：

1. live事件绑定的元素上没有“events”自定义属性；
2. hover这种扩展事件绑定的元素上有“events”自定义属性，事件的类型包括mouseenter,mouseleave,mouseout,mouseover，jQuery 1.7事件类型略有不同；
3. delegate事件绑定的元素上有“events”自定义属性，事件属性中有“live”；

好多有意思的东东，还是继续再看jQuery源码吧

以前也写过类似的实现方案《用css的border属性实现三角》、《Tip中小三角的实现》。两种方法都是类似的方法：

• 利用 border 来实现2个三角形
• 将三角形叠在一起，实现一个类似的效果。

今天在小鱼的博客上看到了据说的终极方案。貌似很强大的样子，推荐一下，实现原理是这样的：

• 创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
• 利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案

例子HTML：

<div class="tips">
	<div class="tips-text">
		Lorem ipsum dolor sit amet.
	</div>
	<div class="tips-top diamond"></div>
</div>

CSS代码：

.diamond{
    	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
    	filter: progid:DXImageTransform.Microsoft.Matrix(
    		M11=0.7071067811865475,
    		M12=-0.7071067811865477,
    		M21=0.7071067811865477,
    		M22=0.7071067811865475,
    		SizingMethod='auto expand'
    	);
    	-moz-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	-webkit-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	transform:rotate(45deg);

    	}
    	:root .diamond{filter:none\9;}/*ie9 hack*/

    	.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    	.tips-top{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;_top:-7px;left:10px;}

具体的效果可以看：http://www.css88.com/demo/tipbox/index1.html

前段时间准备学php，学些后端的基本知识，以促进前端开发，所以买了一本《PHP和MySQL Web开发》，今天翻了几页，试了一下代码，第一个问题就来了

问题：echo date(‘o-m-j H:i’); 输出结果与本地时间相差8小时。一看就知道我们神州大地是在东八区，时区错了。

两种解决方法:

1.加入date_default_timezone_set(‘PRC’);//手册上说这个是PHP5.1后才有的

2. 修改php.ini
   [Date]
; Defines the default timezone used by the date functions
date.timezone = PRC 注:PRC为中化人民共和国

相关参考如下：

bool date_default_timezone_set ( string timezone_identifier )

说明

参数

返回值

本函数永远返回 TRUE（即使 timezone_identifier 参数不合法）。

看andy 的《PM如何突破工程师心防?》和《工程师如何不被PM欺负》感触了一下，欢迎拍砖，讨论。

从团队角度说产品经理和开发工程师应该是一条战线上的兄弟，因为大家的目标是一致的。无论是产品经理和开发工程师大家都想把产品和项目做好，这里我们可以说：“志同”。

但是产品经理和开发工程师因为在产品开发过程中所扮演的角色和工作内容不同，而且可能相互不了解工作内容，期间会有很多沟通的成本，沟通不是说话，而是改变行动。真正的沟通者关注沟通的效果。在沟通时，重要的不是你说了什么，而是对方理解了什么，所以对方的反馈非常重要。往往很多产品经理和开发工程师的沟通会出现“驴头不对马嘴”大家相互听不懂的情况，甚至会导致小摩擦，这时我们说：“道不合”。

“道不同不相为谋”，必定导致意见不一，甚至带来工作上心情不愉快的影响。不管是产品经理和开发工程师哪一方强势，或者在“交战”过程中哪一方“得胜”，势必会给另一方造成消极影响，甚至颓废。导致的结果总会是这个产品或者性能，或者其他方面总是会有不尽人意的地方。项目结束，考核绩效或者项目总结的时候又会把责任推到对方身上，接下来就是大家相互抱怨，指责。然后产品改进时又是下一轮的“战争”；长此以往，造成的影响不是产品做不好，不是主要的后果，这个产品做不好，我们可以改进，可以做下一个产品。最严重的后果是，团队分崩离析，一盘散沙，没有凝聚力。没有凝聚力的团队是绝对没有战斗力的，是绝对做不出好的产品的。这对团队和公司来说是致命的。

虽然很多人都明白这些，然而，这样的“战斗”或者产品经理和开发工程师的矛盾却时时刻刻在发生！大家可以看看知乎上两个问答：

1.《产品经理最讨厌开发人员的哪些臭毛病？》 http://www.zhihu.com/question/19629183
2.《开发人员最讨厌产品经理的哪些臭毛病？》 http://www.zhihu.com/question/19628273

如何解决这些问题，请看andy 的《PM如何突破工程师心防?》和《工程师如何不被PM欺负》，虽然在实际的过程中你未必能做到，但是至少我们可以从中得到一些启示。

=================================================

PM如何突破工程师心防?

转自：http://www.kuobrothers.com/article-125.htm

PM常常遇到一个难题，就是有好多东西想要做，到无奈什么事都得透过工程师，没办法自己动手，于是因为和工程师不太美好的关系，最后实际的产品都没有设计时看起来好。我这边讲的是「网路公司」的状态，PM泛指那些规划出产品的人。其他产业也许也有类似情形，以下这些「教战手则」，提供给正在摸索自己生存之道的PM一些参考。

1. 先弄清什么做得出来、什么做不出来:

常常有PM会提出一些天马行空的idea，以致有时候让工程师觉得合作起来相当吃力。这是由于并不知道什么可以做什么不能做。以网站来说，这其实很容易知道，不需要太多的学习和知识。如果有一个功能，你在两、三个网站都看得到，99%它是做得出来的。例如你想要有一个页面，填地址时选完「县市」，下一个选单就会载入你选的这个县市的行政区。如果你做些功课，就可以发现这样的表单在很多网站都出现过。那99%就是做得出来。如果你想出一种呈现的方式，从来没在任何地看过，那就比较有可能是做不出来的。在对工程师沟通时，假如你想做一个像这种选「县市」的下拉选单，你最好请工程师去看别人的那个网页，而不是用你自己的方式描述。工程师通常有不想输的性格，如果别的网站做得出来，他不会想要自己做不出来。 继续阅读：产品经理和开发工程师的“功与防”»

抽空翻译了一下jquery imgareaselect 插件中文文档。主要的一些参数和方法说明都有了，主要是后期项目中肯能会使用这个插件，翻译出来供大家查阅，欢迎斧正错误！

mgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能，以及其他功能，如照片标记、 图像编辑功能，等等。

文档模板套用了Twitter Bootstrap的文档模板，PS：中文真难看，悲剧啊。

jquery imgareaselect 插件中文文档地址：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

ECMAScript中的所有的类都由Object类继承而来,Object类中的所有属性和方法都会出现在其他类中。这里介绍几个Object类相关的属性，方法和操作符；

1.Prototype属性
Prototype — 通过构造函数而创建的对象实例的原型对象.所有的类,默认返回 Object 对象的一个实例，原型对象可以让所有的对象实例共享它的属性和方法。例子见下面几个例子。

2.constructor属性
一个函数创建的时候就会js引擎就会自动为这个函数创建一个prototype属性，默认情况下，prototype属性会自动获取一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针，也就是构造函数。

例如：

function Person(name,age){
        this.name = name;
        this.age=age;
        this.sayName=function(){
            console.log(this.name);
        }
    }
    var person1=new Person("码头",31);
    console.log(person1.constructor==Person);  //true
    console.log(person1.constructor==Object);  //false

还有一种特殊情况：

function Person(name,age){
        this.name = name;
        this.age=age;

    }
    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    };
    var person1=new Person("码头",31);
    console.log(person1.constructor==Person);  //false
    console.log(person1.constructor==Object);  //true

这里Person.prototype={}的写法完全重写了Person的prototype属性，所以 prototype中原先的constructor也变成了新对象的constructor，因为“{}”相对于new Object(); 指向Object构造函数

3.instanceof操作符
instanceof操作符用于检查指定对象是否为特地对象的实例。例如：

function Person(name,age){
        this.name = name;
        this.age=age;
        this.sayName=function(){
            console.log(this.name);
        }
    }
    var person1=new Person("码头",31);
    console.log(person1 instanceof Person);  //true
    console.log(person1 instanceof Object);  //true
    console.log(person1 instanceof Function);  //false

4.in操作符
in 操作符会在通过对象能够访问给定属性时返回true，即只要是对象的属性，不管来自实例的还是来自原型的，都将返回true。例如

function Person(name,age){
        this.name = name;
        this.age=age;
    }
    Person.prototype={
        sex:"man",
        sayName:function(){
            console.log(this.name);
        }
    };
    var person1=new Person("码头",31);
    var person2=new Person("愚人码头",31);
    person1.name = "feiwen8772" ;
    //person1.sayName();
    console.log("name" in person1);  //true 来自实例
    console.log("name" in person2);  //true 来自实例
    console.log("sex" in person2);   //true 来自原型

5.isPrototypeOf()
isPrototypeOf函数方法是返回一个布尔值，指出对象是否存在于给定对象的原型链中。

    function Person(name,age){
        this.name = name;
        this.age=age;
    }
    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    };
    var person1=new Person("码头",31);
    console.log(Person.prototype.isPrototypeOf(person1));  //true

6.hasOwnPrototype()
hasOwnPrototype()方法可以检测一个属性是否存在于对象实例中。

    function Person(name,age){
        this.name = name;
        this.age=age;
    }
    Person.prototype={
        sex:"man",
        sayName:function(){
            console.log(this.name);
        }
    };
    var person1=new Person("码头",31);
    var person2=new Person("愚人码头",31);
    person1.name = "feiwen8772" ;
    //person1.sayName();
    console.log(person1.hasOwnProperty("name"));  //true 来自实例
    console.log(person2.hasOwnProperty("name"));  //true 来自实例
    console.log(person2.hasOwnProperty("sex"));   //false 来自原型

还有其他几个方法和属性就不一一列举了。欢迎斧正，补充！

用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻，貌似现在很多库都支持了方法的链式调用,比如YUI3等。链式调用是一个非常不错的语法特性，能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量。今天有人在群里说起javascript链式调用，写了几个简单的实现方式共大家参考一下：
一般我们我用函数构造一个类，例如：

var function Dog(name,age){
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
        },
        getAge:function(){
            console.log(this.age);
        }
    };

定义一个Dog类，并具备几个简单的方法

    var dog1= new Dog("旺旺",3);
    dog1.getName();
    dog1.getAge();

实例化，并且调用方法。

要实现链式调用是非常简单的事情，唯一需要做的就是在每个方法后面返回this。例如：

var Dog=function(name,age){
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this;
        },
        getAge:function(){
            console.log(this.age);
            return this;
        }
    };

    var dog1= new Dog("旺旺",3);
    dog1.getName().getAge();

上面的代码可以看出，Dog方法上多了一段代码：return this;
细心一点你会发现这里dog1实例前还需要一个new初始化，还是有点不方便。在改进一下：

var Dog=function(name,age){
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this;
        },
        getAge:function(){
            console.log(this.age);
            return this;
        }
    };
    window.Dogs=function(name,age){
        return new Dog(name,age);
    };
    Dogs("旺旺",3).getName().getAge();

这里在window下定义一个Dogs方法，作为Dog的别名，这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了，这样有两个全局变量变量Dog和Dogs，在改进一下：

var Dog=function(name,age){
        if(!(this instanceof Dog)){
            return new Dog(name,age);
        }
        this.name = name;
        this.age = age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this;
        },
        getAge:function(){
            console.log(this.age);
            return this;
        }
    };
    Dog("旺旺",3).getName().getAge();

这里在构造函数中加了这么一句：

if(!(this instanceof Dog)){
     return new Dog(name,age);
}

判断this是否为Dog实例，如果不是就创建一个新实例。

更为安全代码：

(function(){
        var Dog=function(name,age){
            if(!(this instanceof Dog)){
                return new Dog(name,age);
            }
            this.name = name;
            this.age = age;
        };
        Dog.prototype={
            getName:function(){
                console.log(this.name);
                return this;
            },
            getAge:function(){
                console.log(this.age);
                return this;
            }
        };
        return (window.Dog=Dog);
    })();
    Dog("旺旺",3).getName().getAge();

或者：

(function(){
        var Dog=function(name,age){
            this.name = name;
            this.age = age;
        };
        Dog.prototype={
            getName:function(){
                console.log(this.name);
                return this;
            },
            getAge:function(){
                console.log(this.age);
                return this;
            }
        };
        window.Dogs=function(name,age){
            return new Dog(name,age);
        };
    })();

    Dogs("旺旺",3).getName().getAge();

希望对新手有所帮助，如有不对之处欢迎留言拍砖斧正！

上海衡怡智能科技有限公司招聘前端开发工程师

公司主要开发的产品是在线理财社区，理财圈 http://www.licaiq.com

工作经验：1年

最低学历：本科

工作性质：全职
招聘人数：1人

岗位职责：
网站前端页面制作及交互开发。

任职资格:
1. 精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。
2. 精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。
3. 对常见的浏览器兼容问题有清晰的理解，并能给出可靠的解决方案。
4. 熟练使用JavaScript,有主流Ajax框架的使用经验，如jQuery。
5. 对用户体验、交互操作流程、及用户需求有一定了解。
6. 能与团队成员保持良好沟通，能快速理解、消化各种需求，并落实为具体的开发工作。
7. 对前端技术的发展趋势保持关注，能不断学习业界最新技术,喜欢创新，愿意不断尝试新方法。
8. 有PhotoShop使用经验者优先，参与过社区类网站开发者优先，有理财经验者优先。

将简历发送至: su.liu[a]uintec.com （将“[a]”换成@）

薪资范围：6-7k，下半年开始设计期权

工作地点：上海市浦东新区张衡路500号 张江高科技园区 左右城A座405室

联系方式：Su(理财圈产品经理)，QQ: 6109851，邮箱: su.liu[a]uintec.com

电弧：021-38681128

帮公司招兵买马了！大家都知道我们搜道网是做美女网站。。。你懂的！

搜道网隶属浙江搜道网络技术有限公司，是中国真实美女最多的社交网站！公司坐落在杭州北部软件园，目前拥有办公面积1200平方米，两年来公司定位于”整合全国美女资源，做中国真实美女最多的社交网站，提供基于位置的社交服务。” 2011年完成了杭州、青岛、合肥三个城市的复制，有5万美女参加搜道美女时钟街拍，成为搜道美女会员。2011年4月份以来已经有北京、南京、成都、重庆、郑州、石家庄、开封、苏州、潍坊、长沙等全国30个城市加盟搜道，启动搜道美女时钟街拍，每天都有无数的美女汇集搜道美女时钟频道。公司网站：http://www.sodao.com/

招聘以下岗位：

前端开发工程师

简历发至：feiwen8772[a]qq.com,标题注明“应聘前端开发工程师”

简历请附您的作品或网址。

工作地点：杭州，北部软件园

有任何问题或者咨询欢迎致电：0571-85839566（周） 或者QQ：148246293

更多搜道网招聘：http://www.sodao.com/about/joinus