kissy modularization part1

of 29 /29
KISSY Modularization part 1 [email protected]

Post on 12-Sep-2014

671 views

Category:

Technology


0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • KISSY Modularizationpart 1

    [email protected]

  • page.html

  • css html javascript

  • 1 2 3

  • html css javascript

  • main

    1

    3 4

    2

    3

  • KISSY Modularization

  • KISSY

    css + js + template = KISSY module

    package = modules

    : https://github.com/yiminghe/kissy-boilerplate

    http://localhost:8111/

  • API

  • api

    KISSY.add(function)

    amd

    cmd

  • api

    KISSY.use(modules, function)

    KISSY.use(modules, {success, error})

    KISSY.config()

  • KISSY.config combine

    alias

    lang

    packages name

    path

    charset

  • template

  • template

    xtemplate

    template module

    compile

  • compile

    nodejs

    kissy-xtemplate -w p src/

    src xx-tpl.html => xx-tpl.js (compiled function)

    require(./xx-tpl)

  • compiled template

    xx-tpl.html

    kissy-xtemplate p ./

    xx-tpl.js

  • use compiled template

  • conditional loader

  • conditional loader

    compatible(ie) module

  • conditional loader

    Touch modules

  • gallery

  • KISSY.use(gallery/xx/ver/)

    Just use it!

  • Mini?

    API web page

    http://m.kissyui.com/

    http://g.assets.daily.taobao.net/kissy/m/0.1.1/mini.js

  • loader

    kissy

    Dom

    Event

    Base

    xtemplate

    Components

    Mini

    Dom

    Event

    Anim

    Io

    Gallery

    uploader

    Kcharts

    Slide

    Layer-anim

    auth

  • nodejs

  • nodejs

    npm install [email protected]

    var S = require(kissy)

  • kissy modules on nodejs

    asynchronous S.use(modules, function)

    synchronous Like require on nodejs

    S.use(modules, {success:function, sync:true})

    KISSY 1.5 next require(kissy/lib/xtemplate)

  • thanks