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 的核心库只关注视图层, ...
随机推荐
- DCGAN 论文简单解读
DCGAN的全称是Deep Convolution Generative Adversarial Networks(深度卷积生成对抗网络).是2014年Ian J.Goodfellow 的那篇开创性的 ...
- Windows10 使用docker toolbox安装docker
一.介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间 ...
- Selenium webdriver定位iframe里面元素
在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login"> < ...
- testng生成自定义html报告
转自:https://blog.csdn.net/kdslkd/article/details/51198433 testng原生的或reportng的报告总有些不符合需要,尝试生成自定义测试报告,用 ...
- linux相关命令及配置(四)
Linux第四章课堂笔记一.RPM包管理命令 1.RPM包是本地文件,存在于本地文件中 2.使用RPM命令管理.rpm包 3.挂载光驱 # mount /dev/cdrom /media/ 查看:rp ...
- Java8-6-Predicate接口详解
转自https://segmentfault.com/a/1190000012256677 Predicate函数式接口的主要作用就是提供一个test方法,接受一个参数返回一个布尔类型,Predica ...
- KVM虚拟化环境准备
1. 概述2. 环境准备2.1 硬件环境2.2 软件环境2.2.1 YUM安装软件包2.2.2 环境检查2.2.3 启动libvirtd服务2.3 网络环境2.3.1 复制网卡配置文件2.3.2 修改 ...
- 字符串、List集合、数组互转
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Songti SC"; color: #3933ff } p.p2 { ...
- MIP 组件库升级公告
背景 为了方便广大开发者们更好地使用组件,现对 MIP 组件库统一进行升级,升级后将分为通用组件和自定义组件两类,方便开发. 通用组件,即考虑了组件通用性方便所有开发者参考使用的组件,将存放于 mip ...
- java~springcloud微服务目录索引
回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springcloud微服务~目录索引 springcloud~服务注 ...