其實 JavaScript 早期只是一個腳本式語言，做做 HTML DOM 的簡單變化而已。也許直接寫在 HTML 裡，也許引用幾支 JS 檔，這樣而已。

2010 年 AngularJS 問世，開啟了 201x 年前端工程的飛速成長，包含各種前端框架的興起，與 Single Page Application (單頁式網站)。AngularJS 後來變成了 Angular，加上 React、Vue.js，這三大家前端框架維持了好一段時間。

延伸閱讀，後來 Laravel 預設的前端框架從 Vue.js 改為使用 Alpine.js (我的文章)

2015年，JavaScript ECMAScript 2015 發布，也稱為 ES6。為什麼是 6 這個數字？是 JavaScript 這個語言的第 6 版。也就是從 ES6 開始，JavaScript 導入了模組化的概念以及語法。

ES6 的 import、export

基本上一個 JS 檔案就是一個模組，用 export 語法，將你想要輸出的變數、函式、物件、類別，都可以輸出。例如

export const your_var = 'test';

export function your_func() {
    // …
}

假設上面檔案叫 your_module.js。你可以在 HTML 裡直接輸入 JS 模組，注意一定要寫 type="module"，且 import 的後方是大括號

<script type="module">
    import { your_var, your_func, your_object, your_class } from './your_module.js';

    // 就可以使用 your_var, your_func …
</script>

或是在另一支 JS (假設名稱是 abc.js) 裡面 import，HTML 直接引用 abc.js，注意一樣要寫 type="module"。也就是 your_module.js 的變數輸入到 abc.js，並在 abc.js 執行

<script type="module" src="./abc.js"></script>

輸出或輸入都可以改變數名稱

在輸出時可以改變數名稱

export { your_var as new_name, your_function as new_func };

當然，輸入時就要用新名稱輸入。

輸入時也可以改名

import { your_var as new_name } from "./your_module.js";

這樣在輸入模組就是用新名稱。

還有一種寫法也滿常見的，把整個模組輸入

import * as your_module from './your_module.js';

your_module.func_a();  // 在 your_module.js, func_a 要 named export

named 與 default export / import

以上的 export / import 範例是 named export / import (具名輸出/輸入)，還有一種是 default export / import。例如

// 輸出
export default your_var;
// 輸入
import new_name from './your_module.js';

default export 最重要的就是在輸出模組「只能出現一次」。在輸入模組則是任意取名去接。

這樣就是一個最簡單的 export / import 架構了。完整的 export / import 寫法還有很多變形，可以參考 MDN 的 export 語法文件、import 語法文件

CommonJS 的 require

目前大部分網站，都是在 Node.js 開發環境 build 前端。常常會看到一個 JS 關鍵字 require('...')

require 來自於 CommonJS，始於開發者的獨立專案。後來 Node.js 用 CommonJS 實作，也採用了 require，直至今日。但必須說明，require 並非 JavaScript ES6 的原生規格。

require 的參數常常是「不加」檔名，為什麼？例如

require(‘./your_your_module’);

依照 Node.js 官方文件，Node.js 會先找 .js、.json、.node。如果你要輸入的不是這3個副檔名，require 參數就要寫檔名全稱 (包含副檔名)。

require 參數也可以填入 package.json 中列出的套件名稱，這樣 Node.js 就會知道要輸入的檔案路徑 (通常是在 node_modules 資料夾底下)。

建置前端時 require 與 import 的不同

我們以 Laravel 舉例。基本上 Laravel 是用 require，因為 Laravel 前端建置基底是 Node.js，用的是 CommonJS module system。當然，Node.js 稍作調整可以支援 ES6 module system，不在這裡討論。

如果你有 local module (非 Node.js 核心，非 npm 安裝，開發者自己擺在專案的 js 檔案)，require 跟 import 都可以。

這邊要說明一下，不管是 require 或 import，一般情形只是「執行」該 js 檔案。在建置前端時，是將輸入的模組一起 compile 起來。

結語

本篇回顧了一下 JavaScript ES6 的 import / export，也藉這個機會比較了 Node.js 建置前端時用的 require。

本篇重點並「不在」比較 CommonJS 與 ES6 module system，兩者寫法不同，規格也不同。例如，require 輸入的是整個模組，import 可以輸入一個模組中部分的變數、函式、物件、類別。

