推荐文章：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. VirtualBox报错：不能为虚拟电脑XXX打开一个新任务

    报错产生的背景 今天在这里下载了一个用于VirtualBox的Kali Linux虚拟机文件(使用VirtualBox可以直接打开使用,不用执行安装过程).但是将该文件导入到VirtualBox中之后 ...

  2. 安装mysql5.5.28的步骤 2017.6.27

    http://blog.sina.com.cn/s/blog_7cd69a6501014x7h.html

  3. Java VisualVM无法检测到本地java程序 的 解决办法

    win10系统下启动jvisualvm应用,报"VisualVM无法检测到本地java程序"的错误!在网上查了一些方法, 大概原因有2种: 1.操作系统的临时文件目录所在的磁盘格式 ...

  4. 玩转Spring MVC(三)----spring基本配置文件

    这篇文章总结一下spring mvc的基本配置,首先贴一张我的项目的目录截图,有一些多余的文件,大家不必在意: 用到的一些jar包在这:<a>http://download.csdn.ne ...

  5. 搭建 vue2 单元测试环境(karma+mocha+webpack3)

    从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...

  6. Java基础系列--基础排序算法

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9082138.html 一.概述 基础排序算法包括:桶排序.冒泡排序.选择排序.插入排序等 ...

  7. 虚拟机console基础环境配置——安装VMware Tools

    1. 虚拟机设置中点击安装2. 虚拟机中挂载VMware Tools镜像3. 解压安装4. 配置共享目录5. 有关VMware Tools 1. 虚拟机设置中点击安装 VMware workstati ...

  8. 英国毕业原版-《伯明翰大学毕业证书》UoB一模一样原件

    ☞伯明翰大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...

  9. openoffice转换pdf 异常问题查找处理 errorCode 525

    could not save output document; OOo errorCode: 525 该问题是由于java程序和openoffice的启动所属用户不同导致.使用以下命令查看端口和进程 ...

  10. SpringBoot---页面跳转之WebMvcConfigurerAdapter

    摘要:在springboot中定义自己的方法继承WebMvcConfigurerAdapter方法可以实现扩展springMvc功能,要全面实现接管springmvc就要在自己的方法上加上@Enabl ...