使用模块化方案解决php文件引入js文件过多的问题

最新推荐文章于 2021-07-23 09:51:45 发布

superaistar

最新推荐文章于 2021-07-23 09:51:45 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

分类专栏：前端&移动开发文章标签：解决js引入过多的问题使用模块化来解决js引入过多的问题

本文链接：https://blog.youkuaiyun.com/superaistar/article/details/84066893

前端&移动开发专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何通过模块化解决PHP文件中引入JS文件过多的问题。步骤包括：1) 删除功能模块JS，创建模块化入口文件；2) 添加data-main属性引入模块化入口文件；3) 配置模块，声明模块及其依赖。具体配置涉及require.config()，声明paths和shim，以管理模块间依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用模块化解决引入js文件过多的问题

例如在一个php文件中需要引入很多的js文件，来实现数据展示，这样会导致该页面看起来既复杂又混乱

解决方案：模块化

什么是模块化呢？

就是让每个功能相互独立，当我们需要使用某个功能的时候，直接拿过来使用

每个js（文件）就是一个模块

每个js也可以分成多个模块

一个功能就是一个模块

推荐使用模块化工具

requirejs ----用来实现模块化的工具

使用步骤：

1、引入requirejs文件

2、设置data-main属性

data-main该值是一个js文件的路径

data-main属性的作用：可以设置该模块的入口文件

(声明不同的模块，实现业务代码)

3、在入口文件中，实现模块的声明以及功能的代码

1 、配置模块

2 、引入模块 require([],function(){ …… })

3、在回调函数当中实现功能

解决步骤：

1、首先把实现功能的php文件所有引入的功能模块js删除，再在根目录下创建一个模块化的初始化入口js文件，例如：comments.js文件

2、然后引入创建的js文件到该php文件里

对引入的js文件初始模块化的功能，添加data-main属性，该属性是路径哦

<script src="../static/assets/vendors/require/require.js" data-main="../static/assets/js/comments.js"></script>

3、初始化模块入口文件，即操作前面创建的comments.js文件

操作入口文件步骤：

1 、配置模块

（使用required.config({})来配置，在里面给他写一个对象给它）

1.1 声明各个模块（即原来添加的功能的js个数）

require.config({

paths:{

模块的名字：模块对应的路径（注意：路径的文件是不能带js后缀的）

}

});

1.2 声明模块和模块之间的依赖关系

require.config({

//先声明各个模块

paths:{

模块的名字：模块对应的路径（注意：路径的文件是不能带js后缀的）

}，

//声明各模块之间依赖的关系

shim:{
//模块名字
"pagination":{
// deps 用来声明那个模块依赖那个模块的；
//deps ：[] 因为依赖的模块可能有很多个，以数组的方式来表示
deps: ["jquery"]//声明分页依赖的是jQuery文件
},
// 模块名字
"bootstrap":{
deps: ["jquery"]//bootstrap依赖的也有jQuery的文件，
}
}

})

例如：
require.config({
    // 1.1 声明各个模块
    // 一共要声明的模块有：jquery,模板引擎，分页插件，bootstrap
    paths:{   //作用是：        声明每个模块的名称和每个模块对应的路径
        // 遵循的格式：
        // 模块的名字  ：  模块对应的路径（注意：路径是不能带js后缀的，否则得不到）
        // （注意：路径都是从根目录开始）
        "jquery": "/static/assets/vendors/jquery/jquery",
        "template": "/static/assets/vendors/art-template/template-web",
        "pagination": "/static/assets/vendors/twbs-pagination/jquery.twbsPagination",
        "bootstrap": "/static/assets/vendors/bootstrap/js/bootstrap"
    },
    // 1.2声明模块和模块之间的依赖关系
    shim:{
        //模块名字
        "pagination":{
            // deps   用来声明那个模块依赖那个模块的；
            //deps ：[]   因为依赖的模块可能有很多个，以数组的方式来表示
            deps: ["jquery"]//声明分页依赖的是jQuery文件
        },
        // 声明bootstrap依赖的文件
        "bootstrap":{
            deps: ["jquery"]//bootstrap依赖的也有jQuery的文件，
        }
    }
});
2 、引入模块 require([],function(){ …… })

