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]”替换成“@”）标题请注名：“应聘【职位名称】_姓名”，请附上个人作品或网址

前段时间准备学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

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

公司主要开发的产品是在线理财社区，理财圈 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

最近面试的过程中，碰到了一些关于本地存储的问题，主题也不知道写什么好，就随便写个本地存储。

我问了许多的前端，使用Cookie会有什么弊端，很多都是回答说不安全之类的，不安全那是肯定的，不过只要服务端在使用Cookie的时候适当的加个密就可以防止很多安全的问题了，这不是我们前端主要关心的问题。在日常的开发过程中，本人碰到了以下问题：

1. 存储大小问题
2. 在请求过程中会带过去服务端，这样如果Cookie过大会影响发包。

首先我们看看第一点，一些权威机构对Cookie存放大小是怎么说的
一个域名的每个 cookie 被限制为 4,096 字节。这个总数可以 4 千字节 (KB) 的一个名称-值对的形式存在，或作为多达 20 名称-值对的总的 4 KB。如果计算机没有足够的空间存储该 cookie，该 cookie 将被丢弃。

就是说单个值不得超过4K, 可以多达20个。这样的存储量基本是够用了，不过对于服务器端如果也使用的话就很难说了，因为这里就不单单是前端要用了，还多了一方，这样的数据是不可靠的，你永远无法知道是不是你自己把他给堵满了，或者把你的改了。对于团队开发，使用时有这个必要看看cookie使用的情况。

另外还有一点就是，如果你用一些如Firebug的调试软件抓一下头部你会发现，在网站发送请求（Post）的时候会把cookie也带了过去。这样一看，如果你单cookie有1KB 共有 5 个就 5 KB,  按1M的小水管来算，上传最大就只有50K/S, 就上传就花了 0.1 秒，等服务端返回加处理这样一个过程花的时间就长了许多。对于大访问量的站就更不用说了，一个用户单一个请求上传就花了5KB, 1024个用户就 5M，1024W就是5M*10000，这是多么大的上传宽带开销。

针对以上这两个问题本人觉得可以用以下的解决方案.

支持 localstorage 的浏览器使用 localstorage , 这个本地存储的对象ie8以上的都支持了，Firefox 、Chrome就更不用说了。

对于一些低级一点的浏览器如IE6 IE7 可以用Flash的SharedObject模拟一个本地存储的对象。

这提到的这两个东西都是服务器端不会用到的，所以也不用担心数据被服务端的人给改了。

可以对localstorage  和 Flash的存储进行一个封装，让它使用方便点就可以了。具体怎么样去实现这里就不多说了，提供一些参考资料吧。

http://blog.csdn.net/ld_flex/article/details/6002774

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

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

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

招聘以下岗位：

前端开发工程师

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

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

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

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

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

早些天写过了类的实现，接着我们看看的静态类的实现。这东西在Javascript里用得会非常的频繁，因为针对现在的网页，多个基于同一个类对象的页面不多，往往不同块对象的交互就可以解决问题了，这就需要在JS针对元素定义几个静态类就可以完事了，进入正题。
这次我们直接看例子：

/***定义静态类***/
var Core = {};
Core.StaticClass = (function(){
    var Return = {
        Property: "Test Static Property",    //公有属性
        Method: function(){    //公有方法
            alert(_Field);    //调用私用字段
            privateMethod();    //调用私用方法
        }
    };    //定义返回的公有对象

    var _Field = "Test Static Field";    //私有字段
    var privateMethod = function(){    //私有方法
        alert(Return.Property);    //调用属性
    }

    return Return;    //生成公有静态元素
})();

这次，我用的是闭包的方式去实现，其中最重要的一点是reutrn Return; 这里会引伸到值类型与引用类型的概念。在js里，Object就是一个引用类型，在闭包里，我会抛出一个包含有属性与方法的Object的引用，这样，也可以说是把这个Object抛向了外部，实现了公开。StaticClass这个变量接住了Return引用。 对于闭包内部的私有字段与方法都是没有被抛出的，这样就可以形成一个私有的环境。
很多时候我们都会用这种技巧去对JS进行分块，让程序不会那么的混乱。
上面的例子没这么干过的兄弟们也可以自己去试试。忘了，刚刚那个例子大家可以这么样去试试。
Core.StaticClass.Method();
Core.StaticClass.Property = “Test2″;
Core.StaticClass.Method();

