require.js简单入门
推荐文章：http://www.ruanyifeng.com/blog/2012/11/require_js.html
1、以下例子主要实现功能，
1）引用jq库获取dom中元素文本，
2）实现并引用去空格工具类trim，
3）最后获取文本并去掉空格后输出，
4）打包js（将所有js文件打包成main.min.js）
1、下载require文件
require.js require主文件
r.js require优化器文件 官网地址：http://requirejs.org/docs/download.html
npm install requirejs2、文件结构
index.html
--js文件夹
jquery.js
main.js
model.js
r.js
require.js
utils.js
3、index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id='test'> asdfasdfasdfasdf </div>
</body> <!-- 压缩js前 -->
<!-- <script src="js/require.js" data-main="js/main" defer async="true"></script> -->
<!-- 压缩js后 -->
<script src="js/require.js" data-main="js/main.min" defer async="true"></script>
</html>
4、model.js (获取ID为test的元素text并返回)
define(['jquery'], function($) {
var add = function() {
return $("#test").text(); };
return {
add: add
};
});
5、utlis.js （定义trim方法）
define(function() {
var utils = {
trim: function(e) {
return e.replace(/(^\s*)|(\s*$)/g, "");
},
ltrim: function(e) {
return e.replace(/(^\s*)/g, "");
},
rtrim: function(e) {
return e.replace(/(\s*$)/g, "");
}
};
return utils;
});
6、main.js （配置引入模块、调用模块）
require.config({
paths: {
"jquery": "jquery",
"model": "model",
"utils": "utils"
}
});
require(['model', 'utils'], function(model, utils) {
console.log(model.add());
console.log(utils.trim(model.add()));
});
7、打包/压缩js文件 （main.js中引入的模块jquery、model、utlis打包成main.min.js）
8、运行效果
require.js简单入门的更多相关文章
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- require.js 简洁入门
原文地址:http://blog.sae.sina.com.cn/archives/4382 前言 提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多 ...
- JS简单入门教程
JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...
- [javascript模块化]require.js简单使用
1.javascript模块规范 CommonJS 主要用于服务器端编程,比如node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用 ...
- [转]Backbone.js简单入门范例
本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...
- angular.js简单入门。
小弟刚接触angular js 就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- anime.js 简单入门教程
anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- npm安装项目出错
F:\ajax>npm install iview --savenpm WARN saveError ENOENT: no such file or directory, open 'F:\aj ...
- springMVC引入Validation详解
本文简单介绍如何引入validation的步骤,如何通过自定义validation减少代码量,提高生产力.特别提及:非基本类型属性的valid,GET方法的处理,validation错误信息的统一re ...
- ORALCE删除临时表空间的方法---解决ORA01033： oralce initialization or shutdown in progress方案
当一台主机上oralce 临时表空间太多,而又用不到这些临时表空间的时候, TABLESPACE 会占用大量的存储空间.本文介绍一种删除ORACLE 临时表空间的方法. 一 启动任务管理器.在任 ...
- JSONUtils.toJSONString的一个坑
JSONUtils.toJSONString(null); //返回一个为"null"的字符串 这样会导致一个结果就是StringUtils.isBlank判断后,会为false ...
- Docker for Windows 使用 VMware WorkStation
一.前言 Docker for Windows 不同于 Docker Toolbox.Docker for Windows 对系统的要求至少为Windows 10专业版,因为它需要Hyper-V的支持 ...
- Python /usr/bin/python
#!/usr/bin/python是告诉操作系统执行这个脚本的时候,调用/usr/bin下的python解释器: #!/usr/bin/env python这种用法是为了防止操作系统用户没有将pyth ...
- Java 读书笔记 (十一) Number & Math 类
所有的包装类(Integer.Long.Byte.Double.Float.Short)都是抽象类Number的子类. 这种由编译器特别支持的包装称为装箱,所以当内置数据类型被当作对象使用的时候,编译 ...
- .net core使用Apollo做统一配置管理
做开发这么多年,经常因配置的问题引发生产环境的bug.有些年久的项目,几百个密密麻麻的配置项,经常容易搞混,有时好几个项目有好多同样的配置项,配置工作也不厌其烦.所幸,携程开源了新一代配置中心 - A ...
- 【Never Stop】联赛集训记录
始于10/01/2017. Day I: T2图论,没想到.T3谜一样DP(是从来没意识到还可以这样). rank10. 下午刷了点题,CDQ也只打出一个板子,感觉自己不在状态? ========== ...
- python中的异常
Python提供了两个非常重要的功能来处理异常和错误: 1) 异常处理try-.except 2) 断言assert 异常和断言,可以用于我们调试python程序,跟踪程序执行状态,尽快排查问题. 3 ...