20161108 初学requirejs

 

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

 

1.初步运用

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

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

 

 

baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

<script src="../lib/require.js" data-main="js/app.js"></script>
<script>
    require({
        paths:{
            'shop': '../shop/shop'
        }
    })
</script>
define(['uncle','shop'],function (uncle,s) {
   return {
       result: function () {
           uncle.uncle();
           console.log('好。');
           console.log('阿姨,给我一盒烟');
           s.shop();
       }
   }
});

 

 

有时候你想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：

  • 以 ".js" 结束.
  • 以 "/" 开始.
  • 包含 URL 协议, 如 "http:" or "https:".

ming.js中代码

第一种以'/'开始

define(['uncle','/../shop/shop.js'],function (uncle,s) {
   return {
       result: function () {
           uncle.uncle();
           console.log('好。');
           console.log('阿姨,给我一盒烟');
           s.shop();
       }
   }
});
define(['uncle','shop/shop.js'],function (uncle,s) {
   return {
       result: function () {
           uncle.uncle();
           console.log('好。');
           console.log('阿姨,给我一盒烟');
           s.shop();
       }
   }
});

（上面是第二种以js结尾的）

 一般来说，最好还是使用baseUrl及"paths" config去设置module ID。它会给你带来额外的灵活性，如便于脚本的重命名、重定位等。

 

2.循环依赖

一般说来你无需使用require()去获取一个模块，而是应当使用注入到模块函数参数中的依赖。循环依赖比较罕见，它也是一个重构代码重新设计的警示灯。但不管怎样，有时候还是要用到循环依赖，这种情形下就使用上述的require()方式来解决。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<script src="../lib/require.js" data-main="js/app.js"></script>

app.js

define(['ming','hua'],function (ming,hua) {
    ming.say();
    hua.aws();
    ming.listen();
});

ming.js

define(['hua'],function (hua) {
    return {
        say: function () {
            console.log('你考了0分');
        },
        say2: function () {
            console.log('恭喜。')
        },
        listen: function () {
            hua.aws2();
            console.log('这就尴尬了')
        }
    }
});

hua.js

define(['ming','require'],function (ming,require) {
    
    return {
        aws: function () {
            console.log('我知道了');
        },
        aws2: function () {
            require('ming').say2();
            console.log('其实你也是0分');
        }
    }
    
});

 打印结果

posted @ 2016-11-08 21:31  张哲Zeo  阅读(134)  评论(0)    收藏  举报