Laravel 5 混合 app.js 文件创建答案

【问题标题】：Laravel 5 mix app.js file creationLaravel 5 混合 app.js 文件创建
【发布时间】：2017-09-16 05:25:05
【问题描述】：

我用一个简单的函数创建了一个自定义的 JavaScript 文件：

function picture(soemthing){
    document.getElementById('idXYZ').src = "example.com";
}

然后我将此文件添加到 webpack.mix.js 配置中：

mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

然后运行：npm run dev。 npm 编译了我的脚本，图片功能包含在 app.js 文件中。现在我想在blade.php 中使用“图片”功能，但每当我调用它时，我都会得到“未捕获的ReferenceError：图片未定义”。查了一下页面源码，发现图片函数是用不同的函数包裹的

(function(module, exports) {
    function picture(soemthing) {
        document.getElementById('idXYZ').src = "example.com";
    }
})

我应该在从blade.php调用图片函数之前添加一些额外的命名空间还是我的混合配置有问题？

【问题讨论】：

【解决方案1】：

函数和类不对外公开，所以所有的 JavaScript 逻辑都应该写在 JS 文件中。如果您坚持在刀片文件中编写 JavaScript 逻辑，您可以将函数附加到 window 对象。

window.picture = function picture(soemthing){
    document.getElementById('idXYZ').src = "example.com";
}

...

window.picture()

【讨论】：

“在刀片文件中编写 JavaScript 逻辑”是什么意思？我的意图是在按钮单击时简单地调用 JS 函数。我应该怎么做呢？
$("#myNiceButton").click(function(){ picture("hello"); });。在 JavaScript 文件中附加监听器通常比在 HTML 中编写 onclick="" 更好。
当然，我可能过于简单化了这个案例。不过问题还是有的，如何从$("#myNiceButton").click(function(){ **here** });访问我的图片功能
被点击的元素可以从 function() 回调中的 this 变量访问:-)
是的，我是后端人员（可能时间太长了:)）。你是说我可以像这样访问我的图片功能吗$("#myNiceButton").click(function(){ **this.picture()** });