1. requirejs认识
博客专区 > oneboi 的博客 > 博客详情
1. requirejs认识
oneboi 发表于1年前
1. requirejs认识
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

#requirejs认识

##1. 为什么使用requirejs 好处:

  1. 有效的防止命名冲突

在多人协作的项目里面,后面加入的人可能定义以前有人定义过的变量或者方法。requirejs可以将我们的变量封装在模块内,而通过暴露对外接口,供外部使用。

  1. 声明(解决)不同js文件之间的依赖,

依赖:A 是一个js 文件,它的内部用到B js文件的定义的内容,我们就说A JS文件依赖于Bjs文件,在引入Ajs文件之前必须先引入Bjs文件。requirejs的机制帮我解决了这个问题。

  1. 可以让我们的代码以模块化的方式进行组织。

方便复用,我们也便于分工,可以专门写一些模块供别人使用。

##2. 下载

中文网 官网英文

语法:

##3. rquirejs常用的方法和函数

  • requirejs.config(object)

作用1: 为我们的模块指定别名,方便我们对模块的引用 (引入)

  • requirejs([模块别名],function(模块形参){})

作用1: 通过它我们将写好的模块进行引入,并根据这些引入的模块编写我们的主代码

模块的形参与前面引入的模块对于,形参最好好识别,比如我们按照惯例用$形参代表jQuery模块

  • define

利用它来编写模块,以便在相应的地方进行引入。

define(['需要引入的模块'],function(前面模块的形参){})

##4.使用 目标

  1. 把jquery当做一个模块来使用
  2. 自己写一个模块并使用

ememt语法: html:5 ####步骤1: 引入require.js文件,通过data-main属性指定入口文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<script src="require.js" data-main="main.js"></script>
</body>
</html>

什么是入口文件

当rquire.js加载完以后之后,立马调用的文件,在整个页面中我们只要一个scirpt引入require.js文件就好,省下了太多的script标签。

<script src="require.js" data-main="main.js"></script>
后缀变得不需要了,可以要可以不要,但定义别名的时候必须不要
<script src="require.js" data-main="main"></script>

####步骤2:验证jquery模块


//通过requrie.cofig下paths属性为模块定义别名
requirejs.config({
//通过path属性定义模块别名:因为模块名一般很长,而且还带着引入路径
//键值对定义别名,而且.js后缀必须不可以要
//引入路径相对于require.js

	paths:{
		//位JQuery定义别名

		jquery:"jquery-3.1.1.min.js"

	}

  });

//通过requirejs引入我们在config中配置好的模块。

 // requirejs([模块别名],function(模块形参){})

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

	$('body').css('background-color','red');
})


定义别名的时相对应的是入口文件data-main



	paths:{
		//位JQuery定义别名
	jquery:"lib/jquery-3.1.1.min"

	}

####步骤3.表单验证模块验证密码

把功能剥离成一个模块来编写复用和引用

  1. 新建validata.js

  2. 使用define定义模块

说明: 一个模块就是一个我们自己的小空间,外面的内容无法访问到里面,里面没法和外面进行交互,只有通过return返回的方式的对外暴露接口。

写错了一直不对:

错误的:


define('jquery',function($){

	return {

	
		isEqual:function isEqual(str1,str2){
		return str1==str2;

	}
	
	}

})

正确的:

define(['jquery'],function($){



	return {


		isEqual:function(str1,str2){

			return str1===str2;
		}
	}
})

错误原因:数组写成字符串,

匿名函数和普通函数

return {


		isEqual:function (str1,str2){

			return str1===str2;
		}
	}

return {


		isEqual:function isEqual(str1,str2){

			return str1===str2;
		}
	}

写在外面:正确的

define(['jquery'],function($){
       function isEqual(str1,str2){

			return str1===str2;
		}
	return {
		isEqual: isEqual
	}
})

中文:上 和因为 :下

输入图片说明

##关于路径问题

paths:{
		//位JQuery定义别名

		jquery:"lib/jquery-3.1.1.min",
		validata:"lib/validata"

	}

如何模块和main.js在同一目录,paths里面可以不要设置路径,requirejs会自动去找这个模块,如果不在同一目录下,必须设置路径。

在同一模块下时

requirejs(['jquery','validata'],function($,validata){

	console.log(validata.isEqual(1,2));
})

requirejs([模块名],function(模块形参){})

require后面是文件名不要.js后缀,写文件名就行。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 89
码字总数 29764
×
oneboi
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: