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
前端组件模块化思考与实践
Search
keelii
March 08, 2013
Programming
4
1.1k
前端组件模块化思考与实践
前端组件模块化思考与实践
keelii
March 08, 2013
Tweet
Share
More Decks by keelii
See All by keelii
Best workflow with grunt
keelii
0
1k
前端,改变 Front-end makes change
keelii
5
1k
前端开发工具
keelii
3
1.1k
Other Decks in Programming
See All in Programming
🔨 小さなビルドシステムを作る
momeemt
2
550
Infer入門
riru
4
1.6k
State of CSS 2025
benjaminkott
1
120
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
150
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
令和最新版手のひらコンピュータ
koba789
14
8k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
270
Namespace and Its Future
tagomoris
6
490
私の後悔をAWS DMSで解決した話
hiramax
4
140
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
It's Worth the Effort
3n
187
28k
Navigating Team Friction
lara
189
15k
A designer walks into a library…
pauljervisheath
207
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
For a Future-Friendly Web
brad_frost
179
9.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Transcript
前端组件模块化思考与实践 ——requirejs VS seajs 13年2月22⽇日星期五
思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS
seajs 13年2月22⽇日星期五
思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS
seajs 13年2月22⽇日星期五
13年2月22⽇日星期五
原因 ⽷为什么需要模块化⽺ 13年2月22⽇日星期五
原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 13年2月22⽇日星期五
原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 ✦业务与需求更复杂 13年2月22⽇日星期五
原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 ✦业务与需求更复杂 ✦代码复⽤用、架构升级 13年2月22⽇日星期五
思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS
seajs 13年2月22⽇日星期五
优缺点 ⽷模块化的优缺点⽺ 13年2月22⽇日星期五
优缺点 ⽷模块化的优缺点⽺ ✓代码复⽤用强、提⾼高开发效率 ✓有利于开发规范与⽂文档系统 ✓模块依赖关系系统解决使开发更专注 13年2月22⽇日星期五
优缺点 ⽷模块化的优缺点⽺ ✓代码复⽤用强、提⾼高开发效率 ✓有利于开发规范与⽂文档系统 ✓模块依赖关系系统解决使开发更专注 ✦模块粒度过⾼高不利于管理 ✦额外的学习成本 13年2月22⽇日星期五
13年2月22⽇日星期五
思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS
seajs 13年2月22⽇日星期五
CommonJS模块规范 13年2月22⽇日星期五
CommonJS模块规范 CommonJS 是⼀一个有志于构建 JavaScript ⽣生态圈的组 织。它有⼀一个 邮件列表,很多开发者参与其中。 整个社 区致⼒力于提⾼高 JavaScript
程序的可移植性和可交换性, ⽆无论是在服务端还是浏览器端。——lifesinger 13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS
13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS
13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS
13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS
13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs
CommonJS 13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs
CommonJS 13年2月22⽇日星期五
CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs
seajs CommonJS 13年2月22⽇日星期五
AMD模块规范 define require 13年2月22⽇日星期五
定义⼀一个模块 define(id?, deps?, factory) 13年2月22⽇日星期五
定义⼀一个模块 define(id?, deps?, factory) string 模块标识 13年2月22⽇日星期五
定义⼀一个模块 define(id?, deps?, factory) string 模块标识 string/array 依赖数组 13年2月22⽇日星期五
定义⼀一个模块 define(id?, deps?, factory) string 模块标识 string/array 依赖数组 function ⼯工⼚厂函数
13年2月22⽇日星期五
加载⼀一个模块 require([‘modules’], callback) 13年2月22⽇日星期五
加载⼀一个模块 require([‘modules’], callback) string/array 加载数组 13年2月22⽇日星期五
加载⼀一个模块 require([‘modules’], callback) string/array 加载数组 function 加载成功回调函数 13年2月22⽇日星期五
define⽤用例 define(‘fp’, [‘jquery’, ‘trimpath’], function() { var footPrint = function()
{ // code here } // 模块对外开放的变量、⽅方法、对象 return footPrint; }); 13年2月22⽇日星期五
require⽤用例 require([‘jquery’, ‘fp’], function(jquery, footprint) { // dom加载完成后初始化脚印模块 $(function() {
var fp = new footPrint(); }); }); 13年2月22⽇日星期五
SeaJS ? 13年2月22⽇日星期五
SeaJS ? coming soon... 13年2月22⽇日星期五
RequireJS 对⽐比 SeaJS requirejs(15kb) seajs (7kb) AMD应⽤用⼲⼴广泛,对AMD⽀支持 良好 另辟蹊径选择 Wrappings⾃自⽴立
⻔门户,语法优雅、更适合浏览 器端 脚本加载器+模块加载器 纯粹的模块加载器 AMD天然⽀支持JSONP模块 模块内部按需异步加载 13年2月22⽇日星期五
引⽤用: https://github.com/amdjs/amdjs-api/wiki/AMD https://github.com/seajs/seajs https://github.com/jrburke/requirejs 13年2月22⽇日星期五
END 13年2月22⽇日星期五