Navigation

    Vietnam

    Nodejs.vn

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    • Groups
    • Search
    1. Home
    2. Phong Nguyễn Dương
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    Phong Nguyễn Dương

    @Phong Nguyễn Dương

    3
    Reputation
    4
    Posts
    1
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Phong Nguyễn Dương Follow

    Best posts made by Phong Nguyễn Dương

    • JavaScript - 5 phút hiểu về Async/Await

      Những điều cần biết về Async/Await

      Chào mọi người, chúng ta lại gặp nhau trong series Javascipt.
      Hôm nay, chúng ta sẽ cùng tìm hiều về async await, cặp bài trùng giúp Promise hoàn hảo hơn.
      Oke, Let's go 😁 :

      I. Async / Await là gì?

      • Async / Await là một tính năng của JavaScript:
        +) Giúp chúng ta làm việc dễ dàng hơn với các hàm bất đồng bộ.
        +) Được xây dựng trên Promises và có thể sử dụng với tất cả các Promise .

      • Async - khai báo một hàm bất đồng bộ
        👉 Tự động biến đổi một hàm thông thường thành một Promise.
        👉 Khi gọi tới hàm async nó sẽ xử lý mọi thứ và được trả về kết quả trong hàm của nó.
        👉 Async cho phép sử dụng Await.

      • Await - tạm dừng việc thực hiện các hàm Async
        👉 Khi được đặt trước một Promise, nó sẽ đợi cho đến khi Promise kết thúc và trả về kết quả.
        👉 Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
        👉 Await chỉ có thể được sử dụng bên trong các hàm async.

      Chúng ta cùng xem qua ví dụ sau:

      async function func1() {
          console.log(1);
          var a = await 2;
          console.log(a);
      }
      func1();
      console.log(3);
      

      Kết quả:

      1
      3
      2
      

      Oke, giải thích một chút nha:

      • Chúng ta có thể thấy hàm func1 được gọi và thực hiện trước câu lệnh console.log(3).
        👉 Vậy câu lệnh đầu tiên được thực hiện là console.log(1).
      • Chương trình chạy tiếp và gặp dòng lệnh await. Nó tạm dừng việc thực hiện hàm func1.
        👉 Vậy câu lệnh thứ 2 được thực hiện là console.log(3).
      • Sau khi các dòng lệnh đồng bộ đã được thực hiện hết (những câu lệnh thông thường như console.log(3)). Chương trình sẽ thực hiện đến những câu lệnh sau await (câu lệnh chờ).
        👉 Vậy câu lệnh thứ 3 được thực hiện là console.log(2).

      Và chúng ta được kết quả như trên 😁 .

      II. Xử lý lỗi trong Async / Await
      Ta cùng xem ví dụ sau:

      
      async function func1() {
          try {
              var ketqua = await logicFunction();
              console.log(ketqua);
          } catch (error) {
              // lỗi của hàm logicFunction(nếu có) sẽ được in ra ở đây
              console.log(error);
          }
      }
      func1();
      

      Nếu muốn bắt lỗi khi đang sử dụng async await, chỉ đơn giản , chúng ta sẽ cho chúng vào trong khối try/catch.

      👉 Mệnh đề catch sẽ xử lý các lỗi gây ra bởi các hàm bất đồng bộ hoặc bất kỳ lỗi nào chúng ta có thể đã viết bên trong khối try.

      👉 Lưu ý: Và vì các hàm async đều trả về Promises, nên chúng ta có thể bắt lỗi giống như một Promise bình thường. Như sau:

      async function func1() {
              var ketqua = await logicFunction();
              console.log(ketqua);
      }
      func1()
      .then(success)
      .catch(error);
      

      III. TỔNG KẾT
      Vậy là chúng ta đã cùng nhau tìm hiểu về Async/Await.
      Với việc xuất hiện của Async/Await từ ES7 (hiểu nôm na là những phiên bản của ngôn ngữ: ECMAScript), thì việc xử lý với các hàm bất đồng bộ đã được giải quyết khá triệt để.

      Chúc các bạn thật thành thạo với Async/Await nha!!

      Nếu có phản hồi gì, hãy để lại bình luận phía dưới để chúng mình bổ sung và hoàn thiện hơn nữa trong những bài viết tiếp theo nha!!!
      Xin chào và hẹn gặp lại!!! 😁 😁

      posted in Tutorials
      Phong Nguyễn Dương
      Phong Nguyễn Dương
    • JavaScript: Tổng quát về Promise (Phần 1)

      KẺ GIẢI QUYẾT CALLBACK HELL

      👉 I. Sự ra đời của Promise
      Sử dụng callback đã từng là một phương pháp rất phổ biến với những developer, trong khi các hàm JavaScript thông thường sẽ trả về kết quả ngay khi kết thúc thì các hàm callback lại trì hoãn việc này.

      Do đó, callback hay được sử dụng trong trường hợp thực thi các lệnh liên quan tới nhập xuất dữ liệu như download, đọc file và giao tiếp với cơ sở dữ liệu,...

      Nhưng đi đêm lắm có ngày gặp ma, callback hell ra đời và gây ra rất nhiều khó khăn với việc sử dụng callback, mời bạn xem ví dụ dưới đây:

      function thuc_day(viecnaodo){
          viecnaodo();
      }
      
      function danh_rang(viecnaodo){
          viecnaodo();
      }
      
      function di_an_sang(viecnaodo){
          viecnaodo();
      }
      function main(){
          thuc_day(function(){
            danh_rang(function(){
              di_an_sang(function(){
                console.log('OMG!!!!');
              });
            });
          });
      }
      

      Chẳng hạn như ví dụ trên, ta muốn thực hiện các hàm thuc_day, danh_rang và di_an_sang theo thứ tự bằng cách gọi callback, rõ ràng code trên là không tối ưu và nó gây ra callback hell ( tình trạng các hàm callback lồng vào nhau ở quá nhiều tầng).
      👌 Từ đó Promise ra đời.

      🤷 Vậy Promise là gì??? Trong bài hôm nay, chúng ta sẽ cùng tìm hiểu sơ lược về Promise nha. 😁 Les's go:

      👉 II. Promise là gì và tác dụng của nó??

      • Promise là một cơ chế giúp chúng ta viết code theo dạng callback (hàm lồng hàm) một cách tối ưu nhất.
      • Hay sâu xa và chi tiết hơn, Promise là một cơ chế trong JavaScript giúp bạn thực thi các tác vụ *bất đồng bộ mà không rơi vào callback hell ( 😧 ai chưa hiểu ý này thì đọc hiểu ý trên là oke rồi nha).

      *bất đồng bộ: là ta sẽ đặt ra công việc nào đó thực hiện riêng, và trong lúc nó thực hiện riêng, ta sẽ làm công việc khác. ( như là trong khi đợi nước sôi thì ta đi chế mì vậy 😁 )

      👉 III. Cú pháp của một Promise điển hình.

      Đây là cú pháp cơ bản của một Promise:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          // reject();
      })
      .then(() => {
          // throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      

      Code trên sẽ chạy ra:

      Code logic
      Chạy nếu như resolve
      Luôn luôn chạy
      

      👉 Có vài điều cần lưu ý sơ qua về cú pháp của Promise (ở code trên 👆 ) nha:

      • nhiều callback (hàm) có thể được thêm bằng cách gọi then().

      • Bạn có thể tiếp tục gọi chuỗi then() sau một hàm bắt lỗi catch().

      👉 IV. TỔNG KẾT

      • Promise được sinh ra để sử dụng callback mà không mắc phải callback hell, nói chung là để tối ưu code.

      Mong rằng các bạn sẽ hiểu được tổng quát Promise là gì, cùng đó là chức năng, và sơ lược về cú pháp của một Promise.

      Nếu có phản hồi gì, xin hãy đóng góp cho chúng mình ở dưới phần bình luận 👇 để chúng mình có những bài viết hoàn thiện hơn nhé!! 😁

      Như vậy, 😁 Tổng quát về Promise (Phần 1) trong Series Javascipt xin phép được kết thúc tại đây. Hãy cùng chờ đợi Phần 2 với những câu chuyện thú vị và bổ ích hơn nha!!!

      Còn bây giờ thì, xin chào và hẹn gặp lại!!!🖐

      posted in Tutorials
      Phong Nguyễn Dương
      Phong Nguyễn Dương
    • Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

      sprite-sheet.gif

      👉🏻 Bạn muốn có một hiệu ứng tuyệt đẹp nào đó để ra mắt khách hàng??!!

      👉🏻 Bạn muốn trang web của mình thật sinh động nhưng lại chưa có nhiều kiến thức về back-end??!!

      👉🏻 Hay đơn giản, bạn là một tín đồ của những hiệu ứng đẹp mắt??!!

      Vậy thì Sprite Sheet là một sự lựa chọn không tồi đâu.

      Thấy chàng trai hát rock máu lửa trên kia chứ, yên tâm, bạn sẽ làm được sớm thôi.

      Còn giờ thì 😁 Let's go:

      Các bước thực hiện:

      • Bước 1: 😁 Đương nhiên là tạo trang HTML rồi !!
        Ở đây mình sẽ tạo một file index.html nha!!
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Sprite Sheet - Nodejs.vn, Nodemy.vn</title>
          <link rel="stylesheet" href="./style.css">
      </head>
      <body>
          <div style="display: flex; justify-content: center;">
              <div class="sprite-sheet">
      
              </div>
          </div>
      </body>
      </html>
      
      • Bước 2: 😁 Có ngôi nhà rồi, trang trí ngôi nhà thôi!!
        Thêm một file CSS nữa nha!! Ở đây là style.css
        Code như sau:
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      .sprite-sheet{
          width: 103px;
          height: 89px;
          background-image : url("https://i.imgur.com/FDHsu.png");
          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      }
      @keyframes moveX{
          from{background-position-x:0px;}
          to{background-position-x:-309px;}
      }
      @keyframes moveY{
          from{background-position-y:0px;}
          to{background-position-y:-178px;}
      }
      
      • Bước 3: Giải thích
        Okieee, tới phần hay rồi đây, ta cùng tìm hiểu sâu hơn nhé.

      Trước hết, ta cần hiểu tổng quát cơ chế của hiệu ứng Sprite Sheet:

      Nếu ai biết về những bộ phim nhựa cách đây hơn chục năm thì sẽ biết ngay nguyên lý của hiệu ứng này!!

      FDHsu.png
      Sprite Sheet sẽ chạy liên tục từng hình ảnh ở trên một cách thật nhanh và tạo cảm giác cho mắt chúng ta rằng hình ảnh đang chuyển động.
      😕 Nếu hơi khó hiểu thì anh em có thể phản hồi ở dưới nha!!!

      Giờ ứng dụng vào code nha:

      Ta nhìn lên ảnh trên thì có thể thấy, hàng ngang có 3 cột tương ứng với 3 khung hình, hàng dọc có 2 cột, mỗi cột chứa 3 khung hình.

      .sprite-sheet{
          width: 103px;
          height: 89px;
          background-image : url("https://i.imgur.com/FDHsu.png");
          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      }
      

      FDHsu.png
      Width, height là chiều dài và chiều cao của một khung hình.

      @keyframes moveX{
          from{background-position-x:0px;}
          to{background-position-x:-309px;}
      }
      @keyframes moveY{
          from{background-position-y:0px;}
          to{background-position-y:-178px;}
      }
      

      Chúng ta dễ thấy các con số:

      • background-position-x (309px) = width (103px) x 3 (số khung hình theo 1 hàng ngang)

      • background-position-y (178px) = width (89px) x 2 (số khung hình theo 1 hàng dọc)

      Ta hiểu rằng trong 0,25s mỗi khung hình di chuyển từ x = 0 đến x = -309px trong 3 bước, vậy mỗi bước nó sẽ di chuyển -103px, hay giật lùi 103px. (đương nhiên, màn hình windows của chúng ta vẫn hiển thị từ vị trí x = 0 nhé, vậy nó mới ảo diệu 😊 )

      FDHsu.png

      Như vậy, một lần hiệu ứng

          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      

      hoạt động, moveX và moveY sẽ đồng loạt chạy các khung hình trên trục của chúng.
      moveX và moveY phải đồng loạt chạy xong ở cùng một thời điểm, vậy nên mất 0,25s để chạy toàn bộ 1 hàng ngang thì 2 hàng ngang sẽ mất 0,5s (các bạn cùng theo dõi code nha).

      Một vài từ khóa:

      • animation: hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử.
        (với code trên, ta hiểu rằng moveX sẽ chạy trong 0,25s và lặp lại vô hạn bằng từ khóa "infinite").

      • @keyframe: dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
        (với code trên, ta hiểu rằng moveX sẽ dịch chuyển từ vị trí x = 0 đến vị trí x = -309px mỗi lần chạy).

      • steps: các bước thực hiện animation.

      Tổng kết:
      Vậy là chúng ta đã cùng nhau tìm hiểu thêm được một hiệu ứng rất tuyệt vời phải không nào 😁 .
      Nếu có bất cứ thắc mắc gì, hãy để lại phản hồi cho chúng mình biết nha!!
      Chúc mọi người thực hiện thành công Sprite Sheet!!!

      Xem code tại đây nha!!!

      posted in Case Study Thực Tế
      Phong Nguyễn Dương
      Phong Nguyễn Dương

    Latest posts made by Phong Nguyễn Dương

    • JavaScript - 5 phút hiểu về Async/Await

      Những điều cần biết về Async/Await

      Chào mọi người, chúng ta lại gặp nhau trong series Javascipt.
      Hôm nay, chúng ta sẽ cùng tìm hiều về async await, cặp bài trùng giúp Promise hoàn hảo hơn.
      Oke, Let's go 😁 :

      I. Async / Await là gì?

      • Async / Await là một tính năng của JavaScript:
        +) Giúp chúng ta làm việc dễ dàng hơn với các hàm bất đồng bộ.
        +) Được xây dựng trên Promises và có thể sử dụng với tất cả các Promise .

      • Async - khai báo một hàm bất đồng bộ
        👉 Tự động biến đổi một hàm thông thường thành một Promise.
        👉 Khi gọi tới hàm async nó sẽ xử lý mọi thứ và được trả về kết quả trong hàm của nó.
        👉 Async cho phép sử dụng Await.

      • Await - tạm dừng việc thực hiện các hàm Async
        👉 Khi được đặt trước một Promise, nó sẽ đợi cho đến khi Promise kết thúc và trả về kết quả.
        👉 Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
        👉 Await chỉ có thể được sử dụng bên trong các hàm async.

      Chúng ta cùng xem qua ví dụ sau:

      async function func1() {
          console.log(1);
          var a = await 2;
          console.log(a);
      }
      func1();
      console.log(3);
      

      Kết quả:

      1
      3
      2
      

      Oke, giải thích một chút nha:

      • Chúng ta có thể thấy hàm func1 được gọi và thực hiện trước câu lệnh console.log(3).
        👉 Vậy câu lệnh đầu tiên được thực hiện là console.log(1).
      • Chương trình chạy tiếp và gặp dòng lệnh await. Nó tạm dừng việc thực hiện hàm func1.
        👉 Vậy câu lệnh thứ 2 được thực hiện là console.log(3).
      • Sau khi các dòng lệnh đồng bộ đã được thực hiện hết (những câu lệnh thông thường như console.log(3)). Chương trình sẽ thực hiện đến những câu lệnh sau await (câu lệnh chờ).
        👉 Vậy câu lệnh thứ 3 được thực hiện là console.log(2).

      Và chúng ta được kết quả như trên 😁 .

      II. Xử lý lỗi trong Async / Await
      Ta cùng xem ví dụ sau:

      
      async function func1() {
          try {
              var ketqua = await logicFunction();
              console.log(ketqua);
          } catch (error) {
              // lỗi của hàm logicFunction(nếu có) sẽ được in ra ở đây
              console.log(error);
          }
      }
      func1();
      

      Nếu muốn bắt lỗi khi đang sử dụng async await, chỉ đơn giản , chúng ta sẽ cho chúng vào trong khối try/catch.

      👉 Mệnh đề catch sẽ xử lý các lỗi gây ra bởi các hàm bất đồng bộ hoặc bất kỳ lỗi nào chúng ta có thể đã viết bên trong khối try.

      👉 Lưu ý: Và vì các hàm async đều trả về Promises, nên chúng ta có thể bắt lỗi giống như một Promise bình thường. Như sau:

      async function func1() {
              var ketqua = await logicFunction();
              console.log(ketqua);
      }
      func1()
      .then(success)
      .catch(error);
      

      III. TỔNG KẾT
      Vậy là chúng ta đã cùng nhau tìm hiểu về Async/Await.
      Với việc xuất hiện của Async/Await từ ES7 (hiểu nôm na là những phiên bản của ngôn ngữ: ECMAScript), thì việc xử lý với các hàm bất đồng bộ đã được giải quyết khá triệt để.

      Chúc các bạn thật thành thạo với Async/Await nha!!

      Nếu có phản hồi gì, hãy để lại bình luận phía dưới để chúng mình bổ sung và hoàn thiện hơn nữa trong những bài viết tiếp theo nha!!!
      Xin chào và hẹn gặp lại!!! 😁 😁

      posted in Tutorials
      Phong Nguyễn Dương
      Phong Nguyễn Dương
    • JavaScript: Tổng quát về Promise (Phần 2)

      CHI TIẾT VỀ PROMISE

      Xin chào các bạn đã quay trở lại với series về Promise trong Javascript.
      😊 Hôm nay chúng ta sẽ cùng đi tìm hiểu sâu hơn về Promise nhé.
      Cùng nhắc lại một chút nhé. Đây là cú pháp cơ bản của một Promise:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          // reject();
      })
      .then(() => {
          // throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      

      Code trên sẽ chạy ra:

      Code logic
      Chạy nếu như resolve
      Luôn luôn chạy
      

      Oke, 😊 Let's go:

      👉 I. Cặp anh em Resolve và Reject.

      Để tạo ra một Promise thì anh em dùng class Promise có sẵn trong trình duyệt như sau:

      const p = new Promise(
        /* executor */ function(resolve, reject) {
         
        },
      )
      

      Trong đó, executor là một hàm có hai tham số:

      • resolve là hàm sẽ được gọi khi promise hoàn thành.

      • reject là hàm sẽ được gọi khi có lỗi xảy ra.

      Và bây giờ bạn hãy nhìn lên đoạn code mà tôi có đề cập ở đầu bài:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          // reject();
      })
      .then(() => {
          // throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      

      Điều bạn thắc mắc??? 👇

      • Resolve và Reject đều chạy trong Promise??
        Thì code sẽ luôn ưu tiên resolve và chạy trong then(), tức là nếu trong Promise ở code trên mà như thế này:
      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          reject();
      })
      

      thì kết quả vẫn sẽ là:

      Code logic
      Chạy nếu như resolve
      Luôn luôn chạy
      
      • Vậy dòng sau đây có có ý nghĩa gì??
      // throw new Error('Something failed');
      

      Dòng này có tác dụng bắt lỗi khi chúng ta code logic tiếp ở trong then().
      Code sau dòng này ở trong then() sẽ không được chạy nữa, và nó sẽ chạy tiếp ở hàm bắt lỗi catch().
      Tức là nếu code đổi thành:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          reject();
      })
      .then(() => {
          throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      
      

      Kết quả sẽ là :

      Code logic
      Chạy nếu như reject
      Luôn luôn chạy
      

      Oke, vậy mọi thứ đã rõ hơn chưa, để chúng ta cùng tiếp tục hành trình nào 😁 ...

      👉 II. .then(), .catch(), .finally() có tác dụng thế nào??

      Lưu ý:

      • Luôn đưa vào .then() một hàm:
        Bạn thử đoán xem đoạn code sau sẽ in ra gì?
      Promise.resolve(1)
        .then(2)
        .then(console.log)
      

      và kết quả là:

      1
      

      ☝ Phương thức .then đòi hỏi tham số của nó phải là một hàm. Nếu bạn đưa vào .then() một giá trị, nó sẽ bị bỏ qua.

      • Phân biệt .then(resolve, reject) và .then(resolve) .catch(reject)
        Cùng xem qua đoạn code sau nha:
      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          reject();
      })
      .then(
          resolve => {
              throw new Error('Something failed');
          },
          reject =>{
              console.log("Chạy nếu như resolve"); // không chạy đến dòng này
          }
      )
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      

      Kết quả là:

      Code logic
      Chạy nếu như reject
      

      💪 Hàm reject trong .then(resolve, reject) chỉ có thể bắt được lỗi từ những .then() phía trước nó, mà không thể bắt được lỗi xảy ra trong hàm resolve cùng cấp.

      • Điều thú vị về .finally()
        Bên cạnh .then() và .catch(), chúng ta còn có .finally().

      Phương thức này nhận vào một hàm và sẽ được kích hoạt dù cho promise trước nó hoàn thành hay xảy ra lỗi.
      Bạn nhìn lại kết quả của những đoạn code chúng ta đã thử qua, dòng

      console.log("Luôn luôn chạy");
      

      trong finally() luôn luôn chạy đúng không?? 🤗 đó chính là tác dụng của finally()...

      👉 III. TỔNG KẾT
      Oke, vậy là trong series này, chúng ta tiếp tục hiểu sâu thêm về Promise rồi đúng không nào??
      Nếu có phản hồi gì, hãy đóng góp cho chúng mình ở phía bên dưới để chúng mình bổ sung để hoàn thiện hơn nha.
      Chúc bạn thực hiện và kiểm soát được Promise.
      Còn bây giờ thì, xin chào và hẹn gặp lại ở các series tiếp theo.🖐

      posted in Tutorials
      Phong Nguyễn Dương
      Phong Nguyễn Dương
    • JavaScript: Tổng quát về Promise (Phần 1)

      KẺ GIẢI QUYẾT CALLBACK HELL

      👉 I. Sự ra đời của Promise
      Sử dụng callback đã từng là một phương pháp rất phổ biến với những developer, trong khi các hàm JavaScript thông thường sẽ trả về kết quả ngay khi kết thúc thì các hàm callback lại trì hoãn việc này.

      Do đó, callback hay được sử dụng trong trường hợp thực thi các lệnh liên quan tới nhập xuất dữ liệu như download, đọc file và giao tiếp với cơ sở dữ liệu,...

      Nhưng đi đêm lắm có ngày gặp ma, callback hell ra đời và gây ra rất nhiều khó khăn với việc sử dụng callback, mời bạn xem ví dụ dưới đây:

      function thuc_day(viecnaodo){
          viecnaodo();
      }
      
      function danh_rang(viecnaodo){
          viecnaodo();
      }
      
      function di_an_sang(viecnaodo){
          viecnaodo();
      }
      function main(){
          thuc_day(function(){
            danh_rang(function(){
              di_an_sang(function(){
                console.log('OMG!!!!');
              });
            });
          });
      }
      

      Chẳng hạn như ví dụ trên, ta muốn thực hiện các hàm thuc_day, danh_rang và di_an_sang theo thứ tự bằng cách gọi callback, rõ ràng code trên là không tối ưu và nó gây ra callback hell ( tình trạng các hàm callback lồng vào nhau ở quá nhiều tầng).
      👌 Từ đó Promise ra đời.

      🤷 Vậy Promise là gì??? Trong bài hôm nay, chúng ta sẽ cùng tìm hiểu sơ lược về Promise nha. 😁 Les's go:

      👉 II. Promise là gì và tác dụng của nó??

      • Promise là một cơ chế giúp chúng ta viết code theo dạng callback (hàm lồng hàm) một cách tối ưu nhất.
      • Hay sâu xa và chi tiết hơn, Promise là một cơ chế trong JavaScript giúp bạn thực thi các tác vụ *bất đồng bộ mà không rơi vào callback hell ( 😧 ai chưa hiểu ý này thì đọc hiểu ý trên là oke rồi nha).

      *bất đồng bộ: là ta sẽ đặt ra công việc nào đó thực hiện riêng, và trong lúc nó thực hiện riêng, ta sẽ làm công việc khác. ( như là trong khi đợi nước sôi thì ta đi chế mì vậy 😁 )

      👉 III. Cú pháp của một Promise điển hình.

      Đây là cú pháp cơ bản của một Promise:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          // reject();
      })
      .then(() => {
          // throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      

      Code trên sẽ chạy ra:

      Code logic
      Chạy nếu như resolve
      Luôn luôn chạy
      

      👉 Có vài điều cần lưu ý sơ qua về cú pháp của Promise (ở code trên 👆 ) nha:

      • nhiều callback (hàm) có thể được thêm bằng cách gọi then().

      • Bạn có thể tiếp tục gọi chuỗi then() sau một hàm bắt lỗi catch().

      👉 IV. TỔNG KẾT

      • Promise được sinh ra để sử dụng callback mà không mắc phải callback hell, nói chung là để tối ưu code.

      Mong rằng các bạn sẽ hiểu được tổng quát Promise là gì, cùng đó là chức năng, và sơ lược về cú pháp của một Promise.

      Nếu có phản hồi gì, xin hãy đóng góp cho chúng mình ở dưới phần bình luận 👇 để chúng mình có những bài viết hoàn thiện hơn nhé!! 😁

      Như vậy, 😁 Tổng quát về Promise (Phần 1) trong Series Javascipt xin phép được kết thúc tại đây. Hãy cùng chờ đợi Phần 2 với những câu chuyện thú vị và bổ ích hơn nha!!!

      Còn bây giờ thì, xin chào và hẹn gặp lại!!!🖐

      posted in Tutorials
      Phong Nguyễn Dương
      Phong Nguyễn Dương
    • Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

      sprite-sheet.gif

      👉🏻 Bạn muốn có một hiệu ứng tuyệt đẹp nào đó để ra mắt khách hàng??!!

      👉🏻 Bạn muốn trang web của mình thật sinh động nhưng lại chưa có nhiều kiến thức về back-end??!!

      👉🏻 Hay đơn giản, bạn là một tín đồ của những hiệu ứng đẹp mắt??!!

      Vậy thì Sprite Sheet là một sự lựa chọn không tồi đâu.

      Thấy chàng trai hát rock máu lửa trên kia chứ, yên tâm, bạn sẽ làm được sớm thôi.

      Còn giờ thì 😁 Let's go:

      Các bước thực hiện:

      • Bước 1: 😁 Đương nhiên là tạo trang HTML rồi !!
        Ở đây mình sẽ tạo một file index.html nha!!
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Sprite Sheet - Nodejs.vn, Nodemy.vn</title>
          <link rel="stylesheet" href="./style.css">
      </head>
      <body>
          <div style="display: flex; justify-content: center;">
              <div class="sprite-sheet">
      
              </div>
          </div>
      </body>
      </html>
      
      • Bước 2: 😁 Có ngôi nhà rồi, trang trí ngôi nhà thôi!!
        Thêm một file CSS nữa nha!! Ở đây là style.css
        Code như sau:
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      .sprite-sheet{
          width: 103px;
          height: 89px;
          background-image : url("https://i.imgur.com/FDHsu.png");
          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      }
      @keyframes moveX{
          from{background-position-x:0px;}
          to{background-position-x:-309px;}
      }
      @keyframes moveY{
          from{background-position-y:0px;}
          to{background-position-y:-178px;}
      }
      
      • Bước 3: Giải thích
        Okieee, tới phần hay rồi đây, ta cùng tìm hiểu sâu hơn nhé.

      Trước hết, ta cần hiểu tổng quát cơ chế của hiệu ứng Sprite Sheet:

      Nếu ai biết về những bộ phim nhựa cách đây hơn chục năm thì sẽ biết ngay nguyên lý của hiệu ứng này!!

      FDHsu.png
      Sprite Sheet sẽ chạy liên tục từng hình ảnh ở trên một cách thật nhanh và tạo cảm giác cho mắt chúng ta rằng hình ảnh đang chuyển động.
      😕 Nếu hơi khó hiểu thì anh em có thể phản hồi ở dưới nha!!!

      Giờ ứng dụng vào code nha:

      Ta nhìn lên ảnh trên thì có thể thấy, hàng ngang có 3 cột tương ứng với 3 khung hình, hàng dọc có 2 cột, mỗi cột chứa 3 khung hình.

      .sprite-sheet{
          width: 103px;
          height: 89px;
          background-image : url("https://i.imgur.com/FDHsu.png");
          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      }
      

      FDHsu.png
      Width, height là chiều dài và chiều cao của một khung hình.

      @keyframes moveX{
          from{background-position-x:0px;}
          to{background-position-x:-309px;}
      }
      @keyframes moveY{
          from{background-position-y:0px;}
          to{background-position-y:-178px;}
      }
      

      Chúng ta dễ thấy các con số:

      • background-position-x (309px) = width (103px) x 3 (số khung hình theo 1 hàng ngang)

      • background-position-y (178px) = width (89px) x 2 (số khung hình theo 1 hàng dọc)

      Ta hiểu rằng trong 0,25s mỗi khung hình di chuyển từ x = 0 đến x = -309px trong 3 bước, vậy mỗi bước nó sẽ di chuyển -103px, hay giật lùi 103px. (đương nhiên, màn hình windows của chúng ta vẫn hiển thị từ vị trí x = 0 nhé, vậy nó mới ảo diệu 😊 )

      FDHsu.png

      Như vậy, một lần hiệu ứng

          animation: moveX 0.25s steps(3) infinite,
                     moveY 0.5s steps(2) infinite;
      

      hoạt động, moveX và moveY sẽ đồng loạt chạy các khung hình trên trục của chúng.
      moveX và moveY phải đồng loạt chạy xong ở cùng một thời điểm, vậy nên mất 0,25s để chạy toàn bộ 1 hàng ngang thì 2 hàng ngang sẽ mất 0,5s (các bạn cùng theo dõi code nha).

      Một vài từ khóa:

      • animation: hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử.
        (với code trên, ta hiểu rằng moveX sẽ chạy trong 0,25s và lặp lại vô hạn bằng từ khóa "infinite").

      • @keyframe: dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
        (với code trên, ta hiểu rằng moveX sẽ dịch chuyển từ vị trí x = 0 đến vị trí x = -309px mỗi lần chạy).

      • steps: các bước thực hiện animation.

      Tổng kết:
      Vậy là chúng ta đã cùng nhau tìm hiểu thêm được một hiệu ứng rất tuyệt vời phải không nào 😁 .
      Nếu có bất cứ thắc mắc gì, hãy để lại phản hồi cho chúng mình biết nha!!
      Chúc mọi người thực hiện thành công Sprite Sheet!!!

      Xem code tại đây nha!!!

      posted in Case Study Thực Tế
      Phong Nguyễn Dương
      Phong Nguyễn Dương