阿当
应用层组件层(drag、cookie、ajax、tab…)   底层(DOM、event、lang)
应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…)    底层(DOM、event、lang)
应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…)  抽象类层(base、widget、plugin)    底层(DOM、event、lang)
 http://yuilibrary.com/yui/docs/guides/
<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script><script>YUI().use(node, event, function (Y) {})...
(function(){   // Your code goes here!})();相同点:没有全局变量不同点:并非立即执行,而是模块加载完的回调
(function(){      alert(1);})();(function(){      alert(2);})();======================================YUI().use(“node”,fun...
<script type=“text/javascript” src=“node.js”></script><script type=“text/javascript” src=“dom.js”></script><script type=“t...
1. 自动处理依赖关系2. 使用方便
YUI.add(“testModule",function(Y){      Y.TestModule = function(){      };},"0.1.0",{      requires : ["widget", “dd-drag"]...
YUI({    modules : {           css4TestModule2 : {                     fullpath : “http://xxx/abc.css",                   ...
YUI({      modules : {            jQuery : {                      fullpath : “http://xxx/jquery.js"            }      }})....
YUI3:                                               jQuery:Y.one(“.a”);                                                   ...
相同点:1. 都提供selector,都封装DOM对象成新的对象,在新对象上扩展方法;2. 都封装了event对象;3. 都控制全局作用域下的命名空间;不同点:1. YUI3区别返回对象是单个对象,还是多个对象,jQuery不区分;2. YUI...
类库只是提供了一些封装好的类,对整个应用程序的开发过程并不会有过多要求和建议,比较轻。框架应包含类库,但在类库的基础上更进一步,对整个应用程序的开发过程有更多的指导和要求,比较重。
1. 提供傻瓜化但定制性、弹性、安全性极强的范式;YUI({xxx:xxx,xxx:xxx}).use(“mod1”,”mod2”,…,function(Y){                             // your code ...
应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…)  抽象类层(base、widget、plugin)    底层(DOM、event、lang)
1. Y.Base2. Y.Widget3. Y.Plugin
1. 将类的所有属性操作管理起来,统一通过set和get方法设置和访问;2. 为set和get方法提供filter,可以在set和get前做一些额外工作,也可以提供validator功能严格控制数据的有效性;3. 可监听valueChange事...
var attributeConfig = {      attrA : {                 // Configuration for attribute "attrA"                value: 5,    ...
1. 可监听自定义事件,不再局限于DOM和BOM提供的事件;2. 事件的触发条件自己处理;3. 可轻松使用观察者模式(命令模式?),已封装好。
var box = new Box();box.on(“open”,function(data){      alert(data.opener);});btn.onclick = function(){       if(me.hasKey(...
mix-in Attribute和EventTarget类1. 提供initializer 和destructor 方法,分别在初始化和销毁对象时调用,自动调用父类的同名方法;2. 可以挂接和卸载plugin。
extend Base类1. 增加render方法,和renderUI、bindUI、syncUI三个抽象接口;function render(){    renderUI();    bindUI();    syncUI();}
2. 有boundingBox和contentBox结构;
有两种:Simple Plugin和Advanced PluginSimple Plugin无需继承,直接定义一个普通的类即可,功能简单。Advanced Plugins继承自Plugin.Base,提供更强大的功能支持。通过Plugin、mi...
实例化拖动对象YUI().use(dd-drag, function(Y) {      var dd = new Y.DD.Drag({                node: #demo      });});通过拖动Plugin给Bas...
1. 代码质量高:所有组件全是YUI团队开发;2. 上手容易:API简单,入门门槛低;3. 工具齐全:性能测试、单元测试、代码压缩、依赖判断、控制台一应俱全;4. 官方文档齐全:教程、视频、示例、API查询全有;5. 框架概念强:范式、模块化、...
thank you
Upcoming SlideShare
Loading in …5
×

Yui3入门

3,572 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,572
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
58
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Yui3入门

  1. 1. 阿当
  2. 2. 应用层组件层(drag、cookie、ajax、tab…) 底层(DOM、event、lang)
  3. 3. 应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…) 底层(DOM、event、lang)
  4. 4. 应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…) 抽象类层(base、widget、plugin) 底层(DOM、event、lang)
  5. 5.  http://yuilibrary.com/yui/docs/guides/
  6. 6. <script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script><script>YUI().use(node, event, function (Y) {});</script>
  7. 7. (function(){ // Your code goes here!})();相同点:没有全局变量不同点:并非立即执行,而是模块加载完的回调
  8. 8. (function(){ alert(1);})();(function(){ alert(2);})();======================================YUI().use(“node”,function(Y){ alert(1);});YUI().use(“”,function(Y){ alert(2);});
  9. 9. <script type=“text/javascript” src=“node.js”></script><script type=“text/javascript” src=“dom.js”></script><script type=“text/javascript” src=“lang.js”></script><script type=“text/javascript” src=“oop.js”></script><script type=“text/javascript” src=“base.js”></script><script type=“text/javascript” src=“widget.js”></script><script type=“text/javascript” src=“tabview.js”></script>======================================================<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script><script type=“text/javascript”>YUI.use(“tabview”,function(Y){ // new Y.TabView();})</script>
  10. 10. 1. 自动处理依赖关系2. 使用方便
  11. 11. YUI.add(“testModule",function(Y){ Y.TestModule = function(){ };},"0.1.0",{ requires : ["widget", “dd-drag"]});YUI().use(“testModule”,function(Y){ // new Y.TestModule();});
  12. 12. YUI({ modules : { css4TestModule2 : { fullpath : “http://xxx/abc.css", type : "css" }, testModule2 : { fullpath : “http://xxx/abc.js", requires : [‘css4TestModule2] } }}).use(“testModule2”,function(Y){ // your code here});
  13. 13. YUI({ modules : { jQuery : { fullpath : “http://xxx/jquery.js" } }}).use(“jQuery”,function(Y){ // $(“body”).css(“background” , ”black”);});
  14. 14. YUI3: jQuery:Y.one(“.a”); $(“.a”);Y.all(“.a”); ===================================================== $(“#b”).click(function(e){Y.one(“#b”).on(“click”,function(e){ e.stopPropagation(); e.halt(); e.preventDefault();}); });========================== ===========================Y.Cookie.set("name", "value"); $.cookie("name", "value");========================== =============================Y.one(“#c”).setStyle(“color”,”red”); $(“#c”).css(“color”,”red”);Y.one(“#c”).getStyle(“color”); $(“#c”).css(“color”);========================== =============================var myAnim = new Y.Anim( $(“#demo”).animate({width:0,height:0},5000,functio{node: #demo, to: { width: 0, height:0 }, n(){$(“#demo”).hide()}) duration:0.5});myAnim.on(end, function() { myAnim.get(node).addClass(yui-hidden); });
  15. 15. 相同点:1. 都提供selector,都封装DOM对象成新的对象,在新对象上扩展方法;2. 都封装了event对象;3. 都控制全局作用域下的命名空间;不同点:1. YUI3区别返回对象是单个对象,还是多个对象,jQuery不区分;2. YUI3方法名区分set和get,jQuery方法名不区分,通过参数数量识别;3. YUI3有第三方社区,但组件基本上还是以官方为主,所有组件封装良好,质量高,模块化和依赖关系处理全部处理良好,用户接口傻瓜化,jQuery官方组件少,第三方插件质量和依赖关系处理较麻烦;4. jQuery使用插件式方式扩展jQuery对象的方法,大部分方法绑定在jQuery对象上,YUI3支持插件式方式扩展Node对象,也支持独立对象,将DOM或Node对象以参数形式传进去。
  16. 16. 类库只是提供了一些封装好的类,对整个应用程序的开发过程并不会有过多要求和建议,比较轻。框架应包含类库,但在类库的基础上更进一步,对整个应用程序的开发过程有更多的指导和要求,比较重。
  17. 17. 1. 提供傻瓜化但定制性、弹性、安全性极强的范式;YUI({xxx:xxx,xxx:xxx}).use(“mod1”,”mod2”,…,function(Y){ // your code here});YUI.add(“mod3”,function(Y){ //Y.namespace(“xxx”);},”0.0.1”,{requires:[“mod4”,”mod5”]});2. 提供抽象类层,严格控制官方代码和框架使用者代码的guideline。
  18. 18. 应用层定制组件层(和网站UI、交互设计相关)通用组件层(drag、cookie、ajax、tab…) 抽象类层(base、widget、plugin) 底层(DOM、event、lang)
  19. 19. 1. Y.Base2. Y.Widget3. Y.Plugin
  20. 20. 1. 将类的所有属性操作管理起来,统一通过set和get方法设置和访问;2. 为set和get方法提供filter,可以在set和get前做一些额外工作,也可以提供validator功能严格控制数据的有效性;3. 可监听valueChange事件,由事件驱动改为属性驱动,更适应人类思维习惯。
  21. 21. var attributeConfig = { attrA : { // Configuration for attribute "attrA" value: 5, setter: function(val) { return Math.min(val, 10); }, validator: function(val) { return Y.Lang.isNumber(val); } }, attrB : { // Configuration for attribute "attrB" } };==================================================================function Box(){ this.on(“xChange”,function(e){ this.domNode.style.left = e.newVal + “px”; });}Box.ATTRS = { x:{ value : null }}box = new Box({x:30}) ;btn.onclick = function(){box.set(“x”,40)};
  22. 22. 1. 可监听自定义事件,不再局限于DOM和BOM提供的事件;2. 事件的触发条件自己处理;3. 可轻松使用观察者模式(命令模式?),已封装好。
  23. 23. var box = new Box();box.on(“open”,function(data){ alert(data.opener);});btn.onclick = function(){ if(me.hasKey()){ box.fire(“open”,{opener:me}); }}
  24. 24. mix-in Attribute和EventTarget类1. 提供initializer 和destructor 方法,分别在初始化和销毁对象时调用,自动调用父类的同名方法;2. 可以挂接和卸载plugin。
  25. 25. extend Base类1. 增加render方法,和renderUI、bindUI、syncUI三个抽象接口;function render(){ renderUI(); bindUI(); syncUI();}
  26. 26. 2. 有boundingBox和contentBox结构;
  27. 27. 有两种:Simple Plugin和Advanced PluginSimple Plugin无需继承,直接定义一个普通的类即可,功能简单。Advanced Plugins继承自Plugin.Base,提供更强大的功能支持。通过Plugin、mix-in等一系列接口,很好地支持AOP。
  28. 28. 实例化拖动对象YUI().use(dd-drag, function(Y) { var dd = new Y.DD.Drag({ node: #demo });});通过拖动Plugin给Base实例挂上拖动方法YUI().use(dd-plugin, function(Y) { var node = Y.one(#demo); node.plug(Y.Plugin.Drag); // 通过pluginHost的plugin名访问plugin实例 node.dd.addHandle(h2);});
  29. 29. 1. 代码质量高:所有组件全是YUI团队开发;2. 上手容易:API简单,入门门槛低;3. 工具齐全:性能测试、单元测试、代码压缩、依赖判断、控制台一应俱全;4. 官方文档齐全:教程、视频、示例、API查询全有;5. 框架概念强:范式、模块化、沙箱、抽象类、OOP和AOP良好支持、组件多。
  30. 30. thank you

×