使用requirejs搭建前端项目

本文主要是讲述如何使用requirejs这个模块化管理工具来搭建前端项目结构，适合内网开发以及还在使用比较旧的技术栈（如jQuery）的前端同学。
github地址：https://github.com/duwenbin0316/Requirejs-demo.git，如果对你有帮助，请点个star，谢谢！
requirejs的使用我就一笔带过，主要是讲如何搭建项目结构。
项目基本目录结构如下：

项目目录结构

根目录下有index.html文件和scripts文件夹，我们把css文件和js文件放在一起处理，components目录下按照页面结构定义文件夹结构，例如footer文件夹就是用来处理页面footer的模块，文件夹中包括footer.js和footer.css文件，如果还需要拆分子组件，则继续嵌套即可。
这种目录结构的好处在于实现了模块功能和样式的高内聚，符合模块化开发的高内聚低耦合思想，项目也更容易维护。

在index.html中引入requirejs本身以及主js文件：

index.js定义了模块的名称和路径，以及模块所需的依赖，并调用了main模块的start方法：

require.config({
    baseUrl: "scripts/",
    map: {
        '*': {
            'css': 'lib/css.min'
        }
    },
    paths: {
        "jquery": "lib/jquery-2.1.4.min",
        "main": "main"
    },
    shim: {
        "main": {
            deps: ['jquery', 'css!./main.css']
        }
    }
})

require(['main'], function(main){
    main.start()
})

main.js为应用主模块，调用main.start()执行应用初始化，所有的dom创建都在模块内部处理，index.html中只有一个div#main的dom元素。main.js内容如下：

/**
 * 定义一个main模块
 */
define(function() {
    var main = function() {
        this.moduleName = 'main'
    }
    
    main.prototype = {
        start: function() {
            // 渲染页面布局
            this.renderLayout();

            // 调用header的start，渲染header内容
            require(['header'], function(header){
                header.start();
            })
        },

        renderLayout: function() {
            var left = $("
").addClass('sider left').prop('id', 'sider');

            var right = $("
").addClass('right');
            var header = $("
").prop('id', 'header');
            var content = $("
").prop('id', 'content');
            var footer = $("
").prop('id', 'footer');
            right.append(header, content, footer);

            $("#main").append(left, right);
        }
    }

    return new main();
});

同时在main.js中调用了header模块的start方法。

项目结构按照该思路一层一层构建，简单明了，当然也可以根据个人习惯提取出一些通用的组件，本文就不再赘述。