import / export 與 require 不是新題目，但卻是現代前端技術很重要的模組化功能。很多前端建置工具是基於 Node.js (例如 Laravel)，require 與 import 也大量被使用，很值得再回顧一下。

Laravel 從 5.x 版開始用 Vue.js 當預設的前端框架，Laravel 5 的那一段時間，開發者數量成長很快，相信也間接推動了 Vue.js 的普及。

接下來 Laravel 6 和 7 是使用一個 laravel/ui 套件來建構前端，laravel/ui 建構時可以選擇 bootstrap, vue, react 三選一。納入更多選擇，也可以解讀為 Laravel 漸漸脫離 Vue.js 的相依性。

目前 (2021年5月) Laravel 8 則是用一個 laravel/breeze 套件來建構前端，laravel/breeze 預設是使用 Alpine.js，但也可以指定要用 vue 或 react。

所以可以看出來，從 Laravel 5 預設是 Vue.js，到 vue 只是一個選項，到 Laravel 8 預設使用 Alpine.js。就 Laravel 的態度而言，整個趨勢是從 Vue.js 轉到 Alpine.js。

本篇我們就來聊一下 Alpine.js

Alpine.js 是一個相對非常年輕的前端框架，1.0 版是 2019 年 12 月釋出。作者是 Caleb Porzio，他是 Laravel 開發者和 Laravel 框架本身的開發者。所以他當時也是用 Vue.js，後來才創作了 Laravel Livewire 及 Alpine.js。

因爲作者 Caleb Porzio 的背景是 Laravel 開發者，想要簡化前端的工作，所以 Alpine.js 的創作精神就是輕量、簡化。Alpine.js 的檔案size很小，安裝及使用簡單，不會因為簡單功能就需要寫一堆 JS code，更沒有編譯 TypeScript 等事情。

Alpine.js 官方網頁 https://github.com/alpinejs/alpine

Alpine.js 的使用首先用 x-data 宣告一個 component scope。x-data 裡宣告的變數，在這個 component scope 裡都能存取。

<div x-data="{ foo: 'bar' }">
...
</div>

用 x-text, x-html 可以將變數填入DOM。x-html 因為內容可以是 html，沒有 escape，所以使用者編輯的內容，不要使用 x-html

<span x-text="foo"></span>
<span x-html="foo"></span>

使用 x-on:[event] 可以設定 event handler，例如 x-on:click，也可以縮寫成 @click

<button x-on:click="foo = 'bar'"></button>
// 縮寫
<button @click="foo = 'bar'"></button>

使用 x-model 可以雙向綁定 DOM 上顯示的值和 component scope 裡變數的值

<input type="text" x-model="foo">

x-if 可以達成 if else 的功能，注意 x-if 需要搭配 <template> 使用。官方文件有說，因為 Alpine.js 不使用虛擬 DOM (virtual DOM)，而是使用真實的 DOM (real DOM)，使用 <template> 以達成輕量、簡化的效果。

另外注意 x-if 和 x-show 的差別，x-if 判斷式是 false 時，整個 DOM 都會拿掉。x-show 判斷式是 false 時，該 DOM 還會在，只是 css 設成 display: none

<template x-if="foo">
	<div>Some Element</div>
</template>

x-for 可以達成迴圈的功能，注意 x-for 也需要搭配 <template> 使用。如果 x-for 中的 array 資料有可能增減、變換順序，記得要指定 :key。照官方文件的說法，每次 iterate 都會標記一個 key，這樣 array 資料有增減、變換順序時，DOM 的變化才會正確。

<template x-for="item in items" :key="item.id">
    <div x-text="item.content"></div>
</template>

// 如果迴圈中要取用 index, 這樣寫. 而且 index 也可以當 key
<template x-for="(item, index) in items" :key="index">
    <div x-text="item.content"></div>
</template>

x-show 與上方 x-if 比較，保留了 DOM，只是 css 設成 display: none。直接使用在 DOM 上，不需要 <template>。另外可以使用 transition 來讓 show/hide 更流暢。

/* x-show.transition.in, x-show.transition.out, x-show.transition.scale, x-show.transition.duration …
*/
<div x-show.transition="open">
    These contents will be transitioned in and out.
