markyun / markyun

在Github的学习片段

MarkYun Bolg

Web Developer/ Photog/ Work at NanJing

MarkYun Bolg

WebCIA Weekly (Web情报局)

MarkYun 语雀

这里是Github托管的Bolg，记录一些学习的日常，以保持领先所需的见解。

前端开发面试题 Front-end-Developer-Questions (不定期更新) 欢迎Star和提交issues

markyun's Issues

创业公司资金被撤，只有一个合伙人（没钱）继续运营，技术员工是走是留？

创业公司资金被撤，只有一个合伙人（没钱）继续运营，技术员工是走是留？

创业公司因为一年多的产品一直都没有盈利，也没有持平。几个股东失去耐心和信心，把资金

撤掉了，只留10多万给另一个合伙人（ps：是产品经理 但没钱）留在公司继续运营，技术

员工该留下继续苦战，还是另谋出路呢？ 技术员工能力只能说能完全工作任务，没有特别

厉害的。因为都很年轻，所有谈不上有经验优势。

说说我的想法吧： 因为公司员工普遍年轻，没有这种事的解决方案。很迷茫，所以找那种

提供咨询并给予分析和培训的(靠谱)公司， 对我们公司的现状和前景进行分析。如果有希望

如何走下一步。如果希望不大：又该如何处理。这是针对公司的,

不知道各位github上的朋友怎么看待这个问题？

希望有过来人给一个指引，十分感谢。

关于HTML5离线缓存的详细了解

我觉得这里说的更清晰全面

“请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景”的回答

Flexbox意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流
可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间

模块化开发

原文:

模块化开发怎么做？

立即执行函数,不暴露私有成员

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

（待完善）

我晕,这有点水啊....

最后的分号前面的一对括号应该放在右括号里面....

应该是:

}());

希望作者能够切实提高自身水平,以及对待问题更严谨 : )

时间都去哪儿了

时间都去哪儿了？

---

忽然之间就是3月底，很久没写我的"周记"了。上午整理了几个小时google的浏览器书签，并对PC端和移动端同步；下午概要回忆一下这50多天的经过，以便后续安排。

一是因为回家很少上网（上网不方便），主要用来看书和陪家人，
和她们在一起，什么都不用说，天天在一起就可以很开心。

二是这段日子真没什么特别值得写的，但这篇文章目的就是把这段时间怎么消耗掉的，给回忆了一次。

回家感受

---

去年离职回家后，和爸爸妈妈一起回家了。短暂休息几天，便约上幼时好友，初中班花，拿上单反，去了老家附近几个风景区，感受到大自然的美好。

与3年前相比，变化挺大的，原来低矮的房子都不见了，冒出漂亮的小楼房，更多的服务性设施和满大街的汽车！！

教育方面：

---

小学生读书我亲眼看见只需要交上学费15元，其他的都是国家财政拨款，还包了一顿午餐。我当时就没遇上这种好事儿。新修很多宽敞的宿舍，考上重点高中的童鞋上学特有面子，更不用花一分钱的学费。

生活方便：

---

我的七大叔八大姨们，他们孩子多数都长大成人了，有的都结婚了，用一句话来说就是生活水平像芝麻开花——节节高。 消费越来越高了，特别是过年那段日子，现在消费都是不看什么实惠买什么，而是喜欢什么买什么，想吃什么买什么。（以前不是这样啊）

但也有很多问题存在：

---

比如：一下大雪就会停电，不知道是不是农村电网被偷工减料了，还是因为雪真的把电网压断了？ 有人乱忍垃圾，开摩托车，电动车的人随意占用车道等等，希望以后慢慢改变吧。

关于学习

---

说完变化，话题扯回来，该看该玩该去的都过了一遍，从过年到走亲访友一直到正月初八才结束，这之后4周时间，一直宅在家；

每天都是拿着技术书籍、心理学、和自考本科的教材，在看，理论知识收益也挺多的，技术方便，只看可不行，实践还是太少；这个我是非常清楚的！ ~囧...

所以我现在每天都会写代码，了解新的知识点，通过各种途径去学习并掌握 ；“没伞的孩子你就得拼命奔跑！” 像我这样没背景、没家境、没人脉、没￥的，不上进完全就是对生活的妥协，你的未来什么样子，将直接展现在你面前了! 妥妥的！

如果刚好遇上了这样的4没情况，不必悲伤，天无绝人之路！我觉得解救办法也还存在的，如果技术确实很厉害，就去写一个非常有亮点的作品，去分享，去帮忙，慢慢成为别人眼中的大神；其他方面（认识人、口才、外貌、会抱大腿、会骗人都行）厉害的，也别浪费你独有的资源，，肯定有一个是你能搞定的，让自己的亮点暴露出来。总之目标就一个，那就是提高自己的知名度和影响力。

关于计划

---

本想2月下旬来长三角地区开始新的计划，但坑爹的12306网站告诉我，整整20天的预售期，没有一张到江苏的票，站票都没有！好吧，我真实的感受到什么叫春运了。 最后等了几天买到3月5号的票。OK，下次回家，我自己开车回去！！

来到江苏之后，有几个面试机会，创业型公司都直接被我推掉了（我怕重蹈覆辙），只去面试了2家互联网公司，一家同意要我（最后没去），另一个没通过（没看上我）。

其实我很清楚的知道，自己下一份要找什么样工作的。现在互联网公司的前端团队都是由一专多能的工程师组成（又叫：Full Stack developer 译作：全栈工程师，也叫全端工程师），不然某个人就可能成为团队的瓶颈；可能由于我目前能力太菜，没亮点（这是关键问题）！一直是要上不上，要下不愿下。这点都怪自己。不管面试官怎样面试你，能问住你一些问题，就说明自己还存在短板。不过我还有个的优势就是：能整合所需信息，对自己分析，发现自己的问题和原因，剩下的就是靠自己去动手解决这些问题，时间啊，你慢点走！

3月和4月 打算继续看书准备考试和 练习技能，提高自己技术水平，把知识片段形成系统的知识链，争取年底要有一个得意的作品。

同时慢慢的找工作，有些想去的公司，一直不敢去投简历啊！！！先一件一件的做好吧。感谢我的爸爸妈妈没有给我特别大压力o(∩_∩)o 。

大概看了一下：2014年，要做的事情如下（优先级从高到低）：
#2014 To do List

---

技术方面：这些都停留在会用和了解层面，还没有彻底理解透彻。

    HTML5、CSS3、jQuery Mobile、SeaJS、KISSY、Bootstrap、Node.js、Backbone.js、Git、mongodb

    AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范、

    技术知识结构的体系化、UED、MVC、MVP、MVVM、MEAN（MongoDB，Express，Angular，Nodejs/Nginx）

个人方面：

    本科毕业证、学位证书、英语（阅读能力!important）、扩大人脉圈、车队排位能进前3、人像摄影技术

    香港澳门游一次 、拿驾照。 

生命不止，学习不休 2014/3/20 19:01:13

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

面试题目中，这个题目不明白，什么叫抽离样式，还是叫法不一样呢？

转正答辩（初稿）

PS： 明天提前转正了，临时通知要做一个答辩。立马写啊，囧！

——————

大家好，首先很感谢大家能够抽出宝贵的时间来参加我的答辩， 时间过的很很快，转眼3个月过去了，先简单自我介绍：

打开PPT第二页。

我是2014年4月正式加入ZTE的UED团队。

打开PPT第3页 介绍 岗位情况，职责。

我们团队一共11个人，其中女性占7个，在软件行业其实很少见啊。有没有。

个个都有自己的特长，所以工作起来很愉快。

另外我觉得我们办公室是所有办公室看起来最整洁的。

我个人目前对我们团队能力认识是这样的：

就是能让产品从 80分进化到90分甚至 100 分，甚至更好，当然这个进化并不仅仅是指页面更好看了，而是整个产品体验的进化。

（
原来用户想修改个人资料，原来虽然也能用，但不好用总觉得有些操作反人类。 而我们团队接到任务，会从头到尾进行，需求分析（用户角度出发，想想流程），交互设计，UI设计，页面设计，最后由前端来实现前面所以的成果加细节，给用户【大气美观】，特好用的修改头像功能。
）

我现在的工作：

     参与项目，快速高质量完成实现效果图，精确到1px；

     与团队成员，UI设计，产品经理的沟通；

     做好的页面结构，页面重构和用户体验；

     处理hack，兼容、写出优美的代码格式；

     不断优化产品、沉淀经验，拥抱最新前端技术。

我短期主要深入学习的是JS、排第2的是HTML5、CSS3。接下来是web APP。

当然这只是主要学习点，其他一些比较知名的也会有去了解，知道怎么用，有什么作用。

对前端圈子关注比较多，通过长期的学习和观察，我觉得：评价那个技术好是没实际作用的，

正如：

没有最强的武功，只有最强的武者。

针对项目，在做技术选型的时候，只有对一项技术或者新技术充分了解，知道该技术的适用场景，与其他技术对比，存在的优势和不足，这样才能让整个系统没有严重的瓶颈。

就比如前一阵刚刚出来的SWIFT 和原来的Objective-C进行对比，有人就说，【这下大家都要从头开始，零起步了】
其实这个认知是错误的，以为学会了SWIFT或者Objective-C 就能开发IOS的APP，因为SWIFT或Objective-C 只是一门单纯的语言，而做IOS APP开发，需要全面的掌握编程**，框架，与后端数据层的配合，想把APP做的“漂亮”，更是需要学习 交互、UI、界面设计规范、甚至还需要学习美学、为动效设计算法，让你的效果具有物体运动的物理感，这样你做出来的APP灵活自然，有大师的味道，而不会显得很生硬。

这个期间，你肯定会遇到很多问题和错误，然后发现书上、网络上都找不到现成的解决办法，以前没有类似的案例可以模仿，这个时候，就是才真正体现出你的价值，发挥自己的潜力，做别人不一定能解决的事情，解决掉。

对于前端开发这个行业，我还是比较看好的 ............【想理由】

我的爱好

可能比较小众，就连我辅修的【行为心理学Behavioral Psychology】都不是心理学领域主流的。

因为其他专家认为通过普遍的行为标准来推断一个有着特定行为习惯的人是不太科学的。外在的环境、文化也会对人的行为有很大的影响，导致判断者的判断结果过于肤浅。

其实我觉得专家的说法不完全对啦。

不狂爱足球，篮球，更喜欢射击、赛车类的、放假了喜欢到处走走看看，我的电脑上，累计的照片超过了10万张。

接下来： PPT 4到14页， 我做了这些事情。

公司的不足之处：

1、 有些流程比较乱，比如说改就改。

2、 有些需求拖时间太久了，

3、薪资在同行业来看稍微缺乏竞争力。

我需要提升的：

年纪轻，很多东西还需要深入的学习吧。把自己视野放到国内外，同时提高自己的英语水平。有机会出版一本自己的技术书。

工作方面，时间管理 养成的几个习惯：

1、工作邮件每天必须全部看完，就算是与我无关的公司的邮件，也要设为已读。

2、上班第一件事，先把难度最大的问题先处理掉。然后处理其他相对简单的任务。

3、任何任务会在要求的工作时间 之前完成，留1天或者0.5天防止不能及时提交输出物。

4、任何待办List都有一个优先级，谁的优先级高做谁。需要自己判断优先级。

5、在时间允许的前提下，把事情完成的最优化。

6、Read later,看见有用的资料，上班没有时间看先保存在Pocke应用。

7、不断学习新技术，新知识，技多不压身，深度为主，广度为辅，让自己竞争力更强。

2014-7-16 23:33:55

【2014年第二周】2014-01-12

本周主要事件：

1、三家公司电话面试 ( 安居客、阿里巴巴、无锡泛亚)

2、与现在公司说拜拜（从创业公司离职）

3、买车票、准备回家（真心不买好）

今天起来比较晚，都上午10多了，精神很好，主要用于学习新知识上，文字类的东西只有晚上安静的时候，才回忆的清楚。所以现在才补上。

其实无锡是个发展进步很慢的一个城市。希望在无锡工作的朋友，坚守的自己热爱的理想。这么冷的天。写个周记不容易。

第一周的时候提到，2年没写什么文字，今年主要还是为了改变去年那些说了不做的习惯；

比如去年说每天下班后回来看书，结果QQ一登上，和好友随便聊些不痛不痒的东西，一会就到深夜，再学习效果也不怎么好，技术进步缓慢。

另外看的东西也比较零碎，突然冒出来的想法，没有记录，过段时间也忘的干净，没形成结构清晰的知识链。属于那种，啥都懂点，让你专心说一个，你又深入不进去的感觉。

很多朋友在我帮他/她的忙之后，说我是计算机方面、或电脑方面的“专家”，我真是受之有愧。

---

1. 【 3家公司面试】

（1）
本周：去了无锡泛亚公司面试，原是百度公司在无锡的总代理，不过现在已经被百度解除授权了，估计是做的效果不怎么好，为什么我这样说呢，网上没有准确信息，这都是我推断的；去之前调查过公司背景，主要做外包，和企业建站，几百万收购了‘商务**’ 域名服务商。待遇不太好，公司离职率比较好。

公司位于商务园，有独立大楼，但是进公司的第一感觉就不太好，来了生人，前台至少应该主动问一下做什么的，好像直接没看见人一样，

我来面试之前，说到了公司再联系他，结果到了打电话告知需要我加拨分机号码，只好让前台查了一会，我填好面试单子，大概等了10多分钟，面试官来了。打了招呼，直接去接待室。

面试过程非常常规，自我介绍后，问了几个常规问题，基本都能答上。更多问的，是我在我公司做的事情。毕竟公司开发团队比较小，没有涉及到UED、性能、团队协作、只问基础的JS操作和插件。

不过不知道是不是我多心了。在回答的时候。面试官大人在摆弄电脑，完全没怎么听我讲话。好吧。我想说，这样其实给面试者的感觉不太好。

最后简单介绍一下他们公司情况，说需要重建一个UED团队。来专门做好用户体验这方面，可能我当过老师的原因，听面试官说完，感觉像在画饼。 我问面试官最后一个问题是：工作是否经常加班，结果是：yes； 好吧，本人最烦单休还加班公司了。真心烦，加班频率很低还能接受，但一周单休还加班，真心不愿意！加班就像借钱，原则应当是------救急不救穷； 最后开了一个N高的薪水回去让我等通知。至今无果。

（2）

安居客面试第2轮，准确来说。上周5是第一轮电话面试，上次问的问题挺多的。10个之能回答到6个，不过面试官对我还是比较看好我吧。所以很荣幸的这周接到第2次面试面试，换了个职位更高的人来问了几个工作技术上的问题，比如：平时工作流程是什么样的，你在公司做什么职位? 很巧，上次是32分钟说完，这次也是。最后通知的是：下周二去 上海浦东新区陆家嘴现场面试。 属于第3轮。

其实安居客这家公司也不错。听说大老板Mike是个很聪明的人，我喜欢和聪明人一起做事。 这几天也在准备一下，不管能不能通过，有应该认真完成这次面试。 这也是我的基本原则：要么不做，要么尽量做到最好。

搜索这样的大中型公司，就应该用专业一点的工具：（你为什么离开安居客？）http://www.zhihu.com/question/22089975

（3）

接下来是阿里，o(∩_∩)o 【我最喜欢的互联网企业】，没有之一！

其实最想投 阿里支付宝团队的，一直不敢，对自己的技术还是不够自信，懂的东西太少了，技术上也没有很拿得出手的东西，但这次是阿里的技术质量部 主动联系上我， 这么好的机会，不管是死是活也要好好去试试。

这几天主要都是在为阿里的下一轮面试做准备，也试了试阿里的玉伯大大写的开源项目Sea.js 、简单说就是一个模块加载器。虽然还不能完全看懂Sea.js 的源代码，不过确实很方便简单，这不用每次页面都那么多载入js的标签了；先会用就成，待我时间足够，再来详细研究；

既然学到了模块化，必须就要牵扯到模块化编程规范了，主要就是： CMD（通用模块定义）和AMD（异步模块定义）规范; 其实很简单，目的是让开发者必须以同样的方式编写功能模块，否则写法不同岂不是乱了！n

ode.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块；

     //加载HTTP模块、promise功能模块
     var http =  require('https');
     //http.createServer(); 调用方式

CMD推崇依赖就近，可以把依赖写进你的代码中的任意一行，例：

define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b')
  b.doSomething()
})

AMD也采用了require()语句加载 模块，但是不同 的是,它要求两个参数：

　　 require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，就是加载成功之后的回调函数。与前面的Demo写成AMD形式，就是下面这样：

    　   require(['math'], function (math) {
    　　　　math.add(2, 3);
    　　});

而AMD是依赖前置的，换句话说，在解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块：

  define(['./a','./b'],function(a,b){
     a.doSomething()
    b.doSomething()
 })

然后学习了JS模块化开发；

最开始只会写这样的函数和插件：

    !(function() {  
           //... 
    })();


(function() {
    $.extend({
    fun: function(template, data) { 
          //... 
        }
        return fun;
    });
    }
})(jQuery);

