banquet 52
Post on 31-May-2015
562 Views
Preview:
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.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
top related