文档章节

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

© 著作权归作者所有

共有 人打赏支持
o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
RequireJS + AngularJS Seed 03 _RequireJS

在 index.html 里面引用 Requirejs。 这里第一部分src当然就是指requirejs的库文件。第二部分data-main是指入口配置。当前我指定的是scripts下面的bootstrap。requirejs默认的是js文件作为存...

开源中国匿名会员
2014/05/08
0
0
Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim
2016/12/24
0
0
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16
RequireJS + AngularJS Seed 04 _RequireJS

今天继续拆。我想问,尼玛我以前碰到的队友难道都是前端转过来的?洋洋洒洒上万行堆一个文件里面不难受么。大致的目录结构像下面这样: ---------- 很好。看起来模块相互依赖关系是这样的。 ...

开源中国匿名会员
2014/05/09
0
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 乱七八糟的可重复读隔离级别实现

MySQL 乱七八糟的可重复读隔离级别实现 摘要: 原文可阅读 http://www.iocoder.cn/Fight/MySQL-messy-implementation-of-repeatable-read-isolation-levels 「shimohq」欢迎转载,保留摘要,谢...

DemonsI
今天
2
0
Spring源码阅读——2

在阅读源码之前,先了解下Spring的整体架构: 1、Spring的整体架构 1. Ioc(控制反转) Spring核心模块实现了Ioc的功能,它将类与类之间的依赖从代码中脱离出来,用配置的方式进行依赖关系描...

叶枫啦啦
今天
1
0
jQuery.post() 函数格式详解

jquery的Post方法$.post() $.post是jquery自带的一个方法,使用前需要引入jquery.js 语法:$.post(url,data,callback,type); url(必须):发送请求的地址,String类型 data(可选):发送给后台的...

森火
今天
0
0
referer是什么意思?

看看下面这个回答(打不开网页可以把网址复制到搜索栏): https://zhidao.baidu.com/question/577842068.html

杉下
今天
1
0
使用U盘安装CentOS-解决U盘找不到源

1. 使用UltraISO制作CentOS安装盘 如果需要安装带界面的系统,为保证安装顺利,可选择Everything版本的ISO制作安装盘。 2. 在BIOS中选择使用U盘安装 系统启动后,进入安装选择界面,其中有三...

Houor
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部