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

本文介绍如何通过模块化解决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();

                            }
                        });
                    }
                }
            });
        }

    });
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值