目前会写了这几种函数：

var module1 = new Object({
　　　　_count : 0,
　　　  fun1 : function (){
　　　　　　//...
　　　　},
　　    fun2 : function (){
　　　　　　//...
　　　　}
　　});


　var module2 = (function (fun){
　　　　  fun.ma = function () {
　　　　　　//...
　　　　};
　　　　return  fun;
　　})(module2);

如果安居客和阿里都能荣幸的通过，那么我果断选择阿的。因为去阿里巴巴这样的公司，让自己做的产品，能让自己用上，亲人朋友用上，千千万万的人用上，是一件非常骄傲的事情，另外：阿里的工作氛围、技术氛围、环境都更好一点。

---

2. 办理离职

与现在的公司办理离职手续中，其实中途已经离职过一次了。最后又被老板亲自来找我聊了聊，画了个大饼，请了回去。回去发现，应该该的啥都没改，流程不清晰。设计文档一个没有。数据库字典都没有啊啊啊，找个文件，只能去找做这个的人来问，

API调用传入参数不统一，有地方是：ID，有的地方是：IDS。很多东西用猜的。好再，我能调试java代码，出了问题，简单的都能ok。 囧。

刚改好的东西，第二天又被推翻，重改重改继续改，做了一个月都没有成就感，一个首页布局就不下该了5次（最后居然用了table！！）。其实还是一点都不好看，没自己的设计风格，所以我心已死，不必留我。

真心的，不能在 【自己都不知道自己在做什么的老板】手下干事。 三天两头随便变，会累死人的，还说你做的不够好。这次第5个迭代出来的版本已经能用了。我也算勉强完成了工作任务。但一点都不满意这个作品。

---

3. 买票回家：

自己在抢票，也请了朋友帮忙托关系买。还是没买到。最后买了长途汽车票，坐车回去。差不多23个小时到家门口。过个年也不容易！ 看来也得有自己买车的准备。

大概这周就是这样过去了， 预计难产的2013年终总结，明天会放出来。

分享最近看见不错的HTML5 Demo
http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

有问题可以去我的微博http://weibo.com/920802999留言, 或是发私信...

当然，如果你有Github帐号也可以直接开个issues。

 

发表于：2014/01/12 01:54

更新于：2014/1/13 14:38:28

Swift简介

Swift

在线文档

The Swift Programming Language：

Swift is a new programming language for iOS and OS X apps that builds on the best of C and Objective-C, without the constraints of C compatibility.

Swift adopts safe programming patterns and adds modern features to make programming easier, more flexible and more fun.

Swift’s clean slate, backed by the mature and much-loved Cocoa and Cocoa Touch frameworks, is an opportunity to imagine how software development works.

Swift is the first industrial-quality systems programming language that is as expressive and enjoyable as a scripting language.

Swift是苹果公司最新发布的一种用来编写 iOS 和 OS X 端的应用编程语言，语法简洁、支持实时预览。

我只是简单看了一下它的文档，它看起来很像JavaScript和Python，其实还有点像C#, 仔细多看看还能看见java的影子。像融合了其他语言一个综合体。

示例代码：

func sayHello(personName: String) -> String {
let greeting = "Hello, " + personName + "!"
return greeting
} 

println(sayHello("markyun"))


class MediaItem {
    var name: String
    init(name: String) {
        self.name = name
    }
}

func repeat<ItemType>(item: ItemType, times: Int) -> ItemType[] {
    var result = ItemType[]()
    for i in 0..times {
        result += item
    }
    return result
}
repeat("knock", 4)

对Apple IOS应用开发感兴趣的可以学习一下；难度要比Obj-C小，不过想深入学习还是避不开Obj-C的。

其实 我还在想一个问题：【swift 能否取代Obj-C？】

WWDC的视频还没看，晚上回去看。

另外：招swift开发人员，3天以上开发经验～ 待遇优厚；

有效期截止：2014年6月3日，哈哈哈。

相关资料：

http://onevcat.com/2014/06/my-opinion-about-swift/ 关于 Swift 的一点初步看法

http://gashero.iteye.com/blog/2075324 Swift中文教程

关于JS数据类型的内存图

对原文内存图中变量string画在栈(stack)里的图例存疑。

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

如果说栈里的数据大小固定，那对于一个很长的string将如何存储呢？

对于下面这段代码，

var str1 = "string";
var str2 = "string";
console.log(str1 === str2); // true

个人觉得变量string的值应该是存放在堆(heap)中，而栈中保存的是值在堆中的地址。
也就是说，str1和str2分别在栈里分配了空间，这2个空间存储了同一个在堆中"string"的地址。

由于没有找到充分的文档说明，也不确定这种想法是否正确。

四月 新的开始

马上要回无锡去办理各种杂事，只是简单记录一下。

差不多玩了2个多月，今天终于决定入职一家感觉还不错的公司，

坐标南京，不光是前端开发，还是我喜欢的UED方向，分的也挺细。

入职第一天，简单和同事们交流了一下，感觉我需要学习的地方还有很多，

暂时不会想跳槽了，我会好好在新团队中做下去，挣取早日成为核心成员！

2014-04-18 18:42:54

五一节-全世界劳动人民的节日

Google服务器的IP地址

最近Google被墙，但有时候需要用到，所以找了一些IP供需要的朋友使用。

|218.253.0.85 |218.189.25.130 |218.189.25.131 |218.189.25.132 |218.189.25.133 |218.189.25.134 |218.189.25.135 |218.189.25.136 |218.189.25.137

|218.189.25.138 |218.189.25.139 |218.189.25.140 |218.189.25.141 |218.189.25.142 |218.189.25.143 |218.189.25.144 |218.189.25.145 |218.189.25.146 |218.189.25.147

|218.189.25.148 |218.189.25.149 |218.189.25.150 |218.189.25.151 |218.189.25.152 |218.189.25.153 |218.189.25.154 |218.189.25.155 |218.189.25.156 |218.189.25.157

|218.189.25.158 |218.189.25.159 |218.189.25.160 |218.189.25.161 |218.189.25.162 |218.189.25.163 |218.189.25.164 |218.189.25.165 |218.189.25.166 |218.189.25.167

|218.189.25.168 |218.189.25.169 |218.189.25.170 |218.189.25.171 |218.189.25.172 |218.189.25.173 |218.189.25.174 |218.189.25.175 |218.189.25.176 |218.189.25.177
|218.189.25.178 |218.189.25.179 |218.189.25.180 |218.189.25.181 |218.189.25.182 |218.189.25.183 |218.189.25.184 |218.189.25.185 |218.189.25.186 |218.189.25.187 |218.253.0.177

更新时间 ：2014年6月11日14点

错别字

JS 分文件夹存放 命民以该JS 功能为准英文翻译；

命名

【2014年第一周】2014年1月5日 周记

【2014年第一周】2014年1月5日 周记

因为2年没写过什么抒情类的文字了。下笔如味同嚼蜡，写起来非常困难，但是答应自己从今年开始，每周至少写点记录自己的文字。所以现在就开始刷刷的写起来了。

本周时间过的很快，还没有好好的感受到2014的到来就过去了，2014的第一天是在无锡恒隆广场跨年演唱会上 一个人跨过的，虽然很冷，现场的音响效果非常专业。反正我很是享受一个人的生活，特别自由。
还有，买了单反没多久，也喜欢出去玩就背着它，到处拍啊啊啊！！！！迫切的提高摄影技术。

这周的几个任务：

1、简历、面试准备。
2、【2013】的年终总结
3、个人成长记录
4、回家的事情
5、明年安排

1，是因为公司现在没钱了，资金不够养那么多人，没办法，去年6月份已经料到会有今天，心里早有准备。其实也该走了，因为有人说过：一旦你觉得你在浪费时间的时候，你就该走了。公司也没什么特别谈的来的朋友，别在自己骗自己。没什么进步的。快滚吧。

因为公司上下，没有一个领域专家，都是摸黑前进，没有一个完整清楚的商业计划，100万的起步资金，差不多做了6个版本，每个改变都很大，但是每次改版，都把原来的停掉了！！为什么要停呢？ 真搞不明白老板在想什么。

能让10多个人做到现在这个样子已经非常不错了。老板还有几套房子赚钱，每个月的收入够他和几个运营继续做下去。我也希望能早点拿到投资。让这个项目继续下去。毕竟花了是不少心血。
同时，这个事情也让我有了一些经验，未来找工作，一定不要随随便便找个公司上班，也不要轻易听信创业公司给你画大饼，什么股权什么的，没有上市，那些都是浮云，频繁的换工作对自己的职业生涯并不好，也特别讨厌搬家，换一个次，地方远，必须得搬的近一点。好不容易在附近的社交圈子，又会很久才能见一次面。还是踏实点，好好打基础，去阿里，腾讯这样靠谱一点的公司。

2，其实2013的总结写好已经一个星期了，一直没有发布。一直在修改，都修改了3遍了，还是写的太烂，不过好在这是周记不用发表出去，自己以后慢慢改变吧。 看过不少让人感动的书和大段的文字，写的时候怎么也套不进来。 晕死，天生不是写小说的料啊！

3，关于这个是我给自己看的，看从读书到现在，自己有那些变化，那些做的对。那些值得改，还有自己的一个缺点列表，优势列表，我的目标是什么，目前不具备什么。
我可能会问我朋友圈子的人，看看他们对我的态度和意见。

看哈佛大学的公开课的时候。老师说了一个理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间，这肯定是有道理的，因为我身边的朋友，只要是月收入过万的，从来不会晚上回去看电视，要么就是朋友圈聚会，要么去健身房，要么在加班。这个可不是闹着玩的事情，要必须稳扎稳打才行。

4，问问爸爸妈妈看他们啥时候回家，然后帮她们在网上买好票（他们买票好辛苦），去年没回家，今年得一起回家过年。会到小城镇，享受半个月安宁。

5，2014具体关于工作的规划我会写在2013的年终总结中。 总结已经写好了，细节当然自己才能看见。

这是2014年第一次写周日。

有问题可以去[我的微博]((http://weibo.com/920802999)给我留言, 或是发私信...
当然，如果你有Github帐号也可以直接开个issues。

 
2014年1月6日 00:01:28

闭包的例子问题、

var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
    nodes[i].onclick = function(){
        console.log(i+1);//不用闭包的话，值每次都是4
    }(i);
}

未实现闭包，也未实现功能0.0。做了以下改进：

var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
    nodes[i].onclick = (function(i){
              return function() {
                 console.log(i);
              } //不用闭包的话，值每次都是4
            })(i);
}

javascript第二点内置对象只有Global和Math两个

....

javascript基本数据类型错了吧？

number,string,boolean,object,undefined应该是
number,string,boolean,null,undefined吧？

知名JavaScript 框架和库

国内知名框架

---

KISSY(淘宝) - http://www.kissyui.com

Arale（支付宝）-http://aralejs.org/

Sea.js（阿里）- http://seajs.org/docs/

Como(盛大) - http://www.comsome.com

EdoJs - http://www.edojs.com/

DWZ - http://j-ui.com/

JX(腾讯) - http://alloyteam.github.com/JX

JSI - http://code.google.com/p/jsi/

KindEditor - https://github.com/kindsoft/kindeditor

NJF - http://code.google.com/p/njf/

QWrap(百度) - http://www.qwrap.com

Tangram(百度) - http://tangram.baidu.com

FIS2.0 http://fis.baidu.com/

Amaze UI http://amazeui.org/（**首个开源 HTML5 跨屏前端框架）

Hcharts http://www.hcharts.cn/ 纯JavaScript的一个图表库

国外知名框架

---

著名第三方库

---

three.js

http://threejs.org/
JavaScript编写的WebGL第三方库。非常多的3D效果。运行在浏览器中的 3D 引擎，可以用它创建各种三维场景：摄影机、光影、材质等象。在它的主页上看到许多精采的演示。不过目前还处在比较不成熟的开发阶段。

JX
https://github.com/AlloyTeam/JX
JX 是模块化的非侵入式Web前端框架，开发于2008年，并于2009年开源于GoogleCode - http://code.google.com/p/j-et/，于2012年切换到Github。 JX 框架同时适用于 Web Page 和 Web App 项目的开发，特别适合构建和组织大规模、工业级的Web App，腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器.

超酷的前端特效

---

http://tympanus.net/codrops/ 这里面超多高质量的 CSS 实现的效果, 让人赞叹

http://a.singlediv.com/ after+before++圆角+多背景渐变+多阴影

http://www.yyyweb.com/demo/simpsons-css/ 纯 CSS 绘制的《辛普森一家》人物头像

垂直居中问题

垂直居中的解决办法中，当div 相对定位的时候，只实现左右居中，并且高度只显示了一半。
利用 flex 布局 这个解决方法也没用实现垂直居中，只实现了左右。
在mac chrome 版本 55.0.2883.75 (64-bit)上测试的。

2014环法看不懂的车队TOP3

作为一个资深的公路车自行车爱好者，2014环法终于结束了，很多被人看好的名将都中途退赛了，今年的环法显扑朔迷离，简单回顾一些今年的狗血车队。

No.1 移动之星

移动之星本届环法的存在感真心还不如那几支外卡车队。巴尔韦德智商拙计的毛病不是一天两天。英乔斯帝，这个去年环京赛的冠军，称霸妙峰山的车手，在本届环法完全是拖后腿，见坡死的比冲刺手还快，车队带你来环法是来吃盒饭的么？

再说那一群虾兵蟹将，第13赛段上最后一个坡，泥巴里身边1个人，巴尔韦德身边4个人，然后移动之星果断地上去拉节奏，2公里之后，泥巴里身边还是1个人，巴尔韦德身边0个人……

最后泥巴轻蔑地摇车离去，巴尔韦德表示：呵呵，今天天气好热，我什么都没看见啊。

No.2 欧洲汽车

欧汽这个赛季真心是悲剧，首胜已经是几乎无法完成的一项任务。于是，我们总是看到罗兰在一个意想不到的时候突然发起进攻，然后在一个意想不到的时候掉队。

大部分时候，我们根本无法理解欧汽到底在搞什么飞机。一会儿沃克乐跑了，一会罗兰自己领骑了，一会跑上来带集团了，一会儿全失踪了。

最惨烈的失败无疑是第9赛段，为了追击单飞的托尼马丁，欧汽倾巢出动，派出了5个车手带领突围集团追击。然后呢？淡定的马丁连口水都没流就把这五个货全暴了，集团里的坎神只能笑而不语：战胜马丁，还是哥有经验。

相比于巴迪亚尼车队在环意的战果，欧汽已经不能用失败来形容了。

No.3 快步

快步拿出环法大名单的时候，就有点让人看不懂，这份名单有两个核心：以盘子为首的冲刺核心，并且以挂科司机为GC主将。表面上看上去很美好，但明眼人一看便知，这双核心，弄不好就是鸡飞蛋也打的节奏。果然，第一赛段盘子退赛之后，快步就陷入了无尽的迷茫。
首先是让一个早已被证明不适合做最后冲刺的带冲手伦肖跑最后一棒，结果伦肖两次在快步火车顺利推进到最后150米的时候判断失误，错失良机。

然后就是让队内的GC核心挂科司机也参与冲刺火车，甚至在最后给特伦丁带冲或佯攻，消耗了挂科司机大量的体力，导致他在山地赛段崩盘。虽然说挂科司机的长坡能力和状态可能确实要打一个问号，但快步的战术无疑对他的体能有很大的影响。

哦，还有新晋巴黎鲁贝冠军特普斯特拉，谁能告诉我本届环法他是来干嘛的吗？……

基特尔平路赛段一次莫名其妙的拉稀和托尼马丁一次伟大的单飞胜利，掩盖了快步整体战术上的混乱。但快步本届环法的策略，还是有很多值得商榷的地方的。

最后 Cannondale车队的千年老二Sagan,本届环法拿不到单站冠军没关系，拿不到总冠军也没关系，四百多分的冲刺积分让你穿着绿衫到终点，本届环法最委屈的车队主将之一 ！

精彩文章推荐：

2014 环法大赛介绍

2014环法【战车】【装备】

走近科学：2014环法 骑什么车

2014环法第五站石头路装备介绍

2014-Tour-de-France【环法战车展1】

2014-Tour-de-France【环法战车展2】

2014-Tour-de-France【环法战车展3】

2014-Tour-de-France【环法战车展4】

【2014】环法22支车队顶级战车一览1

【2014】环法22支车队顶级战车一览2

【2014】环法22支车队顶级战车一览3

请不要如此疲劳地工作了

源于 程序员杂志201305期: 不要再如此疲劳地工作了
原文地址：http://ww3.sinaimg.cn/large/9c491e0bjw1e4q4kw0yo3j20xc18gwkw.jpg
最近经常加班，看书到半夜什么的，深有感触！

加班并不会增加我的很多价值，反而让自己在新的一天变的没有精神，导致完成的工作质量下降。

