使用模块化解决引入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();
}
});
}
}
});
}
});
})