很长一段时间内，我都没有搞懂YUI3 OOP模块中的Y.extend方法与Y.augment之间的区别，尽管它们的名称如此显著。现在有些时间，我相信分析源码是最好的解决方法。为了减少不必要的干扰，我简化了这两个方法，使它们仅处理类构造器。

Y.extend

Y.extend方法应用的场景很简单，就是继承。我们知道，JavaScript有多种继承方式，例如原型继承、构造器继承、组合继承、寄生继承等等。YUI采取的为寄生组合继承（Parasitic combination inheritance）。

Y.extend的简化代码如下：

Y.extend = function(r, s) {
    var sp = s.prototype, rp = Y.Object(sp);
    r.prototype = rp;

    rp.constructor = r;
    r.superclass = sp;

    return r;
};

Y.Object = function(o) {
    var F = function() {};
    F.prototype = o;
    return new F();
}

read more »

keynote下载 | pdf下载

Notes：

1、这次分享一些Javascript或者说ECMAScript中的一些比较基础的知识点。这些东西在我们日常的开发和调试中发挥着非常重要而又容易被忽略的作用。希望这次分享能够让大家有一个更深入的认识。

2、对于我们所使用的核心技术，我们要做到知其然知其所以然。这是一个非常重要的态度，只有这样，我们才能更好的理解这些技术背后蕴涵的思想，运作机制，以及优点缺陷，才能免于陷入缤纷表现的漩涡，能够做到透过现象看本质。

3、每个人的精力都是有限的，尤其是我这种愚钝的人，所以，把你的精力放在最值得放的一些地方，而不是处处留芳。

read more »

我觉得后端工程师较前端工程师最大的便利之一就是：良好的代码监控机制。

每次后端工程师上线后，如果PHP运行中出现错误，会立即记录在error log中，并由脚本根据不同的错误级别进行邮件、短信报警。前端工程师在这方面被动很多，大多数情况下是通过用户反映给客服，然后客服再通知技术部门解决，中间的链条甚至会更长一些，因此前端方面的bug造成的影响往往较为严重。

有什么办法可以缓解这一点，能够让我们在错误面前变被动为主动，第一时间解决问题呢？下面就介绍一种简单的Javascript错误监控机制。

Javascript错误模型

生命周期

如上图所示，一个错误发生后，首先会被try-catch处理，如果没有被停止，则继续传递给window.onerror处理，如果没有被停止，则最终传递给浏览器控制台处理。

read more »

很高兴能够作为东道主参加w3cTech。

在我看来，前端行业更加团结、热情，有非常开放、分享的精神。非常喜欢这个行业的风气。

此次交流会，我做了关于我们团队在YUI3方面的一些实践（YUI3在美团），虽然还很初级，但我们在慢慢强大。在行进中开火，纵情向前！

keynote下载 | pdf下载

Notes：

1、非常荣幸和大家一起分享我们团队在YUI3方面的一些实践。

2、我叫尚春，他们都叫我春哥。这里是我的博客和email。我在2010年12月11日毕业后进入美团工作，到现在已有7个多月的工作经验。这段时间，在师傅的指导下迅速成长，对前端的认识不断深入。

3、此次分享主要涉及两方面的内容。首先是关于选择YUI3作为基础库的原因，这里我们重点介绍下YUI3的模块机制；然后我们主要就我们实际迁移中遇到的一些挑战作详细表述，例如划分模块、加载策略等。

read more »

this在Javascript中应用广泛，但对它的误解却比比皆是。

你需要知道

每个运行环境 (execution context，简称环境) 都含有一个与之关联的ThisBinding常量，它们具有相同的生命周期。运行环境分为三类：

1. 全局环境

this指向全局对象，在浏览器中为window对象。

alert(this);  // window

2. 函数环境

至少有5种调用函数的方式，this的值取决于具体的调用方式。

a) 作为属性调用

this的值为将函数作为属性调用的基本对象 (baseValue)

var a = {
    b: function() {
        return this;
    }
};

a.b();  // a
a['b']();  // a

var c = {};
c.d = a.b;
c.d();  // c

read more »

我叫尚春，来自美团网
 

如你所看

我的blog彻底重建

引入了很多Metro的设计理念

因为我欣赏更加凸显内容的表达方式

而不再认为高光、阴影是现代风格所必须

这，是一种真正意义上的返璞归真
 

在这里

所有的图标都是用Raphaël绘制

我写的一个小型通用库Spring也崭露头角

并将茁壮成长
 

一切都远未完善

我会有节奏的进行

这一切都值得期待

最近因为忙于YUI2到YUI3的迁移，没时间更新博客。现在闲暇一些，觉得似乎写一点自己对于YUI3的理解再合适不过。

主要内容有以下几点：

1. 全局命名空间
2. 改变一切的模块
3. Combo
4. 链式调用
5. 更广泛的自定义事件
6. 一些问题

全局命名空间

YUI3为了保持向前兼容，采用了新的全局命名空间YUI。新的命名空间与YUI2的全局命名空间YAHOO最大的不同就是：YUI是一个构造函数，而且是一个无论如何也返回一个实例的构造函数。

