Question

我正在尝试在laravel中正确使用js。据我了解，运行“ npm run dev”后，所有js都串联到一个公共的app.js文件中。

到目前为止，这是我设置的方式：在resources / js中，我创建了一个custom.js文件，在其中放置了所有自定义js函数：

function myFunction() {
    console.log("clicked fff");              
}

$(document).ready(function(){
    $(".www").click(function(){
        $(".qqq").hide();
    });
});

我在resources / js / app.js中也需要这样做：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('./custom');
window.Jquery = require('jquery');
window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

// const files = require.context('./', true, /\.vue$/i)

// files.keys().map(key => {
//     return Vue.component(_.last(key.split('/')).split('.')[0], files(key))
// })

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app'
});

然后我的主布局如下：

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Website Name</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <script src="{{ asset('js/app.js') }}"></script>
      </head>
      <body>
      @include('inc.navbar')
      <p class="qqq">jgkfjkj</p>
      <button class="www">Click me to hide paragraphs</button>
    <button onclick="myFunction()">Click me</button>
<!--More stuff below-->

最后，我运行了“ npm run dev”。 jQuery的东西运行良好，但myFunction（）却不能。我收到以下错误：

未捕获的ReferenceError：未定义myFunction 在HTMLButtonElement.onclick

我在做什么错了？

Answer 1

为什么这不起作用

您所有的js代码都捆绑在一个大js文件中。为了防止命名冲突，其他js代码将其包装在函数中。

因此，当您定义一个函数（如print(area, "put unit here")）时，它仅在捆绑程序将其包装在其中的函数中可用。（这是通过javascripts函数作用域的性质决定的）

解决方案

解决此问题的一种方法是将其显式分配给全局范围（即窗口对象）。

myFunction

一种更具编程性的方式是将一个eventListener添加到onClick事件，然后调用您的函数，如下所示：

window.myFunction = function() { alert('quick and dirty') }

Laravel使用javascript的正确程序。

1 个答案: