Banquet 52
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
680
On Slideshare
680
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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’);//没有new1.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 Tomalert(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