Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kissy modularization part1
Search
yiminghe
February 21, 2014
Technology
1
1.8k
kissy modularization part1
part1 of kissy modularization tutorials
yiminghe
February 21, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Technology
See All in Technology
エンジニア向け技術スタック情報
kauche
1
290
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.4k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
怖くない!はじめてのClaude Code
shinya337
0
110
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
180
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
The Language of Interfaces
destraynor
158
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Being A Developer After 40
akosma
90
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Unsuck your backbone
ammeep
671
58k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Embracing the Ebb and Flow
colly
86
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
The World Runs on Bad Software
bkeepers
PRO
69
11k
Optimizing for Happiness
mojombo
379
70k
Transcript
KISSY Modularization part 1
[email protected]
理论基础 • 模块是一致紧密相连的程序单元 • 模块提供功能,并描述自身所依赖的模块 • 模块具备高内聚,低耦合的特性 • 方便多人协作
传统的前端模块化 • 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 模块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 • 下节 – 模块加载优化