基于从0开发前后端分离的企业级上线项目的插件优化-原创手记-慕课网

分页插件和modal弹窗都是基于从0开发前后端分离的企业级上线项目的基础上修改的

分页插件

由于实际工作中，后端并没有使用分页插件，返回的数据有限只有当前页和总页数，特根据实际情况，结合老师源码将分页插件进行二次封装，美化样式、减少参数、增加跳转页功能，具体用法和老师的一样，并且脱离模板引擎，可以直接使用 , 下图是实例

图片描述

只需要当前页和总页数 pageNum, pages

// 加载列表
loadList : function(){    
	var _this = this;    
    // 获取信息列表
    _project.listInfo(this.data.listParam, function(res){
        _this.renderListHtml(res);        
        // 加载分页插件
        _this.loadPagination({            
            pageNum  : res.pageNum,            
            pages    : res.pages
        });
    }, function(errMsg){
        _this.renderListHtml();
    });
},
// 加载分页插件
loadPagination : function(pageInfo){    
    var _this = this;    
    this.pagination ? '' : (this.pagination = new Pagination());    
    this.searchSelect.render($.extend({}, pageInfo, {        
        container   : $('.pagination'),        
        onSelectPage: function (pageNum) {
	        _this.data.listParam.pageNum = pageNum;
	        _this.loadList();
        }
   }));
}

关于分页的大家可以查看我的另一篇文章写得是分页的底层和页面分页的逻辑
关于分页查询的底层细节

modal弹窗

使用window自带alert和confirmm确实简单好用，但是样式和体验不太好，结合之前封装的modal弹窗，将页面提示和确认提示结合到弹窗中，实现全屏覆盖半透明背景的提示框，可以自定义样式，实例如下图
图片描述

下面这个是自定义的弹窗

封装在工具类的方法

# 原生版
// 弹窗组件
var Modal = require('./modal/index.js');

# React 版
// 弹窗组件
import Modal    from './modal/index.jsx';
const _modal = new Modal();

	// 成功提示
	 successTips(msg) {
		 _modal.success(msg || '操作成功!');
	     # _modal.success(msg || '操作成功!', '成功提示');
	 }

	  // 错误提示
	  errorTips(errMsg) {
		  _modal.error(errMsg || '好像哪里不对了~');
	      # _modal.error(errMsg || '好像哪里不对了~', '错误提示');
	  }

	  // 确认提示
	  confirmTips(msg, confirm) {
		  _modal.confirm(msg || '确认执行该操作吗？', confirm);
	      # _modal.confirm(msg || '确认执行该操作吗？', confirm, '确认提示');
	  }

封装的方法，这里的方法原生和React一直，show方法有所区别

// 提示消息, 这个方法可以定制自己的需求
alert(message, title, type, onOk, onCancel, okText, cancelText, className, maskCloseable){
    let params = {
        isOpen    : true,
        type      : type       || 'alert',
        title     : title      || '温馨提示~',
        children  : message,
        onOk      : onOk,
        onCancel  : onCancel,
        okText    : okText     || '确定',
        cancelText: cancelText || '取消',
        className : className,
        maskCloseable : maskCloseable
    };
    this.show(null, params);
}
// 确认提示
confirm(message, onOk, onCancel，title){
    this.alert(message, title || '确认提示？', 'confirm', onOk, onCancel);
}
// 成功提示
success(message, title){
    this.alert(message, title || '成功提示！', 'success');
}
// 错误提示
error(message, title){
    this.alert(message, title || '错误提示！！！', 'error');
}

提供自定义模板方法, 展示用户特定的页面，
分离确认回调函数和取消回调函数，增加背景是否关闭功能

