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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
1.1k
前端开发工具
keelii
3
1.1k
Other Decks in Programming
See All in Programming
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
symy2co
0
180
Nostalgia Meets Technology: Super Mario with TypeScript
manfredsteyer
PRO
0
110
KagglerがMixSeekを触ってみた
morim
0
140
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
chobishiba
1
500
SourceGeneratorのマーカー属性問題について
htkym
0
210
AI活用のコスパを最大化する方法
ochtum
0
310
ファインチューニングせずメインコンペを解く方法
pokutuna
0
130
Java 21/25 Virtual Threads 소개
debop
0
260
Pythonデータ分析コトハジメinFukuoka
kanan
0
100
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
200
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
hagevvashi
0
550
モダンOBSプラグイン開発
umireon
0
180
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Building an army of robots
kneath
306
46k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
43k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
100
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
300
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
210
From π to Pie charts
rasagy
0
160
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
160
Optimizing for Happiness
mojombo
378
71k
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⽇日星期五