先是自己打了一些demo,然后回过头来看阮大神的博客,感觉很多莫名其妙的问题,瞬间解决了;很舒服,放上链接,希望对其他人也有帮助;
 
 

先是在html的末尾引入了require.js 。

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的world.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把world.js简写成world。

在world。js里就有两种方法进行require();

一种是配置require.config();

require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

baseUrl:基目录;就是当前所需要载入模块所在目录;如果当前引用模块的目录和world.js的目录在同一文件夹下,那么就不需要设置,如果在world.js同级新建了个文件夹,这时候引用的模块就有可能在lib文件夹下,这时候设置baseUrl就可以更加方便的引入模块;

如果某个模块在另一台主机上,也可以直接指定它的网址,比如:

  require.config({

    paths: {

      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

    }

  });

  

也可以写成一个数组;require.js会先载入前面的模块,若前面模块无法加载。将载入后面的模块

还有一种是require(); require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载jquery api,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

对于加载非规范的模块;我觉得阮大神写的没有任何的问题,我还是别BB了,说的太多,感觉自己都乱了,that's all;

附上阮大神的博客共三篇,讲解非常详细:  http://www.ruanyifeng.com/blog/2012/11/require_js.html?bsh_bid=230697246

关于require.js的模块化开发的更多相关文章

  1. 【require.js】模块化开发

    一.Require.js及AMD Require.js:是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一. AMD(Asynchronous Module Definit ...

  2. sea.js的模块化开发

    为什么使用sea.js? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像Node.js 一般书写模块代码. 自然 ...

  3. 使用require.js编写模块化JS

    layout: post title: 使用requirejs编写模块化代码 category: javascript date: 2016-10-22 00:00:00 tags: javascri ...

  4. require.js Javascript模块化

    浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous).这就是AMD规范诞生的背景. AMD是&quo ...

  5. 模块化开发(三)---通过node.js学习模块化开发

    由于改文章有点大,部分代码格式有点问题,编辑之后博客园莫名其妙推出,有问题可以留言沟通.   什么是Node? 它是一个在浏览器之外可以解析和执行javascript代码的运行环 境,或者说是一个运行 ...

  6. require.js 模块化

    什么是模块化? 将若干功能进行封装,以备将来被重复使用. 为什么要前端模块化? 将公共功能进行封装实现复用 灵活解决依赖 解决全局变量污染 如何实现前端模块化? <!DOCTYPE html&g ...

  7. 前端模块化开发的价值(seaJs)

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  8. require.js源码分析

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

  9. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

随机推荐

  1. 【Python】 zabbixAPI的包装pyzabbix

    pyzabbix pyzabbix是zabbixAPI的第三方python包装.从网上莫名其妙地搞到了一份源码,看了一下之后发现实现方法还蛮巧妙的,感觉挺好的就记下来了.那些个源码本身其实也是一个个单 ...

  2. color 圆盘染色

    Color 圆盘染色 题目大意:给你一个圆盘,等分成n个扇形,有m种颜色,每两个相邻的扇形不能相交,求染色方案数. 注释:m,n<=$10^6$. 想法:这题是小圆盘染色的加强版(小圆盘染色?) ...

  3. c语言——第0次作业

    1.你认为大学的学习生活.同学关系.师生应该是怎样?请一个个展开描写 大学生活:大学生活充满着挑战,首先当然必须先掌握自己所学的专业知识,然后就要学会独立,可以处理好人际关系,并且要有更强的自我约束能 ...

  4. 2017-2018-1 Java演绎法 第八周 作业

    团队任务:UML设计 团队组长:袁逸灏 本次编辑:刘伟康 团队分工 第一次使用泳道图,感觉非常方便,从图中的箭头和各个活动框中可以清晰地看出分工流程: 不过既然是博客园,分工就不能只贴图,markdo ...

  5. 论C++的智能指针

    一.简介   参考这篇博客,并且根据<C++ Primer>中相关知识,我总结了C++关于智能指针方面的内容.   为了解决内存泄漏的问题,便出现了智能指针.STL提供的智能指针有:aut ...

  6. 团队作业4——第一次项目冲刺(Alpha版本) Day 1

    小队@JMUZJB-集美震惊部 一.Daily Scrum Meeting照片 二.Burndown Chart 燃尽图 三.项目进展 1.界面 屏幕开发中,原型设计完毕. 2.服务器 服务器由学校提 ...

  7. 关于GPUImage的导入

    对于GPUImage的使用方面,GitHub上已经非常详细了,就不一一赘述了,但是对于项目的导入来说,最好的方式是 1.下载GPUImage并解压 2.打开压缩包后如图 3.打开终端,cd到此目录 4 ...

  8. GPUImage滤镜效果翻译

    #import"GPUImageBrightnessFilter.h"//亮度 #import"GPUImageExposureFilter.h"//曝光 #i ...

  9. 【学习笔记】windows安装jhipster踏坑记录

    序: 入职新公司第二天了,本来第一天是配置环境来着,配了一下午也没搞成那个jhipster的安装,每次以为应该正常的时候都是不对,yo是yeoman的指令,但是我是使用yarn管理的yeoman 纠结 ...

  10. v7000数据恢复_MDisk重建数据恢复方法(北亚数据恢复)

    很多工程师都有这样的疑问,MDisk重建后还能不能恢复数据呢?应该怎么做才能恢复数据呢?本文这里就以IBM V7000存储为例,详细讲解因为某个MDisk被重建导致的数据丢失的恢复方法.我们本案例中的 ...