Hướng dẫn javascript sequence - trình tự javascript

Vietnamese (Tiếng Việt) translation by Giang Nam (you can also view the original English article) Giang Nam (you can also view the original English article)

Sequence.js là một framework cho chuyển động trong CSS mà bạn có thể sử dụng để tạo ra các thanh trượt, các phần trình diễn và các ứng dụng trình bày theo các bước. Nó có tất cả các chức năng cần thiết được tích hợp; tất cả những gì bạn phải làm là thêm nội dung của bạn và định dạng hiển thị.

Khóa học ngắn mới Giới thiệu về Sequence.js của chúng tôi , sẽ dạy cho bạn những điều cơ bản của việc sử dụng Sequence.js và đặt nền tảng cho việc khám phá thêm về tất cả các tùy chọn và tính năng của nó.

Những gì bạn sẽ tìm hiểu

Trong khóa học ngắn này, chuyên gia hướng dẫn của bạn, Adi Purdila, sẽ giới thiệu nhanh về Sequence.js và giúp bạn tìm hiểu cách sử dụng nó bằng việc tạo ra một slide đơn giản để hiển thị các sản phẩm nổi bật.

Hướng dẫn javascript sequence - trình tự javascript
Hướng dẫn javascript sequence - trình tự javascript
Hướng dẫn javascript sequence - trình tự javascript

Bạn sẽ học:

  • làm thế nào để cài đặt Sequence.js
  • cách hoạt động của cấu trúc HTML
  • làm thế nào để khởi động plugin
  • làm thế nào để áp dụng định dạng và các chuyển động
  • làm thế nào để làm việc với một số tùy chọn và chủ đề

Vào cuối khóa học ngắn chỉ dài có nửa giờ đồng hồ này, bạn sẽ sẵn sàng để bắt đầu làm việc với framwork tạo chuyển động thú vị này.

Xem phần giới thiệu

Hướng dẫn javascript sequence - trình tự javascript

Tham gia khóa học

Bạn có thể tham gia khóa học mới của chúng tôi ngay lập tức với một gói 10 ngày dùng thử miễn phí khi đăng ký hàng tháng. Nếu bạn quyết định tiếp tục, chi phí chỉ có $15 một tháng, và bạn sẽ nhận được quyền truy cập vào hàng trăm các khóa học, với rất nhiều khóa học mới được thêm vào mỗi tuần.

Nếu bạn muốn khám phá thêm, hãy thử một số chuyển động và hiệu ứng sử dụng CSS tuyệt vời trên Envato Market.

Tạo một chuỗi là một nhiệm vụ lập trình phổ biến. Điều này là khá dễ dàng để đạt được bằng cách sử dụng một vòng lặp đơn giản. Tuy nhiên, với JavaScript, tồn tại một biến thể chức năng hơn bằng cách sử dụng đối tượng var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 5 mạnh mẽ. Điều này cho phép tạo ra tất cả các loại chuỗi, từ var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 6 đến danh sách các số nguyên tố, không có bất kỳ vòng lặp nào cả.without any loops at all.without any loops at all.

Giả sử bạn sắp tạo một danh sách các số var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 7 và đặt nó vào một mảng, một triển khai dựa trên vòng lặp có thể là:

var result = []; for [var i = 1; i != 4; ++i] result.push[i] console.log[result]; // [1, 2, 3]

Rõ ràng, điều chỉnh mã có thể mang lại một loại trình tự khác. Ví dụ, một chuỗi bảng chữ cái Latin là vấn đề chuyển đổi từng số thành chữ cái bên phải:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

