管理系统如何做模块化开发？

　　最近一直在给公司做各种控件，一开始设计控件的时候，老板要求尽量使用简单，最好是开发人员调用一个方法，控件就可以自动生成。所以在控件设计上，都是基于jquery插件的写法，并把所有的事件都封装到内部，然而随着控件越来越多，应用场景越来越广泛，发现这么设计有很大的弊端，比如：不管什么页面，想要用到控件，要把所有的控件js都加载进来（js是经过压缩的）如下图，由于每个控件耦合度较高，在多个控件组合使用时，代码组织起来相当麻烦。使用上的麻烦，维护上的困难，再加上性能问题，导致不得不对其进行重构。

　　重构思路：基于模块化开发，用reuqirejs进行管理，把每个控件都做成模块化，页面上要使用时，单独的去引用某个模块就可以。多个控件如果要组合使用，以及和页面上的元素做交互的话，在控件名对应的extra.js中去做处理。

      下面就是贴代码时间（由于公司有保密规定，这里不方便把整个代码打包和大家分享，只能展示部分代码）：

   1、工程目录：

 2、ProvinceAndCity.js 省份城市多选控件代码

/**
 * @author:tengri
 * @time:2017-07-26
 * @desc: 酒店城市、省份多选控件
 */

define(["jquery"],function($){

    /**
     * 默认配置参数
     * @type {{}}
     */
    var defaultOpts = {
        simpleData: {
            id: "id",
            name: "name"
        },
        splitStr: "," //分割符
    };

    /**
     * 构造函数
     * @param {Object} options
     * @param {Object} cbFn 回调函数
     */
    function ProvinceAndCity(elem, options, cbFn) {
        this.id = "vetech-provinceAndCity-" + String(Math.random()).replace(/\D/g, "");
        this.elem = elem;
        this.$elem = $(elem);
        this.opts = $.extend(true, {}, defaultOpts, options);
        this.callback = cbFn || $.noop; //回调函数
        this.$hiddenInput = $("#" + (this.opts.hiddenName || ""));
        this.init();
    }

    /**
     * 初始化整个容器
     */
    ProvinceAndCity.prototype.init = function () {
        //外层容器
        this.$container = $('<div class="vetech-provinceAndCity-container">');
        //toolbar
        this.$toolbar = $('<div class="toolbar"></div>');
        this.$toolbar.append('<strong>选择地区</strong><input type="button" value="确定" />');
        //checkedArea
        this.$checkedArea = $('<div class="checkedArea clear">');
        //content
        this.$content = $('<div class="content clear">');
        //cityPanel
        this.$cityPanel = $('<div class="cityPanel">');

        this.$container.append(this.$toolbar).append(this.$checkedArea).append(this.$content);

        $(document.body).append(this.$container);

        this.addEvent();
        this.bindEvent();

    };

    /**
     * 加载数据
     * @param url  可以传一个url地址，也可以传一个数据对象
     * @param callback 回调函数
     */
    ProvinceAndCity.prototype.load = function(url,callback){
        callback = (callback && $.type(callback) === "function") ? callback :function(){};
        var _this = this;
        if($.type(url) === "string"){
            $.ajax({
                url:url,
                data:this.opts.qDatas,
                success:function(data){
                    _this.opts.data = data;
                    callback.call(_this);
                }
            })
        }else{
            this.opts.data = url;
            callback.call(_this);
        }
    };

    /**
     * 渲染
     */
    ProvinceAndCity.prototype.render = function () {
        var provinceData = this.opts.data || [];
        var _this = this;
        $.each(provinceData, function (i, item) {
            var $span = $(addItem.call(_this, item));
            $span.data("citys", item["citys"] || []); //省对应的城市数据
            $span.find(".province").data("data", item); //省的数据
            _this.$content.append($span);

        });
    };

    ProvinceAndCity.prototype.writeValue = function () {
        var _this = this;
        if (this.$hiddenInput.length && this.$hiddenInput.val()) {
            var value = this.$hiddenInput.val();
            value = value.split(this.opts.splitStr);
            //过滤数据，先找出省份，再找出城市
            var provinceDatas = [],
                cityDatas = {}, //城市的用对象字面量来表示
                values = [], //文本框中要显示的信息
                indexName = this.opts.simpleData.id;

            for (var i = 0, len = value.length; i < len; i++) {
                var id = value[i];

                innerNoop://命名内圈语句
                    for (var j = 0, len2 = this.opts.data.length; j < len2; j++) {
                        var provinceItem = this.opts.data[j];
                        if (id === provinceItem[indexName]) {
                            provinceDatas.push(provinceItem);
                            _this.addCheckedItem.call(_this, provinceItem, "province");
                            values.push(provinceItem[_this.opts.simpleData.name]);
                            break;
                        } else {
                            var citys = provinceItem["citys"]; //城市
                            for (var k = 0, len3 = citys.length; k < len3; k++) {
                                var city = citys[k];
                                if (id === city[indexName]) {
                                    cityDatas[city.pid] = cityDatas[city.pid] || [];
                                    cityDatas[city.pid].push(city);
                                    _this.addCheckedItem.call(_this, city, "city");
                                    values.push(city[_this.opts.simpleData.name]);
                                    break innerNoop;
                                }
                            }
                        }
                    }
            }

            this.$elem.val(values.join(this.opts.splitStr));

            //省份回调
            $.each(provinceDatas, function (i, provinceValue) {
                var $span = $("#" + provinceValue[_this.opts.simpleData.id]),
                    $input = $span.find(".province");
                $span.css("color", "orange");
                setChecked($input,true);
                _this.$container.trigger("choose.provinceAndCity", $input);
            });

            //城市进行回调
            $.each(this.$container.find(".province"), function (i, input) {
                var $input = $(input),
                    currData = $input.data("data"),
                    $span = $input.parents(".item"),
                    checkedCitys = cityDatas[currData[_this.opts.simpleData.id]];
                if (checkedCitys) {
                    $span.data("checkedData", checkedCitys);
                    $span.css("color", "orange");
                }
            });
        }
    };

    ProvinceAndCity.prototype.bindEvent = function () {
        var _this = this;
        this.$container.on("click.provinceAndCity", "span.item", function (ev) {
            //由于cityPanel加在span中,所以点击cityPanel中的内容时，也会出发该事件，所以在这里要判断一下
            if ($(ev.target).hasClass("item") || $(ev.target).hasClass("collapse")) {
                _this.$container.find(".detail").hide();
                _this.$container.trigger("expand.provinceAndCity", this);
            }
        }).on("mouseleave.provinceAndCity", "span.item", function () {
            _this.$container.trigger("collapse.provinceAndCity", this);
        }).on("click.provinceAndCity", "input[type='checkbox']", function () {
            _this.$container.trigger("choose.provinceAndCity", this);
        }).on("click.provinceAndCity", ".expand", function () {
            _this.$container.trigger("collapse.provinceAndCity", $(this).parents(".item"));
        });

        this.$checkedArea.on("click.provinceAndCity", ".close", function () {
            _this.$container.trigger("delete.provinceAndCity", $(this).parent());
        });

        this.$toolbar.on("click.provinceAndCity", "input", function () {
            _this.$container.trigger("sure.provinceAndCity");
            _this.hide();
        });


    };

    /**
     * 添加自定义事件
     */
    ProvinceAndCity.prototype.addEvent = function () {
        var _this = this;
        //自定义展开函数(点击省份，展开城市)
        this.$container.on("expand.provinceAndCity", function (e, span) {
            var $span = $(span);
            $span.find(".detail").show();
            _this.$cityPanel.html("");
            $.each($span.data("citys"), function (i, item) {
                var $label = $('<label id="' + item[_this.opts.simpleData.id] + '" class="ellipsis" title="' + item[_this.opts.simpleData.name] + '"><input type="checkbox" />' + item[_this.opts.simpleData.name] + '</label>');
                $label.find("input").data("data", item);
                _this.$cityPanel.append($label);
            });
            //展开城市的时候，要进行回填
            if ($span.find(".province").is(":checked")) {
                var $inputs = _this.$cityPanel.find("input");
                setChecked($inputs,true);
                $inputs.attr("disabled","disabled");
            } else {
                var tempData = $span.data("checkedData") || [];
                $.each(tempData, function (i, item) {
                    setChecked(_this.$cityPanel.find("#" + item[_this.opts.simpleData.id]).find("input"),true);
                });
            }

            $span.append(_this.$cityPanel.show());
        });

        //自定义折叠函数（点击折叠，关闭城市弹出层）
        this.$container.on("collapse.provinceAndCity", function (e, span) {
            var $span = $(span);
            $span.find(".detail").hide().end().find(".cityPanel").hide();
        });

        //input checked事件
        this.$container.on("choose.provinceAndCity", function (e, input) {
            var $span = $(input).parents(".item"),
                $input = $(input),
                currData = $input.data("data"); //当前选择的input框对应的数据值
            if ($input.hasClass("province")) {
                if ($input.is(":checked")) {
                    var $inputs = _this.$cityPanel.find("input");
                    setChecked($inputs,true);
                    $inputs.attr("disabled","disabled");
                    $span.data("checkedData", []); //清除选中的data
                    _this.addCheckedItem.call(_this, currData, "province");
                } else {
                    var $inputs = _this.$cityPanel.find("input");
                    setChecked($inputs,false);
                    $inputs.removeAttr("disabled");
                    $.each(_this.$checkedArea.find(".checkedItem"), function (i, item2) {
                        var $item = $(item2),
                            td = $item.data("data");
                        if (currData[_this.opts.simpleData.id] === td[_this.opts.simpleData.id]) $item.remove();
                    });
                }

            } else {
                var tempData = $span.data("checkedData") || [];
                if ($input.is(":checked")) {
                    //把选择的城市放入缓存
                    tempData.push(currData);
                    _this.addCheckedItem.call(_this, currData, "city");
                } else { //当没有选中的时候，要在数据缓存中过滤掉被取消勾选的数据
                    var newData = tempData;
                    tempData = [];
                    $.each(newData, function (i, item) {
                        if (currData[_this.opts.simpleData.id] !== item[_this.opts.simpleData.id]) {
                            tempData.push(item);
                        } else {
                            $.each(_this.$checkedArea.find(".checkedItem"), function (i, item2) {
                                var $item = $(item2),
                                    td = $item.data("data");
                                if (item[_this.opts.simpleData.id] === td[_this.opts.simpleData.id]) $item.remove();
                            });
                        }
                    });
                }
                $span.data("checkedData", tempData);
            }
        });

        //删除操作（拿到所有省的节点，判断当前删除的是不是省的数据，如果是省的数据，直接删除已经选择的节点，把该省对应的checkbox设置为不选中并执行choose.provinceAndCity函数，如果不是省的数据，则要遍历每个省下面的缓存已选中的城市，并踢出该城市）
        this.$container.on("delete.provinceAndCity", function (e, span) {
            var currData = $(span).data("data");
            $.each(_this.$container.find(".province"), function (i, input) {
                var $input = $(input);
                var tempData = $input.data("data");
                if (currData[_this.opts.simpleData.id] === tempData[_this.opts.simpleData.id]) {
                    setChecked($input,false);
                    _this.$container.trigger("choose.provinceAndCity", input);
                }

                var $pSpan = $input.parents(".item");
                var newData = [];
                $.each($pSpan.data("checkedData") || [], function (i, itemValue) {
                    if (itemValue[_this.opts.simpleData.id] !== currData[_this.opts.simpleData.id]) {
                        newData.push(itemValue);
                    }
                });
                $pSpan.data("checkedData", newData);
            });
            $(span).remove();
        });

        //确认操作
        this.$container.on("sure.provinceAndCity", function () {
            var resultData = [],
                ids = [],
                values = [];
            $.each(_this.$checkedArea.find(".checkedItem ") || [], function (i, item) {
                var itemValue = $(item).data("data");
                ids.push(itemValue[_this.opts.simpleData.id]);
                values.push(itemValue[_this.opts.simpleData.name]);
                resultData.push(itemValue);
            });

            _this.$elem.val(values.join(_this.opts.splitStr));
            _this.$hiddenInput.length && _this.$hiddenInput.val(ids.join(_this.opts.splitStr));
            //执行回调
            _this.callback(resultData);
        });

    };

    /**
     * 添加选择的项目
     * @param {Object} data
     * @param {Object} type
     */
    ProvinceAndCity.prototype.addCheckedItem = function (data, type) {
        var needAdd = true; //标记是否需要添加
        if (type === "province") {
            //先检查已经选择的数据中，是否有省内的城市，如果有省内城市，则清除
            var id = this.opts.simpleData.id;
            $.each(this.$checkedArea.find(".checkedItem"), function (i, item) {
                var $item = $(item),
                    tempData = $item.data("data");
                if (tempData["pid"] === data[id]) {
                    $item.remove();
                }else if(tempData[id] === data[id]){
                    needAdd= false;
                    return false;
                }
            });
        }
        needAdd &&  this.$checkedArea.append(createCheckedItem.call(this, data));
    };

    function createCheckedItem(data) {
        var $span = $('<span class="checkedItem ellipsis">' + data[this.opts.simpleData.name] + '<i class="close"></i></span>');
        $span.data("data", data);
        return $span;
    }

    /**
     *显示
     */
    ProvinceAndCity.prototype.show = function () {
        this.setPos();
        this.$container.css("visibility", "visible");
    };


    ProvinceAndCity.prototype.setPos = function () {
        var pointer = this.$elem.offset();
        this.$container.css({"left": pointer.left, "top": pointer.top + this.$elem.outerHeight()});
    };

    ProvinceAndCity.prototype.hide = function () {
        this.$container.css({"visibility": "hidden", "left": "-1000px", "top": "-1000px"});
    };

    ProvinceAndCity.prototype.destroy = function () {
        //移除该控件绑定的所有的事件
        this.clear();
        this.$container.remove();
        delete this;
    };

    ProvinceAndCity.prototype.clear = function(){
        this.$container.off(".provinceAndCity");
        this.$checkedArea.off(".provinceAndCity");
        this.$toolbar.off(".provinceAndCity");
    };


    /**
     * 添加item
     * @param {Object} item
     */
    function addItem(item) {
        return '<span class="item" id="' + item[this.opts.simpleData.id] + '">' +
            '<i class="collapse"></i>' + item[this.opts.simpleData.name] + '' +
            '<div class="detail">' +
            '<i class="expand"></i>' +
            '<label class="ellipsis"><input type="checkbox" class="province"  value="' + item[this.opts.simpleData.id] + '" />' + item[this.opts.simpleData.name] + '</label>' +
            '</div>' +
            '</span>';
    }

    /**
     * 设置选中
     * @param $inputs
     * @param state
     */
    function setChecked($inputs,state){
        $.each($inputs, function(i,input) {
            input.checked = state;
        });
    }


    return ProvinceAndCity;
});

