对choiceView组件的封装

引言

在项目的开发过程中，遇到一个需求，如下图所示，当选项卡里面的选项个数大于等于5的时候，按照右箭头→形式展现，用户点击右箭头通过调用picker组件来选择选项；当选项卡里面的选项小于5个的时候直接以按钮的形式展示在页面上，用户通过点击进行选择；因为这里的选项个数是是动态的，为了方便调用以及日后维护，将代码项封装成组件，通过遍历arr[]，去判断arr的长度是否大于等于5，然后展示具体的形式。

1、首先定义一个choiceView立即执行函数

var choiceView = (function () {
   
})();

所有的函数都写在choiceView函数中

2、定义fillInfo函数，传三个参数，arr为选项卡的列表，defval为默认值，callback回调函数

首先通过document.createElement('div')创建最外层的包裹div 。

使用 if 判断语句通过 arr.length 的值判断生成哪种形式的dom；

如果大于等于5，给创建的div设计index的值为a；如果小于5，给div设置index的值为i；

最后返回创建好的dom结构；

    function fillInfo(arr, defval, callback) {
       
        sourceArr = arr;
        callbackAction = callback;
        var contentDiv = document.createElement('div');
            contentDiv.id = "contentDiv" + '';
            contentDiv.class = "contentDiv";
            
        // 判断按钮的个数是否大于5, 如果大于5返回右箭头格式，如果小于5，返回按钮展示的方式
        if (arr.length > 5) {

            let inp = document.createElement("input");
                inp.setAttribute('value', defval);
                inp.id = "cdfv";
                inp.readonly="readonly"
                contentDiv.appendChild(inp);
                contentDiv.setAttribute('index', 'a');
                contentDiv.onclick = didTapBtn;

         let img = document.createElement("img");
                img.src = "../img/02jiantouright@2x.png";
                contentDiv.appendChild(img);
                contentDiv.style = "float: right;";

            console.log(contentHtml)
            

        } else {

            for (var i = 0; i < arr.length; i++) {
                let button = document.createElement("button");
                button.innerText = arr[i];
                
                button.setAttribute('index', i);
                button.onclick = didTapBtn;
                button.style = "float: right; margin-left: 8px";
                contentHtml.appendChild(button);
            }
        }
        
        return contentHtml;
    }

3、定义didTapBtn函数，设置不同展示方式的点击事件

首先获取该元素的index值，判断index的值为是否为a，如果是a的话证明是右箭头格式的dom，点击直接调用picker组件，然后设置input的value为点击选中的值；否则的话就是按钮的形式展现的dom，点击直接返回点击相对应的按钮的值；

function didTapBtn() {

        var index = $(this).attr('index');
        console.log(index)

        if (index == 'a') {
            // 右箭头点击出现picker组件
            picker.setData(sourceArr);
            var showUserPickerButton = document.getElementById("contentHtml");
            var userResult = showUserPickerButton.firstElementChild;
            picker.show(function(items) {
                userResult.value = items[0];
                console.log(items[0])
            });

        } else {
            // 单个按钮点击
            callbackAction(sourceArr[index]);
        }

  }

4、通过以上操作，该组件就算完成整个封装了。

完成整个封装之后就可以直接使用了，首先在页面中引入该js文件，就不需要我们单独的调用了。首先通过拿localStorage中的“userInfoTest”来判断用户是否登录，如果登录，直接调用接口，从接口里面拿到相应的数据，遍历数据，生成相应的dom，点击dom调用相应的点击事件，返回数据。这样就可以了。