云平台项目--学习经验--打包压缩工具requirejs
requirejs是一个JavaScript模块加载器。适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
如何加载RequireJS呢?
假如项目中的JS都放在一个"script"目录下,例如有个index.html和一些script,则该布局如下:
项目目录:
·index.html
·scripts/
·main.js
·helper/
·until.js
添加require.js到scripts目录下,则该目录如下:
·index.html
·scripts/
·main.js
·require.js
·helper/
·until.js
为了充分利用该优化工具,可将所有的scripts放到HTML外面,然后只引用RequireJS来请求加载其他script:
可以只写一个main.js,通过它来加载你所需要运行的scripts,这可以保证你所需要的Scripts都是在这里加载的。
例如:
<!DOCTYPE html>
<html>
<head>
<title>REQUIREJS</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>test</h1>
</body>
</html>
RequireJS以一个相对baseUrl的地址来加载所有代码,页面顶层<script>标签含有一个特殊的属性data-main,require.js用它来启动脚本加载过程,而baseUrl一般设置与该属性相一致的目录。下列示例中展示了baseUrl的设置:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
baseUrl可以通过RequireJS config手动设置。如果没有显式指定config以及data-main,默认boseUrl包含RequireJS那个HTML页面所属的目录。
实际应用中,可将项目库和第三方库分开,为一扁平结构。
如:
·index.html
·js/
·app/ *项目库*
·sub.js
·lib/ *第三方库*
·jquery.js
·canvas.js
·app.js
则index.html:
<script data-main="js/app.js" src="js/require.js"></script>
app.js:
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
});
requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
});
在实际项目中,是这样的:
·web/
·default.html
·js/
·第三方库
·module_js/
·原生js
·main.js
在main.js中,首部写法如下:
require(["Log","Play"....],function(doc,inc,Log....){内容函数}); //注意没有后缀
而在default.html中,首部写法如下:
通过定义一个require:
var require = {
baseUrl: "module_js", //baseUrl
urlArgs: '1.8.4',
map:{
"*":{
css:"../js/css"
}
}
};
require.paths={
"jasmine":"../spec/jasmine-2.5.2/jasmine",
"jasmine-html":"../spec/jasmine-2.5.2/jasmine-html",
"runJasmine":"../spec/test/run",
"jquery":"../js/jquery.min",
....................
};
云平台项目--学习经验--打包压缩工具requirejs的更多相关文章
- 云平台项目--学习经验--jsrender前端渲染模板
jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...
- 云平台项目--学习经验--BootstrapValidate表单验证插件
使用前提,需要加载jquery和bootstrap库.并且引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单,添加表单控件,表单控 ...
- 云平台项目--学习经验--回调函数中call和apply
Js中可以通过call和apply来代替另一个对象调用一个方法,将一个函数对象上下文从初始上下文改变为thisObj指定的新对象.简而言之,改变函数执行的上下文,而call和apply的基本区别在于他 ...
- TensorFlow-谷歌深度学习库 手把手教你如何使用谷歌深度学习云平台
自己的电脑跑cnn, rnn太慢? 还在为自己电脑没有好的gpu而苦恼? 程序一跑一俩天连睡觉也要开着电脑训练? 如果你有这些烦恼何不考虑考虑使用谷歌的云平台呢?注册之后即送300美元噢-下面我就来介 ...
- .Net 分布式云平台基础服务建设说明概要
1) 背景 建设云平台的基础框架,用于支持各类云服务的业务的构建及发展. 2) 基础服务 根据目前对业务的理解和发展方向,总结抽象出以下几个基础服务,如图所示 3) 概要说明 基础服务的发展会根 ...
- 将Java应用部署到SAP云平台neo环境的两种方式
方法1 - 使用Eclipse Eclipse里新建一个服务器: 服务器类型选择SAP Cloud Platform: 点Finish,成功创建了一个Server: Eclipse里选择要部署的项目, ...
- .Net语言 APP开发平台——Smobiler学习日志:在应用中添加WeiXin组件
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 控件说明 WeiXin组件. 效果演示 1. 分享好友 2. 分享朋友圈 图1 图2 ...
- ITOO高校云平台之考评系统项目总结
高校云平台,将云的概念引入到我的生活, 高校云平台主要是以各大高校的业务为基础设计开发,包含权限系统,基础系统.新生入学系统.考评系统,成绩系统.选课系统,视频课系统.3月份參加云平台3.0的开发,至 ...
- Redis学习总结(八)--Redis云平台
在实际生产环境中通过命令行的形式去进行集群的管理是一件很繁琐并且容易出现错误的事情,所以就引入了云平台的概念. 什么是云平台 Redis 云平台是指通过 BS 等架构实现对 Redis 的管理和监控. ...
随机推荐
- swift类型擦除的定义-swift的类型擦除只是一个类型高低阶转换的游戏。
所谓swift的类型擦除是指: moand转换: 通过技术手段(通常是包装器),将具体类型的类型信息擦除掉了,只将类型的(某一个侧面的)抽象信息(通常指的是类型尊从的协议.接口.或基类)暴露出来. A ...
- Android MaterialDesign之水波点击效果的几种实现方法
什么是水波点击的效果? 下面是几种不同的实现方法的效果图以及实现方法 Video_2016-08-31_003846 如何实现? 方法一 使用官方提供的RippleDrawable类 优点:使用方 ...
- c++ ActiveX基础1:使用VS2010创建MFC ActiveX工程项目
1.ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能独立运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括WEB网页,应用程序窗体等... Activ ...
- 谈谈HTTP
HTTP又称超文本传输协议,在互联网上广为流传和应用. 今天主要讲这么几个? a.针对HTTP下细分为: HTTP概念.Request和Response详解.Request中GET和POST的区别.说 ...
- Python:基础知识
python是一种解释型.面向对象的.带有动态语义的高级程序语言. 一.下载安装 官网下载地址:https://www.python.org/downloads 下载后执行安装文件,按照默认安装顺序安 ...
- Jmeter—控件
Jmeter有许多控件,可以在我们模拟测试请求时使用. Jmeter共有这8类控件: 配置元件—Http请求默认值 作用:仅设置一次目标URL服务器地址,之后不需要每次请求都写完整的,仅写相对地址就可 ...
- 文件I/O(2)
文件I/O(2) 文件共享 内核使用三种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对还有一个进程可能产生的影响.如图1所看到的. 1) 每一个进程在进程表中都有一个记录项.记 ...
- mysql事务,select for update,及数据的一致性处理
在MySQL的InnoDB中,预设的Tansaction isolation level 为REPEATABLE READ(可重读) 在SELECT 的读取锁定主要分为两种方式: SELECT ... ...
- [python]记录Windows下安装matplot的经历
最近学习在看<机器学习实战>一书,第二章的时候要用到Natplotlib画图,于是便开始安装Matplotlib.本文所用到的所有安装包都可以在文末的链接中找到. 首先从Matplotli ...
- VBA how to crack Excel Password
来源 更多vba相关 vba教程 VBA cheat sheet 1. VBA how to crack Excel Workbook/Worksheet password To remove the ...