require操作

| 分类 前端  | 标签 js  require  浏览次数： -

JavaScript模块化

浏览器端的模块,不能采用”同步加载”(synchronous),只能采用”异步加载”(asynchronous).

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

AMD采用require()语句加载模块,要求两个参数

// require([module], callback);
// [module]是一个数组,里面的成员就是要加载的模块
// callback是加载成功之后的回调函数.
require(['math'], function(math){
    //要执行的语句
});

要执行的语句和math模块加载是不同步的,浏览器不会发生假死,AMD比较适合浏览器环境.

  • require.js curl.js 原生写法
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
  • requirejs缺点:

1.加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长

2.js文件之间存在依赖关系,因此必须严格保证加载顺序,(1.js要在2.js前面),依赖性最大的模块一定要放到最后加载.

  • requirejs优点:

1.实现js文件的异步加载,避免网页失去响应;

2.管理模块之间的依赖性,便于代码的编写和维护.

<script src="js/require.js" defer async="true" ></script>
// async属性表明文件需要异步加载,避免网页失去响应,IE不支持async舒心,只支持defer.

<script src="js/require.js" data-main="js/main"></script>
// data-main:指定网页程序的主模块

require写法

require.config() // 对模块的加载行为进行自定义,写在主模块的头部.参数是一个对象,对象的paths属性指定各个模块的加载路径.
require.config({
    paths: {
        "jquery":"jquery.min",
        "backbone":"backbone.min",
        "underscore":"underscore.min"
    }
})
// 上面三个模块默认和main.js在同一路径下(js子目录中).
// 若不同路径,假设三个模块在js/lib目录中.
// 第一种写法:
require.config({
    paths:{
        "jquery":'lib/jquery.min'
    }
});

// 第二种写法:
require.config({
    baseUrl: 'js/lib',
    paths:{
        'jquery': 'jquery.min'
    }
});

// 第三种写法:
require.config({
    paths:{
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
    }
});

// require.js加载的模块必须按照AMD的规范来编写,模块必须采用特定的define()函数来定义,如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中.
// 模块:math.js
// math.js
define(function(){
    var add = function(x, y){
        return x+y;
    };
    return {
        add: add
    };
});
//main.js
require(['math'], function(math){
    alert(math.add(1, 1));
});
  • 如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明改模块的依赖性.
define(['myLib'], function(myLib){
    function foo(){
        myLib.doSomethig();
    }
    return{
        foo: foo
    };
});

require.js加载非规范的模块,在用require()加载之前,要先用require.config()方法定义它们的一些特征.underscore和backone两个库都没有采用AMD规范编写,如果要加载它们的话,就必须先定义它们的特征.

require.config({
    shim:{
        'underscore':{
            exports:'_'
        },
        'backbone':{
            deps: ['underscore', 'jquery'],
            exports:'Backbone'
        }
    }
});
  • shim:专门用来配置不兼容的模块,每个模块都要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性.
  • map:同一模块的不同版本,向下兼容老版本.
  • config:给指定的模块传递一些有用的数据.
  • enforceDefine:强制模块使用define定义
  • errbacks:模块文件没有载入成功时的调用
  • path:映射模块别名,可以配置为一个数组,顺序映射

require.js插件

// domready插件:让回调函数在页面DOM结构加载完成后再运行
require(['domready!'], function(doc){
    //called once the DOM is ready
});

// text和image插件:允许require.js加载文本和图片文件
define([
    'text!review.txt',
    'image!cat.jpg'
    ],
    function(){
        console.log(review);
        document.body.appendChild(cat);
    });

// json插件:加载json文件
// markdown:加载markdown文件

参考


上一篇 并发编程     下一篇 安装filezilla服务器
目录导航