改变一切的模块

YUI2时代，一般都是将某方面的全部方法写在统一的命名空间下，例如DOM相关的方法均在YAHOO.util.Dom，在需要使用这些方法时我们直接调用即可。YUI2真正体现了基础方法库(function library)这样一种定位。

YUI3最大的变化和进步在于，它采用了革新性的底层组织方式，其核心就是模块(module)。在YUI3中，每个方法不再属于某个文件、某个命名空间，而是属于某个模块。每个模块代表一个独立的功能，例如DOM、Event等。下面是一个简单的例子：

YUI.add('new-module', function(Y) {
    Y.sayHelloWorld = function(id) {
        var el = Y.DOM.byId(id);
        Y.DOM.set(el, 'innerHTML', 'Hello, world!');
    };
}, '1.0.0', { requires:['dom'] }
);

通过调用YUI构造器本身的add静态方法，我们声明了一个新的模块，模块的名称为new-module，模块为YUI的实例Y挂载了sayHelloWorld方法，因为这个方法使用了dom模块的方法byId，所以要在add的第四个参数中标明new-module模块依赖于dom模块。

read more »

题目比较绕，其实意思很简单，先不解释，给出如下两个场景：

情景1

在js中，面向对象编程方法越来越流行，构造函数作为基础概念，使用的频率较高。

function spring(name){
    this.name = name;
}
var firstIns = new spring('shang chun');   //an instance of spring

众所周知，构造函数本身也是一个函数，这就意味着它可以被随意调用。随着岁月的积累或协作人员之间信息不对称，很有可能不慎如下调用了这个构造函数：

var secondeIns = spring('wang qiang');   // 'this' refer to window now

这样的代码并不会报错，但是却给全局对象window增加了name属性，这样的失误需要一种合适的方法避免。

情景2

想想看，如果我们想要马上调用新生成的实例，是不是只能这样去写

(new spring('shang chun')).hasOwnProperty('name');

有没有更好的方法呢？

解决方案

事情回到了起点，我们想要的实际上是一个只要调用就无论如何都返回一个实例的构造函数，不管用不用new操作符。最近在看YUI3的源码，发现他们给出一种很好的解决方案，示例：

function spring(name) {
    var _this = this;
    var insanceOf = function(o, type){
        return (o && o.hasOwnProperty && (o instanceof type));
    };
    if (!instanceOf(_this, spring)) {
         _this = new spring(name);
    } else {
         _this.name = name;
    }
    return _this;
}

var ins = new spring('shang chun');  // normal constructor
ins.name;  // outputs 'shang chun'

spring('shang chun').name;  // outputs 'shang chun'

Event在javascript中的重要性不言而喻，正是它驱动着所有事情的进行。记下一些读书的心得，整理如下：

1. Event按类别可分为input events和semantic events。semantic events的发生通常都建立在input events之上，例如点击“提交”按钮后产生onsubmit事件。input events依赖于输入设备。Events按模块可分为HTMLEvents、MouseEvents和UIEvents，对应的接口分别为Event、MouseEvent和UIEvent，其中MouseEvent接口继承了Event接口和UIEvent接口，常用的属性有altKey、ctrlKey、shiftKey和一些位置信息。
2. DOM level 0的事件响应方式得到最为广泛的支持。具体应用方式有两种，一种是在页面目标元素中添加对应属性，如<input type=”button” onclick=”alert(this.nodeName)” />；对应的另一种方式为 elButton.onclick = function(){ alert(this.nodeName); }。显式调用响应方法也非常简单，elButton.onclick()即可。响应方法中的this指代的是触发事件的页面元素。这种事件处理方式有一些缺点，例如：每个对象的某种事件只能添加一个响应方法，当需要将多个元素绑定事件时实现较为复杂等。

read more »

开篇

我很好奇其他前端工程师在wp后台写新文章的时候是在用可视化还是html模式。反正我是一路打着标签过来的，呵呵。

缘起

一直以来，我都先验的认为dom ready事件肯定发生在load之前。但是，最近的一个ticket上线后发现一个很奇怪的现象：在IE下，有时会发生页面load时仍没有捕捉到dom ready的时间。通过多次观察，发现发生这种现象一般是较为简单的页面。

分析

首先，在反复检查代码后排除了自身bug的问题。然后，去找到YUI（我们团队主要以YUI2作为基础库，并准备近期升级到YUI3）的onDOMReady实现，希望通过分析源码找到问题的起源，将onDOMReady在不含frame的IE中分支拣出来，代码量并不多：

read more »

至此，自己的blog终于搭了起来。

过程并不算复杂，不过还是需要一定的热情。

建站的初衷源于个人积累的一些诉求，希望能够将一些日常的idea或problem经过思维的处理沉淀成一直留守的文字，无论何时何地何人，看到它们时都会有一些收获或感想。

不追求能有很多人来看，我把这里当成自己的自留地，肆意非常。

持续的写作需要极大热忱，希望我能保持。