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
990
前端,改变 Front-end makes change
keelii
5
1k
前端开发工具
keelii
3
1.1k
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
1
320
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
760
CursorはMCPを使った方が良いぞ
taigakono
1
170
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Gleamという選択肢
comamoca
6
760
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
180
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
230
Create a website using Spatial Web
akkeylab
0
300
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
340
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
A Modern Web Designer's Workflow
chriscoyier
694
190k
4 Signs Your Business is Dying
shpigford
184
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building an army of robots
kneath
306
45k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
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⽇日星期五