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 的核心库只关注视图层, ...
随机推荐
- 按钮组，导航条选中其中一个后添加Class突出元素
$(document).on("click",".modalnavtop",function(e){ $(".modalnavtop").e ...
- [Linux]Linux 下的 Docker 安装与使用
一.安装与配置 1.设置阿里云镜像源 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/cen ...
- Netty 学习 一、初识Netty【原创】
在过去几年的工作和学习中,比较关注高层次的应用开发,对底层探究较少.实现Web应用的开发,主要依赖Tomcat.Apache等应用服务器,程序员无需了解底层协议,但同样限制了应用的性能和效率.现在开始 ...
- 深入理解Java：内省(Introspector)
深入理解Java:内省(Introspector) 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传 ...
- 阅读nsq源码 ---初步架构设计图
- fasthttp中的协程池实现
fasthttp中的协程池实现 协程池可以控制并行度,复用协程.fasthttp 比 net/http 效率高很多倍的重要原因,就是利用了协程池.实现并不复杂,我们可以参考他的设计,写出高性能的应用. ...
- copy.copy()与copy.deepcopy()的详解
copy.copy() 元组和列表调用这个方法效果也不一样. 元组的效果: a = [1,2,3] b = [4,5,6] c = (a,b) e = copy.copy(c) 可以看到:e和c是指向 ...
- [Poi2012]Festival 差分约束+tarjan
差分约束建图,发现要在每个联通块里求最长路,600,直接O(n3) floyed #include<cstdio> #include<cstring> #include< ...
- 【功耗测试环境预置自动化脚本开发】【切换wifi模式为siso模式】【用到方法*args】
import os,reimport logginglogging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[ ...
- ruby整理
参考博客:https://www.cnblogs.com/felixzh/p/8081622.html 官网地址 https://rvm.io/rvm/install 一.前提 centos6.8下 ...