文档章节

1. requirejs认识

o
 oneboi
发布于 2016/11/26 20:36
字数 1008
阅读 2
收藏 0

#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后缀,写文件名就行。

© 著作权归作者所有

共有 人打赏支持
上一篇: 待看博客
下一篇: 10.jQuery的不足
o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
私信 提问
RequireJS极简入门教程

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular s......

程序员诗人
2017/03/30
0
0
RequireJS 入门指南

简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础...

oschina
2013/08/15
70.2K
37
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16
教你5分钟学会用requirejs(必看篇)

转来:教你5分钟学会用requirejs(必看篇) requirejs是干啥的啊? 曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到...

spinachgit
2018/10/31
0
0
使用 RequireJS 来优化你的 JavaScript 代码

RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。 在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至...

oschina
2013/02/12
4.9K
11

没有更多内容

加载失败,请刷新页面

加载更多

sql根据日期查询,本周,本月,本年,今日相关统计

sql根据日期查询,本周,本月,本年,今日相关统计 昨天 select * from tb where datediff(day, 时间字段 ,getdate()) = 1 今天 select * from tb where datediff(day, 时间字段 ,getdate()) = ...

BraveLN
7分钟前
0
0
Delphi 折叠代码编译变量$REGION

编译变量$REGION,用于在delphi2006以后版本的折叠代码显示,非常方便。 procedure TForm1.Button1Click(Sender: TObject); var uStr: UnicodeString; begin {$REGION '显示uStr变量内容'} ......

dillonxiao
8分钟前
0
0
【更新】SyntaxEditor发布v2018.1,可共享相同代码库

SyntaxEditor最新版本下载 SyntaxEditor是一款强大的代码语法检验控件,采用了当今最前沿的代码编辑的技术,可以为你代码编辑提供强大的管理功能。最新版支持Visual Studio 2013和Windows 8...

电池盒
9分钟前
0
0
如何在基于Bytom开发过程中集成IPFS

本文介绍了基于Bytom开发过程中集成IPFS。 step1: 搭建bytom节点 比原相关资料:https://github.com/Bytom-Community/Bytom_Docs 搭建bytom节点有很多方式,然后开启RPC调用模式。这里推荐用...

比原链Bytom
13分钟前
0
0
sqlyog注册码

sqlyog注册码 1.方式一 用户名: 随意填写 秘钥: ccbfc13e-c31d-42ce-8939-3c7e63ed5417 a56ea5da-f30b-4fb1-8a05-95f346a9b20b a0fe8645-3916-45d4-9976-cb6b88fecc6c b70d7f66-dac2-4462-......

dragon_tech
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部