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入门一之实现第一个例子的全部叙述,希望对大家有所帮助。
相关推荐
-
一个极为简单的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 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require
-
RequireJS使用注意细节
RequireJS介绍 RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端
-
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? 像我这种菜鸟,会提到海量文章里提到的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应用可以通过如下三种方法创建: 通过 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 复制代码 代码如下: $(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是微软为实现实时通信的一个类库.一般情况下,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 库.本文将介绍 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中就内建了一个功能强大的正则表达式引擎.正则表达式这个概念最初
随机推荐
- Angular.JS实现无限级的联动菜单(使用demo)
- Windows下ruby语言安装教程
- jquery的checkbox,radio,select等方法小结
- Android编程使WebView支持HTML5 Video全屏播放的解决方法
- web安全—tomcat禁用WebDAV或者禁止不需要的 HTTP 方法
- 零基础写Java知乎爬虫之先拿百度首页练练手
- iOS实现富文本编辑器的方法详解
- 可以将word转成html的js代码
- 从零开始学YII2框架(二)通过 Composer 安装扩展插件
- Python中的字符串类型基本知识学习教程
- Python正则表达式完全指南
- 一个简单的Android定时任务
- Android编程解析Json格式数据的方法
- JS基于onclick事件实现单个按钮的编辑与保存功能示例
- 详解js的六大数据类型
- Java 实现二叉搜索树的查找、插入、删除、遍历
- android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源之IOS_Dialog_Library
- 浅析C++标准库元组(tuple)源码
- 浅谈android组件化之ARouter简单使用
- C#获取Visio模型信息的简单方法示例