为什么学习RequireJS？

像我这种菜鸟，会提到海量文章里提到的AMD、JS模块化编程、异步... ... 等等

RequireJS是一个Javascript 文件和模块框架，它可以帮我们去管理js代码（我的理解）。

深入学习，我们便会被迫接受一系列的名词：data-main、require、define、baseUrl、paths、shims、deps。。。等等；

总之，很多文章都在向我们推销一些自己都说不明白的名词和概念。

简单点，现在我们要做一个简单的需求，用RequireJS管理我们的js代码，还要能使用jquery！

1.构建一个web工程，跑起来！里面文件如图：

这里面有好多坑，所以我把文件都放在文件根目录，先排除掉这些小问题！

其中jquery.js和require.js是需要去网站下载的，请自行百度。

2. 在index.jsp中添加script标签

可以在<body>里添加一个标签   <p>RequireJS异步加载测试</p>

3. 补充main.js文件

require.config({
　　paths: {
　　    jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4.跑起来~

你会看到弹出框，页面已经渲染显示了  “RequireJS异步加载测试” 。

小结：

a. RequireJS由James Burke创建，他也是AMD规范的创始人。它是一个工具库，用于客户端的模块管理。

从本例体现出的：1. 弹出alert的时候页面同时也被渲染，体现了异步加载的功能，传统放在head中的写法会造成阻塞，只有点击确定后才能渲染页面。

　　　　　　2. 页面只需要引入一个require.js，不需要再引入其他繁多复杂的js代码，剩下的工作交给RequireJS框架来做！

b. 学习之前先了解AMD规范，AMD通过define来定义模块，基本模式：define("id",[deps1,deps2,...],callback);

为什么本例没有define就可以跑起来？   因为jquery提供了对AMD的支持。path对象即是用来引入各种模块的。

普通的js代码可否被RequireJS管理？  可以，使用shims来加载这些资源！

c. 总结以后的编码思路：

Xx.jsp    Xx.js(同main.js)  通过 require.config 引入各种js模块（资源）；require加载所需模块，并在回调函数中传入对应变量，以方便在其中直接调用各模块中的函数和变量。

d. 自己实现： 页面加一个按钮；在main.js中加入juqery的click监听事件，测试是否监听成功！

e. 遗留问题：路径问题，肯定不能在根目录，不过这都不是事儿！

RequireJS入门之一——实现第一个例子的更多相关文章

  1. Activity工作流(2)-入门安装运行第一个例子

    转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432   版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  2. spring boot入门 -- 介绍和第一个例子

    "越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...

  3. BootStrap入门_创建第一个例子

    一.选择合适的IDE 一般前端开发选用的都是WebStorm.Brackets等,因为本人对VS比较熟悉,索性就拿VS进行练习了,而且VS练习有些好处,就是通过nuget方式获取BootStrap可以 ...

  4. RequireJS入门（一） 转

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  5. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  6. RequireJS入门（一）

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  7. RequireJS 入门指南

    RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...

  8. 【OpenCV入门指南】第一篇 安装OpenCV

    http://blog.csdn.net/morewindows/article/details/8225783/ win10下vs2015配置Opencv3.1.0过程详解(转) http://ww ...

  9. RequireJS入门（三）转

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

随机推荐

  1. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  2. js实用篇之String对象

    概述 String对象是JavaScript原生提供的三个包装对象之一,用来生成字符串的包装对象. var s1 = 'abc'; var s2 = new String('abc'); typeof ...

  3. 浅谈android中的目录结构

    之前在android游戏开发中就遇到本地数据存储的问题:一般情形之下就将动态数据写入SD中存储,在没有SD卡的手机上就需另作处理了;再有在开发android应用的过程中,总要去调试APP,安装时又想去 ...

  4. fir.im Weekly - 除了新 MacBook Pro，近期值得关注的移动开发好资源

    最近,最引人瞩目的莫过于 Apple 产品发布会,MacBook Pro 的更新可能是四年来变化最大的一版.除了更轻.更薄.性能更好.电力更足之外,最大的变化是加入了Touch Bar,被定义为 Ma ...

  5. 列出场景对象Lightmap属性

    首先上效果图: 编辑器代码: using UnityEngine; using UnityEditor; using System.Collections; public class Lightmap ...

  6. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  7. 深入理解javascript函数系列第四篇——ES6函数扩展

    × 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 ...

  8. 创建外网 ext_net - 每天5分钟玩转 OpenStack（104）

    虽然外部网络是已经存在的网络,但我们还是需要在 Neutron 中定义外部网络的对象,这样 router 才知道如何将租户网络和外部网络连接起来. 上一节我们已经为创建外部网络配置了ML2,本节将通过 ...

  9. ECMAScript5之Object

    在ECMAScript5中对Object新增的些方法,以前没注意的同志们,嘻嘻,下面我们再一起来边看边学. 1.Object之create Create单词意为创造嘛,作为Object的静态方法,不言 ...

  10. wireshark常用的过滤器设置

     过滤源ip.目的ip.在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...