• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Banquet 52
 

Banquet 52

on

  • 640 views

 

Statistics

Views

Total Views
640
Views on SlideShare
640
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Banquet 52 Banquet 52 Presentation Transcript

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