require.js簡單入門

本文轉載自查看原文 2017-05-27 17:31 4580 JavaScript

推薦文章：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、運行效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 require.js入門（一） require.js入門 require.js 簡潔入門 require.js快速入門 require.js的簡單使用 require.js 入門學習（share） Require.js 如何使用require.js? 深入Require.js require.js的使用