Lavavel Mixの使い方 javaScript記述方法

概要

Lavavel Mix のjsファイルの記述方法を備忘録として 投稿させて頂くことにしました。

jsの記述方法

外部ファイルのjsを参照出来なくなる為、以下の何かの対応が必要になる。

• function、変数をグローバルにしないで、jsファイル内で参照元のjsファイルを指定する。
• function、変数をグローバルにする。

（ファイル内でのみ呼ばれているfunction・変数は、対応不要）。

グローバルにしない場合

• 外部ファイルから参照される場合は、「export」が必要。

呼び出される側（共通functionなど）

■function
  export [function名]（引数...）
例
  export func1(arg1){...}

■変数
  export let [変数名]
例
  export let variable;

呼び出す側(ファイル内の全てを呼び出す場合)

■function
  import * as [任意名] from "[呼ばれるファイル名のパス（.jsは覗く）]";
例
  // 同じフォルダ内にあるcmn.jsを読み込む。
  // 「cmn」という名前にする。
  import * as cmn from "[./cmn]";

  // cmn.js 内のfunc1を呼び出す。
  cmn.func1();


■変数
  import * as [任意名] from "[呼ばれるファイル名のパス（.jsは覗く）]";
例
  // 同じフォルダ内にあるcmn.jsを読み込む。
  // 「cmn」という名前にする。
  import * as cmn from "[./cmn]";

  // cmn.js 内のvariableを呼び出す。
  // 実際は、演算などに使用する。
  cmn.variable;

呼び出す側(ファイル内の一部を呼び出す場合)

■function
  import {function名} from "[呼ばれるファイル名のパス（.jsは覗く）]";
例
  // 同じフォルダ内にあるcmn.jsのfunc1を読み込む。
  import {func1} from "[../cmn]";

  // cmn.js 内のfunc1を呼び出す。
  func1();


■変数
  import {変数名} from "[呼ばれるファイル名のパス（.jsは覗く）]";
例
  // 同じフォルダ内にあるcmn.jsのvariableを読み込む。
  import {variable} from "[../cmn]";

  // cmn.js 内のvariableを呼び出す。
  // 実際は、演算などに使用する。
  variable;

グローバル（function・変数）にする場合

• onclick で呼び出す場合は、こちらにする。
• 通常のjs呼び出しと同義。

呼び出される側（共通functionなど）

■function
  window.[function名(任意名)]=function [function名]（引数...）
例
  window.func1 = func1(arg1, arg2);

■変数
  window.[変数名]
例
  window.variable;

呼び出す側

■function
  [function名(任意名)](引数...);
例
  func1(arg1, arg2);

■変数
  [変数名]
例
  variable;

jsファイルの記述については、以上となります。