相反的，如果按时上下班。回去时间早还能拓展一下其他圈子的朋友，一起和考试的朋友喝喝咖啡，和喜欢机车的朋友炸街，和我公路车的朋友环太湖，热的一身臭汗。然后回来洗个澡，这样的一天会感觉充实很多。

天气不好的时候，就去咖啡馆坐坐，还能认识很多萌妹纸，文艺女青年。谁说程序员一定是屌丝的，谁说搞IT的就不好找老婆的，这个都是靠自己好么。如果天天加班到半夜，回来路上一个人没有，哪我猜除了公司的女同事之外。你很难见到其他女性朋友了。结婚这种事只能靠相亲去解决了。

哈佛有一个著名的理论：人于人的差别在于业余时间怎么使用，而你的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。
业余时间，命运决定，我个人认为有几分道理。业务时间可以做自己喜欢做的事情。并且能做的更好。所以只要有时间。一定不要在游戏中浪费掉。

end

position: absolute;居中那个有错误

margin: 0 auto; ==> margin: auto;
才能达到垂直居中

Slow and Steady Wins the Race

我的第一篇测试文章。发表于：2013-4-14 17:14:11

新浪微博： http://weibo.com/majinyun08o2/
Twitter ： https://twitter.com/majinyun0802
github ： https://github.com/markyun
Facebook：http://www.facebook.com/majinyun0802
flickr : http://www.flickr.com/photos/markyun/
Speaker Deck: https://speakerdeck.com/markyun

用js实现千位分隔符?

文中附上的代码错误，正确的如下：
function commafy(num) {
num = num + '';
var reg = /(-?\d+)(\d{3})/;

if(reg.test(num)){
 num = num.replace(reg, '$1,$2');
}
return num;

}

\d代表数字吧

一点小疑问

首先非常非常感谢你的面试题目和详细的解答，但我不清楚其他问题里面的顺序的第四个答案的括号是不是有问题？初学，见谅。

千位分隔符，不要搞得那么麻烦。

var aa = 123123123;
aa.toLocaleString();
"123,123,123"

知识碎片

（个人整理，各种碎片知识，鸡汤段子），不定期更新。

用户对待产品的态度，和对待人的区别不大，所以，产品的交互设计，应该更为礼貌。不应打断正常的操作流，不应强调交互（当用户意识到了强调的交互，那说明喧宾夺主了）而是“透明”地去实现用户的目标。为此，可以设计良好反馈、非模态信息、识别常用和例外、提供选择而不是提问等等，我们希望面对的是更聪明、简约的“人工智能”。最后，不论你的界面多酷，越少越好。

用户的阅读习惯一般是：首先浏览屏幕最上方，从左到右；然后浏览左边从上到下，寻找关键字；接着，找到关键字之后再从左到右的阅读。这样的阅读习惯被称之为F-Pattern，也是设计师设计网页的原则，内容依据重要性不同安排在不同的位置。

短信，邮件，以及push notification这三种通知用户的手段的不同之处在于实效性。90%的短信在3分钟内被读到，适合紧急通知，但不要期望用户会回过头来“复习”以前的内容；邮件发出去后平均要6.4小时才能被收件人看到，适合用户可能会回头看的东西，比如收款凭证，账号修改信息等；push notificatiojn与短信类似，但比短信友好点（免费，不像短信那么intrusive，所以也不太像短信那么容易让人及时查看）。

指向性动效能够让用户清晰的感受到物体与物体的位置关系，以及信息的层级架构。

开发的基本操作流程

(1)明确目标；
(2)如何收集想法并划分优先级；
(3)跨团队之间的协作；
(4)公司的透明文化，让他人知道你在干什么；
(5)产品设计；
(6)指明第一负责人；
(7)迭代开发；
(8)同步&报告状态；
(9)发布产品&持续监控。

什么是“更好”的Demo：

核心功能完整，主要任务流足够深度
交互保真程度高，操作的体验感真实
根据场合与目的有适当的视觉细节
避免制作过程“过于费工”或“效率低下”

移动设计要素

清晰的视觉纵线、信息的分组、极致的减法、利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、校验的小秘密之外，还有很多很多秘籍没有写，
比如清晰的步骤、用户的语音、移动端特殊的情景、合理的说明、及时的反馈、锚点置顶、
主动做与次动作的位置、给与建议、给予限制、适当的帮助、标签页设计、颜色的信息传达、循序渐进的表单

如果你的投资回报能超过6.55%，购房贷款建议采用20年，否则采用10年还款。如果你贷款数额不高，年限要求也不高，那就一定要用等额本金的方法贷款。

看房的关注点大致包括：小区基本信息、采光、通风、视野、动线、功能分区、得房、赠送、装修、设备、水电气暖等等。里面还可以细分，比如采光可以分为采光面数、采光面积比、采光情况、是否明厨明卫、总面宽、客厅面宽、主卧面宽等等。

在职场里，收到指令要回复，遇到困难要沟通，项目进展要按节点通报，安排要落实。这不是繁文缛节，这是一个公司的基本规范。要尽心尽力，说到做到，有始有终，积极主动，你才能成长，公司也才能成长。不要玻璃心，也不要有惰性，更不要骄横，有多少人，有才华，有远志，不约束自己

苦难并不值得的追求，但它确实能磨练你的意志，它使你的多巴胺水平降低促进你更多的思考，让你认清自己。 它不会一定能带来成功，苦难在成功之前没有任何价值。

MVC设计模式是一个很好创建软件的途径，它所提倡的一些原则，像内容和显示互相分离可能比较好理解。但是如果你要隔离模型、视图和控制器的构件，你可能需要重新思考你的应用程序，尤其是应用程序的构架方面。如果你肯接受MVC，并且有能力应付它所带来的额外的工作和复杂性，MVC将会使你的软件在健壮性，代码重用和结构方面上一个新的台阶

IE9及其以下版本的浏览器限制每个样式表最多有4096个选择器，也限制了31个复合的样式表和每个页面包含的<style></style>元素。所有超过这个限制的内容都会被浏览器忽略。
是把你的CSS样式表分开还是重构? 建议后者。

HTML5包含:

语义：能够让你更恰当地描述你的内容是什么。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
设备访问 Device Access：能够处理各种输入和输出设备。
样式设计: 让作者们来创作更加复杂的主题！

前端现在可深入的领域真心多：前后端分离、前端工程化、前端质量体系、前端工具与生态圈、数据可视化、下一代类库框架、前端服务化、前端安全、设计工业化…… 好多领域都值得研究一辈子 @玉伯也叫射雕

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

流程本身就是一把双刃剑，有利有弊。一方面，它使我们的需求变得有序，使前端能够在处理一个需求时，不会频繁被其他插队的需求打断。并且因为发布有时间点的设定，所以测试工作会更加严谨，这有助于提升代码的质量。因此对于我们来讲，流程带来的好处是显而易见的；但另一方面，它额外地增加了做事的成本，涉及ASSETS发布的需求，就像赶某班火车一样，错过了就只能等下一班，所以也给需求方带来了许多不便，有待改进，不过这可以通过长期的合作而慢慢被弱化，双方达成了一种默契以后，情况会好很多。

前端由无到有。 前端架构概念的建立，包括与设计、后台、产品的配合，改变他们原有的、已习惯的开发流程确实是个不小的挑战。
用户体验设计应该贯穿于产品从萌芽到出生的整个过程，产品原型、视觉设计、前端开发、后端开发甚至还包括产品测试大家都应该有份。只有各个环节的同学都把这个事儿当事儿了，那么做出来的产品才有可能是好产品。

关于毕业生找工作

小公司看老板--老板靠谱，愿意分享，空间无限 
中公司看制度--制度合理，空间可见，成长阶段 
大公司看文化--文化适合，空间有限，平台价值

大小公司实习的优点：

大公司：可以观察、学习企业文化、运营流程；可能有比较多的培训项目；往往会指派一个mentor来帮助你；有很多其他的实习生可以成为朋友。
小公司：公司以执行为目标，可以担当多种职务，较完整地理解如何解决一个问题。小公司步伐较快，没有太细的职能划分，有更多的自由度，比较少官僚会议等。

只有当你自己拥有并能够提供别人所需的【有效利用价值】，别人才乐意向你提供他的【有效利用价值】。这就是人脉的基础。

椅背不能靠,一靠成山炮.
食物送到嘴,跪舔打断腿.
喝汤是例外,低头不奇怪.

最傻的事情莫过于向别人证明自己过的有多好。但凡需要被证明的,都是你避而不及的弱点。比如内心强大,比如活得潇洒。

论功劳，一般情况下，开发完成前，产品，美术，技术，测试，项管加起来占一半功劳，开发完成后，运营推广占了另一半功劳。

