Requirejs快速使用

Requirejs是一个简单，实用，强大的前端模块化js库，它遵循AMD这一客户端模块定义规范，使用它能够使我们前端代码更加清晰高效加载，摆脱了以前前端代码杂乱无序的状态。

使用步骤如下：

1.下载require.js文件,地址为 http://www.requirejs.cn/docs/download.html#requirejs,并将其加入我们的项目中；

2.使用define方法定义模块

这里主要有两种形式，第一种是定义无依赖的js模块代码，即这个js模块是单独存在的，不依赖于其他模块或者js库，这里新建一个independent.js,代码如下

define(function(){return{test1:function(){console.log('i am test1');},test2:function(){console.log('i am test2');}}}
)

　　在这个js文件中定义了一个模块，返回了一个对象，其包含两个方法用以外部文件调用，这是定义一个独立的模块；

第二种方式是定义一个依赖于其他模块的模块，新建一个depend.js,代码如下：

define(['test'],function(test){return{showName:function(){console.log( test.name);},showAge:function(){console.log(test.age);}}});

这里定义了一个模块，其依赖于test模块，需要注意的是，requirejs默认js文件名为模块名，test模块即对应于test.js文件，在这个模块中，第一个参数是需要依赖的外部模块名称，是一个数组，也可以依赖多个，第二个参数是一个function，其形参test对应着test模块，所以在showName,showAge方法中课直接调用test的属性或方法；

test.js

define(function(){return {name:'张三',age:22}}
);

这里定义了一个test模块，返回了包含name和age的一个对象，供其他模块调用.

3.使用require调用模块

新建一个main.js,用来作为项目的主js文件，即在页面中只加载这个js文件，其他js文件都通过它以模块调用的形式存在，代码如下：

require(["depend"],function(de){de.showAge();de.showName();});

表示调用depend模块，并调用其showAge和showName方法。

在html中加载requirejs,将其data-main属性指向我们的主js文件main.js

结果如下：

4.加载jQuery

平时开发中jQuery用的很多，最新版1.11以上的都遵循AMD规范，可以利用requirejs直接将其作为一个模块加载进来

在main.js中添加require.config,对jQuery进行配置，代码如下：

require.config({paths:{jquery:"http://code.jquery.com/jquery-1.11.1.min"}}
);

这里配置了一个jQuery模块，它的地址为一个CDN地址，也可以将其下载到本地，地址指向本地地址也可以，注意地址后面没有.js,

然后就可以使用require方法来调用了，main.js中调用代码如下：

require(["jquery","depend","independent"],function($,de,ind){de.showAge();de.showName();console.log($("#span1").html());ind.test1();ind.test2();});

这里调用了三个模块，我们之前自己定义的两个加上jQuery模块，并且使用了他们中的方法，其中jquery模块选择html页面上的一个span并将其内部文字输出到控制台

其余两个模块调用的都是在他们内部自定义的方法

最终结果如下：

转载于:https://www.cnblogs.com/myzhibie/p/4133929.html

Requirejs快速使用相关推荐

requireJs快速上手
简介 require.js的主要作用是模块化,规范化js,作为JavaScript脚本加载器,遵循AMD规范: require.js中提供了优化器可以优化页面中的js脚本和css文件,以提高页面响应速 ...
快速理解RequireJs中的config
在html中引入requirejs 在HTML中,添加这样的 <script> 标签: <script src="/path/to/require.js" dat ...
RequireJs的使用和快速理解
2019独角兽企业重金招聘Python工程师标准>>> http://www.haorooms.com/post/requirejs_sy_lj 转载于:https://my.osc ...
QuickMock：基于Express的快速mock平台
前言感兴趣的话,可以star关注支持下,项目地址. 在日常的开发中,前端mock后端api数据,是实现前后端并行开发非常重要的一步.有了数据,才能更加真实反馈实际操作流程,交互效果才能更好的编码实现 ...
快速上手seajs——简单易用Seajs
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 背景一个网站必然会涉及很多功能,tab选项卡.slide轮播图.pop弹出层.美化alert.paging分页等等等等,如果 ...
使用 RequireJS 优化 Web 应用前端
基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...
用ionic快速开发hybird App（已附源码,在下面+总结见解）
用ionic快速开发hybird App(已附源码,在下面+总结见解) 1.ionic简介 ionic 是用于敏捷开发APP的解决方案.核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑.也就是说 ...
抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
从 RequireJS 到 SeaJS（2）
从 requirejs.org 的首页出发,接下来是快速入门和下载,我们来看下载页面:Download 产出物 RequireJS 提供了三个文件: require.js - 这是核心文件,提供 Ja ...

Requirejs快速使用

Requirejs快速使用相关推荐

最新文章

热门文章