Submit Search
Upload
新版阿尔法城背后的前端MVC实践
•
91 likes
•
4,316 views
Dexter Yang
Follow
Practice MVC as features, not frameworks / 新版阿尔法城背后的前端MVC实践
Read less
Read more
Technology
Report
Share
Report
Share
1 of 52
Download now
Download to read offline
Recommended
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
Mario Gonzalez
Angular js gtg-27feb2013
Angular js gtg-27feb2013
Nitya Narasimhan
A nodejs application
A nodejs application
Robbie Clutton
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
Mario Gonzalez
Sai Sharan_UI_Resume
Sai Sharan_UI_Resume
Sai Sharan Madisetty
Introduction to backbone_js
Introduction to backbone_js
Mohammed Saqib
Introduction to backbone js
Introduction to backbone js
Mindfire Solutions
Tikal's Backbone_js introduction workshop
Tikal's Backbone_js introduction workshop
Tikal Knowledge
Recommended
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
Mario Gonzalez
Angular js gtg-27feb2013
Angular js gtg-27feb2013
Nitya Narasimhan
A nodejs application
A nodejs application
Robbie Clutton
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
Mario Gonzalez
Sai Sharan_UI_Resume
Sai Sharan_UI_Resume
Sai Sharan Madisetty
Introduction to backbone_js
Introduction to backbone_js
Mohammed Saqib
Introduction to backbone js
Introduction to backbone js
Mindfire Solutions
Tikal's Backbone_js introduction workshop
Tikal's Backbone_js introduction workshop
Tikal Knowledge
Web components - An Introduction
Web components - An Introduction
cherukumilli2
Building Custom Visual Composer Elements
Building Custom Visual Composer Elements
Burak Dogan
2013 04-02-server-side-backbone
2013 04-02-server-side-backbone
SC5.io
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
Marakana Inc.
One APK to rule them all
One APK to rule them all
Dominik Helleberg
BBUI
BBUI
Anoop Nayak
Introduction to require js
Introduction to require js
Ahmed Elharouny
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
Tasneem Sayeed
Wheel.js
Wheel.js
baccigalupi
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Tilo Mitra
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
Web design v roku 2013
Web design v roku 2013
vibration.sk
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
Java Script
Java Script
university of education,Lahore
Drupal goes Mobile
Drupal goes Mobile
zezzi Castillo
Client-Side Packages
Client-Side Packages
Domenic Denicola
Test
Test
Siva Prakash
Be German About Your Frontend
Be German About Your Frontend
Arush Sehgal
Javascript library toolbox
Javascript library toolbox
Skysoul Pty.Ltd.
Spring 3 MVC CodeMash 2009
Spring 3 MVC CodeMash 2009
kensipe
Mvc architecture
Mvc architecture
Surbhi Panhalkar
More Related Content
What's hot
Web components - An Introduction
Web components - An Introduction
cherukumilli2
Building Custom Visual Composer Elements
Building Custom Visual Composer Elements
Burak Dogan
2013 04-02-server-side-backbone
2013 04-02-server-side-backbone
SC5.io
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
Marakana Inc.
One APK to rule them all
One APK to rule them all
Dominik Helleberg
BBUI
BBUI
Anoop Nayak
Introduction to require js
Introduction to require js
Ahmed Elharouny
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
Tasneem Sayeed
Wheel.js
Wheel.js
baccigalupi
Building native Win8 apps with YUI
Building native Win8 apps with YUI
Tilo Mitra
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
Web design v roku 2013
Web design v roku 2013
vibration.sk
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
Java Script
Java Script
university of education,Lahore
Drupal goes Mobile
Drupal goes Mobile
zezzi Castillo
Client-Side Packages
Client-Side Packages
Domenic Denicola
Test
Test
Siva Prakash
Be German About Your Frontend
Be German About Your Frontend
Arush Sehgal
Javascript library toolbox
Javascript library toolbox
Skysoul Pty.Ltd.
What's hot
(20)
Web components - An Introduction
Web components - An Introduction
Building Custom Visual Composer Elements
Building Custom Visual Composer Elements
2013 04-02-server-side-backbone
2013 04-02-server-side-backbone
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
One APK to rule them all
One APK to rule them all
BBUI
BBUI
Introduction to require js
Introduction to require js
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
Wheel.js
Wheel.js
Building native Win8 apps with YUI
Building native Win8 apps with YUI
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
Web design v roku 2013
Web design v roku 2013
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Java Script
Java Script
Drupal goes Mobile
Drupal goes Mobile
Client-Side Packages
Client-Side Packages
Test
Test
Be German About Your Frontend
Be German About Your Frontend
Javascript library toolbox
Javascript library toolbox
Viewers also liked
Spring 3 MVC CodeMash 2009
Spring 3 MVC CodeMash 2009
kensipe
Mvc architecture
Mvc architecture
Surbhi Panhalkar
Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?
Zohar Elkayam
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
rainoxu
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化
rainoxu
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Dexter Yang
SQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle Database
Jeff Smith
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Dexter Yang
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
PHP MVC Tutorial
PHP MVC Tutorial
Yang Bruce
A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!
Muhammad Ghazali
Oracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & Tricks
Jeff Smith
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Node way
Node way
Ethan Zhang
Mvp in practice
Mvp in practice
彥彬 洪
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
Viewers also liked
(20)
Spring 3 MVC CodeMash 2009
Spring 3 MVC CodeMash 2009
Mvc architecture
Mvc architecture
Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
SQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle Database
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Git 零基础介绍
Git 零基础介绍
PHP MVC Tutorial
PHP MVC Tutorial
A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!
Oracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & Tricks
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Web前端性能优化 2014
Web前端性能优化 2014
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
Node way
Node way
Mvp in practice
Mvp in practice
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Similar to 新版阿尔法城背后的前端MVC实践
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
Einar Ingebrigtsen
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
Timmy Kokke
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
Takayuki Kyowa
Rhodes
Rhodes
jwallace41
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
CMC Limited
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
Adam Mokan
Getting Started with Docker
Getting Started with Docker
visual28
Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門
Wen-Tien Chang
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
MartinSotirov
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
johnnybiz
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
philogb
20120306 dublin js
20120306 dublin js
Richard Rodger
20120802 timisoara
20120802 timisoara
Richard Rodger
Large Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the Scenes
Boyan Borisov
WCM-7 Surfing with CMIS
WCM-7 Surfing with CMIS
Alfresco Software
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in Share
Alfresco Software
Android Development 201
Android Development 201
Tomáš Kypta
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Esri Nederland
Similar to 新版阿尔法城背后的前端MVC实践
(20)
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
Rhodes
Rhodes
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
Getting Started with Docker
Getting Started with Docker
Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
20120306 dublin js
20120306 dublin js
20120802 timisoara
20120802 timisoara
Large Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the Scenes
WCM-7 Surfing with CMIS
WCM-7 Surfing with CMIS
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in Share
Android Development 201
Android Development 201
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Recently uploaded
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
NavinnSomaal
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
Lars Bell
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
Recently uploaded
(20)
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
新版阿尔法城背后的前端MVC实践
1.
Practice MVC as
features, not frameworks MVC DexterYy @
2.
3.
4.
http://site.douban.com/118836/
5.
6.
) •
“ ” LBS • “ ” 3D • “AJAX ” • web app Flash •
7.
XD
8.
XD •
MVC • MVC
9.
“
” • “ ” —— WASD • —— vs Graph • —— “ ”
10.
“
” • Bring real-life to software, rethought for the web Google+ slogan XX • 3D • GUI Metaphor
11.
“AJAX
” • / viewport google maps • JSON • —— web • “ ” overlap widget
12.
“
” web app • Single Page App wiki • GUI —— layout • —— layout
13.
“
” • View CouchDB • “ ” • • “ ”
14.
zhuangbility...
15.
• •
URL • • • • webapp
16.
MVC
17.
MVC
18.
MVC •
MVC • MVC
19.
MVC •
MVC • MVC MVC
20.
MVC •
MVC • MVC MVC MVC
21.
MVC •
MVC • MVC MVC MVC
22.
23.
• • •
24.
MVC
&
25.
1. •
OzJS • CommonJS module • • • JS
26.
• •
Model View • “MVC ”
27.
•
“ ” micro-framework • Thomas Fuchs: Zepto and the rise of the JavaScript Micro-Frameworks • Dustin Diaz: Ender.js - The open submodule library
28.
2.
message passing • Alan Kay: "OOP to me means only messaging, ..." • PubSub / EventEmitter / CustomEvent / ... • Observer • MVC
29.
•
Observer • View Controller •
30.
•
Observer • reset
31.
•
Observer event / / “ ” “ ” ==
32.
3.
URL Router • web • Single-page WebApp URL SEO • URL DOM • URL • URL • UNIX Plan 9 • “Plan 9 ” • URL WebApp “ ”
33.
•
url • router 30
34.
4. UI
delegate • uiproxy • UI • DOM
35.
•
className • class • UI View View DOM • View UI • ——> ——> ——>
36.
5.
Render • 1 2 • 1 2 DOM • API DOM SVG Canvas
37.
5.
Render • 1 2 • 1 2 DOM • API DOM SVG Canvas • API
38.
HTML4
39.
•
template • format python • convertTpl micro-templating John Resig/Underscore
40.
•
DomCanvas layout • DOM Canvas API • ie6 • SVG raphael.js
41.
6.
DataSource • Model •
42.
•
43.
module M V
C XD MVC
44.
Model •
Model URL • Model View Controller Model • Model Model make Controller •
45.
View •
+ UI View widget/ View • View Model Controller / Martin Fowler Passive View • View web MVC web GUI UI DOM View View DOM
46.
View •
View UI Controller • UI DOM • web UI / • Google+ circle • Cocoa UI View View DOM View
47.
Controller •
URL routing API widget • View Model • App MVC
48.
MVC
Server Model Pluggable Server Contorller Widgets http / / Model Controller / View / App / URL UI/DOM HTML / /
49.
MVC Smalltalk-80
Ruby On Rails ASP.NET Cocoa Model View Controller: History, theory and usage
50.
We need SMART
Models, THIN Controllers, and DUMB Views
51.
MVC
It's no big deal
52.
MVC
It's no big deal Thanks • http://www.douban.com/people/Dexter_Yy/ • blog http://www.limboy.com • http://site.douban.com/118836/ • MVC module https://github.com/dexteryy/OzJS/tree/master/ mod
Download now