SlideShare a Scribd company logo
1 of 22
Download to read offline
Koubei F2E 展炎
  2010.12.20
平板电脑市场份额
• 今年,苹果仍占据平板电脑市场的绝对领
  导地位
• 2011年,苹果iPad平板电脑的市场份额将达
  到53%,而谷歌Android平板电脑的市场份
  额将达到32.5%。
• 2012年,苹果iPad平板电脑的市场份额将达
  到44%,而谷歌Android平板电脑紧随其后
  ,占据39%的市场份额。(Win 7平板电脑、RIM的Playbook平板
 电脑、惠普webOS平板电脑将共同占据余下17%的市场份额。)
Facebook添加电子商务功能意欲比
          肩eBay
• Facebook正在竭力鼓动达美航空、彭尼零售
  商店等企业在其网站上销售商品,将5亿用
  户中的更多人转化为网络购物者。
• Facebook正在添加电子商务功能,以吸引用
  户,增加用户在线时长,并创造更高的广
  告销售额。
• 好多所谓的编译器
• 单纯的前端技术在减少
• 具有实际应用价值的更多
从构造函数到YUI-Sandbox模块
    展炎 zhanyan@taobao.com
          2010-11-28
开头的话

                 什么样的分享才有价值?
   •大家完全不知道的?
   •大家了解但不详细的?
   •有实际使用价值的?
   •…..


http://www.infoq.com/cn/articles/sandboxOnB 钨龙
http://www.slideshare.net/giordano/javascript-patterns-5725919   麦惠99
两个重要的概念(一)
1.所有函数声明在解析后,都自动拥有一个
  prototype成员。该prototype成员拥有一个自动添
  加的constructor成员,指向函数本身:

          Fn === Fn.prototype.constructor;




“反面”实例:
var Fn = function(){…};
Fn. prototype = {…};
两个重要的概念(二)
2.所有对象o都拥有一个隐藏的原型对象(在 FF中
  是o.__proto__)。var fn = new Fn(),在FF下,
  不考虑参数传递,可以用下面的代码来表示 new
  的过程:
  var o = {__proto__: Fn.prototype};
  Fn.apply(o);
  fn = o;

   o.constructor === o.__proto__.constructor;

“反面”实例:
var SubClass.prototype = new BaseClass();
传统的构造方式
var Person = function(name){
  this.name = name;
  this.say = function(){
    return ‘I am’ + this.name;
  }
}




var tom = new Person(‘Tom’);//Ok!

var jerry = Person(‘Jerry’);//没有new
1.Jerry is undefined;
2.在window上添加了name和say
改进第一步
var Person = function(name){
  var that = {};
  that.name = name;
  that.say = function(){
    return ‘I am’ + this.name;
  }
  //构造函数默认的会返回this,但指定了return值后就返回该值了。
  return that;
}

Person .prototype.run = function(){…};
var tom = Person(‘Tom’);

alert(tom.say);//I am Tom
alert(tom.run);//underfined
再次改进(自身调用构造)
var Person = function(name){
  if(this instanceof Person){
    this.name = name;
    this.say = function(){
      return “I am” + that.name;
    }
  }else{
    return new Person(name);
  }
}



YUI3中YUI实例对象构造的方式
Sandbox以及模块

1.注册与使用:

2.沙箱的使用:

3. 配置与控制:
YUI2如何做
1.注册与使用:                                                  {'calendar': {
YAHOO.util.YUILoader = function(o){                         'type': 'js',
     this.moduleInfo = lang.merge(YUI.info.moduleInfo);     ‘path’:’../calendar-min.js',
    …                                                       'requires': ['event', 'dom']
}                                                           },…
                                                          }
//加载模块
var loader = new YAHOO.util.YUILoader ({
     requires:[‘calendar’]
});
loader .insert();
//自定义模块
var loader = new YAHOO.util.YUILoader ();
loader. addModule(
     name:’yk-dp’, type:'js', requires:[‘event‘,’json’,’dom’] ,
     fullpath:'http://k.kbcdn.com/‘product/dianping/dpList-1-0-0.js”,
);
loader .insert();
YUI2如何做
2.沙箱的使用:
var loader = new YAHOO.util.YUILoader ();
loader.sandbox({
 require:[’ calendar’],
 base:’../’,              由于的使用了XHR,所以有跨
                              域的限制。(非GET)
 onSuccess:function(o){
    var sanboxYui= o.reference;
    console.log(sanboxYui .widget.Calendar);//OK
 },
 …
});
console.log(YAHOO.widget.Calendar);//undefined
//我们的做法。
var YK = {…};//全局的名空间
YUI2如何做
3.配置与控制:
//全局的环境控制,保证不多次load同一个JS
//对sandbox没有控制,也不应该控制
YAHOO.env = {
   modules: [],
  listeners: []
}

//我们这样做的
YAHOO.info.moduleInfo=lang.merge(YAHOO.info.moduleInfo,Y_loadInfo);

                                {ykvalidator : {
                                  type : 'js',
                                  fullpath : ‘.. validator‘ + '_1_0_14'+'.js',
                                  requires :['ykvalidator_css']
                                  },….
                                }
YUI3如何做
1.注册与使用:
YUI.Env[Y.version].modules = {
    “anim”:{…}
    …
}
//注册
YUI.add('k2-popup',function(Y){
    ……
});
YUI3如何做
2.沙箱的使用:
YUI().use(‘k2-popup’,function(Y){
    //Y是YUI的一个独立的实例对象
});

//在实例Y上有Y.Env._loader属性,即为一个Y.Loader的实例
loader = new Y.Loader(Y.config);
//在use方法中完成默认加载
Y.config.core = [‘get’,’rls’,’intl-base’…];


 YUI.Env

     Y.Env                 Y.Env      Y.Env
YUI3如何做
var YUI = function() {
     var i = 0, Y = this, args = arguments, l = args.length,
     // YUI_config,产品级组件的添加时用到
     gconf = (typeof YUI_config !== 'undefined') && YUI_config;
     //运用的就是前面的构造方式
       if (!(Y instanceof YUI)) {
         Y = new YUI();
     } else {
        //调用Y.Env初始化,完成gconf配置的注册,绑定规定的module
        Y.applyConfig(gconf);
        ……..
     }
     for (; i<l; i++) {
         Y.applyConfig(args[i]);
     }
     …….
     return Y;
  };
YUI3如何做
3.配置与控制:
//局部配置
YUI({
     modules : {
           'popup' : {
                     fullpath : '/k2/popup/popup.js',
                     requires : ['dd-constrain','dd-ddm','stylesheet'] }
           }
 });
//对于组件
var YUI_config = {
     core:['get','yui-later','yui-throttle','loader-base','loader-yui3']
     base:'http://k.kbcdn.com/yui/3.2.0/',
      comboBase : 'http://k.kbcdn.com/min/f=',
      K2:{….}
}
YUI3如何做
3.配置与控制:
//对于产品级应用
 YUI_config.groups.appDpList = {
    combine: false,
    base :'http://dev2/product/huangye/dianping/v3/',
    root :'',
    modules:{
      'k2-dpform':{
        path : 'form.js',
        requires :['node-base','node-style','anim-base','anim-easing']
      }
    }
 };
不太恰当的比喻
THANKS
  Q/A

More Related Content

Viewers also liked

Viewers also liked (9)

Banquet 16
Banquet 16Banquet 16
Banquet 16
 
Banquet 11
Banquet 11Banquet 11
Banquet 11
 
Banquet 19
Banquet 19Banquet 19
Banquet 19
 
Banquet 21
Banquet 21Banquet 21
Banquet 21
 
Koubei banquet 31
Koubei banquet 31Koubei banquet 31
Koubei banquet 31
 
Banquet 49
Banquet 49Banquet 49
Banquet 49
 
Banquet 44
Banquet 44Banquet 44
Banquet 44
 
Koubei banquet 25
Koubei banquet 25Koubei banquet 25
Koubei banquet 25
 
Dorado Trend Watch Q4 2010
Dorado Trend Watch Q4 2010Dorado Trend Watch Q4 2010
Dorado Trend Watch Q4 2010
 

Similar to Banquet 52

YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用Adam Lu
 
由一个简单的程序谈起--之四
由一个简单的程序谈起--之四由一个简单的程序谈起--之四
由一个简单的程序谈起--之四yiditushe
 
jQuery源码学习
jQuery源码学习jQuery源码学习
jQuery源码学习fangdeng
 
Yui3入门
Yui3入门Yui3入门
Yui3入门cly84920
 
YUIconf2010介绍
YUIconf2010介绍YUIconf2010介绍
YUIconf2010介绍ling yu
 
