The document discusses market share projections for iPad and Android tablets in 2010-2012. It states that in 2010, Apple's iPad had a 53% market share while Android tablets had 32.5%. In 2012, the document predicts iPad's market share would be 44% and Android tablets would be close behind at 39%, with the remaining 17% shared between Windows, Blackberry and HP tablets. The document also discusses Facebook's efforts to add e-commerce functionality to compete with eBay.

1. Koubei F2E 展炎
2010.12.20

2. 平板电脑市场份额
• 今年，苹果仍占据平板电脑市场的绝对领
导地位
• 2011年，苹果iPad平板电脑的市场份额将达
到53%，而谷歌Android平板电脑的市场份
额将达到32.5%。
• 2012年，苹果iPad平板电脑的市场份额将达
到44%，而谷歌Android平板电脑紧随其后
，占据39%的市场份额。（Win 7平板电脑、RIM的Playbook平板
电脑、惠普webOS平板电脑将共同占据余下17%的市场份额。）

3. Facebook添加电子商务功能意欲比
肩eBay
• Facebook正在竭力鼓动达美航空、彭尼零售
商店等企业在其网站上销售商品，将5亿用
户中的更多人转化为网络购物者。
• Facebook正在添加电子商务功能，以吸引用
户，增加用户在线时长，并创造更高的广
告销售额。

4. • 好多所谓的编译器
• 单纯的前端技术在减少
• 具有实际应用价值的更多

5. 从构造函数到YUI-Sandbox模块
展炎 zhanyan@taobao.com
2010-11-28

6. 开头的话
什么样的分享才有价值？
•大家完全不知道的？
•大家了解但不详细的？
•有实际使用价值的？
•…..
http://www.infoq.com/cn/articles/sandboxOnB 钨龙
http://www.slideshare.net/giordano/javascript-patterns-5725919 麦惠99

7. 两个重要的概念(一)
1.所有函数声明在解析后，都自动拥有一个
prototype成员。该prototype成员拥有一个自动添
加的constructor成员，指向函数本身：
Fn === Fn.prototype.constructor;
“反面”实例：
var Fn = function(){…};
Fn. prototype = {…};

8. 两个重要的概念（二）
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();

9. 传统的构造方式
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

10. 改进第一步
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

11. 再次改进（自身调用构造）
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实例对象构造的方式

12. Sandbox以及模块
1.注册与使用：
2.沙箱的使用：
3. 配置与控制：

13. 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();

14. 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 = {…};//全局的名空间

15. 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']
}，….
}

16. YUI3如何做
1.注册与使用：
YUI.Env[Y.version].modules = {
“anim”:{…}
…
}
//注册
YUI.add('k2-popup',function(Y){
……
});

17. 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

18. 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;
};

19. 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:{….}
}

20. 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']
}
}
};

21. 不太恰当的比喻

22. THANKS
Q/A