Laravel ‘优雅’ 的通过中间件使用 pjax
pjax 是什么我就不解释了,我们来看看在 laravel 里面怎么使用。
使用 juqury 插件 jquery.pjax.js,它会把你指定的 a 标签进行跳转拦截,并添加点击事件,获取 a 标签链接向服务器发送带有头部标识的 ajax 请求,将获取的内容填充到你指定的容器。并对内容里面的 js 和 css 进行搬家,其实就是给你把 js 和 css 搬到头部去,(这里有 bug,最好屏蔽掉。)
因为浏览器不刷新,会产生更大的内存开销,之前加载的 js new 出来的对象没有释放再次加载会有重复的对象。在使用 wangEditor 编辑器就会出现这种提示,在 45 行:
(function (window, $) {
if (window.wangEditor) {
// 重复引用
alert('一个页面不能重复引用 wangEditor.js 或 wangEditor.min.js !!!');
return;
}
虽然有缺点,不过我强烈建议现代 web 都应该使用。体验超级棒!!!!!!
在 laravel 中
首先,我们需要两个布局模板,一个是带有全部内容的模板,
还有一个空布局模板。然后我们可以在路由中间件哪里把所有的请求进行过滤或者称之为判断,判断是 pjax 请求就继承空布局,否则继承 app 布局。
设置 pjax 中间件。
if ($request->pjax())
$request->query->set('layout', 'layouts.pjax');
else $request->query->set('layout', 'layouts.app');
在继承模板的地方使用
@extends(Request::instance()->layout)
ok。前端在进行相关设置就好了。
可以在 app 模板下面引入 js。
$(document).pjax('[pjax] a, a[pjax]', '#pjax-content');
$(document).on('pjax:start', function() {
NProgress.start();
});
$(document).on('pjax:end', function() {
NProgress.done();
});
现在,只要在 a 标签上添加 pjax 属性就实现了 pjax,请注意,在资源下载的 a 标签上请不要使用 pjax.
刚学 laravel 不久,如果那些地方我说的不对或者我有些错误的观点,请让我知道。谢谢。
推荐文章: