require.js - 详解
测试结构如下

index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script data-main="js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
</head> <body> <!--
版本优化:默认有引入,例如用了jq,就会默认要求加入jquery.js,无需配置.
--> <button id="require">点击require确定啊</button> <input type="text" id="date3" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style="width:166px;height:19px;"> </body> </html>
app.js
requirejs.config({
// 默认项目地址
baseUrl: 'js/lib',
// 路径(可本地可网络)-去除后缀(默认.js),数组可填写多个路径,为了防止cdn突然失效
paths: {
'jquery': ['jquery', 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min'],
'jquery.date': ['jquery.date'],
'math': ['../math']
},
// 依赖(jquery.date就依赖于jquery)
shim: {
'jquery.date': {
deps: ['jquery'],
exports: 'jQuery.fn.date'
}
},
// 控制插件依赖->jq($)
// map: {
// '*': { 'jquery': 'jquery.date' },
// 'jquery.date': { 'jquery': 'jquery' }
// },
// 控制版本号
urlArgs: 'ver=0.0.1',
// 请求等待时间
waitSeconds: 10
});
// app.js可以直接写function和用.
function addCount(x, y) {
return x, y;
}
requirejs(["jquery", "jquery.date"],
function ($) {
// 逻辑代码
$('#require').on('click', function () {
console.log('hehei');
});
// 初始化日期
$.date('#date3');
console.log($);
}
);
// 使用外部的js呢?(很抱歉,得另起一行了)
require(['math'], function (math) {
alert(math.add(1, 1));
});
资料参考于:https://blog.csdn.net/bluesky1215/article/details/71079667、http://www.requirejs.cn/
require.js - 详解的更多相关文章
- require.js详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...
- dev-server.js详解
转载自:https://www.cnblogs.com/ye-hcj/p/7091706.html dev-server.js详解 require('./check-versions')() var ...
- webpack.dev.conf.js详解
转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...
- 【three.js详解之一】入门篇
[three.js详解之一]入门篇 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...
- 【three.js详解之二】渲染器篇
[three.js详解之二]渲染器篇 本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRend ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- JS 详解 Cookie、 LocalStorage 与 SessionStorage-转载
记录一下这些知识,有时候用到会忘记,对原文作者表达感谢. 附上原文链接:JS 详解 Cookie. LocalStorage 与 SessionStorage 基本概念 Cookie Cookie 是 ...
随机推荐
- js面向对象编程(二)构造函数的继承(转载)
Javascript面向对象编程(二):构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继 ...
- 《Java编程思想》笔记 第十一章 持有对象
1.保存对象引用 1.数组,数组具有固定大小 2.容器类,可自动调节大小 2.容器类 List Set Queue Map 及常用的实现类 2.1 Collection (接口) 保存独立的元素 ...
- Redis Hlen 命令用于获取哈希表中字段的数量
http://www.runoob.com/redis/hashes-hlen.html
- 【hdoj_2037】今年暑假不AC
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2037 可以这样理解题意:将每个节目看做是一个区间,起始时间为左右端点,待求的是:最多可以有多少个区间互不相 ...
- 让你的apache支持ipv6
如果你使用的linux系统已经获取到了ipv6地址,你就可以让你的apache htpd 等也支持ipv6. 1.检查linux监听的端口,如果有:::port ,而且获取到了ipv6地址,则可以确定 ...
- 简单DP【p1934】封印
Description 很久以前,魔界大旱,水井全部干涸,温度也越来越高.为了拯救居民,夜叉族国王龙溟希望能打破神魔之井,进入人界"窃取"水灵珠,以修复大地水脉.可是六界之间皆有封 ...
- 和java面试不得不说的故事
一直都没有想到,可以有机会可以面试他人,很感谢现在的公司,给我不少的机会可以尝试从不同方面尝试一些工作,在入职现公司之前也作为面试者参加过不少面试,不过还好,面试通过率都还好,大部分是待遇谈不拢.现在 ...
- python3开发进阶-Django框架起飞前的准备
阅读目录 安装 创建项目 运行 文件配置的说明 三个组件 一.安装(安装最新LTS版) Django官网下载页面 根据官方的图版本,我们下载1.11版本的,最好用! 有两种下载方式一种直接cmd里: ...
- codevs与noi做题改错本目录
从2016.2.13开始: 1. 排序超时的问题---------目录:-测试习题 2. 超高精度乘法超时问题-----------目录:高精度计算 算法:快速傅里叶算法. 压位算法 3. 高精度 ...
- python 使用mysql示例
安装MySQL驱动 由于MySQL服务器以独立的进程运行,并通过网络对外服务,所以,需要支持Python的MySQL驱动来连接到MySQL服务器.MySQL官方提供了mysql-connector-p ...