JavaScript 基于 CMD(seaJs) 封装的通用搜索模块
   5 分钟阅读

解决问题:简化页面中的搜索功能的代码实现;

应用场景:很多模块,大多数的搜索逻辑都是差不多的 ;比如输入框搜索、按照月份搜索,按照 Selected/tab 筛选;搜索在浏览器上的表现是,用户按照单个或多个条件搜索,回车,或者点击搜索按钮可以进行数据的筛选(通过 URL 中带参数的形式)

可能存在的页面如下;

设置的使用的方法:

配置好参数,就可以直接用了;
假如开发者配置的时候,某些参数配置,不小心配置错了;console 提醒下,哪个属性配置错了,导致了什么问题;

首先需要一个 config 页面;为了避免和别的模块发生冲突;我起名了 searchConfig;

模块的配置如下;

URL 可能在两种,一种是直接某某下面的页面、也可能是某某下面页面,搜索的某个 ID 下,在这个页面内的搜索;比如某某代理商的某页面下,参数中可能会存在 xxx?id=111 这种情况;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var searchConfig={
    "url"       :"/orchard/distributors",//跳转的URL  如/orchard/distributors  或 /orchard/distributors?id=111111
    "searchBtn" :"#search", //触发 搜索   的按钮
    "resetBtn"  :"#reset",  //触发 初始化 的按钮
    "data":[
        {
            "key"       :"merchant_id",
            "type"      :"input",//input/tab/month/checkbox
            "location"  :"#keyword"
        },
        {
            "key"       :"status",
            "type"      :"tab",//input/tab/month/checkbox
            "location"  :"#card_status"
        },
        {
            "key"       :"is_good",
            "type"      :"checkbox",//input/tab/month/checkbox
            "location"  :"#is_good_store"
        },
        {
            "key"       :"month",
            "type"      :"month",//input/tab/month/checkbox
            "location"  :"#month-picker",
            "form"      :"2016-11"
        }
    ]
};

封装好的代码的结构如下:

开发者配置出错时候,如下;


代码如下:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
define(function(require,exports,module){
    "require:nomunge,exports:nomunge,module:nomunge";
    /*********************searchConfig的说明和格式DEMO******************/
    /*
    * 变量 searchConfig 是页面中配置的;
    *
    * data.key 说明   [*必须]
    *   内容:如果是"merchant_id",则跳转的url里是 "merchant_id=xxxxxx"这种格式;
    *
    * data.type 说明  [*必须]
    *   内容:input/tab/month/day/select/checkbox
    *       input   :比如用户的ID搜索
    *       tab     :比如状态的筛选(全部/正常/禁用)
    *       month   :月份的筛选
    *       checkbox:筛选的checkbox
    *
    * data.location 说明  [*必须]
    *   格式:"#keyword"或".class-name" 其中"#"代表id名;"."代表是class名;(推荐使用ID,如果使用class,请保证当前页面class唯一)
    *       如果是input类型  ,写input的id/class;
    *       如果是tab类型    ,请写"filter-select"上面的的id/class;
    *       如果是month类型  ,请写隐藏input的ID,一般是 "#month-picker" ;
    *       如果是checkbox类型,请写当前input标签上的id/class;
    *
    * data.form [非必须]
    *   格式:如果是month类型,通过这个参数 可以限制的最小开始月份,默认从"2017-06"开始
    *
    * 如果是用 month 这个类型,需要在页面引入下面这个样式;
    <link href="http://a.f265.com//module/month-picker/css/month-picker.css" rel="stylesheet" type="text/css">
    *
    * 如果用data 这个类型,需要在页面引入下面这个样式;
    <link href="http://a.f265.com/module/daterangepicker/css/daterangepicker.css" rel="stylesheet" type="text/css" />
    * */

    //TODO:演示DEMO;
    /*
        var searchConfig={
            "url"       :"/orchard/distributors",//跳转的URL  如/orchard/distributors  或 /orchard/distributors?id=111111
            "searchBtn" :"#search", //触发 搜索   的按钮
            "resetBtn"  :"#reset",  //触发 初始化 的按钮
            "data":[
                {
                    "key"       :"merchant_id",
                    "type"      :"input",//input/tab/month/checkbox/date
                    "location"  :"#keyword"
                },
                {
                    "key"       :"status",
                    "type"      :"tab",//input/tab/month/checkbox/date
                    "location"  :"#card_status"
                },
                {
                    "key"       :"is_good",
                    "type"      :"checkbox",//input/tab/month/checkbox/date
                    "location"  :"#is_good_store"
                },
                {
                    "key"       :"month",
                    "type"      :"month",//input/tab/month/checkbox/date
                    "location"  :"#month-picker",
                    "form"      :"2016-11"
                },
                {
                    "key"       :"start_date",
                    "type"      :"date",//input/tab/month/checkbox/date
                    "location"  :"#custom-date"//开始日期就是这个input的value值;
                }
            ]
        };

    */

    /******************************正文开始*******************************/

    var MonthPicker,Daterangepicker;
    var $body=$("#bodyer");
    var pageSearch={};

    //计算搜索的默认值
    function computerDefaultVal($el,type) {
        switch(type) {
            case "input":
                return $el.val();
            case "tab":
                return $el.find("li").filter(".active").find("a").data("state");
            case "month":
                return $el.val();
                break;
            case "date":
                return $el.val();
                break;
            case "checkbox":
                return $el.is(":checked") ? 1 : 0 ;
            default:
                console.info("searchConfig中有非法的type:"+type+",请检查是否拼写错误。对应元素是",$el[0]);
                return "this_value_is_undefined";
        }
    }
    //根据类型,生成不同的事件;
    function creatEventBaseType(tempItem) {
        switch(tempItem.type) {
            case "input":
                return function () {
                    $body.on("keypress",tempItem.location,function(e){
                        e = e || window.event;
                        if (e.keyCode==13){
                            tempItem.varName = $(this).val();
                            pageSearch.searchModule()
                        }
                    });
                    $body.on("blur",tempItem.location,function(e){
                        tempItem.varName = $(this).val();
                    });
                };
            case "tab":
                return function () {
                    $body.on("click",tempItem.location+" .filter-item",function(e){
                        e.preventDefault();
                        tempItem.varName=$(this).find("a").data("state");
                        pageSearch.searchModule();
                    });
                };
            case "month":
                return function () {
                    MonthPicker = require("month-picker");
                    var monthPicker = new MonthPicker({
                        el: tempItem.location,
                        from: tempItem.form||"2017-06",
                        to: true,
                        onSelect: function () {
                            tempItem.varName = this.value;
                            pageSearch.searchModule();
                        }
                    });
                };
            case "date":
                return function () {
                    Daterangepicker = require("daterangepicker");
                    var isSingle=true;
                    var daterange = new Daterangepicker(tempItem.location, {
                        "autoUpdateInput": false,
                        singleDatePicker: isSingle,
                        showDropdowns: true,
                        "locale": {
                            "format": 'YYYY-MM-DD',
                            "customRangeLabel": "Custom",
                            "firstDay": 0
                        }
                    }, function (start, end, label) {
                        var starDate=start.format('YYYY-MM-DD');
                        // var endDate=end.format('YYYY-MM-DD');
                        // this.element.val(starDate + " 至 " + endDate);
                        this.element.val(starDate);
                        tempItem.varName = starDate;
                        pageSearch.searchModule();
                    });
                };
            case "checkbox":
                return function () {
                    $body.on("change",tempItem.location,function(e){
                        tempItem.varName=$(this).is(":checked") ? 1 : 0 ;
                        pageSearch.searchModule();
                    });
                };
            default:
                return function () {
                    console.warn("searchConfig中有非法的type:"+tempItem.type+" 导致了匹配事件失败");
                };
        }
    }

    pageSearch.init=function () {
        this.search();
    };
    pageSearch.search=function () {
        var self=this;
        //触发搜索
        if(searchConfig.searchBtn){
            $body.on("click",searchConfig.searchBtn,function(e){
                e.preventDefault();
                self.searchModule();
            });
        }
        //reset
        if(searchConfig.resetBtn){
            $body.on("click", searchConfig.resetBtn, function () {
                window.location.href = searchConfig.url;
            });
        }
    };
    pageSearch.searchModule=function(){
        var tempSearchStr="";
        $.each(searchConfig.data,function (index, val) {
            var $this=$(this);
            var modifier;
            //如果url为/orchard/distributors?distributor_id=688189193821626368 这种详情内的搜索;符号全为&;
            if(searchConfig.url.indexOf("?") > 0){
                modifier="&";
            }else{
                modifier=(index==0)?"?":"&";
            }
            tempSearchStr+=modifier+$this[0].key+"="+$this[0].varName;
        });
        window.location.href = searchConfig.url + tempSearchStr;
    };

    //赋值默认的搜索数据;
    var searchLen=searchConfig.data.length;
    for (var i=0;i<searchLen;i++){
        var tempItem=searchConfig.data[i];
        if(!tempItem.key){
            console.error("页面上searchConfig 配置出错,有一个元素没有配置key,位置是searchConfig.data的第 "+i +" 项。");
            return;
        }
        tempItem.varName=computerDefaultVal($body.find(tempItem.location),tempItem.type);//默认值储存在对象的varName中;
        //生成事件
        pageSearch["creatEvent_"+tempItem.key]=creatEventBaseType(tempItem);
        pageSearch["creatEvent_"+tempItem.key]();//类似pageSearch.init()的功能
    }
    pageSearch.init();
});
本文目录