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
Lazy application authentication with Tailscale
bluehatbrit
0
200
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
160
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
ゼロからはじめる採用広報
yutadayo
3
910
Featured
See All Featured
Visualization
eitanlees
146
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Music & Morning Musume
bryan
46
6.6k
Building an army of robots
kneath
306
45k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A Modern Web Designer's Workflow
chriscoyier
695
190k
For a Future-Friendly Web
brad_frost
179
9.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Designing Experiences People Love
moore
142
24k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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 模块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 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 • 下节 – 模块加载优化