Soumettre la recherche
Mettre en ligne
J engine -构建高性能、可监控的前端应用框架
•
Télécharger en tant que PPTX, PDF
•
4 j'aime
•
1,039 vues
fangdeng
Suivre
Développement personnel
Technologie
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Recommandé
Kissy模块化实践
Kissy模块化实践
yiming he
Kissy component model
Kissy component model
yiming he
Spring入门纲要
Spring入门纲要
yiditushe
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
Javascript primer plus
Javascript primer plus
Dongxu Yao
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
Vue.js
Vue.js
ZongYing Lyu
Recommandé
Kissy模块化实践
Kissy模块化实践
yiming he
Kissy component model
Kissy component model
yiming he
Spring入门纲要
Spring入门纲要
yiditushe
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
Javascript primer plus
Javascript primer plus
Dongxu Yao
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
Vue.js
Vue.js
ZongYing Lyu
Jdbc中驱动加载的过程分析(上)
Jdbc中驱动加载的过程分析(上)
yiditushe
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
modou li
Jsp
Jsp
rdandy
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
webpack 入門
webpack 入門
Anna Su
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
Vue
Vue
國昭 張
Template mb-kao
Template mb-kao
xwcoder
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
2018 8 18_play_framework
2018 8 18_play_framework
Lorn Jhu
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
drewz lin
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
Uliweb设计分享
Uliweb设计分享
modou li
前端开发之Js
前端开发之Js
fangdeng
Building an event driven web
Building an event driven web
fangdeng
Contenu connexe
Tendances
Jdbc中驱动加载的过程分析(上)
Jdbc中驱动加载的过程分析(上)
yiditushe
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
modou li
Jsp
Jsp
rdandy
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
webpack 入門
webpack 入門
Anna Su
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
Vue
Vue
國昭 張
Template mb-kao
Template mb-kao
xwcoder
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
2018 8 18_play_framework
2018 8 18_play_framework
Lorn Jhu
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
drewz lin
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
Uliweb设计分享
Uliweb设计分享
modou li
Tendances
(20)
Jdbc中驱动加载的过程分析(上)
Jdbc中驱动加载的过程分析(上)
JavaScript Code Quality
JavaScript Code Quality
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
高粒度模块化的前端开发
高粒度模块化的前端开发
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
Jsp
Jsp
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
webpack 入門
webpack 入門
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Vue
Vue
Template mb-kao
Template mb-kao
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
Real World ASP.NET MVC
Real World ASP.NET MVC
2018 8 18_play_framework
2018 8 18_play_framework
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Uliweb设计分享
Uliweb设计分享
En vedette
前端开发之Js
前端开发之Js
fangdeng
Building an event driven web
Building an event driven web
fangdeng
前端单元测试初体验
前端单元测试初体验
fangdeng
Html基础培训
Html基础培训
fangdeng
jQuery底层架构
jQuery底层架构
fangdeng
Javascript正则
Javascript正则
fangdeng
Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
En vedette
(7)
前端开发之Js
前端开发之Js
Building an event driven web
Building an event driven web
前端单元测试初体验
前端单元测试初体验
Html基础培训
Html基础培训
jQuery底层架构
jQuery底层架构
Javascript正则
Javascript正则
Javascript代码注释及文档生成
Javascript代码注释及文档生成
Similaire à J engine -构建高性能、可监控的前端应用框架
Kissy design
Kissy design
yiming he
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
Mvc
Mvc
tbmallf2e
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
Javascript autoload
Javascript autoload
jay li
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
前端测试
前端测试
frontwindysky
前端测试
前端测试
Zheng Biao
Backbone.js and MVW 101
Backbone.js and MVW 101
Jollen Chen
Android 智慧型手機程式設計
Android 智慧型手機程式設計
Kyle Lin
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
網站設計100步
網站設計100步
evercislide
Nginx使用和模块开发
Nginx使用和模块开发
qingpiao1983
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
SeaJS 那些事儿
SeaJS 那些事儿
lifesinger
Django development
Django development
loveyudu
Similaire à J engine -构建高性能、可监控的前端应用框架
(20)
Kissy design
Kissy design
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
Mvc
Mvc
Spring 2.x 中文
Spring 2.x 中文
Javascript autoload
Javascript autoload
旺铺前端设计和实现
旺铺前端设计和实现
Backbone js and requirejs
Backbone js and requirejs
前端测试
前端测试
前端测试
前端测试
Backbone.js and MVW 101
Backbone.js and MVW 101
Android 智慧型手機程式設計
Android 智慧型手機程式設計
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
網站設計100步
網站設計100步
Nginx使用和模块开发
Nginx使用和模块开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
Javascript之昨是今非
Javascript之昨是今非
SeaJS 那些事儿
SeaJS 那些事儿
Django development
Django development
Plus de fangdeng
浅尝jQuery
浅尝jQuery
fangdeng
Java script测试之js unit ut
Java script测试之js unit ut
fangdeng
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
产品线中的思考
产品线中的思考
fangdeng
产品线中的思考
产品线中的思考
fangdeng
Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
Varnish简介
Varnish简介
fangdeng
Websocket
Websocket
fangdeng
Let's talk about date in javascript
Let's talk about date in javascript
fangdeng
Test driven-frontend-develop
Test driven-frontend-develop
fangdeng
方凳良品1期
方凳良品1期
fangdeng
方凳良品2期
方凳良品2期
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
Datalazyload
Datalazyload
fangdeng
Request animateframe初探
Request animateframe初探
fangdeng
简鲜侠Websocket
简鲜侠Websocket
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
方凳激励体系(试行)
方凳激励体系(试行)
fangdeng
高性能Javascript
高性能Javascript
fangdeng
高性能Javascript
高性能Javascript
fangdeng
Plus de fangdeng
(20)
浅尝jQuery
浅尝jQuery
Java script测试之js unit ut
Java script测试之js unit ut
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
产品线中的思考
产品线中的思考
产品线中的思考
产品线中的思考
Postoffer前端架构设计
Postoffer前端架构设计
Varnish简介
Varnish简介
Websocket
Websocket
Let's talk about date in javascript
Let's talk about date in javascript
Test driven-frontend-develop
Test driven-frontend-develop
方凳良品1期
方凳良品1期
方凳良品2期
方凳良品2期
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
Datalazyload
Datalazyload
Request animateframe初探
Request animateframe初探
简鲜侠Websocket
简鲜侠Websocket
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
方凳激励体系(试行)
方凳激励体系(试行)
高性能Javascript
高性能Javascript
高性能Javascript
高性能Javascript
J engine -构建高性能、可监控的前端应用框架
1.
jEngine--构建高性能、可监控
的前端应用框架 王涛 2012-03-02
2.
3.
应用框架—解决应用的实际问题 应用复杂,开发者多,需要引入模块化编程
需求紧,无遐优化,框架需要真正的 fast by default 前端代码无日志, 线上故障发现晚, 急需异常监控系统 单点故障多,可用性不高,应用的容错性要增强 浏览器多样,调试不便,引入统一的分层log机制
4.
整体框架图
延迟加载 模块 首屏加载 延迟初始 模块 化模块 沙箱(core.sandbox.js) 应用核心(core.application.js) FDEV4
5.
6.
模块化编程—模块
模块: • 模块对整体架构的了解非常有限,它只知道sandbox的存在。 • 每个模块各司其职,共同构建了应用的正常运行。
7.
模块化编程—模块代码示例 !(function($){
var Sandbox, configs = { end:0 }; function lazyloadModule1(sb) { Sandbox = sb; return lazyloadModule1; } $.extend(lazyloadModule1,{ init:function(cfg){ this.config = $.extend(true, {}, configs, cfg); Sandbox.on( Searchweb.Config.Events.DELETE, this.create); }, create:function(data){ alert("lazyloadModule1 got the message:" + data.msg); }, end:0 }); Searchweb.Business.lazyloadModule1 = lazyloadModule1; })(jQuery);
8.
模块化编程—模块
模块必须呆在相应的sandbox中,也许会 很不舒服,但这对应用是安全的!
9.
模块化编程—模块设计原则 不要在模块中创建全局变量。
禁止访问该模块之外的Dom节点。 只允许调用自身的或是sandbox提供的方法。 不可直接引用其它模块的对象或调用其方法。 Sandbox是通往外界的桥梁!
10.
模块化编程—沙箱 • 沙箱负责模块间的数据传递及事件交互
notify on 模块1 沙箱 模块2 on notify
11.
模块化编程—沙箱 Module1: var data={msg:"send from
Module1"}; Sandbox.notify (Searchweb.Config.Events.DELETE, data); Module2: Sandbox.on ( Searchweb.Config.Events.DELETE, this.callback);
12.
模块化编程—应用核心 模块生命周期管理
异常处理 注册 容错 性 初始 销毁 化 监控 消除SPOF 停止 运行
13.
模块化编程—应用核心代码示例 register: function(moduleId, creator,
opt){ moduleData[moduleId] = { creator: creator, instance: null }; }, start: function(moduleId){ moduleData[moduleId].instance = moduleData[moduleId].creator(new Sandbox(this)); moduleData[moduleId].instance.init(); }, stop: function(moduleId){ var data = moduleData[moduleId]; if (data.instance){ data.instance.destroy(); data.instance = null; } }
14.
模块化编程—应用核心代码示例 //注册所有首屏加载模块 AppCore.register("mod-search-module1", Searchweb.Business.Module1); AppCore.register("mod-search-module2", Searchweb.Business.Module2); AppCore.register("mod-search-module3",
Searchweb.Business.Module3); AppCore.register(“mod-search-module4”, Searchweb.Business.Module4, {callback:function(){/* */}}); //初始化所有首屏加载模块 AppCore.startAll(); <div id=“mod-search-module1" data-mod-config= '{"name":"title","url":"http://china.alibaba.com/offer/post/json/validate_result.htm"}„> … </div>
15.
性能提升—Fast By Default •
在模块管理中加入“懒注册”机制,从框架的层面解决性能 问题 -- Fast By Default! 延迟加载 模块注册 首屏加载 延迟初始化 模块注册 模块注册 模块注册
16.
性能提升—Fast By Default /**
*@method: lazyRegister 延迟(加载|初始化)模块注册函数 * @param: moduleId: 注册模块的名称(string) * @param: creator: 模块的构造函数(string|function),如果为string,则会被parse成为function * @param: els: 触发延迟加载模块的元素,可以是id、dom、domArray(jquery dom数组对象) * @param: event: 延迟加载的驱动事件,可以是曝光事件、dom事件、manual事件{exposure|manual|normal events like: click, mouseover, focus, mouseenter} * @param: opt : (optional)延迟加载成功后的回调函数{Object} */ lazyRegister: function(moduleId, creator, els, event, opt){ var succeed = false; if(opt.init === false){ succeed = jEngine.Core.LazyModule.register(els, event, opt); }else{ var self = this; succeed = jEngine.Core.LazyModule.register(els, event, opt, function(){self._lazyStart(moduleId, creator)}); } return succeed; }
17.
性能提升—Fast By Default lazyLoadModuleInit:function(){
//曝光延迟加载模块的注册方式 AppCore .lazyRegister(“mod-search-lazyload1”, “Searchweb.Business.lazyloadModule1”, $(".domDetail"), 'exposure',{ threshold:200, module:this.config.lazyurl.lazyModule1 }); //交互事件驱动延迟加载模块的注册方式 AppCore .lazyRegister("mod-search-lazyload2", "Searchweb.Business.lazyloadModule2", '#mod-search-lazyload2', 'mouseover',{ module:this.config.lazyurl.lazyModule2 }); //使用代码主动触发的延迟加载模块的注册方式 Sandbox.notify("jEngine.lazyLoad", moduleId); AppCore.lazyRegister("mod-search-lazyload3", "Searchweb.Business.lazyloadModule3", null, 'manual',{ module:this.config.lazyurl.lazyModule3 }); },
18.
性能提升—Fast By Default 模块注册的三种方式统一定义在一个文件中:
19.
性能提升—Fast By Default <html>
<body> … 省略 … <!--页面上只应该有一个js文件被放置在<script>标签中加载,其余都是无阻塞加载--> <script type=“text/javascript” src=“http://style.china.alibaba.com/js/app/search/v4.0/core/core.seed.js”></script> <script> jEngine.Core.Loader.js(“http://style.china.alibaba.com/js/lib/fdev-v4/core/fdev-min.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.logger.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.sandbox.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.lazymodule.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.application.js”) //核心类加载完毕,开始加载业务类 .js(“http://style.china.alibaba.com/js/app/search/v4.0/example/config.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/example/module1.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/example/lazyinitmodule.js”) .js(“http://style.china.alibaba.com/js/app/search/v4.0/example/app.start.js”); </script> </body> </html>
20.
性能提升—Fast By Default 完美的js加载瀑布图:
21.
便于开发调试—分层log机制 修改自叶周全分层log类,添加了IE下的log机制: Firefox: IE:
22.
增强容错性—全局性异常处理 区分线上线下模式的方法: var DEBUG_MOD =
(typeof window.dmtrack ==="undefined") ? true : false; try{ … } catch (ex) { if(!DEBUG_MOD){ $.logger.error(“log error message:” + ex.message); //线上模式记录异常 }else{ throw ex; //debug模式下抛异常给浏览器 } }
23.
增强容错性—全局性异常处理 var instance
= new module.creator(sb), name, method; instance.options = opt; //debug模式下try catch不起作用,交由浏览器自己处理错误。 //online模式下可以把错误信息记录在日志服务器上。 if (!DEBUG_MOD){ for (name in instance){ method = instance[name]; if (typeof method == "function"){ instance[name] = function(name, method){ return function (){ try { return method.apply(this, arguments); } catch(ex) { $.logger.error(moduleId + " throw error: " + name + "()-> " + ex.message); } }; }(name, method); } } } return instance;
24.
增强容错性—全局性异常处理 • 模块中的每个函数都被自动加入到异常处理机制中。 • 线上异常的定位可以非常迅速。
25.
异常监控—与Dragoon的完美结合 //online模式下针对warning和error才需要报警 if(!DEBUG_MOD){
if(level == 0 || level == 1){ (new Image()).src = $.Logger.errorUri + this.getBrowserInfo() + errorMsg; } }
26.
异常监控—与Dragoon的完美结合
27.
异常监控—与Dragoon的完美结合 • 更加完善的前端异常监控系统
28.
后期完善方向 • 性能优化结合后端的继续深入 • 模块化编程更完善的支持
Télécharger maintenant