zoukankan      html  css  js  c++  java
  • 使用requireJS

    什么是require?

    require是AMD模块化规范的具体实现。

    目前,通行的js模块化规范有两种,CommonJS和AMD。

    CommonJS和AMD有什么不同呢?

    CommonJS主要用于服务端,它的特点是同步加载,在某个模块加载完成后才会加载下一模块,这在服务端没什么问题,读取速度就是硬盘的读写速度,但在浏览器中环境下,加载的模块都存储在服务器上,所以加载时间取决于客户端网速,如果网速不过关可能某个模块需要加载很长时间,那之后的模块则不会加载,这会让浏览器在一段时间内处于假死状态,这显然是不合适的。

    因此,适用于浏览器的模块化不能使用同步加载,只能用异步加载。

    于是AMD应运而生,AMD(Asynchronous Module Definition)的意思就是异步加载,解释下同步异步。

    同步异步是一种被请求者的消息通知机制

    • 同步:被请求者处理请求者请求的事,但不会通知请求者处理结果,需要请求者轮询,或者监听被请求者。
    • 异步:被请求者处理请求者请求的事,当处理结果时,通知请求者处理结果。
    • 阻塞:阻塞当前进程,当前进程不完成,不处理下一个进程。
    • 非阻塞:在当前进程处理过程中,不急于得到结果,继续处理下一个进程。

    AMD是异步加载,所有依赖加载模块的语句都放在一个回调函数中,当加载完成后执行。

    使用requireJS

    requireJS是AMD规范的实现,是客户端实现模块化的工具。AMD之与requireJS就像ECMAscript之与javascript,一个是规范,一个是规范的具体实现。

    下载requireJS,放在项目js目录下,即可加载,为避免加载时网页失去响应,建议在网页底部加载,或者写成:

    <script src="js/require.js" defer async="true" ></script>
    
    async代表要异步加载,避免网页失去响应,ie不支持这个属性,值支持defer。
    
    加载requireJS之后需要加载自己的js文件,一般用一个js文件作为模块化的入口文件,其他引入在入口文件中完成。
    
    <script src="js/require.js" data-main="js/main"></script>  // mian.js即为入口文件,因为默认加载js文件可省略js后缀。
    
    data-main 属性为指定加载主模块,上述加载中主模块为main.js,该文件会第一个被加载。
    

    如果在mian中不依赖其他模块可以直接写js程序,如果需要引用其他模块则必须使用requireJS指定的引用方式。
    requireJS用require函数加载模块,它接受两个参数,第一个参数为一个数组,指定要加载的模块,第二个参数为一个回调函数,在所有模块加载完成后执行

    require(["module"],callback(module){
        //do something……
    })
    
    

    如果我们有很多js目录,存放不同功能的js 文件,那我们可以用require.config方法来配置模块的加载行为,在文件顶部进行配置。

    require.config={
        paths:{
            "module1":"module1",
            "module2":"module2",
            "module1":"module3",
        }
    }
    
    
    只研朱墨作春山
  • 相关阅读:
    ionic app打包和签名
    js时间戳与日期格式的相互转换
    js获取选中日期的当周的周一和周日
    Error occurred during initialization of VM Could not reserve enough space for 2097152KB object heap
    CSS媒体查询 @media
    [ng:areq] Argument 'XXXXCtrl' is not a function, got undefined
    plsql如何导出查询结果
    angularjs的$http请求方式
    JQuery请求数据的方式
    后台返回xml格式转json
  • 原文地址:https://www.cnblogs.com/guolintao/p/8029295.html
Copyright © 2011-2022 走看看