</div>

x-bind 可以填入 html 屬性，例如

// 填入圖片來源
<img x-bind:src=”yourImageUrl”>
// 縮寫
<img :src=”yourImageUrl”>

// 指定 input type
<input x-bind:type="inputType">
// 縮寫
<input :type="inputType">

CSS class 的 x-bind 寫法不同

// foo==true 時才會填上 'hidden'
<div x-bind:class="{ 'hidden': foo }"></div>
// 縮寫
<div :class="{ 'hidden': foo }"></div>

二元屬性 x-bind 的寫法也不同 (二元屬性例如：disabled, readonly, required …)

// myVar==true 時才會填上 disabled, myVar==false 時整個 disabled 屬性拿掉
<button x-bind:disabled="myVar">Click me</button>
// 縮寫
<button :disabled="myVar">Click me</button>

結論

本篇文章主要是想聊一下 Alpine.js 的來龍去脈，以及整個 Alpine.js 的運作邏輯，因此並沒有包含太多細節。

跟其他 JavaScript framework 相比，Alpine.js 很大的特點是不使用虛擬 DOM (virtual DOM)，一來輕量、簡化；二來不會因為要寫個簡單功能，就要額外再寫一大堆 JS code。

如果讀者是 Laravel 的開發者，可以研究一下 Alpine.js 的使用，因為畢竟目前 (2021年5月) Laravel 8 的前端預設是用 Alpine.js。甚至 larry 覺得，一般應用如果要做簡單的前端 templating，也可以考慮使用 Alpine.js，而不是那些大型框架。

現在很多網頁，像是手機產品的網頁，當使用者往下拉時，會有圖片或文案浮現的效果。要達成這樣的效果，可以考慮使用 AOS.js。以目前 (2020年6月) 來說，類似功能的插件，應該是以 AOS.js 為主。

安裝上很簡單，沒有相依的插件，將 html 加上 aos.css, aos.js 後，如下方初始化就可以使用

<script>
  AOS.init();
</script>

將你想要產生動畫的 html 元素加上 data-aos 屬性，例如

<div data-aos="fade-up"></div>

當網頁捲動到這個元素時，它就會有一個小小往上 fade in 的動畫。不一定要 “fade-up”，fade 系列如

<div data-aos="fade-down"></div>
<div data-aos="fade-left"></div>
<div data-aos="fade-up-left"></div>

以上沒有列出全部的 fade 語法，全部 fade 語法請參考 aos.js 官網。

元素翻轉系列

<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>
<div data-aos="flip-left"></div>

Zoom in zoom out 系列

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>

Again，這邊沒有列出全部的語法，全部語法請參考 aos.js 官網。

另外還有一些其他的設定

data-aos-duration="3000" // 動畫的持續時間，default is 400ms
data-aos-easing="linear" // 動畫的速度曲線，default is ease
data-aos-offset="300" // 調整本來觸發點的offset(in px)，default is 120
data-aos-delay="300" // 動畫的延遲啟動時間，default is 0

另外可以調整該元素動畫在視窗的哪個位置被觸發

data-aos-anchor-placement="top-bottom" // default
data-aos-anchor-placement="center-bottom"
data-aos-anchor-placement="bottom-bottom"

“top-bottom” 指的是「該元素的頂端」在瀏覽器的下方，也就是剛剛要出現時，觸發動畫。”center-bottom” 指的是「該元素的中間」在瀏覽器的下方時，觸發動畫。”bottom-bottom” 指的是「該元素的底部」在瀏覽器的下方時，觸發動畫。所以一般從上往下捲動網頁時，該元素的出現快慢是 “top-bottom” > “center-bottom” > “bottom-bottom”。

anchor-placement 也可以是 “top-center” “center-center” “bottom-center”，理解方式如上一段。xxx-center 因為都是等該元素在瀏覽器的中間時，才觸發動畫。所以一般從上往下捲動網頁時，xxx-center 會比 xxx-bottom 「晚」觸發動畫。

實作時，可能要微調動畫觸發的時機，就可以使用 data-aos-anchor-placement 和上方提到的 data-aos-offset。

