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
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
160
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
210
react at alipay
yiminghe
43
4.4k
Other Decks in Technology
See All in Technology
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
110
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
230
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
260
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
初めてのDatabricks Apps開発
taka_aki
1
230
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
210
コンパウンド組織のCRE #cre_meetup
layerx
PRO
0
120
AI時代、“平均値”ではいられない
uhyo
3
370
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
110
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
430
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
240
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
540
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Invisible Side of Design
smashingmag
302
51k
A better future with KSS
kneath
239
18k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
How GitHub (no longer) Works
holman
315
140k
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 • 下节 – 模块加载优化