[js三大框架]js框架require.js使用入门教程

更新时间:2020-03-21    来源:php入门    手机版     字体:

【www.bbyears.com--php入门】

require.js简介

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖,要是没法正确地去按照特定顺序加载,会出现错误,AMD规范可以处理这种问题,AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

如何使用require.js?

将require.js下载下来,嵌入网页中,

<script data-main="scripts/main" src="scripts/require.js"></script>

这里的data-main属性声明的是入口文件scripts/main.js,这里我们把.js后缀省略掉了。也有以下这种写法:

<script src="scripts/require.js" data-main="scripts/main" defer async="true" ></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。同时,官方提供了 require.js和 jquery 的打包版本,于是也可以怎么引入:

<script src="scripts/require-jquery.js" data-main="scripts/main" defer async="true" ></script>

RequireJS通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。

使用define方法,可以将代码写在一个js文件,独立开来作为一个模块,如我建立一个animate模块(animate.js),如下:


define(function(){
  function animate(){
    this.name="animate";
  };
  return {
    animate:animate ,
    dec:"这是一个描述"
  };
})


将你的模块代码放置在define(function(){  /*代码*/   });,然后将该模块return的对象暴露出来,可以供其他模块依赖此模块的时候,可以去调用这个模块的API。比如我们建立一个tabview模块(tabview.js)去依赖这个animate模块,


define(['animate'],function(a){
    function tabview(){
        this.name= 'tabview';
        this.animate = a.animate.name;
        this.dec = a.dec;
    }
    return { tabview:tabview };
})



分析上面的代码,我们将animate模块引入,并给其赋予一个a的别名。那么在该模块不就可以调用animate模块里面的方法和属性了吗?

这里我们在多建一个treeview模块(treeview.js),如下:

define(function(){
    function treeview(){
        this.name="treeview";
    };
    return { treeview:treeview };
})

接下来,我们需要去使用前面我们定义好的模块,便可以require方法来实现,见其写在main.js中,如下:


require(['tabview','treeview'],function(a,b){
    var tab = new a.tabview();
    var tree = new b.treeview();
    alert(tab.name);
    alert(tab.animate);
    alert(tab.dec);
    alert(tree.name);
});



使用该方法加载tabview、treeview两个模块,而tabview会去依赖animate模块,由于模块返回的都是对象,那我们可以new一个对象去调用加载模块中的方法和属性!

在main.js,我们需要去配置一下模块的路径,就那上面例子来说,需要配置一下几个模块的路径,如下:


require.config({
   paths: {
     "tabview": "js/tabview",
     "animate": "js/animate",
     "treeview": "js/treeview"
   }
 });

//另一种则是直接改变基目录(baseUrl)。后缀.js可以省略
require.config({
    baseUrl: "js/lib",
    paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
});



这样require.js便可以很灵活地使用来进行模块化管理了,这里有一个基于require.js去搭建一个web组件(弹窗的demo),很值得学习一下!可以去看看!github地址:https://github.com/xiaobinwu/require.js-Popup-window-


require最常用的方法

require('http') 内置模块

require('./server')  “./”表示当前路径,后面跟的是相对路径

require("../lib/server") ../表示上一级目录,后面跟的也是相对路径

server.js

    var http = require('http');
    function start(){
        server = http.createServer(function (req, res) {   
              res.writeHeader(200, {"Content-Type": "text/plain"});   
              res.end("Hello oschina\n");   
        })   
        server.listen(8000);   
        console.log("httpd start @8000");   
    }
    exports.start = start;   

index.js

    //路径根据自己的实际情况而定  
    var server = require("./learnNode/server");
    server.start();

下面介绍require


模块

Node 使用 CommonJS 模块系统。

Node 有一个简单的模块加载系统。在 Node 中,文件和模块一一对应。比如,在 foo.js 加载同一目录中的 circle.js 模块。

foo.js 的内容:

var circle = require('./circle.js');
console.log( 'The area of a circle of radius 4 is '
           + circle.area(4));

circle.js 的内容:

var PI = Math.PI;

