Kejun’s Blog

我想这是首次提出“前端基础架构”的概念吧，算是抛砖引玉，希望以后能够看到更多更深入的分享。

前端基础架构是前端团队运行所必需的规范、工具和系统的体系。一个团队要高效的运行，并且能够创造更多价值，首先要做的就是建立和完善前端基础架构。

slides: http://sn.im/2010_fe_infrastructure (建议用chrome/safari浏览)

----------------------------------------------
　　 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
　　 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
　　如何才能做得更好呢？
　　 第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
　　 第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
　　 第三，必须学会运用各种工具进行辅助开发。
　　 第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。
　　 可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。
　　 目前市面上关于Web前端开发的书主要都是针对单一技术的，《编写高质量代码》与这些书有着本质的区别。它主要想实现两个目标：第一，为不太有经验的 Web前端开发工程师建立大局观，让他们真正了解和理解这个职业；第二，帮助有一定Web前端开发经验的工程师修炼内功，通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。
　　 《编写高质量代码》的前两章讨论了网站重构和团队合作，这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质应该是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。
　　 代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。《编写高质量代码》中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。
--------------------------------------------------------------------------------
说明：推荐序最后对我的标注“著名xxx”，编辑加的有点不合适，大家尽可以忽略。阿当牺牲一年多的休息时间，一个字一个字的完成本书，精神可嘉。另一个意义上，阿当也代表我们这一代前端工作者（05年前参加工作且一直乐此不疲的从事前端工作，我称之为中国的第一代前端工程师了以安慰）所做的一个很好的阶段性总结。恭喜阿当！同时也感谢阿当！

当前端工程师拿到一个设计稿，如：

通常希望设计师在设计稿上标注必要的UI规格，设计师从视觉的角度，通常会这么标：

这样的标注其实对前端工程师帮助不大，还要再进一步翻译成更合理的（如下图）。所以为什么web设计师要通晓CSS，并不是让设计师写CSS，而是理解UI的显示原理，才能产出更合理的设计。如果设计师能直接这么标注，开发起来就太舒服了。

框框标出的是对象。关于html设计模式的话题，我会在7/17webrebuild的活动上说一说。

----------------------补充---------------------

1. 第三张图出来，html结构也就出来了
2. 注意第三张图的框不是随意画的，是在行高1.5的前提下真实的边缘
3. 本例设计师在理解line-height，盒模型，collapsing margin，浮动的情况下，设计时留白才能合理
4. 设计师的设计思路和工程师的开发思路是一致的
5. 设计师和工程师考虑的都是：结构＋内容＋样式
如果能够保持同一思路，即按同一模式设计和开发，那么整体效率和质量都可以得到很大提升。

这一点整个团队达成一致后，才能开展模块化设计和开发。

----------------------再次补充---------------------

看来引起不少争议，再进一步阐述我的观点：
1. 在设计稿上用css描述规格，就好比敏捷开发中用伪代码先把逻辑写出来一样
2. 设计师先有box的概念，把页面中的对象（元素）用框界定出来，再定义对象之间的留白关系
3. 用伪css描述更精确。标注的关键是那个值，3图和2图的值完全不同，而3图是根据显示原理标的更准确，比如3图中margin-left:62px, 左边小图的宽度有一定灵活变化的余地，不仅仅是图片距右边文字的间距是 14px。
2图会导致多种实现可能，经验丰富的会考虑结构的灵活，经验欠缺的会容易把结构定的很死。在html开发上应该追求的是一致性，质量平均的产出。

对于Millettang回复中说的，要知道前端工程师的价值不仅仅是页面的实现，那样只是设计师的助手而已。对于html/css开发来说，应该可以快速的套用模式，快速的把伪css转成产品级的css，产出质量平均，风格一致，高度可维护的html，然后把更多精力放在javascript开发，包括用css3增强等方面上。

