Submit Search
Upload
谈谈模块化
•
Download as PPTX, PDF
•
1 like
•
925 views
衡锋 阳
Follow
模块化介绍,演进过程,实现手段,Noah组件库的实践,模块化实现总结。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 31
Download now
Recommended
这是WAS基础培训的一篇
02.web sphere培训 应用websphere
02.web sphere培训 应用websphere
littlecong
how to build module for node and neuron
Share module
Share module
dpf2e
認識JavaScript發展過程 瞭解ECMAScript規範 認識TC39提案 準備JavaScript環境
1. JavaScript 起步走
1. JavaScript 起步走
Justin Lin
美团前端架构简介
美团前端架构简介
pan weizeng
Maven技术分享
Maven技术分享
wslfh2005
游戏专题重构实践
游戏专题重构实践
f2er
性能优化
性能优化
Lu Wei
區別程式庫與框架 • 最小套用Spring MVC • 逐步善用Spring MVC • 使用Thymeleaf模版
Ch13 整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
Recommended
这是WAS基础培训的一篇
02.web sphere培训 应用websphere
02.web sphere培训 应用websphere
littlecong
how to build module for node and neuron
Share module
Share module
dpf2e
認識JavaScript發展過程 瞭解ECMAScript規範 認識TC39提案 準備JavaScript環境
1. JavaScript 起步走
1. JavaScript 起步走
Justin Lin
美团前端架构简介
美团前端架构简介
pan weizeng
Maven技术分享
Maven技术分享
wslfh2005
游戏专题重构实践
游戏专题重构实践
f2er
性能优化
性能优化
Lu Wei
區別程式庫與框架 • 最小套用Spring MVC • 逐步善用Spring MVC • 使用Thymeleaf模版
Ch13 整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
The presentation of my training ppt in Microsoft Azure Deep Dive Lab in 2011/3/15 - 2011/3/18.
Azure 迁移之道
Azure 迁移之道
Tao Wang
Servlet & JSP 教學手冊第二版
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
Justin Lin
ReactJs完整的介紹
React js
React js
國昭 張
d2沙龙
前端编译平台
前端编译平台
Welefen Lee
大众点评网从2003年创建以来,已经经历了7个年头,在技术方面从最初构建时期的简单的、低成本的方案,到发展阶段不断“痛苦”的转型演变,到目前比较复杂的技术架构,大众点评网的技术团队一直在关注业界新技术,力求提高可用性、降低成本、优化用户体验,并针对“点评”这一第三方参与的特点,摸索出一些特有的解决方案,借此机会希望能够分享给大家。
大众点评网的技术变迁之路
大众点评网的技术变迁之路
jeffz
Introduce Vue.js 2.0 and its family: Vue-Route, Vuex
Vue
Vue
國昭 張
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
了解JDBC架構 • 使用基本的JDBC • 透過JNDI取得 DataSource • 在Web應用程式整合 資料庫
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
2009/10/07 meeting
2009/10/07 meeting
Che-Hsien Lin
網站載入速度影響使用者體驗甚鉅,但也是開發過程中經常被忽略的一塊,這個演講會分享我優化公司網頁產品載入速度的過程,尤其是減少 JS bundle 體積的一些技巧,主角是我參與開發的手遊直播社群 Omlet Arcade,目前是全球前幾大的手機遊戲直播與社群,使用的框架是 React.js,打包工具是 webpack,但本次演講提到的概念適用於各種框架或打包工具。經過優化,最終 JavaScript bundle 大小減少 43%,載入速度減少 30%。 1. code splitting - vendor bundle 2. dynamic loading by routes 3. dynamic loading by large packages 4. tree shaking 5. cdn version
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
Shubo Chao
Apache Active MQ
Active Mq JMS
Active Mq JMS
hzchenkj
C# 深耕系列 (2) Part 2 以實例方式介紹如何使用 DDD 分析與設計應用程式。
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
區別程式庫與框架 逐步善用 Spring MVC 簡介 Thymeleaf 模版 使用 Spring Security
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
ASP.NET 5 快速入門 @ K.NET Day 2015
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
some coding principle in web
Web coding principle
Web coding principle
ZongYing Lyu
北京地区PHP爱好者2010聚会[12月19日胜利举办,CU、ThinkinginLamp联办],黑夜路人主讲《构建基于Lamp的中型网站架构》,详情见详情goo.gl/xCCxy或goo.gl/j89N9
构建基于Lamp的中型网站架构
构建基于Lamp的中型网站架构
HonestQiao
MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋
Lixun Peng
@meituan
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Allen Lsy
对MySQL的一些改进想法和实现
对MySQL的一些改进想法和实现
Lixun Peng
I like this bag
I like this bag
echimeg
Herelegdehvvn word
Herelegdehvvn word
echimeg
More Related Content
What's hot
The presentation of my training ppt in Microsoft Azure Deep Dive Lab in 2011/3/15 - 2011/3/18.
Azure 迁移之道
Azure 迁移之道
Tao Wang
Servlet & JSP 教學手冊第二版
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
Justin Lin
ReactJs完整的介紹
React js
React js
國昭 張
d2沙龙
前端编译平台
前端编译平台
Welefen Lee
大众点评网从2003年创建以来,已经经历了7个年头,在技术方面从最初构建时期的简单的、低成本的方案,到发展阶段不断“痛苦”的转型演变,到目前比较复杂的技术架构,大众点评网的技术团队一直在关注业界新技术,力求提高可用性、降低成本、优化用户体验,并针对“点评”这一第三方参与的特点,摸索出一些特有的解决方案,借此机会希望能够分享给大家。
大众点评网的技术变迁之路
大众点评网的技术变迁之路
jeffz
Introduce Vue.js 2.0 and its family: Vue-Route, Vuex
Vue
Vue
國昭 張
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
了解JDBC架構 • 使用基本的JDBC • 透過JNDI取得 DataSource • 在Web應用程式整合 資料庫
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
2009/10/07 meeting
2009/10/07 meeting
Che-Hsien Lin
網站載入速度影響使用者體驗甚鉅,但也是開發過程中經常被忽略的一塊,這個演講會分享我優化公司網頁產品載入速度的過程,尤其是減少 JS bundle 體積的一些技巧,主角是我參與開發的手遊直播社群 Omlet Arcade,目前是全球前幾大的手機遊戲直播與社群,使用的框架是 React.js,打包工具是 webpack,但本次演講提到的概念適用於各種框架或打包工具。經過優化,最終 JavaScript bundle 大小減少 43%,載入速度減少 30%。 1. code splitting - vendor bundle 2. dynamic loading by routes 3. dynamic loading by large packages 4. tree shaking 5. cdn version
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
Shubo Chao
Apache Active MQ
Active Mq JMS
Active Mq JMS
hzchenkj
C# 深耕系列 (2) Part 2 以實例方式介紹如何使用 DDD 分析與設計應用程式。
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
區別程式庫與框架 逐步善用 Spring MVC 簡介 Thymeleaf 模版 使用 Spring Security
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
ASP.NET 5 快速入門 @ K.NET Day 2015
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
some coding principle in web
Web coding principle
Web coding principle
ZongYing Lyu
北京地区PHP爱好者2010聚会[12月19日胜利举办,CU、ThinkinginLamp联办],黑夜路人主讲《构建基于Lamp的中型网站架构》,详情见详情goo.gl/xCCxy或goo.gl/j89N9
构建基于Lamp的中型网站架构
构建基于Lamp的中型网站架构
HonestQiao
MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋
Lixun Peng
@meituan
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Allen Lsy
对MySQL的一些改进想法和实现
对MySQL的一些改进想法和实现
Lixun Peng
What's hot
(20)
Azure 迁移之道
Azure 迁移之道
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
Servlet & JSP 教學手冊第二版 - 第 12 章:從模式到框架
React js
React js
前端编译平台
前端编译平台
大众点评网的技术变迁之路
大众点评网的技术变迁之路
Vue
Vue
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Ch09 整合資料庫
Ch09 整合資料庫
2009/10/07 meeting
2009/10/07 meeting
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
Active Mq JMS
Active Mq JMS
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Web coding principle
Web coding principle
构建基于Lamp的中型网站架构
构建基于Lamp的中型网站架构
MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
ASP.Net MVC2 简介
ASP.Net MVC2 简介
对MySQL的一些改进想法和实现
对MySQL的一些改进想法和实现
Viewers also liked
I like this bag
I like this bag
echimeg
Herelegdehvvn word
Herelegdehvvn word
echimeg
Hereglegdehvvn
Hereglegdehvvn
echimeg
Web绘图的应用
Web绘图
Web绘图
衡锋 阳
Halloween 2011
Halloween 2011
jimmypolk
Lyhyesti Slidesharesta
Slideshare
Slideshare
mmehtala
Tangram Grid介绍以及技术细节
Tangramgrid
Tangramgrid
衡锋 阳
javascript加载总结,高性能加载,按照依赖执行。模块加载器的实现的关键技术。
Javascript加载总结
Javascript加载总结
衡锋 阳
I like this bag
I like this bag
echimeg
Viewers also liked
(9)
I like this bag
I like this bag
Herelegdehvvn word
Herelegdehvvn word
Hereglegdehvvn
Hereglegdehvvn
Web绘图
Web绘图
Halloween 2011
Halloween 2011
Slideshare
Slideshare
Tangramgrid
Tangramgrid
Javascript加载总结
Javascript加载总结
I like this bag
I like this bag
Similar to 谈谈模块化
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
Nodejs & NAE
Nodejs & NAE
q3boy
Apache Clipper Starter knowhow.
Clipper@datacon.2019.tw
Clipper@datacon.2019.tw
Wei-Yu Chen
@ QCon Beijing 2012
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
drewz lin
Notes of jcip
Notes of jcip
Dai Jun
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
从CI到CD[麻袋理财王天青]v1
从CI到CD[麻袋理财王天青]v1
天青 王
https://www.facebook.com/broadmission
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
Paul Chao
廣宣學堂
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
Mvc架构在discuz!插件开发的应用 wps create_msoffice_check
Mvc架构在discuz!插件开发的应用 wps create_msoffice_check
Cevin Cheung
introduction to kissy design
Kissy design
Kissy design
yiming he
fe component share,this is a share in wbg
Component in fe
Component in fe
sking l
构建可扩展的微博系统
构建可扩展的微博系统
lonegunman
java description
java title
java title
lonegunman
廣宣學堂
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
Http Mock Tool:WireMock
Mock Server的应用与实践
Mock Server的应用与实践
qi lei
A
A
lonegunman
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
Introduction to NodeJS, 1st TechParty@UIC, Zelong Liang
Introduction to NodeJS
Introduction to NodeJS
TechParty@UIC
Similar to 谈谈模块化
(20)
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
Nodejs & NAE
Nodejs & NAE
Clipper@datacon.2019.tw
Clipper@datacon.2019.tw
合久必分,分久必合
合久必分,分久必合
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
Notes of jcip
Notes of jcip
2011新版首页总结 技术篇
2011新版首页总结 技术篇
从CI到CD[麻袋理财王天青]v1
从CI到CD[麻袋理财王天青]v1
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Mvc架构在discuz!插件开发的应用 wps create_msoffice_check
Mvc架构在discuz!插件开发的应用 wps create_msoffice_check
Kissy design
Kissy design
Component in fe
Component in fe
构建可扩展的微博系统
构建可扩展的微博系统
java title
java title
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Mock Server的应用与实践
Mock Server的应用与实践
A
A
July.2011.w3ctech
July.2011.w3ctech
Introduction to NodeJS
Introduction to NodeJS
谈谈模块化
1.
谈谈前端模块化 2011年06月07日 阳衡锋
2.
议程 模块化介绍 模块化演进过程 模块化的实现手段 Noah组件库中模块化的实践
3.
什么是模块?
4.
前端模块化的优点: •可维护性: 灵活架构,焦点分离,低耦合,高内聚
方便模块间的组合,分解 方便单个模块功能调试,升级 多人协作互不干扰 •可测试性
5.
前端模块化的缺点: •性能损耗 •系统分层 •模块间的通信
6.
前端模块的边界: •功能边界 •可重用的粒度 •人员的分工
7.
万物皆模块: http://925html.com/techniques/auto-building-yui-3-custom-modules/
8.
前端模块:
HTML + CSS + JavaScript
9.
演进-现状
10.
演进-CSS的模块化
11.
演进-现状的不足 •一个文件完成独立的功能,而且粒度很细 •细粒度的引入是为了防止引入无关的 js,css •事实上适得其反,使用者往往徒简单,会 引入多余的js css
12.
演进-使用loader
声明模块 模块=js+css 使用js加载 js,css,回调
13.
演进-使用loader 优点: •减少了js,css的引入,防止重复加载 缺点: •模块之间的依赖关系未知,加载顺序比较 严格,后面模块依赖于前面模块。
14.
为loader添加依赖声明
声明模块 模块=js+css+ 依赖 Base模块自 动加载 按需引入,无需考虑个模块内部依赖
15.
loader不足 http请求太多? •尝试后端combo服务 •深入浏览器javascript加载机制 依赖关系不智能? •重新审视我们的“模块” 并不是每个模块都能如此加载,如My97DP
16.
浏览器脚本加载 分为两个阶段:下载阶段,执行阶段
•按需加载,并行 •脚本加载阻塞 下载 VS •严格的依赖关系, •浏览器并发限制 脚本执行顺序
17.
脚本加载策略:
18.
脚本加载执行几种控制方法: 1.给script设置src属性但是并不把dom节点append到head中,实现预加载,当dom追加 到head中时脚本执行(IE中使用该方法)。 2.相同domain。使用XHR对象加载。然后使用eval(xhr.responseText)来执行脚本。 3.非IE浏览器,使用<script type=”text/cache”></script>来预先加载脚本。然后将 type=”text/javascript”来执行脚本。 (类似的思路还可以使用(new Image().src=”xx.js”
来将脚本加载到缓存中,然后使用DOM 操作添加script节点) 4.使用html5中<script async ></script>来保证执行顺序 5.单个js加载直接使用DOM操作。
19.
一些脚本加载器 •LabJs •Requirejs
20.
Combo服务 YUI combo:按需拼接js,打包,混淆压缩 需要有后端能读取的依赖关系才能完成按 需加载 Tangram的自动引入
/import.php?f=baidu.ui.Tab
21.
Commonjs规范来定义模块
模块定义:提 供的API在 export上 使用require引入无需关 心模块间的依赖
22.
nodejs:一种commonjs的实现 •require同步加载js,在web环境中比较困难
23.
seajs:完美的模块化的实现 •实现commonjs模块规范 •依赖可追朔 •按需引入,按序引入 •配合打包部署工具
24.
Seajs中的“声明”式依赖
25.
模块的通信机制:通知/监听
Notify Listen
26.
模块的通信机制 •有效减少了模块之间的耦合 •各模块都不知道彼此的存在 •任何模块的缺失都不会影响整体运行 •事件通知给第三方,监听也是监听第三方事件 •整个应用变得强壮,可伸缩性增强 •各模块各司其职,分工协作完成应用
27.
Noah组件库的一些实践: 组件库的特点: •依赖关系比较简单 •模块粒度比较大 处理办法: •压缩打包工具,提供部署方法 •引入时防止缓存 http://fe.baidu.com/doc/noah/nuit/#uitext/ui_devcomp.text
28.
总结: 模块化实现的技术点: •模块本身的定义,注册 •依赖声明,追朔机制 •开发阶段的加载机制 •打包部署机制 •模块间的通信机制
29.
参考资料: •Commonjs模块规范:http://wiki.commonjs.org/wiki/Modules/1.1 •动态脚本执行顺序:http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order •模块化: http://baike.baidu.com/view/182267.htm •Labjs: http://labjs.com •Requirejs:http://requirejs.org/ •Nodejs:
http://nodejs.org •Seajs:http://seajs.org/ •Kissy的前端模块化实践 http://www.slideshare.net/yiminghe/kissy-6637677 •可伸缩性架构: http://www.slideshare.net/nzakas/scalable-javascript-application- architecture •再读可扩展的javascript架构: http://hi.baidu.com/ywdblog/blog/item/f4f6680e15737cc57acbe100.html
30.
Q&A
31.
Thanks!
Download now