Heim >Web-Frontend >js-Tutorial >YUI模块开发原理详解_基础知识

YUI模块开发原理详解_基础知识

WBOY
WBOYOriginal
2016-05-16 17:14:26879Durchsuche

随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要。我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来。前端的模块化开发可以帮助我们有效的去管理代码,特别是多人开发的时候,提高开发效率。

YUI生成模块的方式是
YUI.add('module1', function (Y) { ... }, '1.0.0', requires: ['module2']);
YUI 是全局变量,类似于jquery中的$。add方法中第一个参数是模块的名称module1,第二个参数是一个匿名函数,里面是模块内容,第三个参数是版本名,第四个requires表示的是模块的依赖关系,如上是module1 依赖于module2(即module2要先于module1 执行)。
通常每个模块存放在一个js文件中,文件以模块名来命名,即模块module1存放在module1.js 文件中,module2存放在mudule2.js 文件中。
加载模块module1:
// 加载YUI seed 文件,包含了YUI所有的依赖关系

复制代码 代码如下:


<script><BR>  YUI().use('module1', function (Y) { ... });<BR></script>

下面就分析下上面这行代码会发生什么事。
1)YUI 首先会分析module1 模块存在的依赖关系,创建一个URL: http://localhost:3000/yui/combo?mudule2.js&module1.js。注意module2.js 在modul1.js 前面。
2)创建动态script标签,向服务器端请求js文件

复制代码 代码如下:

  var script = document.createElement('script');
  script = 'http://localhost:3000/yui/combo?mudule2.js&module1.js';
  if(script.readyState) {
    //IE
    script.onreadystatechange = function () {
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        //预留
      }
    };
  } else {
    //非IE
    script.onload = function () {
      //预留
    };
  }
  document.body.append(script);

3)服务器端检测客户端传来的到请求,解析URL,然后开始寻找module2.js 和 module1.js 两个js文件,并将两个文件按顺序拼成一个文件,返回给客户端。最后传回的js文件内容如下:
  

复制代码 代码如下:

//module2.js 中的内容
  YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0.0', requires: []);
  //module1.js 中的内容
  YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; }, '1.0.0', requires: ['module2']);

4)客户端接受到返回的js,开始解析,即执行里面的YUI下的add方法,执行过程大致如下:

复制代码 代码如下:

  YUI.modules = {};
  //module2
  YUI.modules.push(function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; });
  //module1
  YUI.modules.push(function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; });

5)解析完成后,自动触发步骤2中onload方法(IE中为onreadystatechange方法),下面是步骤2中“预留”处的代码:

复制代码 代码如下:

  for(var i = 0, len = YUI.modules.length; i     //将模块中需要export出的api注册在this下面;this是YUI的一个实例, this = new YUI();
    YUI.modules[i](this);
  }
  //callback 是YUI().use 中的回掉函数
  //此时模块解析完成,传入this参数,在callback 就可以任意调用module1 和 module2 中输出的api了
  callback(this);
 

以上是借助YUI对模块化开发做一个简单的介绍,YUI实际的过程比上面要复杂的多。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn