目录 疑惑 情况 有变 一位 那种 nbsp .com
昨天小颖分享了一篇 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) {
- varad =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 疑惑
来源: http://www.bubuko.com/infodetail-2024932.html