requireJs快速上手

简介

require.js的主要作用是模块化，规范化js，作为JavaScript脚本加载器，遵循AMD规范；
require.js中提供了优化器可以优化页面中的js脚本和css文件，以提高页面响应速度，减少http请求次数；
可以通过引入一个<script src='require.js' data-main='main.js'></script>加载整个页面；

API中主要函数

define-该函数用于创建模板，每个模板拥有自己唯一的ID。define函数是全局函数，不需要使用requirejs命名空间；
require-该函数用于读取依赖。require函数是全局函数，不需要使用requirejs命名空间；
config-该函数用于配置require路径依赖等信息；

require.config主要参数

baseUrl-配置模块共同的根目录；
paths-配置引入模块地址；
shim-配置引入并没用使用requireJs的初始化函数的模块；
shim.xxx.deps-配置引入模块的依赖；
shim.xxx.exports-当外部引入没有使用requireJs需要暴露一个接口时使用；
shim.xxx.init-当外部引入没有使用requireJs并且需要多个变量暴露的时候使用；

实例：

require.config({baseUrl:'./public/js',path:{add:'add',shortCut:'shortCut',jquery:'jquery',},skim:{shortCut:{exports:'shortCut',deps:'jquery'},jquery:{exports:'jquery'    }    }
})

代码实例

创建index.html并添加<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>创建入口，具体如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><div class="demo">defineDemo</div><button id="button" class="come-on-click">来点一下</button>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>

这里我们需要再创建一个main.js作为整个页面的入口js，具体如图：

(function (global) {"use strict"require.config({paths: {add: "js/define/add",jquery:"js/jquery-3.3.1"},skim:{jquery:{exports:'jquery'}}});require(['add','jquery'],function (add,$) {debugger;var myAdd=add();alert(myAdd.getValue());alert(myAdd.getValue());var button=document.getElementById('button');button.addEventListener('click',function () {alert(myAdd.getValue());global.console.log('hello');});$('.demo').on('mouseenter',function () {alert('');})})})(this)

编写引入的js，样例如下图：

define(function () {var add=function () {this.count=1;};add.prototype={getValue:function () {return this.count++;}}return function (){return new add();};
})

这里return的是一个单例的实例。也可以return new add()。

引入css

requireJs是用于引入js的，如果直接去引入css会报错，但我们可以通过引入插件来解决，如下为require-css.js

define(function () {if ("undefined" == typeof window) return {load: function (e, t, n) {n()}};var e = document.getElementsByTagName("head")[0],t = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/) || 0,n = !1, r = !0;t[1] || t[7] ? n = parseInt(t[1]) < 6 || parseInt(t[7]) <= 9 : t[2] || t[8] ? r = !1 : t[4] && (n = parseInt(t[4]) < 18);var o = {};o.pluginBuilder = "./css-builder";var a, i, s, l = function () {a = document.createElement("style"), e.appendChild(a), i = a.styleSheet || a.sheet}, u = 0, d = [], c = function (e) {u++, 32 == u && (l(), u = 0), i.addImport(e), a.onload = function () {f()}}, f = function () {s();var e = d.shift();return e ? (s = e[1], void c(e[0])) : void(s = null)}, h = function (e, t) {if (i && i.addImport || l(), i && i.addImport) s ? d.push([e, t]) : (c(e), s = t); else {a.textContent = '@import "' + e + '";';var n = setInterval(function () {try {a.sheet.cssRules, clearInterval(n), t()} catch (e) {}}, 10)}}, p = function (t, n) {var o = document.createElement("link");if (o.type = "text/css", o.rel = "stylesheet", r) o.onload = function () {o.onload = function () {}, setTimeout(n, 7)}; else var a = setInterval(function () {for (var e = 0; e < document.styleSheets.length; e++) {var t = document.styleSheets[e];if (t.href == o.href) return clearInterval(a), n()}}, 10);o.href = t, e.appendChild(o)};return o.normalize = function (e, t) {return ".css" == e.substr(e.length - 4, 4) && (e = e.substr(0, e.length - 4)), t(e)}, o.load = function (e, t, r) {(n ? h : p)(t.toUrl(e + ".css"), r)}, o
});

首先和其他js一样的引入require-css.js，并对其进行命名，注意命名不要为css，Css、requireCss等等均可；

 require.config({paths: {add: "js/define/add",jquery:"js/jquery-3.3.1",requireCss:'js/define/require-css'},skim:{jquery:{exports:'jquery'}}});

之后通过require函数引入，不过有点不同的是需要加前缀，前缀为刚刚命名加!，即Css！、requireCss！。

    require(['requireCss!cssDemo']);

现在我们可以愉快的体验css了。

最后提示一下，define函数完全可以替代掉require函数，但是为了语义化一般不这么做，define就是用来创建模板，require就是用来引入并且关联。

requireJs快速上手相关推荐

【快速上手mac必备】常用优质mac软件推荐(音视频、办公、软件开发、辅助工具、系统管理、云存储)
本文章的主要内容是我作为一名大四学生.准程序员.up主这三种身份来给大家推荐一下 mac 上好用的软件以及工具.本人也是从去年9月份开始从windows阵营转移到了mac阵营,刚开始使用的时候,也曾主 ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
『转载』Debussy快速上手（Verdi相似）
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
[转载]ESFramework 4.0 快速上手（15）－－客户端登录验证
ESFramework 4.0 快速上手(15) -- 客户端登录验证在之前版本的Rapid引擎中,是没有提供客户端登陆验证的机制的,如果要验证用户的帐号密码信息,我们只有自己手动通过自定义信息来实 ...
WijmoJS 2019V1正式发布：全新的在线 Demo 系统，助您快速上手，开发无忧
2019独角兽企业重金招聘Python工程师标准>>> 下载WijmoJS 2019 v1 WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发 ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
《Android App开发入门：使用Android Studio 2.X开发环境》——1-3 Android Studio 快速上手...
1-3 Android Studio 快速上手
Keras快速上手：基于Python的深度学习
Keras快速上手:基于Python的深度学习谢梁,鲁颖,劳虹岚著 ISBN:9787121318726 包装:平装开本:16开正文语种:中文出版社: 电子工业出版社出版时间:2017-0 ...
快速上手关键词抽取的算法
前言在自然语言处理领域,我们有一种类型的问题是如何在一堆文本中提取出核心词/句子.而无论是对于长文本还是短文本,往往几个关键词就可以代表整个文本的主题思想.同时,在很多推荐系统中,由于无法直接就整体 ...