7 khái niệm Javascript cơ bản không thể bỏ qua

Có thể nói trong những năm gần đây thì ngôn ngữ JavaScript đã trở nên rất thông dụng. Có rất nhiều framework ra đời được viết bằng ngôn ngữ lập trình Javascript, từ frontend cho tới backend thì ở đâu cũng có mặt nó.

Chọn đến Javascript là nhắc đến khái niệm thiết lập bất đồng bộ trình. Vì vậy phải làm sao để ứng dụng chạy đúng luồng mà bạn mong muốn? Kí ức Callback ra đời.

Tuy nhiên, khi bạn sử dụng gọi lại một cách vô tội vạ sẽ dẫn đến địa ngục gọi lại . Đây là một mùi cực kỳ tệ hại, làm cho bộ mã nguồn trở nên khó đọc, khó bảo trì và dễ phát sinh lỗi.

Để giải quyết vấn đề gọi lại địa ngục, người ta lại nghĩ ra Promises.

Promise là một cơ chế đặc biệt trong JavaScript giúp bạn thực hiện các nhiệm vụ bất đồng bộ mà không bị gọi lại địa ngục hay kim tự tháp diệt vong.

Promises là trung tâm của thế giới thiết lập bất đồng bộ Javascript. Hiểu cách thức hoạt động và sử dụng nó một cách chính xác là điều cần thiết để xây dựng ứng dụng javascript cơ bản hiện đại.

Mình sẽ lấy một ví dụ về Callback hell:

