require.js 学习笔记

最新推荐文章于 2023-09-26 01:19:09 发布

果果大

最新推荐文章于 2023-09-26 01:19:09 发布

阅读量189

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/u012230445/article/details/80844912

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

体会
在html用下面的代码太难看，而且加载是按顺序的。

<script src="js/jquery-3.1.1.js"></script>
<script src="js/a.js"></script>
<script src="js/b.js"></script>

当你用的时候不一定就下载好了呢，没有一个异步的回掉来表示这个JS加载好了你可以用了。还有些作用域啊，游览器阻塞之类的问题也解决了。

怎么玩
新建个index.html，新建个myProjectMain.js文件，data-main标签是表示作为全局主JS，主js后面不用加.js

<body>
    <script data-main="js/myProjectMain" src="js/require.js"></script>
    <div id="hellodiv">hello</div>
</body>

建立一个符合AMD规范的JS模块，取名叫test.js吧里面做个加法函数，注意模块必须要有返回

define(function(){
  var b= 3;
  var a=1;
  var calculater = function(c){
    return a+b+c;
  };
  return {
    calculater: calculater
  }
})

然后再myProjectMain里面最好配置，配置玩后测试下。

require.config({
    paths:{
        "test1":'test'//test就是当前目录的test.js
    }
    // shim: {
      //引用不符合AMD规范的文件；
       // doc：{
            //deps: ["这里是依赖文件名"],
            //exports: "exports值（输出的变量名），表明这个模块外部调用时的名称"
  // }
  // }

});

//当场测试
require(["test1"], (test1) => {
    console.log(test1.calculater(222))
});

感觉吧挺简单的，总结就是把模作为一个能访问的方法抛出去就OK了，如果你想返回一个对象咋办？包一层就好了，可以参考下面老项目的方式

    var login={};
    return ()=>{
        return login;
    };

参考有名气老项目如何适配

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}

if (typeof define === 'function' && define.amd) {
    define(function() {
        return Hammer;
    });
} else if (typeof module != 'undefined' && module.exports) {
    module.exports = Hammer;
} else {
    window[exportName] = Hammer;
}