项目中大都使用模块化开发，requireJS作为AMD模块开发的典范，所以有必要学习下。通过一步步利用requireJS编写demo，从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。

AMD：一种基于模块的异步加载JavaScript代码的机制，它推荐开发人员将JavaScript代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码，使Web页面上其他不依赖 JavaScript代码的UI元素，如图片、CSS以及其他DOM节点得以先加载完毕，Web页面加载速度更快，用户也得到更好的体验。

1、  下载requieJS

在用requieJS模块化开发之前，我们需要准备一些东西。那肯定就是下载require.js文件咯，哈哈哈，因为是基于它开发嘛。

2、  创建一个HTML文件

创建一个HTML文件后，导入requireJS肯定是使用<script>标签的，这个毫无疑问。然后在这个标签中有个data-main属性，它的作用呢是作为一个出入口，就是说在加载requireJS后，从data-main这个属性进入。

比如下面这样：

 <!DOCTYPE html>

    <head>

        <title>require</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    </head>

    <body>

        <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->

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

    </body>

</html>

当我通过加载js/require.js后，然后去执行js/main的js文件。main它也是个js文件，我们可以将它的.js后缀省略掉，requireJS会将其加上。

3、  data-main

当程序执行<script data-main=’js/main’ src=’js/require.js’></script>后，通过data-main进入main.js，去执行main.js。那main.js里是些什么东东呢？

请看代码：

/*

    require.config执行baseUrl为'js'，

    baseUrl指的模块文件的根目录，可以是绝对路径或相对路径

*/

require.config({

    baseUrl: 'js',

    paths: {

        jquery: 'jquery-1.8.2.min'

    }

});

/*

    这里通过require，来引入monkey.js，

    然后通过后面的匿名函数给他们分配参数，如这里的

    monkey-->mk

*/

require(['monkey'],function(mk) {

    mk.init();

});

从上面代码中，可以看见main.js中包含require.config和require两个模块。

require.config的作用就是配置requireJS的一些参数，然后公共引用。

例如，上面的baseUrl，它的作用就是，以它作为基础路径，在这个路径之下，查找文件。我是将所有.js文件都放在js文件夹下的。所以，在配置这个属性后，以后的文件都是在js这个路径下查找内容了。

如下：

require(['monkey'], function(monkey){

    monkey.init();

});

它在引用monkey时，就是引用的monkey，而不是js/monkey。

paths的作用呢？就是将一些常用的js文件，换成通用的名字。例如jquery-1.8.2.min.js，我们不可能每次调用它时，都写这一啪啦吧，所以为了方便，就将jquery替代jquery-1.8.2.min.js咯，以后我们就可以直接使用jquery了，快捷方便。

好了，require.config基本混了个脸熟，一句话，它的作用就是配置requireJS嘛。

那require呢？

require的作用就是执行。比如这里我只需要monkey.js去执行，所以我就导入了monkey，然后通过mk参数，获得monkey执行后的返回值。如果有返回值，然后我们就可以对mk做相应的处理了。

咦，那monkey里面是个什么呢？

我们看看：

/*

    define的参数为匿名函数，该匿名函数返回一个对象

*/

define(['jquery'],function($){

    var init = function(){

        console.log($.browser);

    };

    return {

        init: init

    };

});

define！它的作用是，定义一个js模块，供其他模块或者require使用。它引用其他js的模块的方法和require差不多，都是将需要的js文件引入，然后参数一一对应。大家需要要注意的是，define里定义的方法或者变量，其他模块是访问不到的，所以，你如果想其他模块也能访问，就将相应的方法抛出去(return)对象或者函数都可以。在这里，我return的是一个对象，提供init供其他模块调用。

好了，详细代码见here

浅谈requireJS的更多相关文章

  1. 浅谈requireJS 摘自http://www.cnblogs.com/giggle/p/5436710.html

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  2. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  3. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  4. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  5. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  8. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  9. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

随机推荐

  1. php止刷新页面重复提交

    利用session来解决,首先新建一个session,并赋值,第一次提交后改变session的值,当第二次再此提交此内容时,如果不是我们的赋值,就不在处理传过来的数据.如:<?php sessi ...

  2. Google Protocol Buffer开发环境搭建注意事项

    PB的安装配置基本上依照网上的教程做就没什么问题:有一点要注意到是当遇到libcmt.lib或msvcrt.lib等lib库与PB中的库冲突时,一定要检查工程的编译方式完全一致,整个项目当中都要注意这 ...

  3. 温故而知新 css + html 超级牛逼的居中策略

    该方法甚至可以解决img内容居中的问题 套路:最外层div宽度为居中内容所占的宽度(通常是1170px),并且使其居中(margin:auto) 里层的div宽度为全屏(通常是1920px;)再mar ...

  4. 谢欣伦 - OpenDev原创教程 - 媒体开发库libMedia

    libMedia是一个免费的简单的媒体开发库,其中的接口类与函数大都以小写的x打头,来源于我的姓氏首字母(谢欣伦). 下载 OpenDev for VS2012 libMedia提供四大功能,一是视频 ...

  5. windows和linux中搭建python集成开发环境IDE——如何设置多个python环境

    本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...

  6. ORACLE冷备份与恢复

    ORACLE备份和恢复有三种方式: (1)数据泵(expdp/impdp) (2)冷备份 (3)RMAN备份 就分类而言,(1)和(2)统有称为"冷"备份,(3)称为"热 ...

  7. 跨平台移动开发UI语言 -XAML

    Xamarin.Forms 把XAML (Extensible Application Markup Language, XAML) 带进了ios,android的界面开发,也就使得使用Xamarin ...

  8. ABP理论学习之OWIN集成

    返回总目录 如果你的应用中使用了OWIN,那么需要在主项目(一般来说是指Web项目)中添加Abp.Owin的nuget包,然后像下面那样在OWIN的 Startup文件中调用 UseAbp()扩展方法 ...

  9. 【腾讯Bugly干货分享】Android ImageView 正确使用姿势

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5832602d7196970d65901d76 导语 本文主要介绍了ImageV ...

  10. 剑指Offer面试题：13.调整数组顺序使奇数位于偶数前面

    一.题目:调整数组顺序使奇数位于偶数前面 题目:输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 例如有以下一个整数数组:12345 ...