Laravel Admin 自定义 JavaScript 的正确方式?

https://laravel-admin.org/ 使用的是 Pjax ,所以自定义 JS 时候需要按照 Pjax 的事件周期来。

Pjax 事件请见 https://github.com/defunkt/jquery-pjax#usa...

第一步

加载 JS 文件

app/Admin/bootstrap.php

Admin::js('/js/admin-extended.js');

第二步

public/js/admin-extended.js

(function($){

    var AdminExtended = {
        init: function(){
            var self = this;

            // Pjax 所有事件请见:https://github.com/defunkt/jquery-pjax#usage

            $(document).on('pjax:start', function() {

            });

            //  after replacing content
            $(document).on('pjax:end', function() {

                // Pjax 模式里页面加载成功后的初始化
                self.siteBootUp();
            });

            // always fires after ajax, regardless of result
            $(document).on('pjax:complete', function() {

            });


            // 正常页面加载成功后的初始化
            self.siteBootUp();
        },

        siteBootUp: function(){
            var self = this;

            self.replaceEnglish();
        },

        replaceEnglish: function(){
            // 创建页面
            $('.file-drop-zone-title').text("拖动文件到此上传...");

            // 左边搜索框
            $('.sidebar-form .input-group input.form-control.autocomplete').attr("placeholder", '搜索...');
        },

    };
    window.AdminExtended = AdminExtended;
})(jQuery);

$(document).ready(function()
{
    AdminExtended.init();
});
本作品采用《CC 协议》,转载必须注明作者和本文链接
摈弃世俗浮躁,追求技术精湛
Summer
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 4

这得把 .js 文件拆分出来,需要直接执行的语句必须塞进 pjax 定义的事件里面。可是,如果前端页面是用vue写的,pjax反倒成了累赘。vue组件里面调用axios实现无刷新,已经无需pjax过问了。要是能给pjax设置忽略规则就好了。例如像这样的链接 <a href='xxx' pjax-ignore>,当此链接被点击之后,pjax检测到 a 标签包含了 pjax-ignore 属性,不会进行请求拦截。

可问题依然存在,就算可以设置pjax的忽略规则。如果点击的是普通链接,比如<a href='yyy'>这样的没有设置忽略规则的标签,仍然会导致vue组件挂载失败。

总而言之pjax和vue目前似乎不能很好的共存,还是要把new Vue({ el: '#app' });这条语句从 .js 文件中分离出来,然后写进 pjax 事件里。

11个月前 评论

我图省事,直接使用一行代码

    //注意,不要添加结束标签 </script>
    Admin::script(" $(document.body).append(`<script src='$path/zzz.js'>`); "); 

这可能是最便利的写法:1、无需拆分 .js 文件;2、无需过问 pjax 具体事件。依然可以实现pjax和vue的和谐共存,尽管性能上有所损失(pjax管理了不该过问的细节问题)

按理说,没有结束的标签<script src='$path/zzz.js'>浏览器应该报错。意外的是这里却能正常运行,可能是现代浏览器太聪明了。

安全起见,可能想要加个正斜杠,改成这样<script src='$path/zzz.js' />。后来测试发现,结尾的斜杠不能加。

11个月前 评论
Jiangqh 11个月前
zhaiduting (作者) 11个月前

或许大家很不放心,怎么可以在里面放一个没有结束的script标签呢?竟然连正斜杠都不可以带?无论如何,</script>必须加上!也行,按下面的写法就可以了

    Admin::script("
        $(document.body)
            .append('<'+'script'+` src='/$path/zzz.js'>`+'<'+'/script>');
    ");

这个非常安全,这里面采用加法运算,把可能会被浏览器误解的</script>拆分了。这样一来,浏览器就不会误以为这是脚本结束的地方了。

11个月前 评论
hello-laravel 2周前

赞一个,但是会出现多个form表单出现字段重复的问题,尽管在初始化的时候默认值可能是一样的

6个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!