z.Yleo77

Get

子下两个重要方法：script和css，还有一个abort。两参

• url(s)：可为数组，为数组时依次加载。
• opt：配置hash

opt选项很多，大概这么几个重要的

• onSuccess，onFailure
• attributes（为该节点添加一些属性）
• scope指定作用域
• 当然，少不了data。
• autopurge   默认script 为true，css为false。即js执行后就没了，css存在。
• 默认都是加载在head里，但一般我们想把script加载在某个节点前的话怎么办，用insertBefore，需要注意的是只要提供id就可以，不要写“#”

关于返回的这个对象，和事件对象一样，需要传递到opt的函数处理中。在opt中配置的一些玩意儿，比如data，就可以在这里从返回的这个对象上获取。它也有几个有用的，除了刚才的data

• nodes
• purge()  手动删除。

在GET方法源码中，就是在head中调用appendChild/或使用insertBefore来实现加载资源。（异步加载）

此外，也可以在YUI的config中调用script,主要是基于下面loader机制，实现了lazy loading机制，同时在页面载入中也解决了Blocking。比如这样

YUI({
    charset: 'utf-8',
    modules: {
        'examjs': { fullpath: 'http://example.com/exam.js' }
    }
}).use('node', function(Y, result){ …… })

更多就看官网了 ,  这个例子非常值得一看。

Loader

有些方法和GET一样，在此略过，需要留意的是这些

• base   设置基本目录
• force：强制加载模块，以数组形式给出。例如['node', 'event']
• debug: 可以配合filter用于调试。
• require：以对象形式给出依赖的模块列表。

将参注册进Loader就搞定了。对自定义模块的配置：name，(full)path，type(默认js)，requires(指明该模块依赖哪个内置模块)

在此注册后，还须显式声明调用该模块，否则只是注册，并不发起http请求。eg：

YUI({
    base: 'http://example.com/yui/build/',
    debug: true,
    modules: {
        jquery: {
            fullpath: 'http://example.com/jquery/lib/jquery.js'
        }
    }
}).use('jquery', function(Y,result){
    //result 保留着调用这些模块所返回的信息。
})

除了客户端引入方式，YUI还提供了server端php后台引入(未来会支持其他语言，不过暂时只关注php)，实例化之后只需要调用loader(所需模块)，然后echo tag()就可以了（如果想在不同的位置引入这些资源，分别调用css和script方法就可以了）。有几个参数比较有用（其实我想也是关键）

• allowRollups 捆佳节又重阳绑式引入文件
• combine  将所有模块合并至一个请求

同样支持自定义模块，传递给实例化的第三个参数即可（数组形式），eg

$myModule  = array(
    'extJs'=> array(
        'type' => 'js',   //必须指定，费解。
        'fullpath' => 'http://www.json.org/json2.js'
    ),
    //etc...
);
//同样需要在load函数里指明一下。
$loader = new YAHOO_util_Loader('3.0.0b1', 'Yleo', $myModule, false);

两者的结合，大大减少http请求数，优化页面载入时间当然最少也得两个（script & link）。为什么我引入css没有反应，显示调用也无果！再看看。

更多， Introducing PHP Loader

Attribute

都说yui的事件管理机制足够强大，尤其是自定义事件，从这里也能窥见一斑。Y.Attribute继承了EventTarge，自然也拥有了部分事件管理功能。

看官方给出的文档，给我初步的感觉类的扩充，与事件管理的融合，妙哉。

基础方法也就是最常见的取值器和赋值器。但是有点麻烦。因为在定义类值时，必须使用他们固定的格式

//我想是这样，再不需要在该属性上定义其他操作，比如验证。
myPro: 'just do it',
//但必须这样。如果只有一个赋值，我想它应该简化一下。
myPro: { value: 'must do like this'}

在上面这个大括号里，可以放很多东西，加 addAttr(s).,当然也可以使用属性内部的setter和getter为所欲为。顺序(val，name) （yui的参数顺序好像很多这样，感觉不习惯，大部分情况是name，val更符合习惯，包括each一样，记住）。

