企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

requireJS实现js模块化开发入门教程

JavaScript笔记 码云 30℃ 0评论

现在为了完善网站功能的开发引入js框架是必不可少的,这就使得我们网页中的js也变得越来越复杂和臃肿,不仅不美观还不好管理,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

requireJS实现js模块化开发入门教程

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

首先我们要知道我们为什么要使用RequireJS呢?他有什么好处呢?牛人博客总结了一下:

1、有效的防止命名冲突。特别是我们多个人在开发一个项目是时,后面加进来的同学使用的变量很有可能就是前面同学使用过的变量了,这个时候就会产生冲突了。而RequireJS可以将我们的变量封装在模块内,通过暴露出的一些接口呢,可以解决一些问题。

2、可以解决不同JS之间的依赖问题。所谓依赖就是一个JS文件可能利用的另一个JS文件里面定义过的内容,比如说我们这里需要使用Jquery这个文件,就表示我们的文件需要依赖Jquery文件的,那么被依赖的文件就需要在依赖文件之前引用。当我们引用的文件少的时候还好说,如果多了的话就很难管理,而RequeryJS利用他特有的机制就能够帮我们解决这个问题。

3、可以使我们写出模块化的代码,方便我们以后复用,也便于我们组织之间的分工。

我们先去官网将它下载下来,RequireJS官网

在官网里的Download里有两个版本让我们下载,一个是带注释的,一个是精简版的,我们只需要下载精简版的就可以了。

requireJS实现js模块化开发入门教程

其实使用RequireJS方法很简单,大家只要掌握几个常用的函数就可以了,那么,RequireJS的常用方法有哪些呢?牛人博客在这里为大家整理几个,一起来看一下。

1、requirejs.config config函数,我们通常用它来为我们的模块指定一下别名,方便我们模块的引用。

2、Requirejs通过它我们将写好的模块引入,并根据这些模块编写我们的主代码。

3、Define我们利用它来编写模块,然后在相应的地方进行引入就行。

接下来我们通过一个小例子来讲述一下RequireJS的使用

HTML代码部分:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

	<script type="text/javascript" src="js/require.js" data-main="js/main"></script>
	</body>
</html>

从HTML代码中我们首先引入了require.js,然后我们通过data-main属性来引入入口文件,什么是入口文件呢?当我们将requirejs文件加载完毕之后他会立马调用的文件就是入口文件。我这里把入口文件定义为main.js

创建好main.js文件后我们就可以把上面介绍的3个属性方法在里面使用了。

首先我们使用ruequirejs.config()来定义别名,在他下面有个paths属性,在paths属性下面我们进行配置别名。比如,我们想引用我们的jQuery模块的话,发现他的模块名非常的长jquery-3.1.1.min.js,我们就可以定义一个jQuery别名来代替jquery-3.1.1.min.js,当然这里的.js后缀名是不需要的。

requirejs.config({
	paths:{
		jquery: 'jquery-3.1.1.min'
	}
})

然后我们就可以利用requirejs来引用我们定义好的这个模块了,requirejs他下面有两个参数,一个是数组,需要传入我们引用的模块名,有几个你就可以写几个,比如我们上面定义了jQuery别名,我们就可以写到这里。第二个参数则是回调函数,在function()里需要传入一个参数来代替我们刚才所引入的这个模块,比如我们以惯例使用$符来代替jQuery模块,在这个回调函数中我们写入一段代码。来看一下我们的jQuery模块是否被正确的引用了。

requirejs(['jquery'], function ($) {
	$('body').css('background-color', 'red');
})

requireJS实现js模块化开发入门教程

在浏览器里我们看到HTML文件背景变成了红色,说明我们的jQuery模块被成功地引用了。

假如我们在这个回调函数中写入一个登录表单的验证呢,你可能会写入一大堆函数,比如说以下代码我们用isEmpty()函数来验证用户名是否为空,用checkLength()函数来验证用户名是否满足合适的位数,用isEqual()函数来验证密码和密码确认是否一致。代码如下:

requirejs(['jquery'], function ($) {
	//$('body').css('background-color', 'red');
	function isEmpty() {
		
	}
	function checkLength() {
		
	}
	function isEqual() {
		
	}
})

当然我们可以这么写,但是这样写的话这里的函数是非常分散的,不方便管理,而且也不太好复用。如果我们用requirejs的话就可以将它们编写成一个模块,大家请看我们如何通过一个模块来完成我们刚才所说的表单验证。

我们新创建一个模块,命名为validate.js,RequireJs中定义模块是通过define这个函数的,他也有两个参数,一个参数其实也是需要引入的模块,比如我们需要引入jQuery模块的话,和前面的写法是一样的,然后我们就将刚才的函数写到这里了,这就相当于是自己的一个小空间,外面就没办法访问到这里了,而里面也没办法和外面进行交互。如下:

define(['jquery'], function ($) {
	function isEmpty() {
		
	}
	function checkLength() {
		
	}
	function isEqual() {
		
	}
})

那么,如何才能让外面访问到里面的内容呢?这里我们只有通过return这个返回的值,外面才能访问到里面的的内容。所以我们就要将这些定义好的方法都写到这里,这样的话他们的组织结构就更紧密了。如下:

define(['jquery'], function ($) {
	return{
		isEmpty: function () {
			
		},
		checkLength: function () {
			
		},
		isEqual: function () {
			
		}
	}
})

接下来我们以验证密码输入是否一致为例,因为密码和密码验证是否一致需要传入两个参数,这里我们定义为str1和str2,然后我们直接返回这两个参数是否相等就可以了,如果他两相等就返回真,不想等就返回假。这里我们的模块就定义完了。如下:

define(['jquery'], function ($) {
	return{
		isEmpty: function () {
			
		},
		checkLength: function () {
			
		},
		isEqual: function (str1, str2) {
			return str1 === str2
		}
	}
})

模块定义完之后,我们需要将模块引用的入口文件中

requirejs(['jquery','validate'],function($){})

当然我们还需要引入一个变量来表示我们刚才的模块,你可以随便写,但是为了有意义,我们可以用validate来表示。我们可以给validate下的isEqual函数传递两个参数,即validate.isEqual(1,2)来看一下是否被正确引用了,这里我们通过console.log(validate.isEqual(1,2))查看,如下图:

requireJS实现js模块化开发入门教程

返回的是false,1和2是不相等的,相反,console.log(validate.isEqual(1,1)),返回是true。这样一来就表明我们的模块被正确的定义并成功的引用了,介绍到这里RequireJS就够用了,关键还是在如何使用define将一个个功能定义成模块。

结束语:

以上就是码云笔记为大家带来的RequireJs的基本使用方法,按照上面的过程走一遍,你就很好的掌握了本章知识,说的再好不如实际的敲一次代码,开始行动吧。

转载请注明:码云笔记 » requireJS实现js模块化开发入门教程

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址