[前端]requireJS的知识分享

本文主要是介绍[前端]requireJS的知识分享，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天和大家一起聊聊requireJS, requires主要是为了实现js代码的模块化，避免命名冲突，加快js代码的加载速度，为了更好的理解requirejs，进行如下总结：

RequireJS采用不同的方法来加载脚本，他鼓励模块化编程，使用RequireJS编程不但可以模块化编程而且他依旧可以运行的很快。

注：所谓的模块化编程，就是将不同功能的代码进行分文件管理，将具有相关功能的函数封装到一个文件中，用的时候只需要导入该文件即可

RequireJS鼓励使用模块ID，而不是像原来那样使用script标签使用url引入。

注：首先我们先搞清楚几个概念，模块ID：就是文件的代替者，指的是在main.js文件中，我们可以在require.config函数中，对不同的模块文件进行配置，具体如下图所示，而下图的jquery就是针对于'jquery-3.2.0'的模块id，这里可以去掉后缀js，因为requirejs默认都是js文件

require.config({

        	paths:{		jquery:'jquery-3.2.0'
        	}
	})

RequireJS加载代码时候，其相对路径为baseUrl，baseUrl通常被设置为data-main指定文件的目录：

注：BaseUrl也可以通过设置进行手动配置（通过RequireJS 的 config进行配置），若是没在config中进行配置，并且script标签没有指定data-main的话，那么默认目录为引入requireJS的HTML页面目录。

requirejs.config({//默认情况下模块所在目录为js/libbaseUrl: 'js/lib',//当模块id前缀为app时，他便由js/app加载模块文件//这里设置的路径是相对与baseUrl的，不要包含.js
    paths: {app: '../app'}
});

具体步骤如下：

1. 导入requirejs包，设置data－main，data－main是requires的初始化执行文件，需要注意一点，data-main是异步加载的，如果加载了其他的js包，可能会出现加载的先后顺序问题

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

2. 主要函数：

requirejs.config 已经介绍过，不做过多解释

requires：

// 开始逻辑.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($, canvas, sub) {//jQuery, canvas and the app/sub module are all//loaded and can be used here now.
});

define：

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

return {displayWidth:function (a) {console.log(a.offsetHeight)},displayChild:function (o) {console.log(o.childNodes)}}
})

若是模块具有依赖关系，第一个参数应该是一个数组，其项目为依赖名字，第二个参数是匿名函数，匿名函数在依赖项加载结束后会立即加载，函数会返回一个对象用以定义这个模块。

define(function () {//Do setup work herereturn {color: "black",size: "unisize"}
});

这篇关于[前端]requireJS的知识分享的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---