IE 10 的条件注释.

方法：用 JavaScript 把 useragent 添加到 html 这个元素里
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
IE 10 浏览器的用户代理字符串：
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
结果：
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
接下来，我们只需要很简单的 CSS 样色：
html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

DIV颜色块高亮

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

需要了解到该股以下情况：

1、所在行业的发展前景；
2、公司在行业内的发展前景，或垄断地位；
3、未来3－5年的快速增长势头，且前景明确；
4、财务稳健，没有疑问点；
5、分红扩股正常；
6、资产负债比合理；
7、现金流量正常；
8、信息披露充分；
9、价格有吸引力；

响应式WEB页面开发实践

响应式WEB页面开发实践

最近得到一个新任务单，让我用一套页面适应所有主流终端（Android、iPhone、iPad、PC），而且是一套页面写。 我得到任何的第一感觉就是用2套页面吧；PC和iPad一套，手机一套。才好实现吧！

但最后要求只用一套完成。虽然给开发经理说了2套页面的优势。没有办法，谁让我们还不是决策层呢， 硬着头皮开始做。原来也没有移动端开发的经验，我也只有慢慢摸索，从头做起。简要记录一下开发过程。

需要概要是这样的：（具体需求其实还不够清晰，改动挺多 ， 只兼容IE8以上浏览器）

1、在PC上显示正常PC的布局，
有些炫酷的动效 我选用了CSS3技术为主，CSS不能实现的就用JS来完成，因为transform 这些好玩的东东可以直接使用GPU加速。比JS好多了。 尽量保证动画效果的平滑与自然。底层框架依赖于jQuery 来实现其他交互和验证功能，PC页面开发根据设计图完成，相当来说最简单。

2、在ipad上则针对ipad设备横屏竖屏进行显示优化，这个比较简单，使用 Media Queries 根据设备的max-device-width来应用不同样式。后期重构还需要根据屏幕大小和 Retina 加载适应的图片。

3、在Android、IOS上模拟webapp的UI和布局， 这块内容是最复杂的，要测很多个设备、写大堆兼容性代码、在手机自带的浏览器上保证显示效果一致。 目前这块还没有做完，由于设计图布局与PC、ipad的布局区别太大，UI、交互效果都变了。很是纠结。不断在各种尝试，能不能在做的更好一点。

当然啦，一套页面适应所有主流终端是页面代码是十分臃肿的！！！ 我借鉴了bootstrap 的响应式布局方式，用了.hidden-desktop 、.hidden-phone的隐藏元素方式，来解决相同功能的组件在PC与webapp布局位置不一样的问题。但是一些动画在普通的手机浏览器上性能非常不好，有待优化。另外因为各种尺寸不同的，让页面自适应也会让页面显示效果不能跟效果图100%一致。影响了设计。

具体的代码片段：

HTML

    <head>  
    <title>Home</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <meta name="description" content="">
    <meta name="author" content="">  
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" media="screen and (max-device-width: 979px)" href="assets/css/pad.css">   
    <link rel="stylesheet" media="screen and (max-device-width: 400px)" href="assets/css/phone.css">  
    </head> 

CSS

        /* 大屏幕开始启动了*/
        @media all and (min-width: 1200px) {
          .nav li{
           width: 160px; 
          }  
        } 
        /*手机横屏到竖屏 到常规屏幕 ipad*/ 
        @media (min-width: 768px) and (max-width: 979px) {
          .hidden-desktop {
            display: inherit !important;
          }
          .visible-desktop {
            display: none !important ;
          }
          .visible-tablet {
            display: inherit !important;
          }
          .hidden-tablet {
            display: none !important;
          } 
        }


        /*手机横屏和平板竖屏幕*/
        @media (min-width: 400px)and (max-width: 768px) {
          .hidden-desktop {
            display: inherit !important;
          }
          .visible-desktop {
            display: none !important;
          }
          .visible-phone {
            display: inherit !important;
          }
          .hidden-phone {
            display: none !important;
          }
        }  

       /* 针对iPhone5 横屏和竖屏样式 */ 
        @media (min-device-width : 320px) and (max-device-width : 568px) {
          //              
        } 

JavaScript

移动端侧滑菜单，使用了codrops的 sidebarEffects组件。完美兼容各种浏览器。
`
function init() {

    var container = document.getElementById( 'st-container' ),
        buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
        // event type (if mobile use touch events)
        eventtype = mobilecheck() ? 'touchstart' : 'click',
        resetMenu = function() {
            classie.remove( container, 'st-menu-open' );
        },
        bodyClickFn = function(evt) {
            if( !hasParentClass( evt.target, 'st-menu' ) ) {
                resetMenu();
                document.removeEventListener( eventtype, bodyClickFn );
            }
        };

    buttons.forEach( function( el, i ) {
        var effect = el.getAttribute( 'data-effect' );

        el.addEventListener( eventtype, function( ev ) {
            ev.stopPropagation();
            ev.preventDefault();
            container.className = 'st-container'; // clear
            classie.add( container, effect );
            setTimeout( function() {
                classie.add( container, 'st-menu-open' );
                $("nav").eq(1).addClass('open');
            }, 25 );
            document.addEventListener( eventtype, bodyClickFn );
        });
    } );

}

init();`

PC端导航菜单，当屏幕小于指定大小后菜单竖列显示，并隐藏

    $("#mobile-nav").click(function() {
        $(this).toggleClass('open');
        $('nav').toggleClass('open');
        $('body').toggleClass('nav-open');
    });

    $('article').click(function() { 
        $('nav').removeClass('open');
        $('body').removeClass('nav-open');

    });

2014/8/9 14:42:07
待补充...

2014前端面试题， JavaScript部分，实现一个通用的事件监听器函数

markyun你的实现方式， 每次addEvent这种函数被调用的时候，都要进行一次特性检测， 是否可以考虑使用自执行函数只判断一次即可。参见： https://gist.github.com/eduardocereto/955642

另外，感谢你整理了这份前端面试题， 基于你的整理， 我在小米内部搭建了一套前端面试题库。 做了一个Questions/README.md 文件自动从Questions-and-Answers/README.md 生成的逻辑， 感兴趣的话，希望能交流一下。

前端工程师开发工具 & 订阅的网站

常用网址

The last time that refresh: 2014-6-25

个人

新浪微博： http://weibo.com/920802999

Twitter ： https://twitter.com/majinyun0802

Github ： https:github.com/markyun

---

工具

✓ Sublime Text

✓ Eclipse/Aptana

✓ TextMate 1.x

✓ Coda 1.6 and 2.x

✓ Espresso

✓ Chocolat

✓ Komodo Edit/IDE

✓ Notepad++

✓ PSPad

✓ <textarea>

✓ Brackets

---

调试工具：Firebug、Yslow、HttpWatch、PageSpeed、IETester、PrefixMyCSS、CSS Lint

---

订阅与关注：

---

前端周刊

码农周刊

前端乱炖

前端观察

前端开发

奇舞周刊

CNode社区

AngularJS社区

InfoQ

w3cplus

Startup News

Hacker News

Node Weekly

HTML5 Weekly

Stack Overflow

JavaScript Weekly

Mobile Web Weekly

HTML5 Chinese Interest Group

---

常用工具

---

自动合并CSS、生成雪碧图、生成兼容Retina的代码：CssGaga

免费Photoshop切图插件： Cut&Slice me（目前仅支持CS6）

使用图片做成高保真原型： https://www.flinto.com （为iOS原型设计的工具） 同类（Xcode ）

ECMAScript 6 浏览器兼容表： http://kangax.github.io/es5-compat-table/es6/

百度流量研究院 http://tongji.baidu.com/data/browser

W3C知识库 http://w3help.org/zh-cn/kb/

格式化 Javascript： http://www.css88.com/tool/js_beautify/ http://jsbeautifier.org/

在线调试工具 http://jsbin.com/ http://jsfiddle.net http://codepen.io/（可以直接导入到github）

JS/CSS压缩工具 ： YUI Compressor http://jscompress.com/

测试代码质量： http://www.jslint.com/

CSS Validator： W3 提供的 CSS 验证工具 （http://jigsaw.w3.org/css-validator ）

Html Validator： WDG 提供的 HTML 语法验证工具（http://www.htmlhelp.com/tools/validator/ ）

网站测试： 阿里测 http://tools.pingdom.com/(生成各种数据，可下载)

css代码检查工具： http://csslint.net/

文件对比 Kaleidoscope

jQuery 解构 http://www.cn-cuckoo.com/deconstructed/jquery.html

Pdf-word文档互相转换 Adobe Acrobat 8 Professional