第2张图是最不可取的，完全从平面设计的角度出发。Jsuper不要学这个。

“Design is about how it works, not just how it looks. ”

刚刚看了蔡学镛的《分手时刻》，很有感触。原文：

http://jerrylovesrebol.blogspot.com/2010/06/blog-post_24.html

公司和员工是双向考核，公司考核员工是因为付出金钱给员工，员工考核公司是因为付出智慧给公司。前者理直气壮，后者为什么不呢？真正的铁饭碗不是某个公司给的，而是自己打造的。商业社会的残酷，也给更多“职业工作者”更多的机会，现在有职业经理人，职业杀手，也应该有更多的职业工程师，职业前端工程师，职业设计师，他们的身价就是他们的专业性，每个铁饭碗都是由专业、经验、能力...铸就的。追求这个，远比追求更高职位和名利更长久。

更没必要刻意用某种企业文化给员工洗脑，企图培养员工的ownership。责任心来自专业的态度，公司为员工提供一个发挥专长和专业成长的平台，一切都会变得顺其自然。

不要把自己封闭在一个公司的小世界里。多走出去交流，保持学习，坚持做正确的事，客观的对自己的能力做出评估并渐进增强。

其实在今年的一次交流活动中，我也表达过类似的观点，如果在专业的问题上不能达成有效沟通n次，或者完全不能做正确的事，那么就果断的分手。

tab形式的导航是最常见的一种UI。看看下面这个例子：

细节：
1. 分选中/非选中状态
2. 每项是叠在前面下面的效果，左边有个阴影，但第一项没有
3.所有按钮宽度适应文字可变
4. 最后还有一个阴影
5. 底部有条灰线100%宽

HTML结构：
<div class="tabs">
<ul>
<li class="first on"><a href="page1.html">正在收听</a></li>
<li><a href="page2.html">最近播放过的歌曲</a></li>
<li><a href="page3.html">好友的电台</a></li>
<li><a href="page4.html">常见问题</a></li>
</ul>
<div class="others">&nbsp;</div>
</div>

完全是从信息结构出发设计。可见，UI无论多复杂，HTML结构也可以独立出去。

具体实现: http://hikejun.com/demo/css/css_simple_tab.html

CSS实现用到块级格式上下文(Block Formatting Contexts，这篇文章值得好好看看)。
其实，如果用过开心网的话就会对这个Tab很眼熟，但他们写的不够好，可以做为对比的反例。

--------------(补充)----------------------------------

同样的HTML结构。利用CSS3实现无图版：
http://hikejun.com/demo/css/css_simple_tab_nopics.html

有这么一段HTML，请挑毛病：

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案 http://www.w3ctech.com/

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title="Hyper Text Markup Language">HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

今天裕波发了一链接给我是周爱民老师在淘宝做的一个分享的视频：“前端，架构，框架与库” （http://v.youku.com/v_playlist/f4262628o1p0.html）又看了淘宝玉伯的感想（http://lifesinger.org/blog/2010/03/thinking-of-architecture/）。看的我也想说两句。

无论是大公司还是小公司，创业公司还是成熟公司的前端开发都需要一个“架构师”的角色。理由很简单就是我在这些公司都呆过。但大家对“前端架构师”的理解，我怎么听都觉得太高深了，太玄了，像普通的前端工程师，产品经理，设计师一样它是一个很具体的工作，具体到每天应该做什么都可以列出来。另外它并不深，甚至说看起来简单。

前端架构师的工作：
1. 他需要制订一套跟上下游环节更高效配合的技术方案。具体说有改进模板（视图层）的开发方式，团队内部开发方式，维护和测试方式等。

2. 他要把关各种技术的实施方案。哪种好，哪种有风险，哪种还不成熟，哪种成本高。需要“把握问题的关键，平衡设计”的能力。

3. 他要主动联合相关部门，从性能、易用性、安全性等方面提升产品的价值和竞争力。

