kissy design

of 65 /65
---剖析 kissy 设计思想 承玉@taobao

Post on 12-Sep-2014

1.944 views

Category:

Technology


6 download

Embed Size (px)

DESCRIPTION

introduction to kissy design

TRANSCRIPT

  • --- kissy

    @taobao

  • Closure library

  • KISSY

  • Kissy

    Kissy

    Kissy

    Kissy

    Kissy

    Kissy

  • Kissy on github

  • component

    core

    seed

    Suggest

    Overlay

    Editor

    Dom

    Event

    Anim

    kernel

    web

    loader

  • :tab,slider,overlay,imagezoom

  • suggest

  • Kissy editor :

  • Core

    {dom/event/anim/ajax}

    Web.js kissy.js Lang.js Loader.js seed

  • Browser Nodejs

  • nodejs

    add : use :

  • Taobao

    Kissy

  • http://a.tbcdn.cn/??s/kissy/1.1.6/switchable/switchable-pkg-min.js,s/kissy/1.1.6/suggest/suggest-pkg-min.js,s/kissy/1.1.6/datalazyload/datalazyload-pkg-min.js,s/kissy/1.1.3/flash/flash-pkg-min.js,p/fp/2011a/expressway/profile-min.js,p/fp/2011a/header/header-min.js,p/fp/2011a/attraction/attraction-min.js,p/fp/2011a/expressway/expressway-min.js,p/fp/2011a/category/category-min.js,p/fp/2011a/category/sub-promotion-min.js,p/fp/2011a/guide/alimama-ecpm-min.js,p/fp/2010c/js/fp-hubble-monitor-min.js,p/fp/2011a/hotsale/p4p-min.js,p/fp/2011a/footer/footer-min.js?t=20110322.js

  • KISSY

    Page logic

    Biz mod

    Biz modKISSY mod

    KISSY mod

  • Pascal

    Erlang

    Perl

    Python

    Ruby

    php

    Java

    c/c++

  • A.php

    ---------------------------main.php

    require_once("A.php");

    //use A

    require_once include_path

  • A.java/A.py

    -----------------main.java/main.py

    import A;

    //use A

    import classpath/sys.path

    Java jarclass/pyc

  • Click

  • click me

    window.onload=function(){};

    var a=document.getElementById(go);

    a.onclick=function(){};

  • ----------y.html

    click

    -------xx.js

    (function(){})();

  • Labjs : script loader

    Yui3 : module loader

    Closure library : module program

  • $LABjs

    .script(a.js)

    .script(b.js)

    .wait()

    .script(c.js);

  • function wrapper load , execute ,

    YUI.add(module1,function(S){

    S.Module1=function(){};

    });

    YUI.add({module1:{

    Fullpath:xxx.js

    }});

    YUI().use(module1,function(S){

    //use S.Module1

    });

  • Commonjs/module

  • KISSY.add(dom,function(){

    KISSY.DOM ={ addClass:function(){} };

    });

    KISSY.add(dom,function(KISSY){

    return { addClass:function(){} };

    });

  • KISSY.add(event-target,function(){

    KISSY.Event.Target = function(){};

    });

    :

    KISSY.add(event/target,function(){

    var EventTarget = function(){}

    return EventTarget;

    });

  • event / base.js :

    KISSY.add(function(){});

    event/base

  • S.config({

    packages:[{

    name:m1,

    path:http://xx.com/

    }]

    });

    S.use(m1/base)->http://xx.com/m1/base.js

  • KISSY.add(xx, function(S,DOM){

    },{

    requires:[dom]

    });

  • :

    S.use(dom,function (S,DOM){

    //use DOM

    });

  • Module compiler :

  • == Suggest->Switchable->overlay->menu

  • Suggest

  • //

    var defaultConfig={};

    function Suggest(config){

    S.mix(config,defaultConfig,false);

    //

    }

    //

    S.augment(Suggest,EventTarget,{});

  • Switchable

  • . . .

  • Overlay using UIBase

  • var Component=UIBase.create(Parent,['MixComponent'],{

    initializer:function(){},

    _uiSetX:function(){},

    renderUI:function(){},

    bindUI:function(){},

    destructor:function(){}

    },{

    ATTRS:{

    x:{}

    },

    HTML_PARSER:{

    yEl:".cls"

    }

    });

  • mixin

    Refer: http://goo.gl/sgvXP

  • menu,menubutton

    Component , MVC

  • 3 MVC Render ModelControl:

  • Build

  • Behavior-driven development framework

    describe("Jasmine", function() {

    it("makes testing JavaScript awesome!",

    function() {

    expect(yourCode).toBeLotsBetter();

    });

    });

  • Sphinx :

    Cheers for a great tool that actually makes programmers want to write documentation!

  • Kissy

    Components

    kissy

  • Kissyteam.github.com

  • Gtalk/[email protected] Blog: http://yiminghe.javaeye.com