文档章节

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极简入门教程

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与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
Angular项目构建指南 - 不再为angular构建而犹豫不决

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

顽Shi
2014/06/16
0
16
Gulp和Webpack工具的区别

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

easonjim
2016/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

微信小程序开发系列六:微信框架API的调用

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
19分钟前
0
0
5 个用 Python 编写 web 爬虫的方法

大家在读爬虫系列的帖子时常常问我怎样写出不阻塞的爬虫,这很难,但可行。通过实现一些小策略可以让你的网页爬虫活得更久。那么今天我就将和大家讨论这方面的话题。 我刚整理了一套2018最新...

糖宝lsh
20分钟前
0
0
docker安装redis、mongodb、mysql等

一、启动docker服务,设置镜像: systemctl start dockervi /etc/docker/daemon.json{ "registry-mirrors": ["https://registry.docker-cn.com"]} 二、下拉镜像: 在镜像中心h...

狼王黄师傅
58分钟前
2
0
deepin系统使用deepin-wine安装exe程序

deepin自带原生deepin-wine使用命令如下: deepin-wine QQBrowser.exedeepin-wine QQMusicSetup.exe 默认安装的快捷方式位置: /root/.wine/drive_c/'Program Files'/Tencent/QQBrowser/......

临江仙卜算子
今天
4
0
快速get到学习Linux操作系统的点

快速get到学习Linux操作系统的点 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux能够运行主要的UNIX工具软件...

linuxCool
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部