Banquet 52

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模块展炎 [email protected]

2010-11-28

开头的话

什么样的分享才有价值？

•大家完全不知道的？

•大家了解但不详细的？

•有实际使用价值的？

•…..

http://www.slideshare.net/giordano/javascript-patterns-5725919 麦惠99http://www.infoq.com/cn/articles/sandboxOnB 钨龙

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’);//没有new1.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 Tomalert(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实例对象构造的方式

1.注册与使用：

2.沙箱的使用：

3. 配置与控制：

Sandbox以及模块

1.注册与使用：YAHOO.util.YUILoader = function(o){

this.moduleInfo = lang.merge(YUI.info.moduleInfo);…

}//加载模块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如何做{'calendar': { 'type': 'js', ‘path’:’../calendar-min.js', 'requires': ['event', 'dom'] },…}

2.沙箱的使用：var loader = new YAHOO.util.YUILoader ();loader.sandbox({ require:[’ calendar’], base:’../’, onSuccess:function(o){ var sanboxYui= o.reference; console.log(sanboxYui .widget.Calendar);//OK }, …});console.log(YAHOO.widget.Calendar);//undefined//我们的做法。var YK = {…};//全局的名空间

YUI2如何做

由于的使用了XHR，所以有跨域的限制。（非GET）

3.配置与控制：//全局的环境控制，保证不多次load同一个JS//对sandbox没有控制，也不应该控制YAHOO.env = { modules: [], listeners: []}

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

YUI2如何做

{ykvalidator : { type : 'js', fullpath : ‘.. validator‘ + '_1_0_14'+'.js', requires :['ykvalidator_css'] }，….}

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’…];

YUI3如何做

YUI.Env

Y.Env Y.Env Y.Env

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

YUI3如何做

不太恰当的比喻

THANKSQ/A

Technology

Banquet 52