3、provinceAndCityExtra.js 代码的二次封装

/**
 * Created by zh on 2017/8/11.
 * @desc:酒店身份城市多选控件封装
 */
define(["jquery","js/core/ProvinceAndCity"],function($,ProvinceAndCity){
    var data = ssqx;
    var provinceData = data[0].data,
        cityData = data[1].data;

    var newData = [];
    $.each(provinceData, function(i,item) {
        item.type = "p";
        item.citys = getCitysByProvinceId(item.id,cityData);
        newData.push(item);
    });
    delete data;
    delete provinceData;
    delete cityData;


    $.fn.showProvinceAndCity = function(options,cbFn){

        var pc = new ProvinceAndCity(this.get(0),options,cbFn);

        pc.load(newData,function(){
            this.render();
            this.writeValue();
        });

        this.on("click",function(){
            pc.show();
        });
    };


    function getCitysByProvinceId(pId,cityData){
        var cityDatas = [];
        $.each(cityData, function(i,item) {
            if(item.pid === pId){
                item.type ="c";
                cityDatas.push(item);
            }
        });
        return cityDatas;
    }

});

4、页面入口文件main.js

/**
 * Created by zh on 2017/8/11.
 */
requirejs.config({
    baseUrl:"http://localhost:63343/WS_webStorm/components/",  //后面应用到项目中，会是项目的一个地址，用全局变量basePath代替
    paths:{
        "jquery":"lib/jquery-1.9.1",
        "hotel":"js/fl/hotel/",
        "common":"js/fl/common/"
    }
});


