前端框架的演進

JQuery、Angular、React、Vue

要用哪個?

JQuery

var xhr = new XMLHttpRequest();
xhr.open('GET', 'myservice/username?id=some-unique-id');
xhr.onload = function() {
    if (xhr.status === 200) {
        alert('User\'s name is ' + xhr.responseText);
    }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();

$.ajax('myservice/username', {
    data: {
        id: 'some-unique-id'
    },
    success: function(name) {
        alert('User\'s name is ' + name);
    },

    error: function(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
})

XMLHttpRequest vs jQuery ajax

jQuery Animation

http://api.jquery.com/animate/

jQuery Plugins

Ex: jQuery UI

太肥

太多基於 jQuery 的套件

~~我明明沒有用到 jQuery 為什麼要我裝 jQuery R~~

其他選擇?

ajax - axios.js, fetch API
animation - css animation
盡量使用有支援 native JS 的 library

jQuery 帶來的良好改變

document.querySelector

jQuery 依舊還是一個很棒的 library

Angular

為什麼會出現?

SPA(Single Page Application)

Data Binding

// data binding
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

<p>First name: {{firstname}}</p>

// two-way binding https://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_two-way
<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});
</script>