美文网首页
使用requirejs搭建前端项目

使用requirejs搭建前端项目

作者: 杜文斌 | 来源:发表于2018-04-17 17:54 被阅读0次

    本文主要是讲述如何使用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文件:

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

    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 = $("<div>").addClass('sider left').prop('id', 'sider');
    
                var right = $("<div>").addClass('right');
                var header = $("<div>").prop('id', 'header');
                var content = $("<div>").prop('id', 'content');
                var footer = $("<div>").prop('id', 'footer');
                right.append(header, content, footer);
    
                $("#main").append(left, right);
            }
        }
    
        return new main();
    });
    

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

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

    相关文章

      网友评论

          本文标题:使用requirejs搭建前端项目

          本文链接:https://www.haomeiwen.com/subject/crddhftx.html