require.js简单入门

时间 2019-11-16

标签 require.js require 简单入门栏目 JavaScript 繁體版

原文原文链接

推荐文章：http://www.ruanyifeng.com/blog/2012/11/require_js.htmlhtml

一、如下例子主要实现功能，jquery

　　1）引用jq库获取dom中元素文本，nginx

　　2）实现并引用去空格工具类trim，npm

　　3）最后获取文本并去掉空格后输出，dom

　　4）打包js（将全部js文件打包成main.min.js）async

一、下载require文件工具

require.js         require主文件
r.js               require优化器文件

官网地址：http://requirejs.org/docs/download.html

npm install requirejs

二、文件结构requirejs

index.html

        --js文件夹
    
                jquery.js
                main.js   
                model.js
                r.js
                require.js
                utils.js

三、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>

四、model.js　　(获取ID为test的元素text并返回)ui

　　
define(['jquery'], function($) {　　　　
    var add = function() {　　　　　
        return $("#test").text();

    };　　　　
    return {　　　　　　
        add: add　　　　
    };
});

五、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;
});

六、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()));
});

七、打包/压缩js文件　　（main.js中引入的模块jquery、model、utlis打包成main.min.js）

八、运行效果

1. require.js 简洁入门
2. require.js入门（一）
3. require.js入门
4. require.js快速入门
5. require.js 入门学习
6. require.js的简单使用
7. require.js 入门学习－备
8. Require.js入门讲解(一）
9. require.js 入门学习（转）
10. require.js入门指南(三)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• ionic 表单和输入框 - ionic 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用