推荐文章：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 requirejs

2、文件结构

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简单入门的更多相关文章

  1. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  2. require.js 简洁入门

    原文地址:http://blog.sae.sina.com.cn/archives/4382 前言 提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多 ...

  3. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

  4. [javascript模块化]require.js简单使用

    1.javascript模块规范 CommonJS 主要用于服务器端编程,比如node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用 ...

  5. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  6. angular.js简单入门。

    小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...

  7. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  8. anime.js 简单入门教程

    anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...

  9. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. 出现“Unable to resolve target 'android-XXX'”怎么处理？

    这句话的中文意思就是说安卓API版本没有能适配22的,需要将sdk更新一下,必要的话,adt都要跟着更新,但就我尝试来看,还是要先更新adt,然后您或许发现,这个表单好不容易刷出来,但是没有我们想要的 ...

  2. Fastjson 专题

    JSONObject.toJSONString(Object object, SerializerFeature... features) SerializerFeature有用的一些枚举值 Quot ...

  3. 区分getchar(),getch(),getche()三个函数：

    区分getchar(),getch(),getche()三个函数: 第一行是手动输入的,第二行是printf输出的. getch()和getche()这两个函数使用时要包含conio.h头文件: ge ...

  4. SimpleXML系列函数操作XML

    创建SimpleXML对象 种方法来创建对象,分别是: l  Simplexml_load_file()函数,将指定的文件解析到内存中. l  Simplexml_load_string()函数,将创 ...

  5. VM10虚拟机安装图解

    支持32位windows操作系统和64位操作系统的VM10虚拟机 ============= 下载虚拟机: VM10虚拟机下载网址+Vm10的激活秘钥  https://jingyan.baidu.c ...

  6. windows部署SpiderKeeper(爬虫监控)

    最近发现了一个spdierkeeper的库,这个库的主要用途是在于配合这scrpyd管理你的爬虫,支持一键式部署,定时采集任务,启动,暂停等一系列的操作.简单来说将scrapyd的api进行封装,最大 ...

  7. Nodejs.调用Linux命令

    当需要Node.js在后台帮忙运行Linux命令脚本时, 可以用上以下方法 上代码 var spawn = require('child_process').spawn; free = spawn(' ...

  8. JAVA经典算法40题（原题+分析）之原题

    JAVA经典算法40题(上) [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? [程 ...

  9. 【双连通分量】Bzoj2730 HNOI2012 矿场搭建

    Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...

  10. bzoj3236 作业 莫队+树状数组

    莫队+树状数组 #include<cstdio> #include<cstring> #include<iostream> #include<algorith ...