组件交互模式的非主流研究
组件交互模式的非主流研究组件交互模式的非主流研究
组件交互模式的非主流研究youalab
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架fangdeng
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架wtxidian
 
學好 node.js 不可不知的事
學好 node.js 不可不知的事學好 node.js 不可不知的事
學好 node.js 不可不知的事Ben Lue
 
Javascript之昨是今非
Javascript之昨是今非Javascript之昨是今非
Javascript之昨是今非Tony Deng
 
Kissy模块化实践
Kissy模块化实践Kissy模块化实践
Kissy模块化实践yiming he
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code QualityJoseph Chiang
 
淺談C#物件導向與DesignPattern.pdf
淺談C#物件導向與DesignPattern.pdf淺談C#物件導向與DesignPattern.pdf
淺談C#物件導向與DesignPattern.pdfBrian Chou 周家禾
 
Kissy design
Kissy designKissy design
Kissy designyiming he
 
Ian 20151002 es2015
Ian 20151002 es2015Ian 20151002 es2015
Ian 20151002 es2015LearningTech
 
YUI ─ 阿大
YUI ─ 阿大YUI ─ 阿大
YUI ─ 阿大taobao.com
 

Similar to Banquet 52 (20)

YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
 
YUI 3 菜鳥救星
YUI 3 菜鳥救星YUI 3 菜鳥救星
YUI 3 菜鳥救星
 
由一个简单的程序谈起--之四
由一个简单的程序谈起--之四由一个简单的程序谈起--之四
由一个简单的程序谈起--之四
 
jQuery源码学习
jQuery源码学习jQuery源码学习
jQuery源码学习
 
Yui3入门
Yui3入门Yui3入门
Yui3入门
 
YUIconf2010介绍
YUIconf2010介绍YUIconf2010介绍
YUIconf2010介绍
 
组件交互模式的非主流研究
组件交互模式的非主流研究组件交互模式的非主流研究
组件交互模式的非主流研究
 
I os 14
I os 14I os 14
I os 14
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
學好 node.js 不可不知的事
學好 node.js 不可不知的事學好 node.js 不可不知的事
學好 node.js 不可不知的事
 
Javascript之昨是今非
Javascript之昨是今非Javascript之昨是今非
Javascript之昨是今非
 
Kissy模块化实践
Kissy模块化实践Kissy模块化实践
Kissy模块化实践
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
 
I os 07
I os 07I os 07
I os 07
 
淺談C#物件導向與DesignPattern.pdf
淺談C#物件導向與DesignPattern.pdf淺談C#物件導向與DesignPattern.pdf
淺談C#物件導向與DesignPattern.pdf
 
Kissy design
Kissy designKissy design
Kissy design
 
Ian 20151002 es2015
Ian 20151002 es2015Ian 20151002 es2015
Ian 20151002 es2015
 
YUI ─ 阿大
YUI ─ 阿大YUI ─ 阿大
YUI ─ 阿大
 

More from Koubei UED

More from Koubei UED (20)

Banquet 47
Banquet 47Banquet 47
Banquet 47
 
Banquet 51
Banquet 51Banquet 51
Banquet 51
 
Banquet 50
Banquet 50Banquet 50
Banquet 50
 
Banquet 48
Banquet 48Banquet 48
Banquet 48
 
Banquet 46
Banquet 46Banquet 46
Banquet 46
 
Banquet 45
Banquet 45Banquet 45
Banquet 45
 
Banquet 43
Banquet 43Banquet 43
Banquet 43
 
Banquet 42
Banquet 42Banquet 42
Banquet 42
 
Banquet 41
Banquet 41Banquet 41
Banquet 41
 
Banquet 40
Banquet 40Banquet 40
Banquet 40
 
Banquet 39
Banquet 39Banquet 39
Banquet 39
 
Banquet 38
Banquet 38Banquet 38
Banquet 38
 
Banquet 37
Banquet 37Banquet 37
Banquet 37
 
Banquet 36
Banquet 36Banquet 36
Banquet 36
 
Koubei banquet 35
Koubei banquet 35Koubei banquet 35
Koubei banquet 35
 
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34
 
Koubei banquet 33
Koubei banquet 33Koubei banquet 33
Koubei banquet 33
 
Koubei banquet 32
Koubei banquet 32Koubei banquet 32
Koubei banquet 32
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
 
Koubei banquet 29
Koubei banquet 29Koubei banquet 29
Koubei banquet 29
 

Banquet 52