这里对属性的赋值时，有两个readOnly和writeOnce，知道下就行了。（虽然有这两个，不过通过_set依然可以绕过限制，但需要知道个原则，不要使用这些带下划线的方法！）

精彩的事件系统

同javascript事件系统一样，都将事件的绑定在on方法上。只不过这个事件类型形如这样  属性名+Change,文档上说支持监瑞脑消金兽听下几代元素值改变，同时也会"冒泡"在根属性上，此时，subAttrName指向所修改的孙子元素。

在事件处理上，e对象上有两个属性prevVal和newVal，一个指向老值，一个新值，其他和默认事件基本一样。对了，有个干的事一样但叫法不一样的：stopImmediatePropagation（知道 stopPropagation干什么就知道是干什么的）。

Base

和Attribute一样（必然的，A有它的血统），属性的值只能通过取值器和赋值器来操作。eg

function Yleo(){
    Yleo.superclass.constructor.apply(this, arguments);
}
Yleo.ATTRS = {
    //当然，针对每个属性，少不了setter和getter。
    a: { value: 'bigA' }
};
var myExam = new Yleo();
// 不能通过myExam.a来获取，也不能通过myExam['a']来获取。
Y.log(myExam.get('a'));

别忘了，在oo的世界里，总是少不了construction和destruction，YUI自然有对应的实现。

Y.extend(Yleo, Y.Base, {
    initializer: function(){},           //想干什么是你的，反正我必然会发生（new时）
    destructor: function(){};        //调用destroy()时触发
});

Something else

• Base上有个build(),操作在类级别上，用来在已有类（构造函数）基础上扩充一个新的构造函数。
• YUI上的substitute函数，实现了YUI的小模板功能，使用时需装载substitute模块（YUI3的模块足够细化）
• ……保持更新

about Profiler

主要用于跟踪单元测试函数包括对象的执行时间，次数，效率，或者实例化等等。注册函数，对象需要提供作用域，全局时指定为window。

//同样的还有registerObject('Y.Node', Y.Node);
//如果是构造函数的话，registerConstructor
Y.Profiler.registerFunction(fun, scope);

匿名函数的话，

var instrumentFun = Y.Profiler.instrument('anonymous1', function(num1, num2){
    return num1+num2;
});

得到方法调用次数： getCallCount， 要么getReport。

如果想获取某一段代码执行时间，设置一个标志位，通过start(str)和stop(str)。

Over. 不定期更新

被闭包分割的javascript，是完全不一样的世界。

闭包前的javascript，对我来说只是一个简单的实现功能的脚本，虽然我知道它很强大，虽然看别人的代码也窥见一斑，但我始终没有亲身体验到它的威力。

闭包后的javascript，完全被它的强大所折服，当然，这源于javascript的灵活多变，也正是它没有太多的条条框框，所以才能够让程序员通过自己对这门语言的理解来创造出类似其他语言的功能，比如oo，接口，继承，乃至封装。

在我初学php oo的时候，我记得别人告诉我，没有继承，封装，多态的oo不是真正的oo，并没有发挥出它的强大。那javascript呢，它怎样实现封装呢，当然是一步步来！

最简单，注册一个对象，

var Girl = function(id, name, isHot){
    this.id = id;
    this.name = name;
    this.isHot = isHot;
}

要想加入一些方法，扩充其prototype对象就可

Girl.prototype.isHot = function(){
    return this.isHot
}

现在看来，这些属性在实例化时传递进去，类的内部并没有做任何的判断操作，也就是说属性并不在控制之下，假如传递进来的id(这里特指身份证号)不是16位怎么办，等等问题，当然可以写一个function，来判断是否是16位身份证

var Girl = function(id, name, isHot){
    if(!this.checkID(id)) {
        throw new Error('查无此人');
    }
    this.id = id;
    this.name = name;
    this.isHot = isHot;
}
Girl.prototype.checkID = function(id){
    var c = id.constructor;
    if(c !== String) return false;
    if(id.length !=16) return false;
    return true;
}

