Enviar pesquisa
Carregar
LSM实践
•
11 gostaram
•
1,515 visualizações
Kejun Zhang
Seguir
分层语义化模板实践
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 35
Baixar agora
Baixar para ler offline
Recomendados
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang
An in-depth look at jQuery UI
An in-depth look at jQuery UI
Paul Bakaus
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Sebastiano Armeli
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
jQuery (BostonPHP)
jQuery (BostonPHP)
jeresig
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
Recomendados
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang
An in-depth look at jQuery UI
An in-depth look at jQuery UI
Paul Bakaus
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Sebastiano Armeli
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
jQuery (BostonPHP)
jQuery (BostonPHP)
jeresig
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
Expressを使ってみた
Expressを使ってみた
Atsuhiro Takiguchi
An in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Sebastian Springer
Making your Angular.js Application accessible
Making your Angular.js Application accessible
Dirk Ginader
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
WebFrameworks
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Javier Abadía
Developing Web Graphics with WebGL
Developing Web Graphics with WebGL
Tony Parisi
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
John Hann
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Techsylvania
Vue business first
Vue business first
Vitalii Ratyshnyi
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Guillaume Laforge
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Dirk Ginader
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
前端基础架构的实践和思考
前端基础架构的实践和思考
Kejun Zhang
响应性设计和开发
响应性设计和开发
Kejun Zhang
Mais conteúdo relacionado
Mais procurados
Expressを使ってみた
Expressを使ってみた
Atsuhiro Takiguchi
An in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Sebastian Springer
Making your Angular.js Application accessible
Making your Angular.js Application accessible
Dirk Ginader
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
WebFrameworks
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Javier Abadía
Developing Web Graphics with WebGL
Developing Web Graphics with WebGL
Tony Parisi
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
John Hann
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Techsylvania
Vue business first
Vue business first
Vitalii Ratyshnyi
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Guillaume Laforge
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Dirk Ginader
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
Mais procurados
(20)
Expressを使ってみた
Expressを使ってみた
An in-depth look at jQuery
An in-depth look at jQuery
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Making your Angular.js Application accessible
Making your Angular.js Application accessible
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Developing Web Graphics with WebGL
Developing Web Graphics with WebGL
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
The Future of CSS with Web Components
The Future of CSS with Web Components
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Vue business first
Vue business first
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Destaque
前端基础架构的实践和思考
前端基础架构的实践和思考
Kejun Zhang
响应性设计和开发
响应性设计和开发
Kejun Zhang
面向未来的重构
面向未来的重构
Kejun Zhang
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
Kejun Zhang
F2e @ douban
F2e @ douban
Kejun Zhang
FEX 发展历程-公司化运作
FEX 发展历程-公司化运作
RANK LIU
前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session
RANK LIU
从学生到工程师
从学生到工程师
RANK LIU
Web 前端工程师与成长
Web 前端工程师与成长
RANK LIU
更好的文件组织
更好的文件组织
Kejun Zhang
Destaque
(11)
前端基础架构的实践和思考
前端基础架构的实践和思考
响应性设计和开发
响应性设计和开发
面向未来的重构
面向未来的重构
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
F2e @ douban
F2e @ douban
FEX 发展历程-公司化运作
FEX 发展历程-公司化运作
前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session
从学生到工程师
从学生到工程师
Web 前端工程师与成长
Web 前端工程师与成长
更好的文件组织
更好的文件组织
Semelhante a LSM实践
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
swwwitch inc.
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019
Matt Raible
Front End Development for Back End Java Developers - NYJavaSIG 2019
Front End Development for Back End Java Developers - NYJavaSIG 2019
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Html5 Overview
Html5 Overview
Daniel Arndt Alves
Front End Development for Back End Java Developers - West Midlands Java User ...
Front End Development for Back End Java Developers - West Midlands Java User ...
Matt Raible
Front End Development for Back End Java Developers - Dublin JUG 2019
Front End Development for Back End Java Developers - Dublin JUG 2019
Matt Raible
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
No Feature Solutions with SharePoint
No Feature Solutions with SharePoint
mikehuguet
Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019
Matt Raible
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
Matt Raible
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JSFestUA
HTML5 Report Card
HTML5 Report Card
Michael(tm) Smith
High Performance Web Design
High Performance Web Design
Koji Ishimoto
Web Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe Kaplan
Moshe Kaplan
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
Joseph Chiang
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
Matt Raible
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails
Nico Hagenburger
Technical Introduction to YDN
Technical Introduction to YDN
Christian Heilmann
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
Semelhante a LSM实践
(20)
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
page 2015「クリエイティブゾーンセミナー」『Illustratorでの配置画像事情 2015』
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019
Front End Development for Back End Java Developers - NYJavaSIG 2019
Front End Development for Back End Java Developers - NYJavaSIG 2019
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Html5 Overview
Html5 Overview
Front End Development for Back End Java Developers - West Midlands Java User ...
Front End Development for Back End Java Developers - West Midlands Java User ...
Front End Development for Back End Java Developers - Dublin JUG 2019
Front End Development for Back End Java Developers - Dublin JUG 2019
Beyond CSS Architecture
Beyond CSS Architecture
No Feature Solutions with SharePoint
No Feature Solutions with SharePoint
Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
HTML5 Report Card
HTML5 Report Card
High Performance Web Design
High Performance Web Design
Web Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe Kaplan
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails
Technical Introduction to YDN
Technical Introduction to YDN
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Último
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
V3cube
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Último
(20)
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
LSM实践
1.
http://hikejun.com twitter: @kejunz
2.
Me. • • • http://hikejun.com • twitter:
@kejunz
3.
L(ayered) S(emantic) M(arkup)
4.
MVC L(ayered) S(emantic) M(arkup)
5.
MVC
IA L(ayered) S(emantic) M(arkup)
6.
Designer FrontEnd Engineer
demo http://hikejun.com/work/qq/spec/example_mod_compare.html
7.
PRD PSD HTML
CSS
8.
PRD PSD HTML
CSS
9.
PRD PSD
HTML CSS
10.
PRD PSD
HTML CSS
11.
JS PSD
CSS HTML Prototype PRD
12.
JS
C- PSD CSS V- HTML Prototype M- PRD
13.
Javascript
( ) CSS ( ) HTML
14.
UI
15.
step 1:
HTML wireframe demo: http://hikejun.com/work/qq/share_8.4/page_naked.png
16.
step 2: reset
rules( ) demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png
17.
step 3:
( ) demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png
18.
step 4: demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png
19.
step 5:
/
20.
•
UI • •
21.
HTML
22.
23.
24.
25.
demo: http://hikejun.com/work/qq/share_8.23/mod_comp.html ‘
’ http://hikejun.com/work/qq/share_8.23/sports.qq.com.html http://hikejun.com/work/qq/share_8.23/news.qq.com.html
26.
27.
1. demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html
28.
II. demo: http://hikejun.com/work/qq/share_8.4/example2/article.html
29.
III. demo: http://localhost/~kejun/douban/ui-framework/test/all.html
30.
IV. demo: http://localhost/~kejun/douban/ui-framework/test/all.html
31.
32.
UI
33.
34.
Q&A
35.
:)
Baixar agora