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 的核心库只关注视图层, ...
随机推荐
- 那些年，我们追过的RPC
1974年冬,互联网大师 Jon Postel发表了RFC674:“Procedure Call Protocol Documents,Version 2”,尝试定义一种在包含70个节点的网络中共享资 ...
- java的系统时间,怎么计算从现在到凌晨还剩下多少时间？
Apache commons-lang3 long milliSecondsLeftToday = 86400000 - DateUtils.getFragmentInMilliseconds(Cal ...
- OAthe2 Login use OkHttpClient and OAuth2RestTemplate
http://samchu.logdown.com/posts/1437422-oathe2-login-use-okhttpclient-and-oauth2resttemplate?utm_sou ...
- Mabits简单应用 2017.8.3
http://www.cnblogs.com/wushiqi54719880/archive/2011/07/26/2117601.html
- 基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件
原文:http://www.cnblogs.com/hoojo/archive/2013/03/29/openfire_plugin_chatlogs_plugin_.html 随笔-150 评论- ...
- python 写日志
简单配置 日志级别 级别 何时使用 DEBUG 详细信息,典型地调试问题时会感兴趣. INFO 证明事情按预期工作. WARNING 表明发生了一些意外,或者不久的将来会发生问题(如'磁盘满了').软 ...
- cogs 2235 烤鸡翅
贪心,每次如果够直接卖,不够找到之前的卖出的最多的一份,然后反悔 不过反悔的确是很好的策略! #include<cstdio> #include<cstring> #inclu ...
- BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈
BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈 Description 对于一个给定的序列a1,…,an,我们对它进行一个操作reduce(i),该操作将数列中的元素ai ...
- Android圆形头像，拍照后“无法加载此图片”的问题解决（适配Android7.0）
Feature: 点击选择拍照或者打开相册,选取图片进行裁剪最后设置为圆形头像. Problem: 拍好照片,点击裁剪,弹Toast"无法加载此图片". Solution: 在裁剪 ...
- Entity Framework Core 关联删除
关联删除通常是一个数据库术语,用于描述在删除行时允许自动触发删除关联行的特征:即当主表的数据行被删除时,自动将关联表中依赖的数据行进行删除,或者将外键更新为NULL或默认值. 数据库关联删除行为 我们 ...