这样以来就有一个判断id合法性的方法了，可是这个方法一般情况我们完全不用将它注册为公有方法上，因为它只供类内部使用，那怎样将它变为私有的呢，两种方法

• 将checkID方法前加下划线（约定俗成的东西，只是将它看成私有而已）
• 嵌套函数来解决（闭包初次发威）

如何优化呢，只要将checkID方法从Girl对象的prototype链上挪至其constructor内部就可以实现真正的私有，并可使用constructor上所声明的所有资源（变量），即闭包的作用

var Girl = function(id, name, isHot){
    function checkID(id){
        //check id...
    }
    //调用，直接调用
    if(!checkID(id)) {
        throw new Error('查无此人');
    }
    this.id = id;
    this.name = name;
    this.isHot = isHot;
}

好了，达到目的了，实际的应用中同这个是一样的道理。但是这样以来会出现一个内存占用问题，先需要明白一点

javascript在创建对象的多实例时，这些实例的的方法都会追溯到原对象的prototype上，也就是说在内存中只存在一份

可是通过以上得来的对象实例，每个都会包含一个这样私有方法的副本，我想这实在是一个冗余的东西，只需要存在一个就足够完成我的要求了，怎么办，闭包再次发威

当我们将私有方法写在constructor里时，它会生成副本，那写在constructor外部岂不是就不会生成副本了，但仍要将它声明为私有方法，看这个

var Boy = (function(){
    return {};
    // or
    return function(){};
})()

通过(),创建了自执行的代码块，在这个自执行的代码块中，通过return语句将构造函数赋给Boy，但是这个例子与上面不同的是在这个自执行的代码块中，构造函数是处于内嵌函数的位置，这个时候将私有方法放在哪里，我想答案已经不言而明了。

var Girl = (function(){
    var foo;  //etc...
    function checkID(id){
        //check id...
    }
    return function(id, name, isHot){
        if(!checkID(id)){
            throw new Error('查无此人');
        }         //当然，还可以用foo变量做你想做
        this.id = id;
        this.name = name;
        this.isHot = isHot;
    }；
})();

这样以来，checkID方法便被提升为类级别，每次实例化时只是一个调用，并不会生成新的副本，岂不快哉。

记住一个原则，constructor上的东西会存在于每一个对象实例上，如果它并非每个实例都需要，那就将它注册在构造函数之外的地方.当然，如果这个方法是需要公开访问并且存在于每个实例，那直接扩展在prototype上。

其实对于闭包，一个月前刚接触到并慢慢消化时，我似乎看到的是一个小蚂蚁突然变得强大（夸张夸张！但是确实是让我明白了为什么高手的代码是那样的构造起来的）。在和一同喜欢web的朋友聊到js时，我还说，想区分一个人写的代码够不够优秀，看它的闭包运用如何，现在看来，言重了，闭包，只是通往javascript进阶的必经之路而已，在让我学习javascript的过程中有了柳暗花明又一村的感觉，就像一个完全新的世界，美哉，妙哉。

我需要的，就是不断提升。

javascript中的对象继承，属性传递不像php那样，想继承类或接口无非是一个extends或implements就可以实现，在js中，并不是那么简单。在yui的oop中，都已经有了很好的实现。js虽然不是面向对象的，但却可以通过一些手段让它面向对象。

YUI OOP相关这部分的方法：Y.augment, Y.extend, 加上个Y.clone .（其他暂忽略）

Y.extend()  

要知道在js中，要实现一个类继承另一个类，需要三步来完成：

1. 将子类的prototype指向实例化后的父类的一个实例
2. 将子类中prototype的constructor指向自己本身，原因：第一步的操作结果会将它的prototype 的constructor属性指向父类。此步简单得说就是恢复它的constructor
3. 修复父类的命名空间。即重置父类的constructor使其指向自身。弱化子类和父类的耦合。

而extend函数在实现了以上三点的基础上，还提供了额外的参数来供扩展。

简化的extend示例

function extend(targetClass, originalClass){
    //建立空函数指针，避免创建父类实例，只将空函数的实例传递给子类
    var tmpF = function(){};
    tmpF.prototype = originalClass.prototype;
    targetClass.prototype = new tmpF();
    targetClass.prototype.constructor = targetClass;
    //设置子类superclass属性，指向父类,同时修复父类构造函数
    targetClass.superclass= originalClass.prototype;
    originalClass.prototype.constructor = originalClass;
}

在yui源码里，因为提供了superclass属性（指向父类原型链），所以想调用父类构造函数，只需要targetClass.superclass.constructor.call(this)就可以达到目的。

Y.augment()      

把extend比喻为爸爸和孩子（上下级关系），那augment更像是强盗和良民，也就是说augment的原则：拿了不给。拿了你的，那就是我的了（简单扩充）。

简单例子：

function Citizen(){};
function Robber(){};
Y.augment(Robber, Citizen);
var robber = new Robber();
Y.log(robber instanceof Robber);      //true
Y.log(robber instanceof Citizen);     //false,如果是extend的话，这里会是true。

引一张图来说明它们的区别 来源

仔细看了yui augment方法的实现，没有弄明白。写一个简单版的augment

function augment(targetClass, originalClass){
    var i,
        l = arguments.length;
    if(l > 2){
        //如果大于2，即提供了原类的方法，则只将这些方法移植到目标类
        for(i = 2; i < l; i++){
            targetClass.prototype[i] = originalClass.prototype[arguments[i]];
        }
    } else {
        //否则全部移植
        for( i in originalClass.prototype){
            targetClass.prototype[i] = originalClass.prototype[i];
        }
    }
}

Y.clone()

可以克隆很多东西，包括时间，正则，函数（通过调用Y.bind()方法），数组。真正的应用应该是克隆对象，但是克隆对象在这里还分了两种情况

1. 先声明类结构，然后通过实例化所得到的对象
2. 直接定义对象（能不能理解为prototype object），通过{}所来，即它的constructor为js内置构造函数Object。

不管通过哪种方式所克隆出来的对象，仍旧保存有自己原类结构的构造函数，并且有一个指向它的链接。但是因为是“克隆”，所以不管是属性，还是属性值，它都会原封不动移植在新对象上，这个好不好，不一定吧（大部分情况继承我想都是为了获取一个属性，以及方法，而忽略它的属性值）。

Y.clone(o, safe, f, c, owner) 参数中，原谅我把safe的作用没有弄明白，sigh……这是官方文档介绍

safe <boolean> if true, objects will not have prototype items from the source. If false, they will. In this case, the original is initially protected, but the clone is not completely immune from changes to the source object prototype. Also, cloned prototype items that are deleted from the clone will result in the value of the source prototype being exposed. If operating on a non-safe clone, items should be nulled out rather than deleted.

以上。。。官方文档中也提供了更多的例子：YUI global example

当然YI的oop里还提供了其他的方法，比如Y.merge()提供多个对象的合并至新对象，Y.aggregate() 提供对象到对象的属性移植（Y.mix()函数细化）。

这么多的对象方法继承，各有各的利弊，只有真正理解了其中的原理，才可以在恰当的时候选择恰当的方法，比如在内存节省方面，使用clone方法的话会更加合适（共享属性，方法）；类间差异比较大时，选择augment就较好些。

这里有个对augment方法解析的文章，值得一看， YUI3 学习笔记：oop

让我再理解下吧。

本来最近的学习笔记是记录在google docs里，但是奇怪的是这篇笔记在doces里share不了，那就先搁在这了。

绑定事件

调用Event的机制已经构建在Node里，所以，在普通情况下，不用明确声明。

最基础的事件绑定方法：

Y.on('eventName', 'handler', 'elements', 'contextObject', 'arg1', ……);

其中contxtObject可以绑定一个上下文对象，在handler里直接利用this来进行操作该对象。其后的arg1……为绑定参数，传递给handler，同名处理。相当于jQuery里的bind方法。eg：

var obj = { name: 'yleo77', email: 'XXOO@gmail.com' };
Y.on('click', handler, '#mybutton', obj);
function handler(){
    alert('hello ,'+ this.name);
}

移除事件绑定

