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
1k
前端组件模块化思考与实践
前端组件模块化思考与实践
keelii
March 08, 2013
Tweet
Share
More Decks by keelii
See All by keelii
Best workflow with grunt
keelii
0
830
前端,改变 Front-end makes change
keelii
5
880
前端开发工具
keelii
3
940
Other Decks in Programming
See All in Programming
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
840
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
document.write再考
brn
5
2.5k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
210
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
310
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
110
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.7k
Designing the Hi-DPI Web
ddemaree
275
33k
Being A Developer After 40
akosma
56
580k
Designing for Performance
lara
601
67k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
A better future with KSS
kneath
230
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Building Adaptive Systems
keathley
29
1.8k
Infographics Made Easy
chrislema
237
18k
Teambox: Starting and Learning
jrom
126
8.4k
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⽇日星期五