exports.area = function (r) {
  return PI * r * r;
};

exports.circumference = function (r) {
  return 2 * PI * r;
};

模块 circle.js 导出了 area() 函数和 circumference() 函数,这样它们就能从模块外部访问了。要导出对象,将其添加到特殊的 exports 对象就行。

模块的局部变量是私有的。在本例中,变量 PI 是 circle.js 私有的。


核心模块

Node 有一些已编译成二进制的模块,这些模块将在本文档的其他地方详细介绍。

核心模块在 Node 源代码的 lib/ 文件夹中定义。

使用 require() 时,核心模块总是优先加载。例如,require('http') 总是返回内置的 HTTP 模块,即使该名称的文件存在。


文件模块

如果没有找到确切的文件,Node 将尝试给所需的文件名添加 .js 后缀再加载,然后再尝试 .node。

.js 文件被视为 JavaScript 文本文件,而 .node 文件被视为已编译的插件模块,用 dlopen 加载。

模块以 '/' 开头表示使用文件的绝对路径。例如,require('/home/marco/foo.js') 将加载 /home/marco/foo.js 文件。

模块以 './' 开头表示调用 require() 时使用相对路径。也就是说,为了保证 require('./circle') 能找到,circle.js 必须和 foo.js 在同一目录。

如果不以 '/' 或'./' 开头,该模块可以是一个“核心模块”,也可是一个从 node_modules 文件夹中加载的模块。
从 `node_modules` 文件夹中加载

如果传递给 require() 有模块标识符是不是原生模块,而且不以 '/'、'../' 或'./' 开头,那么 Node 从当前模块的父目录+/node_modules 这个位置尝试加载。

如果还是没有找到,那么它跳到上层目录并依此类推,直到找到模块,或者达到根目录为止。

例如,如果在文件 '/home/ry/projects/foo.js' 中调用 require('bar.js'),那么 Node 将在下列位置查找,顺序如下:

    /home/ry/projects/node_modules/bar.js
    /home/ry/node_modules/bar.js
    /home/node_modules/bar.js
    /node_modules/bar.js

这就允许程序将依赖关系本地化,防止它们冲突。


优化 `node_modules` 查找过程

当嵌套依赖关系的层次很深时,这个文件查找列表可能会变得很长。因此,在查找时进行如下优化:

首先,/node_modules 不会附加到一个以 /node_modules 结尾的文件夹后面。

其次,如果调用 require() 的文件已经在一个 node_modules 层级里,那么最顶层的 node_modules 文件夹将被视为搜索树的根。

例如,如果在文件 '/home/ry/projects/foo/node_modules/bar/node_modules/baz/quux.js' 中调用 require('asdf.js'),那么 Node 将搜索下列位置:

    /home/ry/projects/foo/node_modules/bar/node_modules/baz/node_modules/asdf.js
    /home/ry/projects/foo/node_modules/bar/node_modules/asdf.js
    /home/ry/projects/foo/node_modules/asdf.js

以文件夹作为模块

Node 允许用户在独立的目录中方便地组织程序,然后提供单一入口指向该库。有三种方式可以将文件夹作为 require() 的参数。

第一种方式是在该文件夹中创建 package.json 文件,指定一个 main 模块。一个典型的 package.json 文件可能看起来像这样:

{ "name" : "some-library",
  "main" : "./lib/some-library.js" }

如果此文件位于 ./some-library 文件夹,则 require('./some-library') 会尝试加载 ./some-library/lib/some-library.js。

这是 Node 能找到 package.json 文件的情况。

如果在该目录中没有 package.json 文件,那么 Node 将尝试加载该目录中的 index.js 或 index.node 文件。例如,如果上面的例子找不到 package.json,那么 require('./some-library') 将试图加载:

    ./some-library/index.js
    ./some-library/index.node

缓存

模块在首次被加载后会缓存起来。这意味着每次调用 require('foo') 将得到完全相同的对象,如果它被解析为同一个文件的话。


总结

为了得到调用 require() 时被载入的确切的文件名,使用 require.resolve() 函数。