require(["jquery","hotel/provinceAndCityExtra","common/yearAndMonthExtra"],function($,b){

    $("#txt1").showProvinceAndCity({
        hiddenName:"txt2"
    },function(data){
        console.log(data);
    });


    $("#yearAndMonthDiv").showYearAndMonth({
        startTime:1933,
        disabledLater:true,
        yearName:"year",
        montName:"month"
    },function(select,value){
        console.log(select);
        console.log(value);
    });



});

5、页面文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>所有控件例子入口</title>
        <link rel="stylesheet" type="text/css" href="../css/provinceAndCity.css"/>

        <!--这里是静态数据文件，模拟ajax请求-->
        <script type="text/javascript" src="../data/ssqx.js" ></script>
        <script type="text/javascript" src="../lib/require.js" data-main="main"></script>

    </head>
    <body>
        <h1>酒店省份和城市多选控件</h1>
        请选择省市：<input type="text" id="txt1" /><input type="text" id="txt2" value="10114,10113,10435,10333,02013,10176,10452,10858,10189,10216,10444,02028"  />
        <h1>年月控件</h1>
        <div id="yearAndMonthDiv"></div>

    </body>
</html>

6、效果图：

以上看似风平浪静，顺理成章。然而，突然眉头一紧，模块化以后，拆分了这么多js文件，怎么进行压缩合并呢？

先在requirejs官网上找了一把，看到了r.js，然后再一搜索，找到了一篇文章。地址：http://www.oschina.net/translate/optimize-requirejs-projects

真是柳暗花明又一村，二话不说，直接跟着文章上的描述开始操作，一把成功。截图如下：

然

并

卵。。。。。。。

我司项目都是管理型的后台项目，又是十几个产品线在一起的，每个产品线又有几十个甚至上百个jsp文件。按照requirejs提供的压缩方式（根据入口函数，把每个页面需要的模块合并压缩到main.js中）,我这要如何去做？难道每次新增一个入口函数，就要去改build.js配置文件？我在想，是否有自动化构建的工具呢，可以直接根据每个文件夹下的main.js文件进行打包呢？还是说有更好的办法？

我已黔驴技穷，但是我相信互联网的力量。我想正在看的你，还有即将看的你，肯定会有自己的想法，那为什么不留下你的想法和交流方式呢？山不转水转，说不定哪天我们又有缘相见呢？

 

求赐教！！！