Sử dụng các vòng lặp là tốt, nhưng chúng ta có thể nhận được các vòng lặp sans kết quả tương tự không? May mắn thay, JavaScript hoàn toàn có khả năng làm điều đó. Chúng ta chỉ cần dựa vào đối tượng tích hợp của nó var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 5. Trong phần giải thích sau đây, tất cả các phần được đề cập đến ECMA-262 tiêu chuẩn, phiên bản đặc tả ngôn ngữ Ecmascript chính thức 5.1.sans loops? Fortunately, JavaScript is quite capable of doing it. We just need to rely on its built-in object var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 5. In the following explanation, all the sections mentioned refer to the Standard ECMA-262, the official ECMAScript Language Specification edition 5.1.sans loops? Fortunately, JavaScript is quite capable of doing it. We just need to rely on its built-in object var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 5. In the following explanation, all the sections mentioned refer to the Standard ECMA-262, the official ECMAScript Language Specification edition 5.1.

Trái đất

Trước hết, chúng ta cần tạo một mảng có số lượng phần tử được chỉ định. Đối với ví dụ var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 9 đó, chúng ta cần một mảng 3 phần tử. May mắn thay, điều này là tầm thường:

Array[3];

Lưu ý rằng không cần sử dụng mới để xây dựng đối tượng, điều này được giải thích trong phần 15.4.1:

Khi mảng được gọi là một hàm chứ không phải là một hàm tạo, nó sẽ tạo và khởi tạo một đối tượng mảng mới.

Array[3]; 0 tạo ra một mảng có chiều dài 3, nó giống như Array[3]; 1. Tuy nhiên, mảng kết quả có lỗ hổng trong đó. Trong thực tế, mặc dù nó có 3 yếu tố, những yếu tố đó không tồn tại. Các lỗ như thế này không quá rõ ràng nếu bạn cố gắng nhìn trộm nội dung mảng. So sánh hai dòng:

Array[3].join['-']; // "--" [null,undefined,null].join['-']; // "--"

Chúng ta có thể xác minh sự tồn tại của một phần tử mảng giống như kiểm tra thuộc tính trong đối tượng JavaScript chung, sử dụng toán tử Array[3]; 2 [Mục 11.8.7]:

in Array[3]; // false 1 in Array[3]; // false 2 in Array[3]; // false 2 in [,,9]; // true

Như được chỉ ra bởi Axel Rauschmayer, các lỗ bên trong một mảng cũng được phát hiện với Array[3]; 3.

Nước uống

Làm thế nào để lấp đầy những lỗ hổng đó? Một mẹo được phát hiện bởi nhiều nhà phát triển JavaScript dày dạn [xem ví dụ: bài viết của Brandon Benvie, trên ES-Discuss] là sử dụng Array[3]; 4. Thay vì một số yếu tố trống, bây giờ chúng ta có Array[3]; 5 để thay thế chúng:

Array[3]; // [,,,] Array.apply[undefined, Array[3]]; // [undefined, undefined, undefined]

Để thực sự hiểu thủ thuật này, hãy nhớ lại cách Array[3]; 6 hoạt động [phần 15.3.4.3], đặc biệt là trong bước 8, chuyển một mảng thành một danh sách đối số cho hàm, được gọi là lan truyền. Không có gì ngạc nhiên khi phương pháp này khá thường được sử dụng để tìm giá trị tối thiểu hoặc tối đa trong một mảng. Trong đoạn sau, hai dòng giống hệt nhau:

Math.max[14, 3, 77]; // 77 Math.max.apply[Math, [14, 3, 77]]; // 77

Khi Array[3]; 7 nhận được một mảng có phần tử trống, nó sẽ được chuyển đổi thành Array[3]; 5 và do đó loại bỏ bất kỳ lỗ hổng nào trong mảng. Nếu chúng tôi kết hợp nó với xây dựng var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 5, hiệu ứng cuối cùng đang xây dựng một mảng mới với sự lây lan.

Array.apply[undefined, [1,,3]]; // is the same as Array[1, undefined, 3];

Hàng không

Bây giờ chúng ta có một mảng với số lượng phần tử phù hợp, làm thế nào để lấp đầy nó bằng trình tự phù hợp? Array[3].join['-']; // "--" [null,undefined,null].join['-']; // "--" 0 để giải cứu! Mục 15.4.4.19 cho thấy:

Bản đồ gọi CallbackFn một lần cho mỗi phần tử trong mảng, theo thứ tự tăng dần và xây dựng một mảng mới từ kết quả.

