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
220
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
160
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
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
290
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
260
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
170
MCPと認可まわりの話 / mcp_and_authorization
convto
2
270
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
670
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.3k
スプリントレビューを効果的にするために
miholovesq
9
1.7k
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
350
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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 • 下节 – 模块加载优化