码迷,mamicode.com
首页 > Web开发 > 详细

require.js疑惑

时间:2017-04-14 18:52:50      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:requirejs   9.png   cti   情况   www   strong   html   ejs   blog   

        昨天小颖分享了一篇require.js入门 ,今天小颖发现了一个很郁闷的问题,希望大神们帮小颖解释下到底是什么原理才能出现以下的现象,其实小颖昨天也有问过园友里的一位帅锅,只是他解释的小颖没太明白。嘻嘻所以写出来想通过博客园这个平台里集思广益,解决这个疑惑。

       好啦我们一起来看看这个让小颖头疼的问题:

       demo目录:

                                        技术分享

      代码来啦:

    我们先来看看正常代码吧:

    公用的文件index.html和ceshi.js

    index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>require.js小demo</title>
    <!-- 加载require.js文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样: -->
    <!-- <script src="js/require.js" defer async="true" ></script> -->
    <!--async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。  -->
    <!-- 加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。只需要写成下面这样就行了: -->
    <!-- <script src="js/require.js" data-main="src/main.js"></script> -->
    <script defer async="true" data-main="app" src="js/require.js"></script>
</head>

<body>
    <div class="div-index">哈喽</div>

</body>

</html>

ceshi.js

define(function(require) {
  var ad = function() {
      return ‘aaa‘;
  };
  return {
      ad: ad
  }
});

有变化的文件哦:

app.js

requirejs.config({
    baseUrl: ‘js/lib‘,
    paths: {
         cs:‘ceshi‘,
        jquery: ‘../jquery‘
    }
});
require([‘main‘, ‘jquery‘], function(mains, jq) {
    console.log(mains.add(2, 5));
    console.log(jq);
});

main.js

define([‘cs‘],function(ceshi) {
  console.log(ceshi.ad());
    var add = function(x, y) {
        return x + y;
    };
    return {
        add: add
    }
});

结果:

技术分享

以下是有疑惑的几种情况:

第一种情况:

      当小颖在app.js中加载jquery的时候,将 paths: { cs:‘ceshi‘, jquery: ‘../jquery‘ }改成:paths: { cs:‘ceshi‘, jq: ‘../jquery‘ }时:

 app.js

requirejs.config({
    baseUrl: ‘js/lib‘,
    paths: {
         cs:‘ceshi‘,
        jq: ‘../jquery‘
    }
});
require([‘main‘, ‘jq‘], function(mains, jqs) {
    console.log(mains.add(2, 5));
    console.log(jqs);
    console.log($);
});

结果就变成了:

                         技术分享

问题:小颖想问下为什么将在paths中在加载 ceshi.js 时,给其命名为 cs,在main.js中就能正常调到,而将 jquery 改成 jq  就到不到了呢?但是用jquery的 $ 符号却能调到这又是为什么?

第二种情况:

小颖在paths中不加载jquery.js和ceshi.js在用的时候再加载:

app.js

requirejs.config({
    baseUrl: ‘js/lib‘,
    paths: {
        //  cs:‘ceshi‘,
        // jq: ‘../jquery‘
    }
});
require([‘main‘], function(mains) {
    console.log(mains.add(2, 5));
});

 

main.js

define([‘../jquery‘,‘ceshi‘],function(jq,cs) {
  console.log(jq);
  console.log($);
  console.log(cs.ad());
    var add = function(x, y) {
        return x + y;
    };
    return {
        add: add
    }
});

结果:

                 技术分享

问题:像上面那种加载方式加载jquery.js,为什么加载了 ceshi.JS ,后用回调函数中的别名 cs 却能调到,但是 jquery jq 却调不到,但是用 $ 符号却能调到?

 

require.js疑惑

标签:requirejs   9.png   cti   情况   www   strong   html   ejs   blog   

原文地址:http://www.cnblogs.com/yingzi1028/p/6708181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!