結論，aos.js 安裝、撰寫都簡單。如果是網頁設計師，或是前端工程師的讀者，larry 是建議可以考慮使用，而且常常使用。加一些簡單的元素浮出的效果，可以讓你的網頁比較生動，看起來也會比較有現代感。

相關文章：
全屏滾動網頁 fullPage.js
如何利用 gulp 自動添加 JS 及 CSS 版號 (auto-versioning)，避免瀏覽器快取

https://alvarotrigo.com/fullPage
fullPage.js 是一款滿多人使用的全屏滾動網頁框架，官網右上角 Examples 範例滿多的，例如 https://alvarotrigo.com/fullPage/examples/navigationV.html
就是很好的範例，也就是說這類型的網頁可以考慮使用 fullPage.js 來開發。

fullPage.js 的基本架構是

<div id="your_wrapper_id">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

如果說把全屏滾動網頁形容成上下播放的投影片，一個 section 就是其中一張投影片，以上方程式碼來說，這個網頁包含四張投影片，外部要用一個 wrapper 包住 (不能是<body>)，網頁初始化時

$('#your_wrapper_id').fullpage({
    ....
});

…. 處可以填一些 option, 例如 sectionsColor 和 anchors 是常用的兩個 option

$('#your_wrapper_id').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage'],
    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
});

anchors 指定每個 section 的頁內位置，例如第二個 section 就是 http://你的網址#secondPage
sectionsColor 指定每個 section 的背景顏色。

在一個 section 裡也可以塞一些橫的投影片

<div class="section">
    <div class="slide"> Slide1 </div>
    <div class="slide"> Slide2 </div>
    <div class="slide"> Slide3 </div>
</div>

有的設計會在網頁上方固定一個 menu (不隨頁面捲動)，html 寫法如下

<ul id="your_menu_wrapper">
    <li data-menuanchor="your_anchor1"> Menu1 </li>
    <li data-menuanchor="your_anchor2"> Menu2 </li>
    <li data-menuanchor="your_anchor3"> Menu3 </li>
</ul>

需要跟 fullPage 註冊

$('#your_wrapper_id').fullpage({
    menu: '#your_menu_wrapper',
    ....
});

註冊後當捲到某一個 section 時, 對應的 anchor 的 <li> 會自動加上 class="active", 開發者就可以在上面做 style.

很多全屏滾動網頁會在右方有「點點點」導覽，例如這範例頁的右側
https://alvarotrigo.com/fullPage/examples/navigationV.html
初始化時需要下 navigation: true
橫的 slide 也可以有「點點點」導覽，下 slidesNavigation: true
另外還有一些 option: navigationPosition, navigationTooltips 等，可以自行查一下官網，此處不再贅言。

有時候會希望在顯示 section 時加一點動畫 (例如有些手機廠商網頁，往下捲時手機會移動浮現之類)，這時候就需要 fullPage 的 callbacks, 在裡面做動畫：
onLeave (離開 section)
afterLoad (進入 section)
onSlideLeave (離開 slide)
afterSlideLoad (進入 slide)

fullPage.js 預設每個 section 高度佔滿整個 viewport, 官網有提到可以達成單 section auto height, 但如果要使用 fullPage.js, 再去改成每個 section auto height, 是沒有意義的。

“It is possible to create sections which height is smaller or bigger than the viewport. This is ideal for footers. It is important to realise that it doesn't make sense to have all of your sections using this feature.”

因為 fullPage.js 每個 section 高度佔滿整個 viewport, 所以他只適合類似投影片上下捲動的設計，不太適合有連續性的一頁式網頁，或是每個 section 自訂高度的網頁。

1. Functions are objects

一般來說，當使用者開過一個網站，他的瀏覽器會快取網站的 JS 及 CSS (就是記在瀏覽器的意思)。所以當一個使用者瀏覽了你的網站，過沒幾天你更新了 JS 或 CSS，但因為該使用者的瀏覽器記住了上次瀏覽的 JS / CSS，以至於你更新的 JS / CSS 不會在他的瀏覽器上生效。

同理，其他最近瀏覽你網站的使用者(已快取)，如果再打開你的網站，也看不到你剛剛更新的 JS / CSS。

每次更新時自動添加 JS 及 CSS 版號 (auto-versioning) 是一個避免瀏覽器快取的方法。前端工具 gulp 有一套完整的解法，本篇文章會依照 gulp-rev-replace 的做法一步一步來看。首先它使用 gulp-useref 分別合併 JS 及 CSS. 