使用requirejs提供的一个函数来实现

require(模块的数组，实现功能的回调函数); ----------------- require([],function(){ …… })

模块数组中的每个模块的名字是从paths声明的时候那里直接得到的

在这里不能直接得到这个模块，所以要使用对应的参数($,template,pagination,bootstrap)来得到这个模块
require(["jquery","template","pagination","bootstrap"],function ($,template,pagination,bootstrap) {
    // 3   在回调函数当中实现功能
    $(function(){
        //功能内容代码
    });
})
3、在回调函数当中实现功能

即在入口函数中将实现功能内容的代码粘贴进去

整个模块化入口文件代码演示：

/**
 * 这就是该模块的入口文件
 */
// 1   配置模块
/*使用required.config({})来配置，在里面给他写一个对象给它*/
require.config({
    // 1.1 声明各个模块
    // 一共要声明的模块有：jquery,模板引擎，分页插件，bootstrap
    paths:{   //作用是：        声明每个模块的名称和每个模块对应的路径
        // 遵循的格式：
        // 模块的名字  ：  模块对应的路径（注意：路径是不能带js后缀的，否则得不到）
        // （注意：路径都是从根目录开始）
        "jquery": "/static/assets/vendors/jquery/jquery",
        "template": "/static/assets/vendors/art-template/template-web",
        "pagination": "/static/assets/vendors/twbs-pagination/jquery.twbsPagination",
        "bootstrap": "/static/assets/vendors/bootstrap/js/bootstrap"
    },
    // 1.2声明模块和模块之间的依赖关系
    shim:{
        //模块名字
        "pagination":{
            // deps   用来声明那个模块依赖那个模块的；
            //deps ：[]   因为依赖的模块可能有很多个，以数组的方式来表示
            deps: ["jquery"]//声明分页依赖的是jQuery文件
        },
        // 声明bootstrap依赖的文件
        "bootstrap":{
            deps: ["jquery"]//bootstrap依赖的也有jQuery的文件，
        }
    }
});
// 2   引入模块
// 使用requirejs提供的一个函数来实现
// require(模块的数组，实现功能的回调函数);
// 模块数组中的每个模块的名字是从paths声明的时候那里直接得到的
// 在这里不能直接得到这个模块，所以要使用对应的参数($,template,pagination,bootstrap)来得到这个模块
require(["jquery","template","pagination","bootstrap"],function ($,template,pagination,bootstrap) {
    // 3   在回调函数当中实现功能
    $(function(){
        // 声明变量表示当前是第几页,以及每页取多少条数据
        var currentPage = 1;
        var pageSize = 10;
        var pageCount;
        // 一开始就加载一次数据
        getCommentsData();
        function getCommentsData() {
            // 请求数据接口,使用模板引擎的方式完成表格的数据显示
            $.ajax({
                url: "api/_getCommentsData.php",
                type: "POST",
                data: { currentPage: currentPage, pageSize: pageSize },
                success: function (res) {
                    if (res.code == 1) {
                        // 更新一下pageCount
                        pageCount = res.pageCount;
                        // console.log(pageCount);                      
                        // 使用模板引擎生成结构
                        // 导入模板的数据，利用template()方法
                        var html = template("template", res.data);
                        $("tbody").html(html);
                        /**完成分页效果
                             插件：
                                1、先引入插件  twbs-pagination 
                                2、使用样式，可以是bootstrap提供的样式，也可以是自己的样式
                                3、要有一个可以调用函数的标签，可以是ul，也可以是div
                                4、调用twbsPagination  完成分页效果
                        */
                        $('.pagination').twbsPagination({
                            totalPages: pageCount,  //最大的页码数
                            visiblePages: 5,  //可见的分页页码按钮
                            first:"首页",
                            last:"尾页",
                            prev:"上一页",
                            next:"下一页",
                            // 点击每个分页按钮的时候执行的操作
                            onPageClick: function (event, page) {
                                // 回调函数有两个参数，一个是事件对象，第二个是当前的页码数
                                currentPage = page;
                                // 每次点击分页的按钮，也要获取数据
                                // console.log(page); //当前点击的分页的id
                                getCommentsData();

                            }
                        });
                    }
                }
            });
        }

    });
})