require.js的使用心德:

都是自我的理解所得:

first:为什么使用?

1,web开发js的占用比例越来越大,引入的插件也越来越多,维护困难,一个一个的script的写要废

2,模块开发的需求

3,有时候javascript的运用是有依赖的需求的,大量的使用难以保证依赖顺序,出现不存在的问题

second:这是个坑,使用前的提示:

使用的环境是服务器的web环境,单纯的没有服务器的静态页面使用根本没有反应!

[][][]还有最重要的一点是,所有的路径,出了加/的,若是寻相对路径,都是以baseUrl为基础的???这个待验证![][]]

third:废话不多说,直接上图片:

step:首先是目录结构:

index.html是我的页面,这个require是一个服务器的根目录,require是require.js的库

step2:主要的index.html的样子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>this in index</title>
  6.     <div id="modle">asdafdfad</div>
    　　<!--注意:src是require的库,defer是ie异步,async是异步,data-main是js入口文件,config,主要的require.config都在里面写各种调用-->
  7.     <script src="require.js" defer async="true" data-main='config' ></script>
  8. </head>
  9. <body>
  10.     <h1>this is index</h1>
  11. </body>
  12. </html>

step3的config.js文件如下:

  1. require.config({
  2.     paths:{
  3.         a:'lib/a',
  4.         b:'lib/b',
  5.         c:'others/c',
  6.         jQuery:'lib/jquery.min'
  7.     },
  8.     waitSeconds:5,
    //jquery等各种外部库要使用,当要如此,是做兼容的
  9.     shim:{
  10.         jQuery:{
  11.             exports:'$'
  12.         }
  13.     }
  14. })
  15.  
  16. require(['a','b','c','jQuery'],function(a,b,c,$){
  17.     a.a();//输出this is module a
  18.     b.b();//输出this is module b
  19.     c.c();//输出this is module c in others
  20.     console.log(c.c2);//有时候有时候我会相信一切有尽头
  21.     a.show();//背景变红
  22.     $('#modle').html('d');//文本变为d
  23. })

各个模块文件如下:a.js

  1. define(['jQuery'],function($){
  2.     function a(){
  3.         console.log('this is module a ');
  4.     }
  5.     function jqueryShow(){
  6.         $('#modle').css('background','red');
  7.     }
  8.     return {
  9.         a:a,
  10.         show:jqueryShow
  11.     }
  12. })

b.js

  1. define(function(){
  2.     return {
  3.         b:function(){
  4.             console.log('this is module b');
  5.         },
  6.         care:function(){
  7.             console.error('刚刚引入的jquery不是一个模块,不能在define处搞');
  8.         }
  9.     }
  10. })

c.js

  1. define([],function(){
  2.     return {
  3.         c:function(){
  4.             console.log('this is module c in others');
  5.         },
  6.         c2:'有时候有时候我会相信一切有尽头!'
  7.     }
  8. })

//后来在发现的一些坑

后来发现他的那个baseUrl的坑有点多呀什么情况呢?

坑之一:baseUrl如果没有设定,那会默认为加载data-main的路径,如果在config(main)中申明了,就是它,都没有,那就是require.js所在路径,paths的设定相对路径都是它位参考的,模块的引入require和define自然也是以config(main)中的baseUrl为参考的相对路径(如:baseUrl:'/js/modle',那么意思就是所有的相对路径都是以modle目录里面为参考),但是baseUrl什么时候不起作用呢?就是用了/(根目录符号开头),http开头的路径和....js结尾的,这么一想还是很人性的哈!

坑之二:如果有多个的入口文件,那么,就不能申明data-main在标签中了,就得在各个页面中分别写require.config({}),但是又有个问题了,什么问题呢?就是啊,如果引入require.js时候是defer async='true' 那么后面的require.config会说没有定义,所以,引入require.js的标签一般都不写前面的defer async='true'了.也是醉了

require.js的使用的坑!的更多相关文章

  1. 记录:sea.js和require.js配置 与 性能对比

    最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...

  2. Require,js配置使用心得

    首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...

  3. Javascript模块化编程（三）：require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  4. javascript模块化编程（三）：require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  5. require.js工作原理（初始）

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  6. Javascript模块化编程（三）：require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  7. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  8. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  9. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

随机推荐

  1. objective-c（初始化）

    objective-c(初始化) 创建对象 (编程语言 Objective-C 2.0) 1.类对象与实例化 类的定义完成后,编译器在内存中自动生成唯一的类对象,实例对象都是通过调用类对象的类方法生成 ...

  2. 转载：.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  3. pycharm console 控制台乱码的解决

  4. BZOJ 1032 祖玛

    Description 这是一个流行在Jsoi的游戏,名称为祖玛.精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青 ...

  5. 【HDOJ】2363 Cycling

    二分+Dijkstra. #include <iostream> #include <cstdio> #include <cstring> #include < ...

  6. POJ 2289 Jamie's Contact Groups（多重匹配+二分）

    题意: Jamie有很多联系人,但是很不方便管理,他想把这些联系人分成组,已知这些联系人可以被分到哪个组中去,而且要求每个组的联系人上限最小,即有一整数k,使每个组的联系人数都不大于k,问这个k最小是 ...

  7. POJ 3187 穷举

    题意:已知有N个数分别为1-N,如下图为4个数.相邻两两相加直至只剩下一个数,下图的结果就是16. 3 1 2 4     4 3 6   7 9 16 现在反过来看,告诉你数的个数N和最终结果,问这 ...

  8. @synthesize和@dynamic分别有什么作用？

    @property有两个对应的词,一个是 @synthesize,一个是 @dynamic.如果 @synthesize和 @dynamic都没写,那么默认的就是@syntheszie var = _ ...

  9. Theano 在windows下安装

    Theano + win8 一切为了 Deep Learning 选择安装方式:AnacondaCE  学术免费 Simply download and execute the installer f ...

  10. Linux下报 java.net.SocketException权限不够 异常解决

    转载自:http://wangchongan.com/articles/java-net-socket-exception-permission-denied.html 今天在Linux下用Jetty ...