菜鸟requireJS教程---2、基本知识

一、总结

一句话总结:

1、requireJS中的api就define(比如定义自己的函数)和require
2、requireJS使用的话就是配置require.config(main.js中)和调用:require(['jquery', 'angular'], function ($, angular) {
app目录中定义自己的函数util.js
define(['bootstrap'], function () {
return {
change: function () {
$('body').css({'backgroundColor': 'red'});
},
show: function () {
alert('后盾人')
},
message: function () {
alert('houdunren.com')
}
}
});

1、require会定义三个变量:define,require,requirejs(其中require === requirejs,一般使用require更简短),他们 分别是干嘛的?

define:从名字就可以看出这个api是用来定义一个模块
require:加载依赖模块,并执行加载完后的回调函数

2、require加载模块需要注意的?

|||-begin

require(["js/a"],function(){
alert("load finished");
})

|||-end

require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义

3、require的第二个参数callback(一个function)的作用是什么?

|||-begin

require(["js/a"],function(){
alert("load finished");
})

|||-end

是用来处理加载完毕后的逻辑

4、require.config中paths配置多个路径作用以及实例?

作用:如果远程cdn库没有加载成功,可以加载本地的库
实例:"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})

5、requireJS的全局配置在哪个文件中?

main.js:requirejs提供了一种叫"主数据"的功能,main.js,在里面配置

6、requireJS中的main.js的作用是什么?

全局配置,也就是用来存放require.config
require.config({
baseUrl: '../resource/app',
paths: {
'hd': 'hd',
'css': '../lib/css.min',
'jquery': '../lib/jquery.min',
'angular': '../lib/angular.min',
'bootstrap': '../lib/bootstrap.min',
},
shim: {
'hd': {
// exports: 'modal',
init: function () {
return {
modal: modal,
success: success,
}
}
},
//houdunren.com
'bootstrap': {
'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css']
}
}
});

7、script data-main="js/main" src="js/require.js"中data-main的作用是什么?

data-main属性指定的 js 将在加载完 require.js 后处理,也就是先加载requireJS然后配置

8、requireJS中如何定义自己的函数?

比如app目录中定义自己的函数util.js:define(['bootstrap'], function () {
define(['bootstrap'], function () {
return {
change: function () {
$('body').css({'backgroundColor': 'red'});
},
show: function () {
alert('后盾人')
},
message: function () {
alert('houdunren.com')
}
}
});

二、requirejs基本知识

转自或参考:JS模块化工具requirejs教程(二):基本知识 | 菜鸟教程
https://www.runoob.com/w3cnote/requirejs-tutorial-2.html

基本API

require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

  • define 从名字就可以看出这个api是用来定义一个模块
  • require 加载依赖模块,并执行加载完后的回调函数

前一篇中的a.js:

define(function(){
function fun1(){
alert("it works");
} fun1();
})

通过define函数定义了一个模块,然后再页面中使用:

require(["js/a"]);

来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),require API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:

require(["js/a"],function(){
alert("load finished");
})

加载文件

之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
}
})
require(["jquery","js/a"],function($){
$(function(){
alert("load finished");
})
})

这边涉及了require.configrequire.config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的jquery库地址标记为jquery,这样在require时只需要写["jquery"]就可以加载该js,本地的js我们也可以这样配置:

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})

通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})

这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery

  1. 在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀
  2. 上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:
require(["jquery","underscore"],function($, _){
$(function(){
_.each([1,2,3],alert);
})
})

如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解

全局配置

上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})

然后再页面中使用下面的方式来使用requirejs:

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

解释一下,加载 requirejs 脚本的 script 标签加入了data-main属性,这个属性指定的 js 将在加载完 require.js 后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名

data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

require.config({
baseUrl : "js"
})

第三方模块

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方
1. 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置

require.config({
shim: {
"underscore" : {
exports : "_";
}
}
})

这样配置后,我们就可以在其他模块中引用underscore模块:

