Bạn sẽ thấy tính năng lớn đầu tiên hoặc ES2015 được sử dụng ở mọi nơi. và lúc đầu, nó có vẻ kỳ lạ. Rất đơn giản, có một cú pháp mới, ngắn hơn để tạo các hàm ẩn danh
Ví dụ: trong .then[] của chúng tôi, chúng tôi có một chức năng ẩn danh
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 31loadRepLogs. function[] {var self = this;$. ajax[{url. Lộ trình. tạo ['rep_log_list'],}]. sau đó [hàm [dữ liệu] {$. mỗi [dữ liệu. mục, chức năng[key, repLog] {self. _addRow[repLog];}];}]},. dòng 42 - 173}];. dòng 175 - 191}][cửa sổ, jQuery, Định tuyến, swal];
Trong ES2015, chúng tôi có thể xóa từ function và thêm một "mũi tên bằng" [=>] sau các đối số
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 31loadRepLogs. function[] {var self = this;$. ajax[{url. Lộ trình. tạo ['rep_log_list'],}]. sau đó [[dữ liệu] => {$. mỗi [dữ liệu. mục, chức năng[key, repLog] {self. _addRow[repLog];}];}]},. dòng 42 - 173}];. dòng 175 - 191}][cửa sổ, jQuery, Định tuyến, swal];
Đó là nó. Điều đó sẽ làm chính xác điều tương tự như trước đây. Chà, PhpStorm thực sự tức giận về điều này, nhưng hãy bỏ qua nó trong giây lát. Hãy thử nó. Hàm loadRepLogs[] này được gọi khi tải trang để điền vào bảng. Làm mới
Nó hoạt động. không có lỗi
Nhưng, rõ ràng PhpStorm ghét chức năng mũi tên. Đó là bởi vì nó được thiết lập để chỉ nhận ra JavaScript ES5 cũ
Đi vào cài đặt của bạn và tìm kiếm ES6. Trong "Ngôn ngữ & Khung", "JavaScript", bạn có thể chọn phiên bản sẽ sử dụng. Hãy bắt đầu với "ECMAScript 6". nhấn ok. và sau khi lập chỉ mục xong. đinh. Nó hạnh phúc. Và tôi cũng hạnh phúc
Nếu bạn thấy bong bóng về "Trình theo dõi tệp để chuyển mã bằng Babel", hãy bỏ qua điều đó. Nhưng, chúng ta sẽ nói về thứ "Babel" đó sau, nó không chỉ là một từ nghe có vẻ hay ho. Ba-bên
Vì vậy, cú pháp mũi tên không có gì đáng kinh ngạc. Nhưng nó được sử dụng rất nhiều, vì vậy bạn cần luyện mắt để nhận ra rằng đó chỉ là một chức năng ẩn danh
Và đôi khi, nó có thể trông hơi khác một chút. Ví dụ, các dấu ngoặc đơn xung quanh các đối số? . Không có họ, mọi thứ vẫn hoạt động
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 31loadRepLogs. function[] {var self = this;$. ajax[{url. Lộ trình. tạo ['rep_log_list'],}]. sau đó [dữ liệu => {$. mỗi [dữ liệu. mục, chức năng[key, repLog] {self. _addRow[repLog];}];}]},. dòng 42 - 173}];. dòng 175 - 191}][cửa sổ, jQuery, Định tuyến, swal];
Tôi thích dấu ngoặc đơn. Tôi cảm thấy như nó mang lại cho chức năng mũi tên của tôi cấu trúc hơn một chút. Nhưng mã khác có thể không có chúng
Bây giờ nếu đây là tất cả chức năng mũi tên đã làm, tôi sẽ khá thất vọng. Rốt cuộc, chúng ta có thực sự cần một cú pháp mới, chỉ để giúp chúng ta không phải gõ từ chức năng?
Để thể hiện điều đó, bên trong hàm ẩn danh, console.log[this, self]
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 31loadRepLogs. function[] {var self = this;$. ajax[{url. Lộ trình. tạo ['rep_log_list'],}]. sau đó [dữ liệu => {bảng điều khiển. nhật ký [cái này, bản thân];. dòng 38 - 40}]},. dòng 43 - 174}];. dòng 176 - 192}][cửa sổ, jQuery, Định tuyến, swal];
Chúng tôi biết rằng bên trong một chức năng ẩn danh, this luôn thay đổi thành một thứ gì đó khác biệt. Và đó là lý do tại sao chúng tôi đã thêm biến self. nó cho phép chúng tôi tham chiếu đến đối tượng RepLogApp của chúng tôi từ bên trong cuộc gọi lại
Ok, tìm trình duyệt của bạn và làm mới. Ồ, hãy xem cái này. this dường như là đối tượng RepLogApp của chúng tôi. Đúng vậy, this và self giống nhau. Gì. ?
Hóa ra, hàm ẩn danh cổ điển và hàm mũi tên mới có một điểm khác biệt. khi bạn sử dụng hàm mũi tên, biến this được giữ nguyên. Đó là một tin tuyệt vời, và đó là lý do tại sao bây giờ tôi sử dụng chức năng mũi tên ở mọi nơi trong mã của mình
Cuối cùng chúng ta cũng có thể loại bỏ thứ function3 ngớ ngẩn này. Và thay vào đó, bên dưới, hãy sử dụng this. Nhưng vì chúng ta đang ở trong một hàm ẩn danh khác, hãy thay thế nó bằng cú pháp mũi tên mới để mọi thứ hoạt động
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 31loadRepLogs. hàm[] {$. ajax[{url. Lộ trình. tạo ['rep_log_list'],}]. sau đó [dữ liệu => {$. mỗi [dữ liệu. các mục, [khóa, repLog] => {cái này. _addRow[repLog];}];}]},. dòng 41 - 172}];. dòng 174 - 190}][cửa sổ, jQuery, Định tuyến, swal];
Hãy thử điều đó. Nó vẫn làm việc
Hãy sử dụng cú pháp mũi tên ở mọi nơi. Dưới đây, khi chúng tôi sử dụng SweetAlert, hãy xóa biến self và - trong function6 - sử dụng function7 cho các đối số trống, sau đó thêm mũi tên. Bên trong, chúng ta có thể sử dụng this. Sử dụng lại chức năng mũi tên bên dưới
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 47handleRepLogDelete. hàm [e] {. dòng 49 - 52swal[{. dòng 54 - 57preConfirm. [] => {trả lại cái này. _deleteRepLog[$link];}}]. bắt [[arg] => {}];},. dòng 65 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Ở đây, chúng tôi không sử dụng this, nhưng tôi muốn nhất quán và sử dụng chức năng mũi tên ở mọi nơi
Tiếp tục đi. Bên trong phương pháp tiếp theo, loại bỏ self và thêm chức năng mũi tên của chúng tôi
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 65_deleteRepLog. hàm[$link] {. dòng 67 - 78}]. sau đó [[] => {. dòng 80 - 83}]},. dòng 86 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Làm tương tự cho =>1. Nhưng ở đây, chúng tôi đang sử dụng this, trước đây đã chỉ ra đối tượng Phần tử DOM đang mờ dần. Chúng tôi không thể sử dụng this nữa, nhưng điều đó vẫn ổn. Thay nó bằng =>4 và sau đó là =>5
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 65_deleteRepLog. hàm[$link] {. dòng 67 - 78}]. then[[] => {$hàng. fadeOut['bình thường', [] => {$hàng. tháo cái này. updateTotalWeightLifted[];}];}]},. dòng 86 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Kiểm tra kỹ xem mọi thứ có hoạt động không. Làm mới. Xóa một trong các mục và. hoàn hảo
Vì chúng ta sẽ sử dụng các hàm mũi tên cho tất cả các hàm ẩn danh, hãy tìm kiếm =>6. Đúng, chúng ta sẽ thay thế mọi thứ, ngoại trừ các phương thức trong các đối tượng của chúng ta. Xóa =>6 và thêm mũi tên
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 90handleNewFormSubmit. hàm[e] {. dòng 92 - 95$. mỗi [$ mẫu. serializeArray[], [key, fieldData] => {. dòng 97}];. dòng 99 - 106},. dòng 108 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Lặp lại lần nữa và xóa một biến self khác. chỉ cần sử dụng this
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 90handleNewFormSubmit. hàm[e] {. dòng 92 - 100. sau đó [[dữ liệu] => {điều này. _clearForm[]; cái này. _addRow[dữ liệu];}]. bắt [[errorData] => {điều này. _mapErrorsToForm[lỗiDữ liệu. lỗi];}];},. dòng 108 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Tôi sẽ tua nhanh qua phần còn lại của các thay đổi
Nếu bạn đang theo dõi thực sự chặt chẽ, bạn có thể nhận thấy một vấn đề. Trước đây, bên trong cuộc gọi lại loadRepLogs[]0, this là phần tử mà chúng tôi đang lặp lại vào đúng thời điểm đó
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 178$. mở rộng [Trợ giúp. nguyên mẫu, {tínhTotalWeight. hàm số[] {. dòng 181 này. $wrapper. tìm ['tbody tr']. mỗi [function [] {totalWeight += $[this]. dữ liệu ['trọng số'];}];. dòng 185 - 186}}];}][window, jQuery, Routing, swal];
Nhưng bây giờ chúng tôi đang sử dụng chức năng mũi tên, rõ ràng là nó sẽ không hoạt động. Đừng lo lắng. Chỉ cần cung cấp cho hàm mũi tên của bạn hai đối số. loadRepLogs[]2 và loadRepLogs[]3. Sử dụng loadRepLogs[]3 thay vì this
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 178$. mở rộng [Trợ giúp. nguyên mẫu, {tínhTotalWeight. hàm số[] {. dòng 181 này. $wrapper. tìm ['tbody tr']. mỗi [[chỉ mục, phần tử] => {totalWeight += $[phần tử]. dữ liệu ['trọng số'];}];. dòng 185 - 186}}];}][window, jQuery, Routing, swal];
Nếu chúng tôi tìm kiếm loadRepLogs[]6, sẽ có một điểm khác có cùng vấn đề. giải pháp tương tự. thêm loadRepLogs[]7 và sử dụng loadRepLogs[]3 bên trong
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 129_mapErrorsToForm. hàm [lỗiDữ liệu] {. dòng 131 - biểu mẫu 133$. tìm thấy['. đầu vào']. mỗi [[chỉ mục, phần tử] => {var fieldName = $[phần tử]. attr['tên'];var $wrapper = $[phần tử]. gần nhất['. nhóm biểu mẫu'];. dòng 137 - 145}];},. dòng 148 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Bây giờ chúng tôi đang sử dụng chức năng mũi tên ở mọi nơi, có một biến thể khác mà bạn sẽ thấy. Cuộn ngược lên và tìm tùy chọn function6 trên SweetAlert
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 47handleRepLogDelete. hàm [e] {. dòng 49 - 52swal[{. dòng 54 - 57preConfirm. [] => {trả lại cái này. _deleteRepLog[$link];}. dòng 61 - 62}];},. dòng 65 - 170}];. dòng 172 - 188}][cửa sổ, jQuery, Định tuyến, swal];
Trong trường hợp này, chức năng mũi tên không gì khác hơn là một câu lệnh console.log[this, self]0. Trong tình huống này, để thêm phần lạ mắt, bạn có thể loại bỏ hoàn toàn thân hàm và câu lệnh trả về
dòng 1 - 2[function[window, $, Routing, swal] {. dòng 4 - 26$. mở rộng [cửa sổ. RepLogApp. nguyên mẫu, {. dòng 28 - 47handleRepLogDelete. hàm [e] {. dòng 49 - 52swal[{. dòng 54 - 57preConfirm. [] => cái này. _deleteRepLog[$link]. dòng 59 - 60}];},. dòng 63 - 168}];. dòng 170 - 186}][cửa sổ, jQuery, Định tuyến, swal];
Khi bạn không có dấu ngoặc nhọn, điều đó có nghĩa là giá trị này sẽ được trả về. Thoạt nhìn có vẻ lạ, nhưng nó có nghĩa giống như những gì chúng ta đã biết trước đây. Bạn sẽ thấy loại nội dung này trong các ví dụ về mã
Phù. Sau khi thực hiện tất cả những thay đổi này, hãy làm mới và thử chúng. Danh sách tải, chúng tôi có thể xóa và biểu mẫu vẫn hợp lệ. chuối