4. 他要正确选择适合产品的框架和库（或设计这样的框架和库），建立建全规范体系。保证代码风格的一致性（解决开发效率的问题）。

5. 他要有前瞻性。引入先进的前端技术落地到具体的产品中。

6. 他要负责团队成员的甄选。

7. 他要能做PPT，向高层布道。

大致就想到这些。可见，干这个怎么也要方方面面知道的多，技术的理解准确，直觉（经验丰富），有一堆成形的或实践过的理论和方法论（我虽然鄙视理论高手，但干这个比须是理论高手），沟通能力强，有资历（有一定的个人影响力）。一下子就想成为前端架构师不是说技术上有多难，而是缺失经验累积的过程，这让你缺少某种敏感性和直觉，对技术的理解也不能真正准确。所以这基本上是老帮菜，老油子们干的事。

框架本质上就是为解决各种问题提供的一套可复用的模式。像具体的应用开发框架、模板框架、组件框架、类模板，模式库等。我们在做任何项目时，不用想先拽过来，再按照它提供的线索一块一块填上具体的内容。而库是指一堆可复用的具体功能的集合。二者区别显而易见，侧重亦完全不同。现在市面上各种库的讨论和介绍都很多，框架则很少。框架很容易被混淆在语言的设计模式里，我认为这不是重点。我在豆瓣正尝试通过一个很轻量的框架，组织现有的javascript开发，日后有机会再做详细分享。它可以灵活置换核心库，和组织各种库及组件的应用。我认为这是框架该干的最主要的事。当然，框架可以扩展出很多种，凡事事先有个框架框一框，可以更高效的产出结果。

最后再次强调前端架构是有很具体的和丰富的内容的，它正成为整个公司技术架构的重要一环。希望在下次D2或其他前端技术交流中，看到更多更具体的前端架构的分享和交流。

Javascript开源库/框架

浏览器

Web标准

热门话题

前端会议

09年前端领域着实涌现不少令人惊喜的技术和事件，对于前端开发者来说要不断更新自己的知识否则很快就Out了。同时，也可以看出前端技术的发展那是相当的快。2010年这种发展势头不会减缓，期待经历更精彩的一年！

Zakas 1/22在twitter上分享了Baranovskiy的一篇文章“So, you think you know JavaScript?”（你认为你够了解javascript吗）标题很叫板。结果5小段代码做的稀里哗啦。

今天Zakas专门撰文解答了这几道题（http://www.nczonline.net/blog/2010/01/26/answering-baranovskiys-javascript-quiz/）。不愧是大师，很深刻。

第1题: 是否真的理解声明变量
if (!("a" in window)) {
var a = 1;
}
alert(a);

知识点：一是变量声明和初始化是分开的。二是Javascript引擎仅仅是把变量的声明提到当前scope的最前面解释。三是所有全局变量都是window对象的成员。所以这段代码实际是：
var a;
if (!("a" in window)) {
a = 1;
}
alert(a);
答案就很清楚了－‘undefined’。

第2题：是否真的理解声明function
var a = 1,
b = function a(x) {
x && a(--x);
};
alert(a);
声明function只有两种一种是: function声明
function a (x) {
// do something.
}

另一种是: function表达式
var a = function (x) {
// do something.
}

function声明必须有方法名，而出现在表达式里的方法名都会被忽略。第二种function表达式就是一种赋值表达式，里面的方法名将被忽略。原文回复中提到的这篇文章（http://yura.thinkweb2.com/named-function-expressions/）写的很详细。

第3题：是否理解function声明的优先级
function a(x) {
return x * 2;
}
var a;
alert(a);
function声明会覆盖掉同名的变量声明，无论变量声明在前还是在后。但当变量赋值后，function就无效了。如：
var a = 1;
function a(x) {
return x * 2;
}
alert(a); //结果是 1