综上所述,这是 require.resolve 的伪码描述:

require(X)
1. If X is a core module,
   a. return the core module
   b. STOP
2. If X begins with `./` or `/`,
   a. LOAD_AS_FILE(Y + X)
   b. LOAD_AS_DIRECTORY(Y + X)
3. LOAD_NODE_MODULES(X, dirname(Y))
4. THROW "not found"

LOAD_AS_FILE(X)
1. If X is a file, load X as JavaScript text.  STOP
2. If X.js is a file, load X.js as JavaScript text.  STOP
3. If X.node is a file, load X.node as binary addon.  STOP

LOAD_AS_DIRECTORY(X)
1. If X/package.json is a file,
   a. Parse X/package.json, and look for "main" field.
   b. let M = X + (json main field)
   c. LOAD_AS_FILE(M)
2. LOAD_AS_FILE(X/index)

LOAD_NODE_MODULES(X, START)
1. let DIRS=NODE_MODULES_PATHS(START)
2. for each DIR in DIRS:
   a. LOAD_AS_FILE(DIR/X)
   b. LOAD_AS_DIRECTORY(DIR/X)

NODE_MODULES_PATHS(START)
1. let PARTS = path split(START)
2. let ROOT = index of first instance of "node_modules" in PARTS, or 0
3. let I = count of PARTS - 1
4. let DIRS = []
5. while I > ROOT,
   a. if PARTS[I] = "node_modules" CONTINUE
   c. DIR = path join(PARTS[0 .. I] + "node_modules")
   b. DIRS = DIRS + DIR
6. return DIRS

从 `require.paths` 加载

在 Node 中,require.paths 是一个字符串数组,表示模块不以 '/' './' 或 '..' 打头的搜索路径。例如,如果 require.paths 设置为:

[ '/home/micheil/.node_modules',
  '/usr/local/lib/node_modules' ]

则调用 require('bar/baz.js') 会搜索以下位置:

    1: '/home/micheil/.node_modules/bar/baz.js'
    2: '/usr/local/lib/node_modules/bar/baz.js'

可以在运行时修改 require.paths 数组来改变这种行为。

它的值最初从 NODE_PATH 环境变量而来,那是一个冒号分隔的绝对路径列表。在前面的例子中,NODE_PATH 环境变量可能被设置为:

/home/micheil/.node_modules:/usr/local/lib/node_modules

只有使用上面的 node_modules 算法找不到模块时才会尝试 require.paths。全局模块的优先级低于捆绑依赖。


**注意** 请不要修改 `require.paths`

出于兼容性的考虑,require.paths 仍然是模块查找过程的首选策略。尽管如此,它可能会在将来的版本中废弃。

虽然它看起来似乎是个好主意,但在实践中一个可变的 require.paths 列表往往是麻烦和混乱的根源。


修改 `require.paths` 毫无用处

这行代码并不会像期望的那样:

require.paths = [ '/usr/lib/node' ];

它的结果就是丢弃了 Node 实际的模块查找路径引用,并创建了一个毫无用处的指向别处的新的引用。
在 `require.paths` 中加入相对路径……不是个好主意

如果你这样做:

require.paths.push('./lib');

它不会添加 ./lib 在文件系统上已解析的完整路径。相反,它实际增加的是 './lib',这意味着如果你在 /a/b/x.js 中 require('y.js'),那么它会查找 /a/b/lib/y.js。如果你之后又在 /l/m/n/o/p.js 中 require('y.js'),那么它就会查找 /l/m/n/o/lib/y.js。

在实践中,人们往往将它作为捆绑依赖的临时解决办法,这个技巧是不太稳妥的。
零隔离

有一种糟糕的设计:所有模块共用一个 require.paths 数组。

结果,如果一个 Node 程序依赖于这种行为,它可能会永久而微妙地改变同一进程中其它 Node 程序的行为。当应用程序的复杂度增加时,我们倾向于封装功能,这些行为很难预料的部分会成为开发者的恶梦。

本文来源:http://www.bbyears.com/jiaocheng/88696.html