<!-- build:css css/combined.css -->
your css <link>...
<!-- endbuild -->

<!-- build:js scripts/combined.js -->
your js <script>...
<!-- endbuild -->

照上述 html 轉完後會變成

<link rel="stylesheet" href="css/combined.css"/>

<script src="scripts/combined.js"></script> 

要注意的是 combined.css, combined.js 目前都還未壓縮，要使用 gulp-uglify 壓縮 JS 檔，使用 gulp-csso 壓縮 CSS 檔，接著使用 gulp-rev 去改目前 file stream 上的檔案名稱。

例如 combined.js 會改成 combined-12345abcde.js 放在你的 destination folder，combined.css 也會被更名，這個步驟就是所謂的「上版號」。

最後再用 gulp-rev-replace 將 source html 中的 <link>, <script> 改成指向加上版號的 JS 及 CSS，例如

<link rel="stylesheet" href="css/combined-12345abcde.css"/>

<script src="scripts/combined-12345abcde.js"></script> 

以上就是 gulp-rev-replace 文件裡介紹的自動上版號 (auto-versioning) 的流程。

$scope.phones = [
  {'name': 'Nexus S',
   'snippet': 'Fast just got faster with Nexus S.'},
  {'name': 'Motorola XOOM™ with Wi-Fi',
   'snippet': 'The Next, Next Generation tablet.'},
  {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.'}
];

3. Filtering Repeaters. ng-repeat 可以加上 filter. 另外也可以選擇 sort ‘orderBy’

4. $http. 首先教程上 sample code $http.get(‘url’).success(…
https://docs.angularjs.org/api/ng/service/$http 有提到
“The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.”
=> 用 then 而不是 success / error.

get 回來的 data 一定要是 json 格式，如果 callback function input 是 ‘response’, url 上放的 data 是 {“PPP”: “QQQ”}, 則在 callback function 中 response.data.PPP 中存的就是 “QQQ”. 另外要特別注意的是 json 的 object array 最後不能有逗點。上述 $scope.phones array 最後一個 object 的後方加逗號是 ok 的，但在 json 不行。另外如果 json 中要直接指定 array 的話，直接用上述 object array 的格式即可，中括號開頭，中括號結尾。Again, 如果 callback function input 是 ‘response’, response.data 存的就是該 array.

https://docs.angularjs.org/tutorial/step_05
“$ Prefix Naming Convention
As a naming convention, Angular's built-in services, Scope methods and a few other Angular APIs have a $ prefix in front of the name. 

The $ prefix is there to namespace Angular-provided services. To prevent collisions it's best to avoid naming your services and models anything that begins with a $.”

也是 Coding convention 的東西，inject service to controller 方法一：

function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

方法二

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

因為 $scope, $http 是 Angular 內建 services, 可以省略

phonecatApp.controller('PhoneListCtrl', function($scope, $http) {...});

5. ng-route. https://docs.angularjs.org/tutorial/step_07
“Providers can only be injected into config functions. Thus you could not inject $routeProvider into PhoneListCtrl.
Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file.”

這章節的 sample 新增一個 module ‘phonecatControllers’, 將多個 view 的 controller 設定在 ‘phonecatControllers’ 底下，再將 ‘phonecatControllers’ inject 進 app module ‘phonecatApp’, 在 ‘phonecatApp’ config 中就可以指定 route templateUrl 和 controller 了。

6. custom filter. Add filter module, add filter name, add the filter module to the dependencies of app module, then html can use the filter.

7. REST and Custom Services https://docs.angularjs.org/tutorial/step_11
首先 inject 進 controller 時，如果有自定的 services, 即使是 Angular 內建的 services 也要列出 (下例中 $scope 要列出，不能省略)

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function ($scope, Phone) {

}]);

“An important thing to notice in the code above is that we don't pass any callback functions when invoking methods of our Phone service. Although it looks as if the result were returned synchronously, that is not the case at all. What is returned synchronously is a “future” — an object, which will be filled with data when the XHR response returns.”

有些人會認為”當下 return 後來填上”的方式 ambiguous, 所以教程上也提供了設定 callback 的方式。