zoukankan      html  css  js  c++  java
  • AMD规范

    common.js主要语法就是

    var math=require('math');

    math.add(2,3);

    require()用于加载模块就行了。

    二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。

    这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

    因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

    AMD全称Asynchronous,意思就是"异步模块定义“”,用于异步加载,回调函数加载完需要的模块再来加载自定义语句,即它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

    将上面的require()函数修改为AMD规范即是

    require(['math'],function(math){

    math.add(2,3)})

    math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。

    目前,主要有两个Javascript库实现了AMD规范:require.jscurl.js

    接下来,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。

    require.js出现解决问题

    一:解决多个文件加载问题,多个文件加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长

    二:处理多个文件依赖问题

    require['moduleA','moduleB','moduleC'],function(moduleA, moduleB, moduleC){

    //some code here

    }

    require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

    例如:

    假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:

      require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

        // some code here

      });

    require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

    加载行为require.config()方法,equire.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

    require.config({

    paths:{

    "jquery":"jquery.min",

    "underscore":"underscore.min",

    "backbone":"backbone"

    }

    })

    上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。

    一种是逐一指定路径。

    require({

    path:{

    "jquery":"lib/jquery.min",

    "underscore":"lib/underscore.min",

    "backbone":"lib/backbone.min"

    }

    })

    另一种则是直接改变基目录(baseUrl)。

     require.config({

        baseUrl: "js/lib",

        paths: {

          "jquery": "jquery.min",
          "underscore": "underscore.min",
          "backbone": "backbone.min"

        }

      });

    如果某个模块在另一台主机上,也可以直接指定它的网址,比如:

      require.config({

        paths: {

          "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

        }

      });

    AMD模块的写法

    math.js

    //math.js
    define(function()
    {
    var add=function(x,y)
    {
    return x+y;
    }
    return {add:add};
    });

    引入math.js

    require(['math'],function(math){

    alert(math.add(1,2))

    });

    jquery库符合require.js规范

    backbone和underscore都不符合require规范,所以需要定义规范在require.config里

    require.config({
    shim: {
    'underscore':{
    export:'_'
    },
    'backbone':{
    deps:['jquery','underscore'],
    export:'Bckbone'

    }

    }
    });
     require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。

    具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性

    接下来是require还有一些插件

    require(['domready!'], function (doc) {
    //called once the dom ready
    })
    require(['text!review.txt', 'image!cat.jpg'], function (review, cat) {
    console.log(review);
    document.body.appendChild(cat);
    })

     

  • 相关阅读:
    ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承
    stl之hash_multiset
    事务的隔离级别
    LinkedList的一种错误使用方法
    zngnqfxtuubuosmo
    探寻BTree 索引对sql 优化影响
    设置右上角的菜单button
    在Win7中IIS配置Asp.Net虚拟文件夹的方法及错误总结!
    Linux USB 和 sysfs
    Linux 内核USB 接口配置
  • 原文地址:https://www.cnblogs.com/vivijiang/p/6206686.html
Copyright © 2011-2022 走看看