require.js引入自己工具类

1.创建一个简单的工程

参考我写的https://blog.csdn.net/qq_39432715/article/details/112977192

2.建自己工具类

由于需要创建的table比较多，我想把table封一个工具类，直接调用就完事了，这样减少主js的代码量

    /**
     * 初始化专题图-专题图-分类选择table
     */
    function initFLXZTable(){
        $('#ztt_ztt_flxz_section_table').bootstrapTable({
            //分页
            pagination: true,
            contentType: 'application/json',
            method: 'post',
            //每页的记录行数
            pageSize: 5,
            //可供选择的每页的行数
            pageList: [5, 10, 15, 20],
            //数据
            data: flxzDate,
            //设置表头
            theadClasses: "thead-blue",
            //设置行内颜色
            rowStyle: function (row, index) {
                var style = {};
                style = {css: {'color': '#DAEFFF'}};
                return style;
            },
            //行列
            columns: [{field: 'lb', title: '类别', align: 'center',},
                {field: 'name', title: '名称', align: 'center'},
                {field: 'bh', title: '编号', align: 'center'},
                {field: 'fbl', title: '分辨率', align: 'center'},
                {field: 'BZ', title: '备注', align: 'center'}
            ],
        })
    }

把js用主js的require加载

//专题图-专题图-分类选择table date
var flxzDate=[
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},
    {"lb": "三维倾斜","name": "济宁实景三维倾斜",'bh':'001','fbl':'1080*1906','BZ':'备注信息'},

]

3.问题

主函数可以调用到函数，但是没有bootstraptable的对象

4.解决

他报错的原因是没有引入bootstraptable的js，主js没法把自身引用的bootstraptable直接传入工具js中，

1.你调函数的时候把bootstrap和jquery当参数传过去

这个办法太蠢了，刚出来的毕业生都会，就不展示了

2.把函数注册进window里

define(['jquery','bootstrap', 'bootstrapTable', 'bootstrapTableZhCN'], function ($,bootstrap,bootstrapTable,bootstrapTableZhCN){
 /**
     * 初始化专题图-专题图-分类选择table
     */
    window.initFLXZTable=function(){
        $('#ztt_ztt_flxz_section_table').bootstrapTable({
            //分页
            pagination: true,
            contentType: 'application/json',
            method: 'post',
            //每页的记录行数
            pageSize: 5,
            //可供选择的每页的行数
            pageList: [5, 10, 15, 20],
            //数据
            data: flxzDate,
            //设置表头
            theadClasses: "thead-blue",
            //设置行内颜色
            rowStyle: function (row, index) {
                var style = {};
                style = {css: {'color': '#DAEFFF'}};
                return style;
            },
            //行列
            columns: [{field: 'lb', title: '类别', align: 'center',},
                {field: 'name', title: '名称', align: 'center'},
                {field: 'bh', title: '编号', align: 'center'},
                {field: 'fbl', title: '分辨率', align: 'center'},
                {field: 'BZ', title: '备注', align: 'center'}
            ],
        })
    }

});

这方法也就比一般毕业生强一点吧

3.用require的方式

https://blog.csdn.net/cpf506497746/article/details/8832317
别的老大哥的，我就不赘述了，前面当抛砖引玉

5.感想

1.js基础依然欠缺，js函数声明过程，js内置对象，js作用域太差
2.require只会皮毛，要研究他原理才能准确应用