RequireJS入门一之实现第一个例子

为什么学习RequireJS？

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

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。

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入门一之实现第一个例子的全部叙述，希望对大家有所帮助。

赞 (0)

相关推荐

  • RequireJS使用注意细节

    RequireJS介绍 RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端

  • 一个极为简单的requirejs实现方法

    require和 sea的源码分析,我之前的博客有写过, 今天我想分享的是一个很简单的核心代码(不带注释和空行大概60行), 没有容错判断. require.js require函数实现用一句话概括: 依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块. //标记已经加载成功的个数 var REQ_TOTAL = 0; //模块导出 window.expo

  • requireJS使用指南

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受. AMD:一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量.通过延迟和按需加载来解决各个模块的依赖关系.模块化的JavaScript代码好处很明显,各

  • RequireJS多页面应用实例分析

    本文是requireJS的一些知识点的总结,配上多页面应用中的实例分析. 本案例的目录结构如下: requireJS API的三个主要函数:define(创建模块),require(加载模块),config(配置) 1. HTML文件中加载JS文件 page1.html内容如下: <!DOCTYPE html> <html> <head> <title>Page 1</title> <script data-main="scrip

  • 关于RequireJS的简单介绍即使用方法

    RequireJS介绍 RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require

  • RequireJS入门一之实现第一个例子

    RequireJS入门一之实现第一个例子

    为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理js代码(我的理解). 深入学习,我们便会被迫接受一系列的名词:data-main.require.define.baseUrl.

  • openCV入门学习基础教程第一篇

    目录 前言:计算机眼中的图片 1. 图片的读取与显示 1.1 图片的读取 1.2 显示的图片 1.2.1 显示原始图片 1.2.2 灰度图 1.3 BGR转换成灰度图.RGB 2. 保存图片 3. 视频的读取与显示 4. 截取图像部分 5. 颜色通道提取 6. 边界填充 7. 数值计算 8. 图像融合 9. 知识点总结* 总结 前言:计算机眼中的图片 计算机中图片由许多个像素点组成,如一个500x500的图片,表示长宽各由500个像素点组成. 计算机中一个像素点的值在0-255表示该点亮度  0

  • spring boot入门开始你的第一个应用

    spring boot入门开始你的第一个应用

    Spring Boot应用可以通过如下三种方法创建: 通过 https://start.spring.io/ 网站创建 通过Spring Initializr创建 自主创建 推荐开发工具: JDK 1.8+ maven 3.2+ IntelliJ IDEA 14 1. 通过 https://start.spring.io/ 网站创建 进入https://start.spring.io/,填写对应的信息,点击"Generate Project"按钮即可下载生成好的项目的zip压缩包,如图

  • jquery 轮换显示 第一小个例子

    jquery 轮换显示 第一小个例子

    效果如下图所示:虽然是看了示例之后自己在写的 (就当是给自己一个鼓励吧 加油!) jquery 复制代码 代码如下: $(document).ready(function(){ var h3=$(".accordion h3"); $(".accordion h3:eq(0)").addClass("active");//1.首先获取第一个H3标签添加class: $(".accordion p:gt(0)").hide();

  • 批处理入门手册之批处理常用DOS命令篇(echo、rem、cd、dir)

    1.1 学习echo  rem  cd  dir命令 学习要点: 1.显示信息:echo 2.注释语句:rem 3.目录切换:cd 4.列文件名:dir 一.显示信息:echo 在学习echo命令前我们先在C盘下建一个新文件夹bat,并建一个空的bat文件.例如我是的mybat.bat 好了,下面 我们开始<批处理入门手册>的第一章1.1节. 1.输出提示信息 格式:echo 你要输出的信息 例1 echo hello,world echo i will come back pause 执行显

  • Asp.net SignalR快速入门

    Asp.net SignalR快速入门

    今天的专题就是让大家可以快速的上手Asp.net SignalR.废话不多说了,下面正式进入今天专题的内容. 二.Asp.net SignalR 是个什么东东   Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主

  • JavaScript入门之基本函数详解

    总的来说,函数在JavaScript中可以: ◆ 被赋值给一个变量 ◆ 被赋值为对象的属性 ◆ 作为参数被传入别的函数 ◆ 作为函数的结果被返回 ◆ 用字面量来创建 函数对象 1.1 创建函数 创建JavaScript函数的一种不长用的方式(几乎没有人用)是通过new操作符来作用于Function"构造器": 复制代码 代码如下: var funcName = new Function( [argname1, [... argnameN,]] body ); 参数列表中可以有任意多的参

  • PHP 字符串操作入门教程

    无论哪种语言,字符串操作都是一个重要的基础,往往是简单而重要.正像人说话一样,一般有形体(图形界面),有语言(print 字符串?),显然字符串能解释更多的东西.PHP提供了大量的字符串操作函数,功能强大,使用也比较简单,详细请参看 http://cn2.php.net/manual/zh/ref.strings.php . 以下将简单的讲述它的功能和特性. 弱类型 PHP是弱类型语言,所以其它类型的数据一般可以直接应用于字符串操作函数里,而自动转换成字符串类型,进行处理,如: echo sub

  • 基于PHP的cURL快速入门教程 (小偷采集程序)

    基于PHP的cURL快速入门教程 (小偷采集程序)

    最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性,以及在PHP中如何运用它. 为什么要用 cURL? 是的,我们可以通过其他办法获取网页内容.大多数时候,我因为想偷懒,都直接用简单的PHP函数: $content = file_get_contents("http://www.jb51.net");// or$lines = file("http://www.jb51.net");// orreadfile(http://www.jb51.

  • Python 正则表达式入门（初级篇）

    引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列匹配某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些匹配某个模式的文本. 许多程序设计语言都支持利用正则表达式进行字符串操作.例如,在Perl中就内建了一个功能强大的正则表达式引擎.正则表达式这个概念最初

随机推荐