• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
kissy modularization part1
 

kissy modularization part1

on

  • 329 views

 

Statistics

Views

Total Views
329
Views on SlideShare
319
Embed Views
10

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 10

http://blog.kissyui.com 7
http://feedly.com 3

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

    kissy modularization part1 kissy modularization part1 Presentation Transcript

    • KISSY Modularization part 1 yiminghe@gmail.com
    • 理论基础 • 模块是一致紧密相连的程序单元 • 模块提供功能,并描述自身所依赖的模块 • 模块具备高内聚,低耦合的特性 • 方便多人协作
    • 传统的前端模块化 • page.html • <html> <link ref=‘stylesheet’/> <link ref=‘stylesheet’/> <div></div> <div></div> <script></script> <script></script> </html>
    • 问题 • 线性结构,不符合直观 • css html javascript 互不相关
    • 线性结构 模块1 模块2 模块3
    • 理想的模块 • 树状结构,模块可依赖多个其他模块 • 一个模块包括 html css javascript 三部分, 也就是内聚的意思
    • 树状结构 main 模块1 模块3 模块2 模块4 模块3
    • • KISSY Modularization
    • KISSY 模块化方案 • css + js + template = KISSY module • package = modules • 示例: https://github.com/yiminghe/kissyboilerplate • 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 compile template module
    • 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 Mini Gallery • Dom • Dom • uploader • Event • Event • Kcharts • Base • Anim • Slide • xtemplate • Io • Layer-anim • Components • … • auth • … • …
    • • nodejs
    • nodejs • npm install kissy@1.4.1-5 • 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 • 下节 – 模块加载优化