`
H雨心Y
  • 浏览: 7865 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

YUI3:js加载过程及时序问题(转)

    博客分类:
  • YUI
阅读更多

时序问题在javascript中比较常见,尤其是在网络环境不稳定时以及某些浏览器本来版本中比较多,遇到此类问题,往往会使开发者非常头痛,问题的重现需要特定的环境,是偶发的,不容易重现。对于有经验的开发者,大部分的时序问题都可以在代码中避免,对于浏览器,js代码的执行是单线程的,同一时刻只有一段js代码在执行,js的执行主要是通过两种方式来触发:

  1. script标签中的代码加载执行:js是解释型语言,从上到下边解释边执行,通常,在模块化的js代码中,我们一般习惯给与一个统一的初始化执行入口。
  2. 通过事件分发的形式来执行:如按钮点击,鼠标划过等事件触发,主要对应于用户操作dom节点触发,当然,ajax请求回调也属于事件分发形式。

我们看以下代码片段。

代码1:

<script type="text/javascript">
	var str = "hello, world";
</script>

 

<script type="text/javascript">
	str = "I was re-defined";
</script>

 

代码2:

<script type="text/javascript">
	var ClassB = {
		hello : function(){
			alert(str);
		}
	};
	ClassB.hello();
</script>

 

毫无悬念,这样的执行是没有问题的,此处是第一种触发方式,代码1执行的时候,str已经声明并赋值完毕,如果反过来就是undefind。

再看如下两段代码:

代码1:

<script type="text/javascript">
	var str = "hello, world";
	YUI().use('io', function(Y){
		str = "I was re-defined";
	});
</script>

 

代码2:

<script type="text/javascript">
	YUI().use('node', function(Y){
		var ClassB = {
			hello : function(){
			alert(str);
		}
	};
	ClassB.hello();
});
</script>

 

 

我们首先想到的应该是弹出的“I was re-defined”,因为str被重定义了, 其实不然,use里的模块不一样,执行alert出来的结果都是不同的。在解释这个问题之前,我们先来分析一下YUI3的加载方式:

YUI3采用分模块按需加载的方式来加载自己的组件,我们使用时只需要将所需使用的模块放到use中,自己代码則是放在一个闭包里面,全局Y对象作为一个参数传过来,就如上面一段代码。这样做的好处是因为YUI组件库本身比较庞大,而我们平时使用时很多功能是用不到的,全部加载显然耗时耗流量,按需动态加载則完美的解决了这个问题。

1. 首先需要引入YUI3的一个基础文件:

<script type=”text/javascript” src=”http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js”></script>

该文件中定义了一些全局变量,use方法,组件的配置文件的路径(loader-min.js),use执行完成后的回调等,以供后续使用,代码如下图

yui-min中的init方式定义了loaderPath即组件文件的路径,在我们没有使用use方法时,所有的组件都不会加载进来的,就仅仅只有一个yui-min.js文件而已。

2. 我们使用YUI().use(‘node’, function(Y){})方法(该方法在yui-min.js中定义),触发Y.Get.script方法,此时就会加载loader-min.js:

该文件里定义了所有的组件(包括YUI3自带的组件以及用户自定义组件)的名称,依赖模块,路径等,use中使用的所有模块都应该在该文件中有定义,配置如下所示:

3. 根据use中声明的所要加载的模块,结合loader中的模块定义,有依赖模块的将依赖模块也加进来,依赖模块同时也有依赖模块,以此类推,将所有模块都加进来,然后向服务器发送请求,加载请求模块。

4. 请求模块加载完成以后执行回调,执行function(Y){}里面的内容。

整个加载过程的抓包数据如下:

此处是以3.2.0版本为例来说明,在YUI3的新版中将loader-min.js并到了yui-min.js中,可以减少一个请求,anyway,总的流程变化不大。

继续回到我们上面讨论的问题,这里片段2的执行采用的事件驱动触发方式,第一段代码片段和第二段代码片段还是会被浏览器按照从上到下的方式依次解释,此时,YUI整个组件库并没有被下载下来,只是加载了一个配置文件而已。两个代码片段各自获得其所需要加载的模块组件并向服务器发送请求,两个代码片段所需yui模块加载完成的速度是不确定的,从而导致出现上述情况。

这个也是YUI3设计的一个初衷,各个功能块都在各自的闭包里面,彼此独立,互不干扰,这也是模块化的一个目标。在实际应用中,要尽量避免出现上述情况,根据实际情况区分对待:

  1. 最简单的方式,把代码1与代码2写在同一个use闭包中,这样就不会有问题。
  2. 代码1在很多场景都会使用,每个js文件中重复定义可维护性会降低。此时,可以将代码1作为一个单独的组件封装起来。有些人会觉得这样代码1虽然有公用性,但也不是很强,封装起来有些浪费,其实按照按需加载的逻辑,作为YUI3的一个组件封装起来并不会使整体的代码非常冗余。
  3.  如果实在不能写在一个use闭包中,也觉得完全没必要封装,这个时候就采用比较笨重的方法,在代码2中设置一个定时器来跑吧(有人说如果代码1中有错误会导致代码2无法执行,好吧,如果代码1中有错误,你用什么方法都避免不了)。

这种情况发生发代码2的初始化方法函数调用代码1中的方法时会发生,如果代码2中事件事件分发执行的函数(如用户点击事件等,ajax回调)去调用代码1中的方法一般不会有这样的问题,当然,并不是100%不会发生…

 

引:http://tid.tenpay.com/?p=2741

 

分享到:
评论

相关推荐

    yui js压缩工具

    **YUI Compressor:JavaScript与CSS的压缩利器** YUI Compressor是一款强大的JavaScript和CSS压缩工具,由雅虎(Yahoo!)开发并开源。它的主要功能是通过删除代码中的空白符、注释以及不必要的字符,将文件大小压缩...

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    yui_2.9.0用于javascript基础教程

    适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用

    JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

    JavaScript YUI 2.8 和 DataTable 是 Yahoo! UI Library 的一部分,它提供了一种强大的方式来展示和操作表格数据。jQuery form 插件则用于处理表单的异步提交,通常用于实现无刷新的数据更新。在本文中,我们将深入...

    YUI.rar_html_javascript YUI_yui_yui javascript

    1. **模块化设计**:YUI采用模块化的结构,允许开发者按需加载所需的组件,减少页面加载时间,提高性能。 2. **跨浏览器兼容性**:YUI经过精心设计,确保在主流浏览器上都能正常运行,包括IE、Firefox、Chrome、...

    yui_js压缩min_yui_压缩工具_nan_

    "yui_js压缩min_yui_压缩工具_nan_"这个标题提到的是使用YUI Compressor这一工具,将JavaScript文件压缩成min.js格式,以达到减少文件大小、提升网页加载速度的目的。下面我们将深入探讨JavaScript压缩的必要性、YUI...

    YUI js方法使用列子

    8. **Module System(模块系统)**:通过YUI的`use`方法,可以按需加载所需模块,实现延迟加载和代码分割。 9. **Utility Functions(实用函数)**:包含各种常用的工具函数,如字符串处理、数组操作、日期时间处理...

    使用脚本+yuicompressor对js,css文件打包.pdf

    3. **--type参数**: yuicompressor接受`--type js`或`--type css`来指定要处理的文件类型,分别对应JavaScript和CSS文件。 4. **--charset参数**: 使用`--charset utf-8`设置字符编码,确保文件在压缩过程中保持...

    YUI Compressor js css压缩工具

    3. **语法检查**:在压缩过程中,YUI Compressor会对JavaScript代码进行简单的语法检查,确保压缩后的代码仍能正常运行。 ### 使用方法 在提供的文件中,`compressor.bat`是一个批处理脚本,用于调用`yui...

    ant和yuicompressor 压缩css、js方案

    标题 "ant和yuicompressor 压缩css、js方案" 涉及到的是在软件开发中如何使用构建工具Ant以及JavaScript压缩工具YUI Compressor来优化前端资源,特别是CSS和JavaScript文件。这两个工具在Web开发中起着至关重要的...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    generator-yui3:YUI3项目脚手架

    (尚未稳定)YUI3项目的Yeoman发电机安装sudo npm install -g generator-yui3建立专案yo yui3 awesomeProject.generator-yui3.json 允许您覆盖默认配置{ "project" : "awesomeProject", "lang" : ["fr", "en", "es",...

    yuicompressor-2.4.8.zip js、css注释清理及压缩工具

    `yuicompressor-2.4.8.zip` 是一个前端开发中常用的工具,主要功能是对JavaScript和CSS文件进行注释清理和代码压缩,从而优化网页加载速度,提高用户体验。这个压缩工具出自YUI(Yahoo! User Interface Library)...

    YUI 3 Cookbook

    **YUI 3** 是一个由雅虎开发的JavaScript库,它提供了丰富的功能来帮助开发者创建高质量的Web应用程序。这本书《YUI 3 Cookbook》由Evan Goer撰写,针对不同层次的读者提供了实用的指南。无论是初学者还是经验丰富的...

    maven+yui压缩js,css文件

    标题与描述概述的知识点是关于如何使用Maven与YUI Compressor插件来压缩JavaScript(JS)和CSS文件。在大型项目中,压缩这些文件可以显著减少加载时间,提高网站性能,同时也便于资源的管理。 ### Maven与YUI ...

    YUI3 dialog组件

    在YUI3中,首先需要通过`YUI().use()`方法加载Dialog相关的模块,例如: ```javascript YUI().use('dialog', function(Y) { // 在这里编写Dialog的代码 }); ``` 然后可以创建Dialog实例,指定其内容和属性: ```...

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

    yuicompressor js压缩工具

    3. 集成到构建流程:YUI Compressor可以与构建工具如Grunt、Gulp或Webpack集成,方便在项目开发过程中自动完成代码压缩。 四、自定义配置 YUI Compressor支持一些可选参数,例如`--nomunge`可以避免混淆变量名,...

    YUI3 Cookbook

    YUI3(Yahoo User Interface Library Version 3)是雅虎开发的一款免费开源的JavaScript库,它为开发者提供了丰富的前端开发工具,包括动画效果、事件处理、DOM操作等功能。YUI3在设计上更加模块化、可扩展性强,...

    YUI类库2.9.0下载download

    YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. Currently at version 2.9.0, YUI 2 is robust, proven, ...

Global site tag (gtag.js) - Google Analytics