requireJS简述

requireJS解决的问题

1. 实现js文件的异步加载，避免网页失去响应；
2. 管理模块之间的依赖性，便于代码的编写和维护。

二、require.js 怎么加载

　　<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

　　<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

三、主模块的写法

require.config({
    paths: {
        'jquery': 'jquery'
    }
})

require(['sethtml', 'setfloat'], function(html, float_html) {
    html.html();
    float_html.fthtml();

    console.log('111');
})

sethtml.js 的写法

define([
    'jquery',
], function($) {
    var sethtml = function(){
        $('#id').html('<h2>hello world</h2>')
    }
    
    return {
        html: sethtml
    }

});

setfloat.js的写法

define([
    'jquery',
], function($) {
    'use strict';
    let float_html = function() {
        document.writeln("<div style='width:100px;height:100px;background:red;position:fixed;bottom:0;'>我是底部</div>");
    }

    return {
        fthtml: float_html
    }
});

如上，是最简单的 requirejs的写法。

参考文档： http://www.ruanyifeng.com/blog/2012/11/require_js.html