Xa hơn nữa, chúng tôi cũng quan sát rằng:

CallbackFn phải là một hàm chấp nhận ba đối số. CallbackFn được gọi với ba đối số: giá trị của phần tử, chỉ số của phần tử và đối tượng đang đi qua.

Đối số thứ hai, chỉ mục của phần tử, là chìa khóa cho giải pháp của chúng tôi:

________số 8

Và nếu trình tự là về hình vuông của một vài số nguyên đầu tiên:

Array.apply[undefined, Array[3]].map[function [x, y] { return [y + 1] * [y + 1]; }];

Cuối cùng, đối với bảng chữ cái tiếng Anh ‘Abcdefghijklmnopqrstuvwxyz,:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 0

Để biết các lựa chọn thay thế cho việc sử dụng Array[3].join['-']; // "--" [null,undefined,null].join['-']; // "--" 1, hãy xem thêm Brandon Benvie, sử dụng chức năng.call với giải pháp số hoặc Ben Alman, với Object.Keys.

Ngọn lửa

Với tính năng hiểu mảng mới của Ecmascript 6 sắp tới, các lớp lót ở trên có thể được điều chỉnh một chút. Ví dụ: trình tự bảng chữ cái có thể được viết là [lưu ý việc sử dụng hàm mũi tên]:array comprehension feature of the forthcoming ECMAScript 6, the above one-liners can be slightly tweaked. For example, the alphabets sequence might be written as [note the use of arrow function]:array comprehension feature of the forthcoming ECMAScript 6, the above one-liners can be slightly tweaked. For example, the alphabets sequence might be written as [note the use of arrow function]:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 1

Ở đây, việc chuyển đổi từ mỗi số sang chữ cái tương ứng được thực hiện bên ngoài cuộc gọi lại Array[3].join['-']; // "--" [null,undefined,null].join['-']; // "--" 1. Điều này làm cho mã dễ tiêu hóa hơn, nó giống như một bố cục thích hợp: tạo chuỗi trước và thực hiện một bước khác để chuyển đổi trình tự. Để biết chi tiết, hãy xem bài đăng trên blog trước đây của tôi [với hàng tấn ví dụ] trên Ecmascript 6 và khả năng hiểu mảng.

Vòng lặp được đánh giá cao, aren họ?

Phụ lục: Theo dõi, hãy xem thêm cách bạn có thể sử dụng cùng một cách tiếp cận để tạo danh sách các số nguyên tố, tính toán giai thừa và tạo ra chuỗi Fibonacci trong bài đăng trên blog mới: Số nguyên tố, Factorial và Fibonacci Series với JavaScript Mảng.: As a follow-up, see also how you can use the same approach to generate a list of prime numbers, compute the factorial, and produce the Fibonacci series in the new blog post: Prime Numbers, Factorial, and Fibonacci Series with JavaScript Array.: As a follow-up, see also how you can use the same approach to generate a list of prime numbers, compute the factorial, and produce the Fibonacci series in the new blog post: Prime Numbers, Factorial, and Fibonacci Series with JavaScript Array.

Cập nhật: Nếu bạn làm việc trong một môi trường hỗ trợ tiêu chuẩn ES2015 [thường được gọi một cách không chính thức cũng là ES6], bạn có thể tránh được rắc rối khi sử dụng Array[3]; 4 vì việc sử dụng Array#Fill dễ dàng hơn.Thay vì:: If you work in an environment that supports ES2015 standard [often informally known also as ES6], you can avoid the hassle of using Array[3]; 4 since it is easier to use Array#fill. Instead of:: If you work in an environment that supports ES2015 standard [often informally known also as ES6], you can avoid the hassle of using Array[3]; 4 since it is easier to use Array#fill. Instead of:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 2

Đơn giản chỉ cần viết:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 3

Cần một cái gì đó thậm chí ngắn hơn?Tận dụng lợi thế của toán tử lây lan:

var list = ''; for [var i = ; i != 26; ++i] list += String.fromCharCode[i + 65]; console.log[list]; // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 4