xiongzhengxiang的专栏

转载 前端工程师的价值体现在哪里？

这是一个很老的话题“前端工程师的价值体现在哪里？”。有人说：“前端工程师之于网站的价值犹如化妆师之于明星的价值。”一位好的web前端开发工程师在知识体系上既要有广度，又要有深度。当然，Web前端工程师并不是设计师，每天接触最多的是代码，代码，还是代码。对此，你是如何给自己定位的？你的价值是否能够得到很好的体现？如今，旧话重提无非是想与开发者们共同探讨下前端工程师的价值所在，希望对你有所感悟。

转载 周鸿祎交流四大用户体验心得 承认360产品很土

周鸿祎今日在UPA中国用户体验大会上交流了四大用户体验心得，同时也以他惯有的自信承认：“360的产品很土。”周鸿祎认为，做产品没有一招制敌的方法。“我做了很多产品，我在用户体验上犯过巨大错误，被人骂得狗血碰头，有很多经验教训。”第一， 用心，把产品看做自己的产品。可能你在公司只是一颗螺丝钉，很多人没有真正用心。如果不去思考怎样拿出更好的方案，把事情做得更好，那就没有真正用心

转载 一个前端工程师眼里的NodeJS

JavaScript单线程的误解　　在我接触JavaScript（无论浏览器还是NodeJS）的时间里，总是遇到有朋友有多线程的需求。而在NodeJS方面，有朋友甚至直接说到，NodeJS是单线程的，无法很好的利用多核CPU。　　诚然，在前端的浏览器中，由于前端的JavaScript与UI占据同一线程，执行JavaScript确实为UI响应造成了一定程度上的麻烦。但是，除非用到

原创 Web APP 开发框架大探秘

随着native app 的风风火火，web app 也是风生水起。前端开发界，不甘寂寞，拿起三件法器（js、html5、css3），准备在app的世界开辟另一片蓝海。兴致冲冲得进入战地，却被各种框架迷得晕头转向。这篇小文，将介绍流行的一些框架（titanium、phoneGap、Sencha touch、Jquery Mobile、jqtouch），对他们做出对比分析，希望在大家做web app

原创 js 设计模式 第十三章 Flyweight Pattern

why?当一大堆类似的复杂对象被创建，导致内存被大量占用，浏览性能大大降低时，我们应该有所行动，需要优化这些对象。Flyweight Pattern 就是用来做大量对象优化工作的。how ？Flyweight Pattern 将大量的这些复杂对象，转换为少许的一些共享对象，这将大大减少内存的占有what？Flyweight Pattern 目标是减少你需要创造的

转载 开源中最好的Web开发的资源

文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。学习HTML 5编程和设计★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码很不错的 HTML5 Dashboard – Moz

原创 听《设计模式》培训课程有感

今天，参加了《设计模式》的培训课程，感觉收获良多。一方面是，最近一直在研究这方面的内容，很多东西，老师一提起来，就能想起很多，另一方面，老师实力强大，充分结合实例，说明各种模式的使用场景。以下是简单的一些心得：1 软件发展，就是不断分层、模块化。举个例子：从汇编 到 c。c 在汇编的基础上，加了一层编译器，这样，程序开发人员就不用操行各种寄存器；c 还引入了模块化，将不同功能的函数，放在不

原创 js 设计模式 第十二章 Decorator Pattern

why？当我们想给类增加新功能时，我们可以通过派生类实现。但是用了Decorator Pattern ，我们不用派生各种新的类。装饰器模式的适应场景：1 需要为类增加新特性，但是为新特新子类化，不实际。2 为函数添加功能，而不需要重写函数how？Decorator Pattern 引入了两个名词：component ，即装饰类用来修饰的主体装饰类对象可以代替comp

原创 js 设计模式 第十一章 Adapter Pattern

why?如果页面使用的是YUI前端框架，但是想转换到JQuery 框架上，怎么办？将用到YUI接口的地方都换成JQuery 吗？可以，当工作量大，还不能保证不会漏掉。用Adapter Pattern 吧，实现轻松切换如果接口不完全适应当前应用，怎么办？重新写个函数？可以，但是含有重复劳动，浪费！用Adapter Pattern ，写个函数，再封装下原来的函数how?1 对原有的接口

原创 js 设计模式 第十章 Facade Pattern

顾名思义，外观，就是套上华丽的外衣，实际上，没有这个外衣，也是没有问题的。why？如果直接使用第三方的接口，一方面，接口名字可能不符合应用的业务性质，另一方面，完成一个功能，可能需要复杂的多步操作。这些都给程序的可阅读性、可维护性带来不便。有了外观模式，我们给实现外观模式的类起个更符合业务的名字，封装复杂的操作，这样，程序就变华丽了，是不？how？从形式上看，facad

原创 js 设计模式 第九章 Composite Pattern

why？解决递归复杂对象里面，进行递归操作的问题，Composite Pattern 让这个问题，用简单的一句话搞定。how？Composite Pattern 把所有的子节点都组织成树的结构。leaf 节点实现的接口函数，是你期望的函数，如show，hide。composite 节点要实现的接口函数，包含【’add','remove','getChild'