第4题：考是否理解参数对象
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
答案是10。arguments相当于对应x, y, a建立的副本，Javascript引擎实现它们对应的值同步。所以arguments[2]的值变化了，a也随之变化。

第5题：是否真的理解call方法
function a() {
alert(this);
}
a.call(null);
ECMA262第3版标准里有明确说明：
“If thisArg is null or undefined, the called function is passed the global object as the this value. Otherwise, the called function is passed ToObject(thisArg) as the this value.”
可见，如果call的第一个参数是null或undefined，被调用的function将被传入全局对像作为this。全局对象就是window对象。所以，这道题的答案就很清楚了。

Zakas的原文更详细，我只是用更直白的话解读了一下。建议看原文。

今天连着看了两个视频。一个是“扩展现实”技术（出自这里）。

"大家看得像神一樣的某項硬體功能，在成本上不過是幾塊錢、甚至幾毛錢美金的東西；但只要能跟軟體搭配流暢、能引發全新的應用模式，就是好東西。" -Fred

制造业中软件和硬件的完美结合，即在相同的核心技术下会创新出各种惊人的产品，像苹果的iphone、air、magic mouse到马上露面的tablet，其核心不都是multi-touch吗。这些创新产品其实都是同一种技术的不同应用模式。放到互联网行业里，就是前端创新。底层技术再如何牛逼，用户接触不到，一定要通过前端的各种应用模式让用户用到。

所谓应用模式大到一个产品模式，小到一个功能。像twitter就是典型的产品模式创新。产品级别的事我们说了不算，那就在产品细节的应用模式上挖掘吧。前两天看到的youtube链接暗藏的功能，让我一惊，链接还能玩出这么多的花样。比如，我想告诉我的朋友这个视频2分18秒开始很精彩，就可以直接发这样的链接给他：http://www.youtube.com/watch?v=-Tdk60viEzA#t=2m18

另一个是“第六感”装置（出自这里）。当手机追求越来越小，笔记本追求越来越薄的时候，这个印度人只是通过一个摄像头和一个麦克风就可以把一张纸变成一个笔记本。他的创新不是硬件的创新，而是从人的日常生活出发，把现实生活的信息导入到虚拟的网络中，再将处理结果带回到现实生活中。按他说的硬件成本只有300美元，主要是硬件上的软件系统是最厉害的，这项技术足以让他成为最富有的人，但他准备开源。

他的创新是典型天才型的。突破传统模式的条条框框，巧妙的寻找出一条全新的途径。像这个视频前面表达的，为了获取信息，人们是不得以坐到电脑前的。他创新的灵感是源于如何更human。前端工作的创新也一样，应该源于如何让交互跟人性化，让展现更人性化，其它都不靠谱。不要听什么产品策略啊，定位啊，跳出这些限制吧。前端要善于创造性的应用后端的技术，才能引发新的应用模式。常听前端工程师抱怨没时间研究Javascript，不要把所有时间都仍在这上面。成为一个“学究”似的工程师没什么好处，主要价值就丧失了，那就是创新。前端工程师提倡跨界学习。

反对崇拜和追捧。我记得以前看过一个国内网站，简直就是雅虎和淘宝的混和体。很多人崇拜苹果啊、崇拜Google啊、崇拜xxx人啊...以至于表面的“借鉴”，教条式的追捧。身处这个高速发展的时代，任何权威都是有一定“有效期”的。

注重人的应用能力和创造力。前不久看了Zakas谈如何面试前端工程师（翻译版），他反对问很偏的技术问题，或问太多的问题，最好从一个开发实例谈起，一一会涉及技术细节，设计思想，方式方法。实际上是考察对方的应用能力和想法（know why和know how）。的确这两点是前端工程师最宝贵的素质，同时也是财富。

总结，前端创新是在应用层面上，不是技术层面上。前端创新要以用户为本不是以老大为本。前端创新要拒绝copy。前端创新的根本是人协作贡献智慧。