js中如何自定义组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq32933432/article/details/88566256

缘起

有时候我们做项目会发现很多功能其实是一样的，所以我们往往会封装一下这个功能点，然后其他地方通过传参数就能实现相应的效果。而在java后台这个实现起来很简单，我们只需要定义一个方法或者自定义一个注解。但是在前端我们该如何实现呢？举个很简单的例子，比如说layui的弹窗，其实就是一个组件的封装。

JS如何封装一个组件

效果和使用方式

我们先来看封装好的组件的效果图，这是一个根据组织机构选择人员的组件。

而在使用方式上我们只需要写如下JS

$.DbwSelectUser({
    //offset:弹出框显示位置（空或auto：居中，rb：右下角）
	offset:'rb',
	//选好人员后弹出框的“确定”按钮单击事件回调函数
	onOk:function(layerIndex, users) {
		//layerIndex：弹出框layer的索引
		//users数据结构:[{userId:'', userName:'', departId:'', departName:''},{....}]
		//以下编写接收到所选人员后自己的业务逻辑
	}
});

原理

上面使用了DbwSelectUser 这个函数，我们来看看这个函数

DbwSelectUser : function (options) {
    var opt = $.extend({
        //是否多选：true(多选)，false(单选)
        multi:true,
        offset:'auto',
        //layerIndex：弹出窗口索引
        //users数据结构:[{userId:'', userName:'', departId:'', departName:''}]
        onOk:function(layerIndex, users){}
    }, options || {});
    $.LoadIframe({
        title: '请选择人员',
        content: 'assets/js/extend/jquery/userSelect/user-select.jsp?multi=' + opt.multi,
        maxmin: false,
        area: ['840px', '500px'],
        resize: false,
        scrollbar:false,
        offset: opt.offset,
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            var iframeWin = $(layero).find('iframe')[0].contentWindow;
            //users:[{userId:'', userName:'', departId:'', departName:''}]
            var users = iframeWin.getSelectedUsers();
            opt.onOk(index, users);
            return false;
        }
    }, false);
}

再看LoadIframe

LoadIframe: function (options, fullScreen) {
    /*layer的默认配置*/
    var _default = {
            type: 2,
            title: '系统窗口',
            content: '',
            area: 'auto',
            shadeClose: false,
            maxmin: true,
            maxWidth: 600,
            maxHeight: 500
        },
        o = $.extend(_default, options || {}),
        index = layui.layer.open(o);
    if (fullScreen) {
        //窗口全屏
        layui.layer.full(index);
    }
    return index;
}

可以看到其实是对layui的一个弹窗进行了封装，然后我们在user-select.jsp中写自定义代码就可以了。其中$.extend是JQuery里面的一个方法，会用后面的同名变量替换前面的。在上诉代码中的作用是用来如果你没有传某个属性，就用默认的属性。