# 原生版
// 显示弹窗
show : function(templateHtml, params){
    var _this = this,
        data  = {
            type          : params.type          || 'confirm',
            className     : params.className,
            maskCloseable : params.maskCloseable || false,
            modalTile     : params.title,
            modalMessage  : params.message,
            onOk          : params.onOk          || function () {},
            onCancel      : params.onCancel      || function () {},
            okText        : params.okText        || 'Ok',
            cancelText    : params.cancelText    || 'Cancel',
        };
    // 不是用户自定义HTML
    if (!templateHtml) {
        // 渲染HTML
        var modalHtml = Hogan.compile(templateIndex).render(data);
        this.$modalWrap.html(modalHtml);
    } else {
        // 渲染HTML
        var modalHtml = Hogan.compile(templateHtml).render(params);
        this.$modalWrap.html(modalHtml);
    }
    // 确认框显示取消按钮
    if (params.type === 'confirm') {
        this.$modalWrap.find('.modal-cancel').css('display', 'inline-block');
    }
    // 确认按钮点击事件
    this.$modalWrap.find('.modal-confirm').click(function(){
        _this.hide();
        if (typeof params.onOk === 'function') {
            params.onOk();
        }
    });
    // 取消按钮点击事件
    this.$modalWrap.find('.modal-cancel').click(function(){
        _this.hide();
        if (typeof params.onCancel === 'function') {
            params.onCancel();
        }
    });
    // 透明背景的点击事件, 默认不可关闭
    this.$modalWrap.find('.modal-mask').click(function () {
        if (params.maskCloseable) {
            _this.hide();
        }
    });
}

# React 版
// 展示modal
show(HtmlWrapper, propTypes){
    let props = {
        isOpen          : propTypes.isOpen        || true,
        type            : propTypes.type,
        title           : propTypes.title,
        children        : propTypes.children,
        onOk            : propTypes.onOk,
        onCancel        : propTypes.onCancel,
        okText          : propTypes.okText        || 'Ok',
        cancelText      : propTypes.cancelText    || 'Cancel',
        className       : propTypes.className,
        maskCloseable   : propTypes.maskCloseable
    };
    # 这里并没提供卸载组件的方法，以为这个组件会被经常使用，所采用更新的方式
    // 不是用户自定义的组件
    if (!HtmlWrapper){
        // 渲染Modal组件
        ReactDOM.render(
            <ModalWrapper {...props} />,
            document.getElementById('modal')
        );
    } else {
        // 渲染用户自定义组件
        ReactDOM.render(
            <HtmlWrapper {...propTypes}/>,
            document.getElementById('modal')
        );
    }
}

确认操作有所改进，将回调函数分开为确定和取消，可以不执行取消回调

var arrIds = [],
    $selectedItem = $('.select:checked');
// 循环查找选中的Ids
for(var i = 0,iLength = $selectedItem.length; i < iLength; i++){
    arrIds.push($($selectedItem[i]).parents('.list').data('id'));
}
if (arrIds.length) {
	_util.confirmTips('确定要删除选中信息吗?', function () {    
	      _this.deleteInfo(arrIds);
	});
} else {
	_util.errorTips('没有选中要删除的信息');
}

当然为了扩展，可以给模板文件配置自定义类名，防止提示框样式被覆盖**

下拉搜索 (暂时这样命名) select-search

下拉搜索的用法比较复杂些，这里只是能完成常用的搜素选择和取值（有对应的方法），但是没有change事件可以监听，如下图
图片描述

// listData为接口请求到的数据
// value和text 获取的listData中的元素对应字段
// listData = [{envId: 'test1', envName: 'test1'}, {envId: 'test2', envName: 'test2'}]
loadSelectSearch : function(listData){
    var _this = this;    
    this.selectSearch ? '' : (this.selectSearch = new SelectSearch());    
    this.selectSearch.render($.extend({        
	    container  : $('.select-search'),        
	    value      : 'envId',        
	    text       : 'envName',        
	    listData   : listData
    }));
},
// 获取选中的数据
this.getSelectedData = {value: '', text: ''}

由于不能监听change事件，这里我找到个更好的替代品–select2.js

https://www.cnblogs.com/landeanfen/p/5099332.html

这篇文章介绍的很好，而且select.js功能全而且丰富

下面这个是个简单的，也是我参照的模板–tinyselect.js, 这个的用法比较简单，源码简单

https://github.com/McFizh/tinySelect

基于从0开发前后端分离的企业级上线项目的插件优化