require(["underscore"], function(_){
_.each([1,2,3], alert);
})
  1. 插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})

也可以简写为:

require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : ["jquery"]
}
})

这样配置之后我们就可以使用加载插件后的jquery了

require.config(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
})

文章来源:https://github.com/liuxey/blog/issues/2

 

菜鸟requireJS教程---2、基本知识的更多相关文章

  1. 菜鸟requireJS教程---1、初识requirejs

    菜鸟requireJS教程---1.初识requirejs 一.总结 一句话总结: Using a modular script loader like RequireJS will improve ...

  2. 【转】JS模块化工具requirejs教程(二):基本知识

    前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基 ...

  3. 【转】JS模块化工具requirejs教程(一):初识requirejs

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  4. Xamarin Android教程Android基本知识版本介绍与系统介绍

    Xamarin Android教程Android基本知识版本介绍与系统介绍 Xamarin Android教程Android基本知识版本介绍与系统介绍,开发Andriod有时候不像iOS一样轻松,因为 ...

  5. Bootstrap框架菜鸟入门教程

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...

  6. JS模块化工具requirejs教程(二):基本知识

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

  7. 菜鸟教程jsonp基础知识讲解

    jsonp是什么? Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...

  8. requirejs教程(一):基本用法

    介绍 RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使 ...

  9. Nodejs从有门道无门菜鸟起飞教程。

    这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...

随机推荐

  1. mybatis-generator遇到到的问题

    1.Unknown system variable 'query_cache_size' https://blog.csdn.net/qq_21870555/article/details/80711 ...

  2. 关于的 let 关键字的一个小问题

    刚才在看阮一峰老师的<ES6标准入门>,在介绍 let 那一段时有这么一段话 我就自己在控制台试了一下这段代码,输出果然的是"abc",于是我就把代码稍微修改了下 也没 ...

  3. python time,calendar,datetime

    time sleep:休眠指定的秒数(可以是小数) localtime:将一个时间戳转换为time.struct_time类型的对象(类似于元组) # 将一个时间戳转换为一个类似于元组的对象,不指定时 ...

  4. 20、Nginx高可用架构

    1.Keepalived高可用基本概述 1.1.什么是高可用 一般是指2台机器启动着相同的业务系统,当有一台机器down机了, 另外一台服务器能快速的接管, 对于访问的用户是无感知的. 1.2.高可用 ...

  5. ShuffleNet系列学习笔记

    ShuffleNet是旷世提出的高效轻量化网络,是一款很值得一提的轻量化网络,其相关论文也是很有价值的. ShuffleNet V1 该网络提出于2017年,论文为<ShuffleNet: An ...

  6. Tomcat各版本及源码包下载

    Tomcat各版本及源码包下载 1.百度 Tomcat 进入官网2.Tomcat 官网地址:http://tomcat.apache.org/3.所有 Tomcat 版本及源码包下载地址:https: ...

  7. 二,kubernetes集群的安装初始化

    目录 部署 集群架构示意图 部署环境 kubernetes集群部署步骤 基础环境 基础配置 安装基础组件 配置yum源 安装组件 初始化 master 设置docker和kubelet为自启动(nod ...

  8. 标准模板库(STL)

    组件: 容器:管理某类对象的集合. 迭代器:用来在一个对象集合内遍历元素. 算法:处理集合内的元素. 容器 序列式容器:顾名思义.array,vector,deque,list 和 forward_l ...

  9. facenet pyhton3.5 训练 train_softmax.py 时报错AttributeError: 'dict' object has no attribute 'iteritems'

    报错原因:在进行facenet进行train_softmax.py训练时,在一轮训练结束进行验证时,报错AttributeError: 'dict' object has no attribute ' ...

  10. Idea 汉化后定位和系统设置打不开到问题

    百度网盘:此汉化包已经修正过,拿来直接可以用 链接:https://pan.baidu.com/s/1wm3NbYSM9Gtsdu2EHQPMIA 密码:qdr3 1.系统设置(setting)外观选 ...