刚看了码头哥写的javascript的call 和 apply来实现继承  http://www.css88.com/archives/4431

只是用 call 或 apply 实现继承去重用代码的确是已经非常的方便的。

但在开发的过程中我们会碰到有这样的一个问题：如果在一个类继承后，又想对其相应的方法进行重写(Override)那该怎么办呢？

这样就必需用代码就对apply 或 call 做一些手脚了。有写过一些纯对象代码的朋友会知道有supper 或 top 之类的关键字。javascript没有这东西，但可以用代码来作一下手脚。

先看看这样的一个函数

var Core = {};
//对象n继承对象b,并重写n, o为重写对象； 返回父级对象
Core.Override = function(b, n, o){
    var super = {};   //父类对象
    var params = [];  //参数
    var arg = arguments;

    if(arg.length > 3){
        //查找传递给b的参数
        for(var i = 3, len = arg.length; i < len; i++){
            params.push(_arg[i]);
        }
    }
    b.apply(n, params);  //继承

    for(var k in n){
        super[k] = n[k];
    }  //记录父对象公开的方法

    if(o){   //判断为空对象时不需要重写
        for(var k in o){
            n[k] = o[k];
        }  //重写方法
    }
    return super;
}

上面的函数就是为了实例继承时，返回原有父级对象的方法，方便在继承后的子类在重写的时候可以使用父类的功能。

那么我们是怎么去使用呢？直接用代码写吧，文笔不大好，很难说得明白，见谅。

Core.Base = function(name, age){
    var _Name = name, _Age = age, _self = this;

    this.Show = function(){
        alert('My name is ' + _Name + ', age is ' + age);
    }
}

Core.Child = function(name, age){
    var _self = this;
    var _top = Core.Override(Core.Base, _self, {
        //重写Show方法
        Show: function(){
            _top.Show();
            alert("I know !");
        }
    }, name, age);
}

OK，我们用Child这个类了。

var max = new Core.Child(“Max”, 25);

max.Show();

效果是先alert “My name is Max, age is 25″, 再 alert “I know!”,
大家不访也试试，晚安。

最近在几个群上经常看到有人问在一个类里的一个 function 怎么调用 this.  定义后公开的方法。现发一篇类实现的随笔。

首先说说类，在一个类里我们会有以下的几个特征：

1. 公有方法

2. 私有方法

3. 属性

4. 私有变量

5. 构造函数

我们直接看一个例子：

/***定义类***/
var Class = function(){
    var _self = this;//把本身引用负值到一变量上

    var _Field = "Test Field"; //私有字段
    var privateMethod = function(){ //私有方法
        alert(_self.Property); //调用属性
    }

    this.Property = "Test Property"; //公有属性
    this.Method = function(){ //公有方法
        alert(_Field); //调用私用字段
        privateMethod(); //调用私用方法
    }
}

这里我已把注释都写上，大家大概也会一眼就看得明白。对于少写JS的朋友，可能会觉得奇怪为什么我会定义一个_self的变量, 因为在js里，this不用对于其他的对象语言，他的解析过程与运行过程中this会改变的。这里简单说说js里this的定义，若有需要我可以开多一篇。

定义：this是包含它的函数作为方法被调用时所属的对象。

特征：this的环境可以随着函数被赋值给不同的对象而改变！

有兴趣的朋友可以网上找找资料了解一下，说回正题，这里的_self目的是为了开多一个私有的变量，把引用直接指向类的本身。

刚刚还说到一个构造函数的问题，这可以直接用代码来实现。在函数的最后直接写执行代码就OK。

/***定义类***/
var Class = function(){
    var _self = this;//把本身引用负值到一变量上

    var _Field = "Test Field"; //私有字段
    var privateMethod = function(){ //私有方法
        alert(_self.Property); //调用属性
    }

    this.Property = "Test Property"; //公有属性
    this.Method = function(){ //公有方法
        alert(_Field); //调用私用字段
        privateMethod(); //调用私用方法
    }

    /***构造函数***/
    var init = function(){
        privateMethod();
    }
    init();
}

使用这个类
var c = new Class();
c.Method(); //使用方法
这样就OK了