调用Y.detach(),和事件绑定方法一致，[event，handler，element]，最好者是在绑定事件时将该调用绑定在一个变量上，需要移除时直接Y.detach('varName'),或直接在该变量上调用detach()。eg：

var evt = Y.on('click', handler, '#mybutton', obj);
function handler(){
    Y.detach(evt);              //or evt.detach();
}

注：还可以配合使用eventcategory来移除特定事件对象。这需要在绑定时注明

var evt = Y.on('eventcategory|click', handler, '#mybutton', obj);
function handler(){
    Y.detach('eventcategory|click');        //移除全部事件：eventcategory|*
}

更干脆的， Y.Event对象上有个purgeElement方法，可以移除element所有注册方法，包括后代子元素。当然你不想移除所有后代元素的方法也是完全由你控制的。

//boolean指明是否移除后代所有元素事件，后两参默认移除全部。
Y.Event.purgeElement(element, boolean, eventName);

细化的Key参数

在yui里，将按键的方法进行了细化，查看了下源码的实现，发现只是在spec上做了手脚，先看它需要的参数：

//spec是事件类型 up|down|press 默认为press 。eg  'up:13,37+shift'
Y.on('key', handler, id, spec, obj);

在YUI源码里，将spec用split先通过':'进行分割，前者构成事件，后者作为条件进一步判断。

delegate方法

也就是冒泡。按照delegate的设计思想，我觉得这个方法不够健全。个人觉得delegate方法的存在价值是给能在未来加入进dom的元素绑定事件，而不是现在的这个delegate方法。delegate方法支持绑定于新添加的页面元素，比如有这样结构的html

<ul id="exam">
    <li><span>Exam01</span></li>
    ....
</ul>

事件绑定：

$('#exam').click(function(){
    //为未来加入dom元素绑定，通过事件target属性实现
    if($(e.target).parent().is('li')){
        // to do
        $(e.target).toggle('myclass');  //etc...
        e.preventDefault();
    }
})

需要说明的是YUI的delegate方法必须有第四个参数spec，即所监瑞脑消金兽听的子元素标签。

创建自定义事件

触发 Y.fire('customEvent', arg1, arg2……);与绑定on一样。

扩展eventTarget来拥有自己的事件扩展机制，augment（用于继承对象）之后，通过调用自身publish()便可创建一个自身事件。eg

function Yleo(){
    this.publish('comeIn');                         //发布自定义事件
}
Y.augment(Yleo, Y.EventTarget);              //扩展Yleo对象
var yleo = new Yleo();
yleo.on('comeIn', function(){                    //监瑞脑消金兽听  ,支持绑定上下文，参数。
    alert('z,我来了');
});
yleo.fire('comeIn');                                    //触发自定义事件

这里发现一个问题，如果使用event模块的话，不支持针对于自定义事件的e参（报错），必须在初始化YUI时显示声明使用event-custom模块才可以，然后才可以注册针对自定义事件的默认方法之类（我想也是为了提高模块化程度吧）

Update: 在这里看到，在fire自定义事件时，支持绑定data，这个data是绑定在事件对象e上。

创建成功后，还可以通过添加对象的subscribe，before，after分别添加至自定义事件发生的前后。不过需要注意的是这些事件需添加在fire之前，即触发事件之前。

yleo.subscribe('comeIn', function(){ … });
yleo.before('comeIn', function(){ … });
yleo.fire('comeIn');

custom-eventpublish方法参数列表

杂项

• domready : 判断document是否就绪，其实也是在Y对象上调用自定义事件方法publish
• available : 所绑定的dom元素是否可用。
• contentready : 与上者基本一样，但是它会判断element的dom结构(内部html)是否完全读取到。
• focus和blur事件支持冒泡，好。看源码时发现Y.Array()方法可将参直接转化为数组。同样Y.Object()方法将之转化为对象
• 对原生e做了更强大的封装，可以做更多的事情。利用dump模块将其打印出来看看。
• ……

资源

• 克军的YUI3 event大概解析
• 岁月如歌的event 类图

Update yui3 node部分笔记