原创 js 设计模式 第八章 Bridge Pattern

场景 1  事件处理是页面上，我们往往用到事件绑定。这这个例子中，我们对元素添加click 事件处理，在handle 函数中，通过得到元素的id属性，进行ajax操作。addEvent(element, 'click', getBeerById);function getBeerById(e) { var id = this.id; asyncRequ

原创 互联网行业常见名词

游戏运营数据解析-MAU DAU DAU/MAU   cacMAU=Monthly Activited Users  月活跃用户DAU=Daily Activited Users  日活跃用户DAU/MAU用户活跃度指数衡量用户的黏性，留存率，游戏收益情况，这在社交游戏中使用率非常高，可以认定为用户活跃度指数，也就是用户的活跃度如何，理论上可以接

原创 js 设计模式 第七章 factory

在一个对象中，我们往往会包含其他的对象，最直接的方法就是通过new 来生成一个对象，但这带来一个问题 ，两个类依赖了。用工厂的方式，能解耦这两个类例如，一个自行车商店，里面卖各种型号的自行车。我们可以这样写：var BicycleShop = function(){};BicycleShop.prototype = { sellBicycle : function(model

原创 js 设计模式 第六章 chaining

why？chain 是针对对象的，chain链条上的所有方法都是这个对象的方法一个没有用chain技巧的var dom = document.getElementById('dom');setStyle(dom,'color','green');show(dom);如果使用了chain$('dom').setStyle('color','green').sh

原创 浏览器 bookmarklets 如何安装 和 使用

什么是Bookmarklet？（下面有补充）Bookmarklet ，一般都称呼为小书签。它是一段 JavaScript 脚本，一般网络上的小书签都是一个链接，它的安装非常简单，只需要把链接拖到你的收藏夹里。Bookmarklet的优势？1.同时适用于各种浏览器Bookmarklet可以同样作用于当前各种浏览器。一般一个Bookmarklet，可以直接作用在Chrome，Fir

原创 js 设计模式 第五章 单例模式

单例模式why？1 解决global variables 过多的问题。你懂的。__.dom,__.event,这里__就是个单例对象，所有的dom及event都放在__里面，不用再放在global域how？将用到的属性和方法都放在一个单例里面，这样，这些属性和方法将不会污染全局空间what?最简单的单例模式var __ ={ version:'1.0

原创 js 设计模式 第四章

继承why？多个类公用的功能，如果重复拷贝，一方面，工作量大，另一方面，如果公用功能需要修改，则需要修改所有类中的这个功能，重复工作量大。为了减少复制以及带来的不利于修改的问题，我们需要继承how？三种方法：Classical Inheritance  Prototypal Inheritance Mixin Classeswhat?第一种方法：

转载 三星成功秘诀：它何以抗衡苹果

腾讯科技 孙实 10月13日报道三星苹果专利大战的硝烟似乎已经渐渐褪去。一场官司，耗时一年多，战线波及全球十几个国家，几十场诉讼下来，以苹果的胜利暂时宣告结束。两大消费电子行业巨头能够把仗打得这么久，战线拉得这么长，说明了一个问题：三星已经成为可以与苹果比肩的竞争对手。韩国人曾经自嘲一生有三件事情无法避免：死亡、税收和三星。用“如日中天”来形容时下的三星，恐怕并不为过。数据

原创 国内几个开源网址

http://www.oschina.net/news/32621/tengine-1-4-0淘宝的开源服务器，改编自nginx。http://code.taobao.org/淘宝开源网址http://www.sndacode.com/doc/about.html盛大开源网址

转载 细节决定成败？

以下文字摘自DoNews资深作者/郭子威。     1、拍《泰坦尼克号》的时候， 有八卦说，詹姆斯.卡梅隆要求在船上装载来自欧洲的瓷器，然后在颠簸中全部摔碎，因为“欧洲货才能还原现场气氛”，结果凭空多出来几十万美金的成本。最后《泰坦尼克号》卖了18亿刀票房。这则八卦，很容易联想到“细节决定成败”等伟大的格言。不过你想想，如果某票房搞砸了的导演，也玩这么一

原创 js 设计模式 第三章

封装 + 信息隐藏why？让你同原始数据解耦和what？三种定义对象的方法1 完全暴露在外的方法(利用传统的，用函数模拟构造函数。因为所有的属性和方法都是公开的public)   var Book = function(isbn,title,author){       this.isbn = isbn;       this.title = title;

原创 js 设计模式 第二章

interfaces     接口是一种指定对象应该有哪些方法的技术，他不关心方法如何实现。why？设计模式作者说：“我们应该基于接口编程，而不是基于实现编程”。基于接口编程的好处是：实现相同接口的对象，可以互换，而不影响功能实现。接口是具有自说明性质的，接口告诉开发人员类实现了什么方法，这让类的使用变得简单些了。同时，如果你会使用实现了某个接口的类，那么，所有实现了该接口的类

原创 js 设计模式 chapter 1

这几天，看了 《pro javascript design patterns》这本书的前几章，主要介绍了js的特性，浅显易懂。下面总结下js的基本知识。1 js 非常灵活，可以通过函数来实现功能function startAnimation(){}function stopAnimation(){}也可以通过定义类来实现，类的作用主要是：对象可以用自己的变量和方法只作用在类的范

转载 用document.domain解决Ajax跨子域

因为浏览器的安全策略，浏览器不允许不同域(比如：dancewithnet.com和lab.dancewithnet.com)、不同协议(比如:http://dancewithnet.com和https://dancewithnet.com)、不同端口(比如:http:dancewithnet.com和http://dancewithnet.com:8080)下的页面通过XMLHTTPRequest

原创 seajs 模块路径查找流程

原创 spm build 打包方式

spm V0.4.1 版本，有两种build 方式1 通过命令行，将各种参数放在build 后面，形如：    spm build xx.js --combine_all --app_url='.\' 2 通过编写配置文件：build-config.js。spm build **.js 的时候，会自动根据配置文件进行打包。         配置文件的写法，如下：

原创 javascript 设计模式学习

1js 是弱类型的语言，各个简单数据类型的转换是：toString 可以将数字转换成字符串parseFloat 、parseInt 可以将字符串转换为数字!! 可以将数字转换为bool

原创 高效css的写法

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素1 selector的性能排序   id selector > class selector > tag selector > universive selectorso,key selector 决定了css 规则的性能2 少些css rule，学习规则是可以继承的不能继承的属性：比如border

原创 渐进增强、优雅降级

何为渐进增强、优雅降级常用两种策略：要么优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复），要么渐进增强（progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 两者间的（微妙）差别万一你正挠着后脑勺，试图找出“优雅降级”和“渐进增强”之间的差别，那么

转载 Loading JavaScript without blocking

Loading JavaScript without blockingPosted at June 23, 2009 09:00 am by Nicholas C. ZakasTags: Blocking, JavaScript, PerformanceI was reading Steve Souder’s blog post on loading scripts

原创 w3c performance api 学习

interface PerformanceTiming { readonly attribute unsigned long long navigationStart; //打开网页的那个时间点 readonly attribute unsigned long long unloadEventStart; readonly attribute unsigned long long

原创 浏览器关键时间点计算

通过netlimiter 等工具，限制网络速度，我们可以看到页面是慢慢打开的，这个从直观的角度，说明了浏览器是边下载内容，边进行渲染的。下面讲讲在渲染过程中，几个关键时间点的计算1 startRender timestartRender time 是指从浏览器发出请求，到head解析完毕的这段时间。由于网络请求涉及到网络和服务器的内容，从前端优化的角度，我们将startRender t

原创 Raphaël 学习

1 fire a  event 的方法场景：当我们要显示调用某个元素的事件时raphael 对象保存了一个事件数组，数组元素的name属性表示事件的类型，数组元素的f方法，表示对应事件类型的所有绑定的方法。如下，触发click 事件的方法function triggerClick(element) {    for(var i = 0, len = element.events.

转载 浏览器的加载与页面性能优化

本文将探讨浏览器渲染的loading过程，主要有2个目的：了解浏览器在loading过程中的实现细节，具体都做了什么研究如何根据浏览器的实现原理进行优化，提升页面响应速度由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器

转载 HAR 规则说明

HAR 1.2 SpecThis document is intended to describe a HTTP Archive 1.2 (frozen) format that can be used by HTTP monitoring tools to export collected data.HTTP Archive v1.2One of the goal

转载 从用户体验出发的性能指标分析-DOM Ready

如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接

原创 浏览器显示页面的几个关键时间点

一  开始渲染阶段的时间点：      1  TTFB(Time To First Byte)    发起请求到服务器返回数据的时间         wiki(Time To First Byte or TTFB is a measurement that is often used as an indication of the responsiveness of a webse

转载 周鸿祎：什么是好的用户体验？

摘要：1 超过用户的预期2 体验是可感知的3 注重细节内容如下:说今天是一个体验为王的时代，一点也不过分。做大众消费品的人可能已经感觉到，今天消费者的话语权越来越强，如果你的产品做得好，不久就会口口相传；如果你的产品做得烂，不久就会骂声一片。所有这一切在过去是不可想象的。但今天，每个人都可以发布信息，每个人的声音即使弱小，也总能被别人听到。在

转载 搜狗，"中公司"的焦虑与攻略

昨天（8月17日），奇虎360上线了它的网页搜索。此前一个星期，周鸿祎接受媒体采访还在谈“没有想好做什么样的搜索”， 几天后，360打响了搜索第一枪。几个小时后，国内搜索市场占有率第二、超过7%（百度占有率80%）的搜狗出了份评测报告，CEO王小川随之在微博上转发了这份报告。报告显示，上线第一天的360搜索，整体搜索效果在腾讯搜搜之上，次于百度、搜狗与谷歌，而热搜词效果仅次于百度与搜狗。