摘要：
谈谈UI架构设计的演化经典MVC在1979年，经典MVC模式被提出。在当时，人们一直试图将纯粹描述思维中的对象与跟计算机环境打交道的代码隔离开来，而Trygve Reenskaug在跟一些人的讨论中，逐渐剥离出一系列的概念，最初是Thing、Model、View、Editor。后来经过讨论定为Mod... 阅读全文
摘要：
在一些著名的网站的搜索框上，会有一种“自动完成”功能。比如google、百度和淘宝：现在，我们来考虑如何实现这个功能。第一步：模仿任意一个网站，编写一个类似的网页效果原型。在这一步，不要估计开发时间。把学习新技术（一些前端基础知识）的时间花在这个阶段。以完成原型为目标，不必深入技术。去http://www.w3schools.com/获得入门知识去https://developer.mozilla.org/查阅文档第二步：仔细观察三个网站的“自动完成”功能，比较它们功能的相同点和不同点，写成一份简单的需求分析文档。请仅仅从功能角度分析这三个组件。提示，如果你试图从代码中找到答案，你很可能陷入地 阅读全文
摘要：
当你看到这篇文章意味着我辜负了@教主的殷切期望周末木有去约会，以及苏老师@我思故我在北京鼓楼的落井下石成功了……本文demo powered by 已经结婚的@老赵的不再维护的wind.js物是人非啊……说回正经事，在上一篇文章中，我们取得了初步成果，毫无意义的字符变成了有意义的token。接下来我们要把这些简单的词变成DOM树，这个过程我们是使用栈来实现的，任何语言几乎都有栈，为了给大家跑着玩我们还是用JS来实现吧，JS中的栈只要用数组就好了：function HTMLSyntaticalParser(){ var stack = [new HTMLDocument]; this... 阅读全文
摘要：
感谢老庄（@庄表伟）、耗子叔（@左耳朵耗子）、貘大（@貘吃馍香）的鞭策，使得我有勇气开始这个系列。还有感谢@玉面小飞鱼妹纸的提问，这是我的文收到的仅有的认真回复，我一定努力快点把这系列写到布局的部分回答你的问题……从现在开始我们来扮演浏览器。基本知识对我们来说HTML其实首先是一坨字符串。嗯，考虑到我们不能等下载完成再开始解析，实际上我们要面对的是"字符流"。为了把字符流解析成正确的DOM结构，我们需要做的事情分为两步：词法分析：把字符流初步解析成我们可理解的"词"，学名叫token语法分析：把开始结束标签配对、属性赋值好、父子关系连接好、构成dom树词 阅读全文
摘要：
一些基本概念viewport: 展现网页的媒体，比如窗口或者某个区域，它的大小是有限制的，为了不被平台术语所束缚，我们给他起名viewport，中文意思就是视口。canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间，而且这些空间通常尺寸会超过viewport的大小，于是实际上我们需要设想一个无限大的画布来绘制我们的元素，我们把它称为canvas。box: element（元素）和node(节点)是大家很熟悉的概念，当我们做布局计算的时候，通常会把节点变成box，一个节点可能产生多个box，伪元素也会产生box。render tree: 对应于dom树，我们把box的包含关系构成 阅读全文
摘要：
起因，某日电话面试之后满心郁闷的我发了两条微博：面试的时候问个css的position属性能刷掉一半的人这是啥情况……其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了……其中的一些回复让我认为非常有必要写这样一篇文章来说说面试和面试题的事情。关于题目什么样的面试题是好的？我认为有三点衡量指标：区分度深度覆盖范围是的，请注意我并没有使用“难度”这个词，因为这三个 阅读全文
摘要：
Responsive Web Design响应式Web设计ETHAN MARCOTTE原作 于2010年5月25日http://alistapart.com/article/responsive-web-design设计师熟知的在印刷媒体的控制功能，常常也会期望Web媒体会有，但是他们仅仅限制在打印出来的页面上才能使用。我们必须接受这样的事实：web根本没有同样的限制和为这样的弹性准备的设计。但是首先我们必须接受这种落差和流程。——John Allsopp, “A Dao of Web Design”英国建筑师Christopher Wren有一次开玩笑说他选择了一个"以永恒为目标& 阅读全文
摘要：
（一）"如果A，那么B"，当A为假，这句话永远为真。"如果明天是世界末日，那么请让我拉着你的手迎接。"（二）X星球有两种人：说谎族和诚实族。当你问一个X星球的人"你是诚实族么？"，他会怎么回答？答："是的"。真话和谎言有可能殊途同归，也无法分辨。不论你周围的人说真话还是谎言，终有规律可循。（三）我正在说的这句话，是假话。有些话既不是真，也不是假。 阅读全文
摘要：
jQuery是业内知名的javascript框架，它的实现和设计可以说代表了javascript界最高的水平，本文试从四个方面来以jQuery为例总结库与框架设计的原则和优劣判断。解决问题首先请看一个我实现的框架，我把这个库称为四则运算。function add(a,b) { return a+b;}function mul(a,b) { return a*b;}function minus(a,b) { return a-b;}function div(a,b) { return a/b;}这个库的API简洁优美，实现的更是优雅无比，它把四则运算统一成了函数形式，使得... 阅读全文
摘要：
最近新装了一个PC，配置还算蛮高，i7的CPU，8G内存，2T的硬盘，于是小心翼翼地装了一个干净的正版Win7，但是发现居然开机明显卡？所以做了些研究，发现即使全新安装的正版windows，居然也有些拖累系统性能的功能。1.superfetch服务这项傻X的功能会把你常用的程序按照你平时的使用习惯装入内存，比如你经常下午三点开浏览器，晚上八点玩游戏，他就会这个时间预先读取。它的口号是空闲的内存就是浪费，所以这个nb的服务会尝试按一定比例装满你的内存，当你内存比较大的时候就热闹了，比如8G内存，它就会考虑每次开机定时定点预先填上个两三个G的内存......估计除了生活极端规律的同学，这玩意基本没 阅读全文
摘要：
读过李松峰老师翻译的新书中《CSS设计师指南（第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊，这地方实在是有些没写到位，也有错误（如“叠加的只是垂直外边距，水平外边距不叠加”） margin collapsing现象 BFC（block formatting context）中相邻的两个block-level的盒，上一个box的下边距会跟下一个box的上边距发生叠加，即两者取最大的，而不是相加： run <!doctype HTML><html><head><style ty 阅读全文
摘要：
最近微博上看到一些关于电子书的讨论，尤其是这条微博里的一些言论，颇有感慨，所以作此篇短文。 微博评论中不少人哭喊叫穷，譬如以下(名字隐去)： 作为准码农表示经常下载pdf，专业书真不便宜啊让我们这群买不起书的学生怎么活偏向于支持保护版权, 但对此还是表示中立. 盗版是很不该, 但这个世界真的有很多人买不起书的. 然而最为混账的言论莫过于此（名字故意留下） Ronan-on-the-way：少把自己摆在一个道德制高点。没下载过盗版软件、音乐、电影？说到底还不是利益，你们出版社的利益。 穷就应该盗版？这些人在说这些的时候竟然没有一个人想过，你要看的这书，并非是凭空从石头里跳... 阅读全文
摘要：
元素与盒 在HTML中常常使用的概念是元素，而在CSS中，布局的基本单位是盒，盒总是矩形的。 元素与盒并非一一对应的关系，一个元素可能生成多个盒，CSS规则中的伪元素也可能生成盒，display属性为none的元素则不生成盒。 除了元素之外，HTML中的文本节点也可能会生成盒。 盒模型 一个盒包括了内容(content)、边框(border)、内边距(padding)、外边距(margin)。下图展示了盒模型的直观意义： 盒的尺寸（width与height）定义受到box-sizing属性的影响。box-sizing可选择content-box(默认), padding-box... 阅读全文
摘要：
问题 我的目标，非常简单，就是希望能够在我自己的系统中使用别人写的代码，但是这些代码可能会污染全局变量，甚至可能是恶意的，破坏性的。我要保证这些代码被正确执行，并且其影响范围完全受到控制，这就是我想要的沙箱。 根据我自己的思考以及和一些朋友的讨论，我认为我主要需要解决四点： 1.变量访问问题：第三方可以使用变量名访问到全局变量。 2.this问题：函数执行时的默认this值就是全局变量。 3.eval和Function问题：eval可以动态地生成代码，这些代码只有到运行时才能确定。 4.literal以及自动装箱问题：[] {}以及function可以构造出一些内置类的实例，这... 阅读全文
摘要：
OAuth2是基于HTTP的认证API，一般与OAuth2搭配的API也是基于HTTP的REST风格API（比如新浪微博和github），很多人一定想过是否可以直接从浏览器端调用REST API。 我最近做了一些这方面的研究，因为OAuth2中有secret key的存在，所以纯粹的客户端是不行的，但是服务端仅仅参与认证过程，由浏览器去调用REST API则是完全可行的。 于是比如你想开发一个github应用，那么服务端只需要一个没有界面的Auth服务就可以了，大部分的工作可以让浏览器端完成，这个架构可以大大减轻服务器的压力，对于不熟悉后端语言的前端工程师来说，是个不错的选择。 首先传统... 阅读全文
摘要：
在Web中充斥着所谓的MVC框架，而在我看来，因为一些关键性的技术原因，MVC在Web前端开发中根本无法使用(对的，是无法，而不是不该)。 在MVC原始报告中指出： view永远不会知道用户输入，比如鼠标操作和按键。 很显然，在Web前端，你无法做到这一点，因为Web的程序中，用户的输入必须通过监听窗口、文档和元素上的事件来获得。——而这些东西常常被认为是View。 于是一些奇怪的认识诞生了，比如认为Controller应该是View操作Model的中介。 我曾经尝试设计一个编程模型让所有的事件流经Controller，但是事实上我发现这样的做法非常糟糕。——这个尝试让我从M... 阅读全文
摘要：
MVC原本的设计针对的是SmallTalk这样的整个程序用同一种环境和语言构建的系统，Model/View/ViewModel是一个对MVC的改进，用以适应众所周知的Web环境以及现在的Avalon开发。 阅读全文
摘要：
最近微博上各路大牛又开始争论语言问题,引发了我写水文的冲动,遂写篇文章谈谈我的看法。 首先我的观点是，对编程语言客观合理的评价不该是个A比B好还是A比B差的问题，我认为编程语言应该从以下几个特性去评价： 紧凑性 所谓紧凑，就是有限的语法和运行时机制所容纳的特性，紧凑性是一种优点。在这一点上做得最NB的是Lisp，它的语法定义极度简单，以下几行就是Lisp的全部语法了： s_expressi... 阅读全文
摘要：
加引号是因为我不知道是否真是微软面试题。题目是这样的：有一车在某无限长公路上行驶，其起始位置和单位时间内速度均为有限大整数（正负不确定）， 现有一仪器，在每一时间单位内可以探测1次车是否在指定位置，求一方法能在有限时间内求出车的速度和初始位置。答曰：解此题目分为两个步骤，第一个步骤，探测到车一次第二个步骤，求出车的速度和位移。先解答第一步骤，显然，假设车位移为s，速度为v，在时间t时车的位置必定为 s+v*t现在我在时间t时，可以对<s,v>值做出一次猜测<x,y>，然后探测位置 x+y*t，若这个位置有车，则第一步骤得解，若这个位置无车，则必定说明猜测<x,y& 阅读全文
摘要：
身为一个分号党，我就不在唠叨自己的看法了，为了让我们的讨论更有价值，我挖掘出来一些材料跟各位分享。 JavaScript自动加分号规则,有3条 当有换行符（包括含有换行符的多行注释），并且下一个token没法跟前面的语法匹配时，会自动补分号。 当有}时，如果缺少分号，会补分号 当程序源代码结束时，如果缺少分号，会补分号。 利用我自己的JS语法分析工具JSinJS（https://github.com/kissjs/JSinJS ），我求出了所有能够出现在语句第一个的JS语法标记 （就是Statement的first集合），他们是： ... 阅读全文
摘要：
本文是MVC最初提出并确定概念名称的论文。 阅读全文
摘要：
上篇博文发出来后感觉效果不是很好，遂写篇文章来解释解释。本文可以认为是上篇文章 JavaScript词法（http://www.cnblogs.com/winter-cn/archive/2012/04/17/2454229.html）的扫盲说明：） 阅读全文
摘要：
所有编程语言都有词法和语法，JavaScript也不例外，虽然大部分人对于最基础的词法都基本了解，但是仔细咀嚼细节，还是有很多有趣之处，特别是ES5对词法做出的一些细微变动，可以传达出一些JS语言的发展思路。 阅读全文
摘要：
惭愧，一个系列第二篇能跟第一篇隔两年之久，我还真是…… 对象与类 上篇文章谈到了"什么是对象"问题。而事实上，我们所见过和学习的大多数面向对象语言，迎面而来的一个概念是：类。 遗憾的是，大部分程序语言的书籍，都是直接开始讲解类的概念，并没有着重强调类和对象的关系。所以，面向"对象"的语言，为何引入了这样一个"类"的概念呢？最简单的回答是，你不能够一个一个地去描述对象，那样太愚蠢了。 类对于一般的人类而言，同样是一个朴素的概念，在比对象认知稍晚些时候，人类开始具有抽象能力：小孩子不再说“我要那个”，而是开始表达“我要苹果”。 再更大一些 阅读全文
摘要：
主要是现在这设计模式的文章太多，而且各种烂各种曲解，看的人心烦，烦到忍不住想自己写一个系列把它们说清楚——但是呢，转念一想，我写的再怎么清楚能有GoF清楚呢，怎么能有GoF的影响力大呢，GoF明明白白地摆着，还有这么多人乱搞，我又能做什么呢？所以想了半天，我觉得就写一篇文章来吐槽好了。 - -! 阅读全文
摘要：
ES5新特性的例子和简短说明 阅读全文
摘要：
那时，天下人的口音、言语，都是一样。他们往东边迁移的时候，在示拿地遇见......——《创世记》
对于字符和编码的这点事，我自己蛋疼了很久，才渐渐理解了其中错综复杂的关系，这篇文章信息量不大，不过是个感性理解，希望对一些人会有帮助吧。 阅读全文
摘要：
写这个文章，主要是因为网上对C#字符串和享元模式的误解比较多。 Flyweight模式 先说这名字，fly呢，就是苍蝇，没错这里面不是飞的意思，是苍蝇的意思，weight大家都知道，就是重量，苍蝇的重量，就是非常非常轻的意思。所以Flyweight模式就是处理非常非常轻量级对象的一个东西。 Flyweight的目标是解决大量细粒度对象的内存消耗问题，当然，巧妇难为无米之炊，任何模式和手法都不能凭空造出内存来，所以享元模式针对的情况是这些细粒度对象的中数据有重复的情况。 Flyweight的做法是，把对象的状态（通常用属性表示），分成两个部分，一部分是内部状态，另一部分是外部状态。内部状... 阅读全文
摘要：
现在网上能找到的大部分将语法分析的文章都是LL的，而本文专门讲不太常见的LR(1) 阅读全文
摘要：
在网上常常能看到文章讲面向对象的三大基本特征"继承"、"封装"、"多态"，我以为这是坊间流传的最不靠谱的一个说法。本文先谈谈其中讲到的一个特性：多态。多态是一个跟面向对象完全正交的概念，两者之间可以说没有任何必然联系。 阅读全文