api . getUser ( 'pikalong' , function ( err , user ) { if ( err ) ném err   api . getPostsOfUser ( user , function ( err , posts ) { if ( err ) ném err     api . getCommentsOfPosts ( posts , function ( err , comments ) {  
    
  
      
  
      // vân vân và mây mây... } ) } ) } )
    
  

Và sử dụng Promise để xử lý địa ngục gọi lại như sau:

api . getUser ( 'pikalong' ) . sau đó ( người dùng = > api . getPostsOfUser ( người dùng ) ) . sau đó ( bài viết = > api.getCommentsOfPosts ( bài viết ) ) . bắt ( err = > { ném err } )
  
  
    

Bạn thấy code đẹp trai  hơn chưa!

Mặc dù mã viết sử dụng hứa hẹn giúp mã nguồn trở nên trong sáng hơn rất nhiều. Tuy nhiên, nếu không cẩn thận thì vẫn có thể bị hứa địa ngục. “Tránh vỏ dưa lại vỏ dừa”.

Ngoài ra, nếu bạn đã quen với ngôn ngữ lập trình tuần tự như PHP, Java … thì việc tiếp cận với Javascript sẽ trở nên cực đoan.

Vì vậy, Async/Await ra đời. Từ khóa Async/Await giúp mã nguồn Javascript chạy tuần tự từ trên xuống dưới. Nhờ đó, bạn có thể viết mã không đồng bộ theo cách đồng bộ.

Đây là một ví dụ về Async/Await:

chức năng không đồng bộ ( ) { thử { const user = đang chờ api . getUser ( 'pikalong' ) const posts = await api . getPostsOfUser ( người dùng ) const comments = đang chờ api . getCommentsOfPosts ( bài viết ) 
   
     
     
     

    bảng điều khiển . nhật ký ( bình luận ) } bắt ( err ) {     console . nhật ký ( err ) } }
     

  

Cần lưu ý là kết quả trả về của chức năng async luôn là một lời hứa.

Hiện tại thì cả Promise và Async/Await đều được hỗ trợ bởi tất cả các trình duyệt hiện đại (ngoại trừ IE11). Còn lại máy chủ (Nodejs), cả Promise và Async/Await đều được hỗ trợ bởi phiên bản mới nhất của Nodejs.

Để tạo một yêu cầu từ máy khách lên máy chủ lấy dữ liệu. Bạn có nhiều cách, sử dụng Ajax là hạn chế. Ngoài ra, bạn cũng có thể sử dụng . fetch()

Một ứng dụng hiện đại, có thể không thể thiếu phần kết nối tới máy chủ. Do đó,   được sử dụng rất nhiều.fetch()

Fetch API là một API đơn giản cho việc gửi và nhận yêu cầu bằng js.  same with XMLHttpRequest, but the current point better is   return to a Promise.Fetch()fetch()

Vì vậy, bạn có thể sử dụng   kết hợp với Async/Await hoặc Promise để code được “sạch sẽ” hơn.fetch()

Để dễ hình dung, mình lấy một ví dụ đơn giản như sau:

chức năng không đồng bộ getRedditJSON ( ) { const phản hồi = đang chờ tìm nạp ( 'https://www.reddit.com/.json' ) 
   

  phản hồi trả về . json ( ) }


getRedditJSON ( ) . sau đó ( ( dữ liệu ) = > {   console . log ( dữ liệu ) } )  

Nếu lần trước nhắc đến Javascript mà lại muốn viết hướng đối tượng thì thật buồn cười. Nhưng giờ thì khác. Rất nhiều framework javascript ra đời dựa trên component như ReactJs,  VueJs … Đặc biệt, sự có mặt của  TypeScript  đã mang các khái niệm Giao diện, kiểm tra kiểu tĩnh lên Javascript.

Với TypeScript, giờ bạn có thể viết mã sạch hơn, ứng dụng thần kinh SOLID vào mã nguồn. Nếu bạn tò mò về cách ứng dụng triết lý SOLID trên Javscript thì hãy đọc thêm bài viết này:  SOLID trong Node.js

Chính vì điều này mà bạn cần phải hiểu và nắm vững các khái niệm về Lớp/Đối tượng giống như ngôn ngữ Java.

nhập Phản ứng từ 'phản ứng' ;   

xuất giao diện SampleComponentProps {   firstword : string ,   secondword : string }   
 
 


giao diện xuất SampleComponentState {   cụm từ : chuỗi }   
 


lớp SampleComponent mở rộng React . Thành phần < SampleComponentProps , SampleComponentState > { trạng thái chỉ đọc : SampleComponentState = {     cụm từ : '' }   
  
     
 
  

  hàm tạo ( props : SampleComponentProps ) { super ( props ) cái này . trạng thái = {       cụm từ : `$ { đạo cụ . từ đầu tiên } $ { đạo cụ . từ thứ hai } ` } }  
    
      
 
    
  

  kết xuất ( ) { const { cụm từ } = cái này . trả về trạng thái ( < div > < p > { cụm từ } < / p > < / div > ) } } 
       
     
      
        
      
    
  


xuất SampleComponent mặc định ;  

Qua ví dụ trên, bạn đã biết được về Thành phần, Lớp, Đối tượng, Trình xây dựng và giao diện TypeScript.

Như mình đã nói ở trên, ngày nay càng nhiều Javascript Framework ra đời và phổ biến dựa trên  component . Điển hình là ReactJS của facebook, VueJS…

Và để sử dụng thành phần trong dự án, bạn sẽ phải sử dụng Nhập/Xuất rất nhiều. Mặc dù, hai khái niệm này rất dễ dàng. Nhưng cũng đừng chủ quan mà học lướt qua. Nếu bạn sử dụng đúng cách Nhập/Xuất có thể cải thiện đáng kể hiệu suất và kích thước ứng dụng.

Khi bạn học lập trình ứng dụng web, bạn sẽ hiểu được tầm quan trọng của việc lập trình bất đồng bộ.

Trong giới hạn bất đồng bộ, ngữ cảnh của mã thực thi bị thay đổi liên tục. Là nhà phát triển, bạn sẽ dễ dàng hiểu hơn mã nguồn bất đồng bộ khi hiểu rõ cách thức từ khóa “this” hoạt động thế nào.

Đặc thù của ứng dụng web luôn lắng nghe và phản hồi lại những tương tác của người dùng. Có rất nhiều cách để xử lý vấn đề này, trong đó kiểu thiết kế hướng sự kiện ra đời để xử lý dữ liệu sự kiện và hành động phản hồi.

Ví dụ, mô hình MVC với liên kết dữ liệu 2 chiều đã tồn tại trong thời gian dài. Với kiểu thiết kế này, Mô hình sẽ được cập nhật cùng với Xem thông qua bộ điều khiển. Khi Model thay đổi thì toàn bộ View cũng sẽ thay đổi theo và ngược lại.

Với cách thiết kế này thì thực sự giúp bạn dễ dàng viết mã thiết kế giao diện. Tuy nhiên, nhược điểm là khó gỡ lỗi khi giao diện phức tạp.

Triết lý hướng sự kiện ra đời để giải quyết điều đó. Với thần lý này, các thành phần trong Chế độ xem sẽ chỉ cập nhật khi xuất hiện hành động và chỉ cập nhật bản thân nó mà không cập nhật toàn bộ Chế độ xem.

Sẽ thật khập khiễng, khi bạn học về Javascript mà lại không biết về Event, Event Listeners. Khi tìm hiểu về cơ bản Javascript, bạn sẽ thấy thông báo về Sự kiện. Kiểu như thế này:

var myEl = tài liệu . getElementById ( 'myelement' ) ;

myel . addEventListener ( 'nhấp chuột' , hàm ( ) {     cảnh báo ( 'Xin chào thế giới' ) ; } , sai ) ;  

 

myel . addEventListener ( 'nhấp chuột' , chức năng ( ) {     cảnh báo ( 'Xin chào thế giới một lần nữa!!!' ) ; } , sai ) ;  

 

#Tầm kết

Trên đây là những khái niệm Javascript cơ bản cực kỳ quan trọng. Vì vậy, mình khuyên chân thành bạn nên bỏ qua nhiều thời gian hơn là một chút để hiểu kỹ những khái niệm này.

Javascript là ngôn ngữ khó học nhưng đã biết thì cực thích.

Tương lai của javascript đang rất mở rộng, nên mình hi vọng các bạn sẽ thích ngôn ngữ này.
>> Xem thêm:

12 Thuật ngữ bạn nhất định phải biết khi lập trình web (PHẦN 1)

Viết clean code: Code “đẹp trai” và code “xấu gái” có gì hay ho?