如何在laravel应用程序中添加自定义JavaScript

大家好，在我的laravel项目中，我有一些javascript助手函数，它利用了

jquery

，我想提取到一个单独的地方，应用程序的所有部分都可以使用。这些是存储在

helper.js

中的函数：

// bootbox function to delete records
// it utitlizes the bootbox library


window.bootbox_delete = function (message, route, row) {
    // body...
    bootbox.dialog({
        message: message,
        title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
        buttons: {
            success: {
                label: "No",
                className: "btn-success",
                callback: function callback() {
                    $('.bootbox').modal('hide');
                }
            },
            danger: {
                label: "Delete!",
                className: "btn-danger",
                callback: function callback() {

                    $.ajax({
                        type: 'DELETE',
                        url: route
                    }).done(function (data) {
                        bootbox.alert('<b>' + data.name + '</b> successfully deleted');
                        //removing the row that have been deleted
                        jQuery(row).fadeOut('slow');
                    }).fail(function () {
                        bootbox.alert('Something Went Wrong .... Please contact administrator');
                    });
                }
            }
        }
    });
}


// function that displays notification
window.notify = function(message) {
    // body...
    $.notify({
        icon: 'fa fa-check',
        message: message
    }, {
        type: 'success',
        timer: 4000,
        offset: 20,
        spacing: 10,
        z_index: 1031,
        delay: 5000,
        placement: {
            from: "top",
            align: "right"
        },

        animate: {
            enter: 'animated fadeInDown',
            exit: 'animated fadeOutUp'
        }
    });
}

//用于删除记录的引导框函数
//它使用引导盒库
window.bootbox_delete=函数（消息、路由、行）{
//身体。。。
bootbox.dialog({
讯息:讯息,，
标题：“删除！”，
按钮：{
成功：{
标签：“否”，
类名：“btn成功”，
回调：函数回调（）{
$（'.bootbox'）.modal（'hide'）；
}
},
危险：{
标签：“删除！”，
类名：“btn危险”，
回调：函数回调（）{
$.ajax({
键入：“删除”，
url:路由
}).完成（功能（数据）{
bootbox.alert（“”+data.name+“已成功删除”）；
//删除已删除的行
jQuery（行）.fadeOut（'slow'）；
}).fail（函数（）{
bootbox.alert（'出现问题…请与管理员联系'）；
});
}
}
}
});
}
//显示通知的函数
window.notify=函数（消息）{
//身体。。。
美元。通知({
图标：“fa-fa-check”，
信息：信息
}, {
键入：“成功”，
计时器：4000，
抵销：20，
间距：10，
z_指数：1031，
延误：5000，
安置：{
从：“顶部”，
对齐：“右”
},
制作动画：{
输入：“动画fadeInDown”，
退出：“动画淡出”
}
});
}

我所做的是，我将

helper.js

添加到

resources/assets/js

中，并使用

npm run dev

编译到

public/js/app.js

，但每当我试图查看事情是否正常时，都会出现以下错误：

通知未定义

未定义引导框_delete

---

要使这些函数全局工作，只需将它们绑定到

窗口

对象：

function notify(message) {

变成

window.notify = function (message) {

window.bootbox_delete = function (message, route, row) {

及

变成

window.notify = function (message) {

window.bootbox_delete = function (message, route, row) {

---

要安装notify.js，您需要运行

npm install notifyjs-browser --save

（或者如果您使用的是

纱线

）

然后，您只需要在

helper.js

文件顶部使用

require('notifyjs-browser')

---

Helper.js

这就是您的

helper.js

现在的样子：

require('notifyjs-browser')

// bootbox function to delete records
// it utitlizes the bootbox library
window.bootbox_delete = function (message, route, row) {
    // body...
    bootbox.dialog({
        message: message,
        title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
        buttons: {
            success: {
                label: "No",
                className: "btn-success",
                callback: function callback() {
                    $('.bootbox').modal('hide');
                }
            },
            danger: {
                label: "Delete!",
                className: "btn-danger",
                callback: function callback() {

                    $.ajax({
                        type: 'DELETE',
                        url: route
                    }).done(function (data) {
                        bootbox.alert('<b>' + data.name + '</b> successfully deleted');
                        //removing the row that have been deleted
                        jQuery(row).fadeOut('slow');
                    }).fail(function () {
                        bootbox.alert('Something Went Wrong .... Please contact administrator');
                    });
                }
            }
        }
    });
}


// function that displays notification
window.notify = function (message) {
    // body...
    $.notify({
        icon: 'fa fa-check',
        message: message
    }, {
        type: 'success',
        timer: 4000,
        offset: 20,
        spacing: 10,
        z_index: 1031,
        delay: 5000,
        placement: {
            from: "top",
            align: "right"
        },

        animate: {
            enter: 'animated fadeInDown',
            exit: 'animated fadeOutUp'
        }
    });
}

require（'notifyjs-browser'）
//用于删除记录的bootbox函数
//它使用引导盒库
window.bootbox_delete=函数（消息、路由、行）{
//身体。。。
bootbox.dialog({
讯息:讯息,，
标题：“删除！”，
按钮：{
成功：{
标签：“否”，
类名：“btn成功”，
回调：函数回调（）{
$（'.bootbox'）.modal（'hide'）；
}
},
危险：{
标签：“删除！”，
类名：“btn危险”，
回调：函数回调（）{
$.ajax({
键入：“删除”，
url:路由
}).完成（功能（数据）{
bootbox.alert（“”+data.name+“已成功删除”）；
//删除已删除的行
jQuery（行）.fadeOut（'slow'）；
}).fail（函数（）{
bootbox.alert（'出现问题…请与管理员联系'）；
});
}
}
}
});
}
//显示通知的函数
window.notify=函数（消息）{
//身体。。。
美元。通知({
图标：“fa-fa-check”，
信息：信息
}, {
键入：“成功”，
计时器：4000，
抵销：20，
间距：10，
z_指数：1031，
延误：5000，
安置：{
从：“顶部”，
对齐：“右”
},
制作动画：{
输入：“动画fadeInDown”，
退出：“动画淡出”
}
});
}

---

希望这有帮助

如果它说函数没有定义，那么很可能您没有包括正确的JS文件。如果您看到404错误，请在包含JS文件的地方共享代码，并在开发工具的控制台中进行检查，可能您包含了文件，但来自错误的目录。

我应该将

helper.js

存储在哪个文件中？我应该在哪里进行绑定？@NathanSiafa字面上就是您helper.js文件中的那些文件。您的方法似乎可以工作，但现在我得到了

$。notify不是一个函数

我的主布局中包含了jquery。@NathanSiafa您有吗使用npm将

Notify.js

添加到您的应用程序中，或者您正在使用cdn。。。（或其他内容）？Notify.js是一个用于显示通知的javascript库。我的观点中有这样的引用

你能展示一下你是如何将

helper.js

包含在你的

app.js

文件中的吗？也就是说，您是否需要

app.js

文件中的

helper.js

文件，还是在

wekpack.mix.js

文件中编译？您也可以显示此代码。