图片压缩caesium-1.7.0-port http://caesium.sourceforge.net/index.html#download

移动框架对比图，相信会帮助你更好的选择开发框架 ：http://mobile-frameworks-comparison-chart.com/

---

前端博客：

---

http://www.pjhome.net/ 腾讯

http://www.cssforest.org/ css森林

http://orzl.com/blog 阿里巴巴 的布拉格

http://jiongks.name/about/ 勾三股四

http://www.ddcat.net/ 豆豆猫

http://blog.bingo929.com/ 彬go 人人网Web前端开发工程师

http://otakustay.com/ 宅居：他有两个blog，百度的前端大牛

http://www.36ria.com/ 淘宝几位作者共同撰写的blog

http://hikejun.com/blog/ 豆瓣 张克军

http://jayli.github.io/blog/index.html @jayli

http://www.gbin1.com/ gbin1

http://www.css88.com 愚人码头

https://github.com/lifesinger/ 玉伯

http://ued.taobao.org/blog/author/qingyun/ 交互技术 青云 淘宝首席交互设计师

http://www.ruanyifeng.com/home.html 阮一峰

https://www.byvoid.com/ Node.js開發指南 作者

http://typeof.net/all.html 语言开发层面上的js博客，写手包括老赵， BELLEVE INVIS是主要作者，写过js编译器

http://typeof.net/all.html @belleveinvishttp USTC

---

W3 组织，W3C 的诠释者 （www.w3.org ）

Google JavaScript代码风格指南：

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

http://chajn.org/jsguide/javascriptguide.html#JavaScript_Style_Rules

---

关注前端开发与用户体验

淘宝UED
一淘-UX
微博UDC
搜狗UED
腾讯ecd
新浪UED
腾讯CDC
百度ued
MobiUE
携程UED
百度MUX
腾讯ISUX
UI设计网
良无限-UED
支付宝PED
搜道网UED
搜狐焦点UED
百度泛用户体验
人人网FED Team
畅游视觉设计中心
阿里巴巴（**站）
支付宝前端开发车间
网易用户体验设计中心
迅雷用户体验设计中心
阿里巴巴国际站UED团队
19楼UED Team | Yes,we can!
腾讯MXD移动互联网设计中心
云路
UED-5173用户体验团队博客
全球设计精华

2014年1月6日唯品会【前端开发】电话面试记

时间：2014年1月6日16:40 ，差不多32分钟时间
地点： 江苏无锡-上海中环现代大厦
人物：我 - 唯品会的前端团队负责人
职位：Web前端开发工程师

不得不说，内推网的效率太高了，上午抱着试试看的心态投的简历，下午就打电话来了。

但是！ 关键是！我还没准备好呢！匆忙接招！回答的语无伦次。

感觉自己基础不过硬，问的好多问题，自己都有点印象，但总结不出来！

真是没出息啊！囧。

---

记录一下面试题先，都不难的，晚上回去找答案。

html方面：

1、语义化的理解？ W3C 标准的理解？

2、css的hacker 有哪些？

3、HTML5的离线储存？

4、盒子模型的理解？

5、HTML4.0的严格模式与混杂模式 ，它们有何区别？

6、页面重构怎么操作？

7、 和的区别？

js方面：

1、跨域问题怎么解决，有哪些办法？原理

2、闭包的理解？

3、js性能优化怎么做？

4、IE与火狐的事件机制有什么区别？ （事件冒泡 和事件捕获）如何阻止冒泡？

5、作用域有哪些。

最后问我对他有什么问题可以问，我问了一大堆。真是不客气啊！不过这位技术负责人非常和蔼的给我解释清楚了。

---

【2014年1月6日18:55补充】：

下午安居客打电话给我电话面试， 问的问题比唯品会简单一点，多了几个问题简单列一下

1. 团队协作你们现在是怎么操作的？

2、CSS position 属性 有那些值？

3、对js有什么看法？

4、Git 熟悉吗？

5、this 有哪些值？

6、从你最先做的项目到现在，有什么变化？学到了什么？

---

留一个参考

上海的前端行情，只是一个范围，也不一定完全对， （来源：上海的罗龙浩，WEB程序员，KindEditor作者）

1. 切图熟练、能写一些JS效果（HTML+CSS+jQuery）：5K~10K+
2. 具备第一条，并可以熟练用JS开发各种组件：8K～15K+
3. 具备第二条，熟悉1～N个后端语言：13K～30K+
4. 具备第三条，对前端架构、性能优化方面有深入了解：20K以上

看来我只能勉强符合第一个啊，o(╯□╰)o！

写组件能用，但是很烂，略懂java语言和数据库。

过年回去好好恶补基础o(>﹏<)o。

                                                                        2014年1月6日17。

js实现千位分隔符代码有问题

function commafy(num) {
     num = num + '';
     var reg = /(-?d+)(d{3})/;  ---->   var reg ＝ /(-?\d+)(\d{3})/;

    if(reg.test(num)){          ---->   while(reg.test(num))
     num = num.replace(reg, '$1,$2');
    }
    return num;
}

PS:这段代码难道没有人运行过吗？抛开正则表达式的问题，最后运行的结果也只是替换最后3位的千位分隔符

行内元素有哪些？块级元素有哪些？

http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
不同浏览器（版本）、HTML4（5）、CSS2等实际略有差异。

javaScript**

怎么才能快速掌握JavaScript写代码**呢？有条件了但是感觉，有条件但是不知道怎么写，求大神帮助。。。。

前端面试题

Update_Time:2014-01-07

最新版本在这里：

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

本文主要是用来总结一些常见前端面试的基本理论知识和一些经验，希望看的朋友，阅之后也要用心钻研其中的原理，
不可投机取巧，只求面试过关，非长久之计也！

另外：
欢迎补充你所知道的技巧、题目、答案；最好是现在网上找不到的。

---

HTML、CSS部分

    要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3技术等

---

1. Doctype?严格模式不混杂模式-如何触发这两种模式，区分它们有何意义?
   【

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止老站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
】

2.行内元素有哪些？块级元素有哪些？
【

（1）根据CSS规范规定，每一个元素都有display属性，用于确定该元素的类型，每个元素都有默认的display值，比如div元素，默认display属性值为“block”，成为“块级”元素(block-level)；span元素的默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span I bem img input select strong（强调的语气）

    块级元素有：div ul ol lidl dt dd h1 h2 h3 h4…p

】

3.CSS的盒子模型？
【
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading （需要加上文档type）

（2）盒模型： 内容(content)的宽度和高度、填充(padding)、边界(margin)、 边框(border)、
】

4.link 和@import 的区别是?
【

（1）、link属于XHTML标签，而@import完全是CSS提供的一种方式

（2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载。

（3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题。

（4）、link方式的样式的权重 高于@import的权重
】

5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
【
ID 和 Class
Class 可继承、 font-size font-family color可以继承 列表 UL LI DL DD DT 可继承

不可继承 ：border padding margin width height

优先级就近原则，样式定义最近者为准

载入样式以最后载入的定位为准

优先级为
!important > id > class > tag
important 比 内联优先级高
】
6.如何居中div,如何居中一个浮动元素?
【
（1） 给div设置一个宽度，然后添加margin:0 auto属性
如：div{ width:200px; margin:0 auto;}

（2） 设置容器的浮动方式为相对定位
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.Div {
Width:500px ; height:300px;
Margin: -150px 0 0 -250px;
position: absolute;
left:50%;
top:50%;
}
】

7.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，hack 的技巧 ？
【

（1） IE浏览器的内核Trident、 Mozilla的Gecko（跨平台）、google的WebKit、Opera 的内核Presto（跨平台）；

（2） 1.png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。

         4.浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px; 
          //这种情况之下IE会产生20px的距离，这时需要设置display:inline; //使浮动忽略}

（3） 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，此时，我们的IE8已经独立识别。
实例代码：
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/

      }

（4） IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

】

8.html5\CSS3有哪些新特性？
【

（1） HTML5其实就是关于图像，位置，存储，功能，速度的优化和改进。

（2）
绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景 rgba
新的技术webworker websockt
】

9.你怎么来实现设计图，如何高质量完成页面和脚本?
【

（1）首先划分成头部、body、脚部；。。。。。。。。。。。。

（2）
实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。
】

10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
【

】
11.什么是面向对象，有什么特点？
【
一切都是对象。
抽象：抽象为了简化问题，简单即美，相信我，人类很笨

继承：为了便于扩展或改写原有的功能

多态：为了便于改写原有的功能

封装：组件化，便于理解、替换与复用，因此系统会更加灵活（后文提到封装XXX时，就不具体说这些优点了）

】
12.列出display的值 和position的值 相对谁定位？
【
（1） 可用值的说明
block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

（2） absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
】
13.页面重构怎么操作？

14.语义化的理解？ W3C 标准的理解？

15、HTML5的离线储存？

---

JavaScript部分

要点：  面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、异步装载回调、模板引擎。新知识：Nodejs等

---

通常可以做一些小练习来判断TA的水平，js 虽然很灵活，但是具体的代码和实现方式能体现出一个人的全局观，随着代码规模的增长，复杂度增加，如何合理划分模块实现功能和接口的能力比较重要。

1.创建一个对象
【
function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() { ... }
}

】

2.谈谈This对象的理解。
【

】

3.事件、IE与火狐的事件机制有什么区别？ （事件冒泡 和事件捕获）如何阻止冒泡？？
【

】

4.什么是闭包？
【

】

5.ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
【

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

4. Ajax的最大的特点是什么。

   Ajax可以实现动态不刷新（局部刷新）
   readyState属性 请求的状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

   ajax的缺点

   1、ajax不支持浏览器back按钮。

   2、安全问题 AJAX暴露了与服务器交互的细节。

   3、对搜索引擎的支持比较弱。

   4、破坏了程序的异常机制。

   5、不容易调试。

   跨域： jsonp、 iframe、window.name、HTML5中新引进的window.postMessage、服务器上设置代理页面

】

6.模块化怎么做？
【

】

7.对Node的优点和缺点提出了自己的看法：

【
（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
】

8.异步加载的方式
【
(1) defer，只支持IE

(2) async：

(3) 创建script，插入到DOM中，加载完毕后callBack

documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分
】

---

其他部分

（正则、优化、重构、响应式、移动端、团队协作、SEO、UED、职业生涯）

---

1、基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
2、频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。 比如：var str=$("a").attr("href");

3、前端开发的优化问题（雅虎14条性能优化原则）。
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

4、初始化CSS样式。

11.谈谈你认为怎样做能是项目做的更好？

12.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

13.加班的看法

加班就像借钱，原则应当是------救急不救穷

待完善、、、、、、、
微博：http://weibo.com/920802999

绝对定位的div居中

文中给出的方法亲测无效…

我可以转载吗

请问？
个人博客，非商业用途，注明出处。

css定义的权重，这一部分验证了下，请教

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #testId {
            background-color: grey;
        }
        .class1.class2.class3.class4.class5.class6.class7.class8.class9.class10.class11 {
            background-color: red;
        }

    </style>
</head>
<body>
<p id="testId" class="class1 class2 class3 class4 class5 class6 class7 class8 class9 class10 class11">
    测试
</p>
</body>
</html>

上面代码背景色仍然是灰色，所以id权重为100，class权重为10，是不正确的吧？

["1", "2", "3"].map(parseInt)的解释

返回[1, NaN, NaN]的解释中，第三个值是NaN并不是因为radix不合法，而是因为parseInt('3', 2)转换时，二进制没有3，所以以二进制转换失败，返回NaN

如何一辈子耐得住寂寞、不浮躁，如何修炼？

在知乎上看见有人问了这个问题http://www.zhihu.com/question/21009054
对于年轻的我和很多人一样，所以认真看了一下。觉得这句说的挺对：
“
有句话叫耐得住寂寞，才能守得住繁华。只有在耐得住一时的寂寞，吃的了苦，下得了功夫才能得到成绩，然后就才能在人前显贵，风光。”

很多人看了一些励志的青春的让人激动的电影。然后就说自己要怎么怎么样。改变自己。我觉得都是故事编的好。现实哪有这么完美，只要做好现在的自己。活在当下，不要浪费生命就好。

题目问错了，是自己的问题，关闭了。

2013年5月markyun的To Do List

UED团队 招前端工程师

UED团队 招 前端开发工程师（2名）

工作地点： 南京

工作时间： 早九晚五 （几乎不加班）

工作职责：
与设计MM及后端开发协作完成项目的前端开发与交互效果;

职位要求：
1、2年以上 Web 前端工作经验，熟练掌握 HTML/CSS/JavaScript基础知识；
2、具备良好的代码风格和编程习惯，能够使用模块化的方式编写代码；
3、具备较好的问题分析与解决能力，能够进行跨部门协作开发；
4、有复杂网站/HTML5/CSS3/Web系统应用开发经验更好；
5、具有良好的审美观和用户体验意识及熟悉UED工作流程的当然更好；

工作福利：
1、五险一金+补充商业保险
2、年终绩效考核奖
4、带薪年假、节假日福利 、节日礼物、生日礼物
5、定期团队活动经费、公司组织春游活动、家属亲子活动。

我们有专业的分工：需求分析、原型设计、视觉设计、前端开发、后端开发、测试团队、运维团队；绝对不会让你一人从头干到尾。

其他还有一些杂七杂八的福利，比如团队的妹纸数量多于汉子，买（技术书）部门全报销，公司班车覆盖南京主城区，接送到小区门口或地铁站，自己有什么好想法提出来领导就会帮你实现。

我们是一个年轻的团队，欢迎想来南京发展的朋友找我聊聊。

面试题中javascript部分中有个小错误

这里
其中

写一个通用的事件侦听器函数中：

element.removeEnentListener(type, handler, false);中的removeEnentListener是不是拼写有错误。
应该是removeEventListener吧。

关于css问题的请教

之前遇到一个css问题在很多地方都会遇到，是盒模型的折叠引起的。比如说在这种情况下会产生折叠：父级高度不确定，然后给子级设置一个margin值或者padding值，这个时候会产生塌陷效果，无论设置的margin值多大都达不到预期，我不是很明白这种效果产生的原因，所以请教一下。

圣诞节不说Merry Christmas，而说Happy Holiday。

圣诞节不说Merry Christmas，而说Happy Holiday。

现在主流媒体在提倡大家过圣诞节不说Merry Christmas，而说Happy Holiday。这完全是为了照顾犹太人而做出的改变。犹太人在二战以色列建国之前，在全球各处一直处于非常窘迫的地位，到处被驱逐被**，即便是讲究独立自由平等的美国，在几十年前犹太人也处于比较尴尬的地位。但是现在的美国犹太人几乎控制了美国国家机器，控制了好莱坞和美国各大媒体的宣传机构。梅尔吉布森曾拍摄电影耶稣受难记，结果被犹太团体打压，这些年在好莱坞混得非常惨淡。

对于为什么犹太人不过圣诞节，这里做一下常识普及。因为犹太教不认为救世主曾经降临过，他们不相信耶稣就是圣经旧约中的弥赛亚，所以也没有理由过庆祝耶稣降生的圣诞节。如果对犹太人说Merry Christmas！他们会觉得是冒犯的行为，有些极为保守的犹太人不过任何西方节日，比如愚人节，复活节，圣诞节，甚至不过公历新年，他们有自己的新年，称为Rosh Hashana, 因为犹太人用的是月历，所以日期跟公历差很远，他们的纪年是由创世纪开始的，2013年是Jewish New Year 5773。如果不想冒犹太人，最好说“Happy Holiday”。其实在圣诞节期间，正好会碰上犹太人的一个主要节日 Chanukah，这是他们的灯节，小孩们都要掌灯，有点像**的元宵的意思。对他们讲“Happy Chanukah”会让他们更高兴。.

关于如何使用前端技术制作移动端APP原型

最近工作中遇到的几个问题，正在寻找解决方案。原来没有做过移动端的项目，没什么经验，先把问题列出来， 有合适的方法，再来更新。

1、如何使用前端技术制作出移动端APP原型（带复杂的交互，效果像原生的一样好，屏幕自适应）用于给客户展示？
Ios可以通过Axure生成展示原型，Android通过浏览器展示；
用HTML5和CSS3做的仿原生应用的页面切换页面会闪屏；
如果使用图片则不同大小的屏幕，缩放又出现了问题。满屏加自适应待解决。

2、前端开发，如何在不同的SVN上进行团队同步开发？（一个在南京，一个在其他地方）

3、UED团队作为一个独立的部门，如何与前端开发团队协作，（如何介入，何时介入，各负责那部分）？

4、前端开发各种规范整理。根据项目实际要求，选择不同级别的规范执行。

.background-color:#00deff\9; /*IE6、7、8识别*/

.background-color:#00deff\9; /IE6、7、8识别/
【background-color 之前没有 . 】
css hack 下面的版本一般用得更多
.test {
color: #90\9; /* For IE8+ /
*color: #f00; / For IE7 and earlier _/
color: #ff0; / For IE6 and earlier */
}