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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
Other Decks in Technology
See All in Technology
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
1
270
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
Lexical Analysis
shigashiyama
1
150
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
190
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
880
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
910
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Music & Morning Musume
bryan
46
6.2k
Designing for humans not robots
tammielis
250
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Scaling GitHub
holman
458
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Making Projects Easy
brettharned
115
5.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Faster Mobile Websites
deanohume
305
30k
Code Review Best Practice
trishagee
64
17k
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 • 下节 – 模块加载优化