Vì chúng tôi đã xác định các thông báo thuộc loại có thể nên chúng tôi cho phép nó có giá trị rỗng hoặc không xác định. Nhưng điều này không cho chúng ta quyền thực hiện các thao tác trên nó (như .length hoặc .map) mà không kiểm tra null, vì nếu giá trị của thông báo thực sự là null hoặc không xác định thì sẽ xảy ra lỗi loại khi chúng ta thử thao tác trên Nó.

Vì vậy, hãy quay lại và cập nhật chức năng xem của chúng ta thành một cái gì đó như thế này:

Const MyComponent = (( tin nhắn, isFetching ): AppState) => ( if (isFetching) ( return ) else if (tin nhắn === null || tin nhắn === không xác định) ( return

Lợi ích #7: Giảm số lượng bài kiểm tra đơn vị

Ví dụ: hãy quay lại hàm CalculateAreas của chúng ta với các kiểu động và cách xử lý lỗi.

Const CalculateAreas = (radii) => ( // Xử lý đầu vào không xác định hoặc null if (!radii) ( ném new Error("Thiếu đối số"); ) // Xử lý đầu vào không phải mảng if (!Array.isArray(radii) ) ( ném Lỗi mới("Đối số phải là một mảng"); ) var khu vực = ; for (var i = 0; i< radii.length; i++) { if (typeof radii[i] !== "number") { throw new Error("Array must contain valid numbers only"); } else { areas[i] = 3.14 * (radii[i] * radii[i]); } } return areas; };
Nếu chúng tôi là những lập trình viên siêng năng, chúng tôi có thể xem xét việc kiểm tra các tham số được truyền không hợp lệ để xác minh rằng chúng được chương trình của chúng tôi xử lý chính xác:

It("không hoạt động - trường hợp 1", () => ( Expect(() => CalculateAreas()).to.throw(Error); )); it("không hoạt động - trường hợp 2", () => ( mong đợi(() => tínhAreas(không xác định).to.throw(Error); )); it("không hoạt động - trường hợp 2", () => ( mong đợi(() => CalculateAreas("xin chào")).to.throw(Error); ));
… và như thế. Nhưng rất có thể chúng tôi sẽ quên kiểm tra một số trường hợp nguy hiểm - và khách hàng của chúng tôi sẽ là người phát hiện ra vấn đề. :(

Vì các thử nghiệm chỉ dựa trên các tình huống mà chúng tôi nghĩ ra để thử nghiệm nên chúng mang tính tồn tại và trên thực tế, chúng rất dễ bị bỏ qua.

Mặt khác, khi chúng ta cần đặt loại:

Const tính Diện tích = (bán kính: Mảng ): Mảng => ( var khu vực = ; for (var i = 0; i< radii.length; i++) { areas[i] = 3.14 * (radii[i] * radii[i]); } return areas; };
... chúng tôi không chỉ nhận được sự đảm bảo rằng mục tiêu của chúng tôi phù hợp với thực tế, mà những thử nghiệm như vậy còn đáng tin cậy hơn. Không giống như các bài kiểm tra theo quy tắc ngón tay cái, các loại đều phổ biến và khó đánh bại hơn.

Nếu bạn nhìn nó một cách tổng thể, thì bức tranh là thế này: các bài kiểm tra rất tốt để kiểm tra logic và các loại rất tốt để kiểm tra các loại dữ liệu. Khi chúng được kết hợp lại, tổng của các bộ phận sẽ tạo ra hiệu ứng thậm chí còn lớn hơn.

Lợi ích #8: Công cụ tạo mô hình miền

Giả sử ứng dụng cung cấp cho người dùng một hoặc nhiều phương thức thanh toán để mua hàng trên nền tảng. Người dùng được phép chọn một trong ba phương thức thanh toán (Paypal, thẻ tín dụng, Tài khoản ngân hàng).

Vì vậy, trước tiên chúng tôi sẽ áp dụng bí danh loại cho ba phương thức thanh toán:

Gõ Paypal = ( id: số, gõ: "Paypal" ); gõ CreditCard = ( id: số, gõ: "CreditCard" ); gõ Ngân hàng = ( id: số, gõ: "Ngân hàng" );
Bây giờ bạn có thể đặt loại PaymentMethod thành một tập hợp rời rạc với ba trường hợp:

Nhập Phương thức thanh toán = Paypal | Thẻ Tín Dụng | Ngân hàng;
Bây giờ hãy tạo một mô hình trạng thái cho ứng dụng của chúng ta. Để đơn giản, hãy giả sử rằng các ứng dụng này chỉ bao gồm các phương thức thanh toán có sẵn cho người dùng.

Kiểu Model = ( PaymentMethods: Array };
Nó có thể chấp nhận được không? Chà, chúng tôi biết rằng để có được phương thức thanh toán của người dùng, bạn cần đưa ra yêu cầu tới API và tùy thuộc vào kết quả cũng như giai đoạn của quy trình, ứng dụng có thể chấp nhận tiểu bang khác nhau. Trong thực tế, có thể có bốn trạng thái:

1) Chúng tôi chưa nhận được phương thức thanh toán.
2) Chúng tôi đang trong quá trình thu thập các phương thức thanh toán.
3) Chúng tôi đã nhận được phương thức thanh toán thành công.
4) Chúng tôi đã cố gắng lấy phương thức thanh toán nhưng đã xảy ra lỗi.

Nhưng loại Mô hình đơn giản của chúng tôi với phương thức thanh toán không bao gồm tất cả các trường hợp này. Thay vào đó, nó giả định rằng PaymentMethods luôn tồn tại.

Ừmmm. Có cách nào để xây dựng một mô hình sao cho trạng thái ứng dụng lấy một trong bốn giá trị này và chỉ chúng không? Chúng ta hãy xem:

Nhập trạng thái ứng dụng = (loại: "Không được tìm nạp" ) | ( gõ: "Đang tìm nạp" ) | ( gõ: "Thất bại", lỗi: E) | ( gõ: "Thành công", phương thức thanh toán: Mảng };
Chúng tôi đã sử dụng loại tập hợp rời rạc để đặt AppState thành một trong bốn trạng thái được mô tả ở trên. Lưu ý cách tôi sử dụng thuộc tính type để xác định ứng dụng đang ở trạng thái nào trong bốn trạng thái. Chính thuộc tính kiểu này sẽ tạo ra một tập hợp rời rạc. Bằng cách sử dụng nó, chúng tôi có thể phân tích và xác định khi nào chúng tôi có phương thức thanh toán và khi nào không.

Bạn cũng sẽ nhận thấy rằng tôi đang chuyển loại tham số E và D sang trạng thái ứng dụng. Loại D sẽ đại diện cho phương thức thanh toán của người dùng (PaymentMethod được xác định ở trên). Chúng ta chưa đặt loại E làm loại lỗi, vì vậy hãy thực hiện điều đó ngay bây giờ:

Gõ HttpError = ( id: string, message: string );
Bây giờ bạn có thể lập mô hình miền ứng dụng:

Loại Model = AppState ;
Nói chung, chữ ký cho trạng thái ứng dụng hiện là AppState trong đó E có dạng HttpError và D là PaymentMethod . Và AppState có bốn (và chỉ bốn) trạng thái có thể xảy ra: Không tìm nạp, Đang tìm nạp, Thất bại và Thành công.

Tôi thấy các mô hình miền như vậy hữu ích cho việc suy nghĩ và thiết kế giao diện người dùng theo các quy tắc kinh doanh nhất định. Các quy tắc kinh doanh cho chúng tôi biết rằng một ứng dụng chỉ có thể ở một trong những trạng thái này và điều này cho phép chúng tôi hiển thị rõ ràng AppState và đảm bảo rằng ứng dụng đó sẽ chỉ ở một trong những trạng thái được xác định trước này. Và khi chúng ta phát triển theo mô hình này (ví dụ: tạo thành phần khung nhìn), điều hiển nhiên là chúng ta cần phải xử lý tất cả bốn trạng thái có thể có.

Hơn nữa, bản thân các tài liệu mã - chỉ cần nhìn vào các tập hợp rời rạc và sẽ ngay lập tức hiểu rõ AppState được cấu trúc như thế nào.

Nhược điểm của việc sử dụng các loại tĩnh

Điều quan trọng là phải hiểu và thừa nhận những thiếu sót này để chúng ta có thể đưa ra quyết định sáng suốt khi sử dụng các loại tĩnh là hợp lý và khi chúng đơn giản là không có giá trị.

Dưới đây là một số cân nhắc sau:

Nhược điểm #1: Các kiểu tĩnh yêu cầu phải học trước

Khi tôi lần đầu học Elm (một ngôn ngữ chức năng được gõ tĩnh), các loại thường gây cản trở. Tôi liên tục gặp phải lỗi trình biên dịch do định nghĩa kiểu của mình.

Học cách sử dụng các loại hình một cách hiệu quả đã là một nửa cuộc chiến trong việc học ngôn ngữ. Kết quả là, đường cong học tập của Elm dốc hơn JavaScript do các kiểu tĩnh của nó.

Điều này đặc biệt quan trọng đối với những người mới bắt đầu, những người có khả năng nhận thức cao nhất từ ​​việc học cú pháp. Việc thêm cú pháp vào hỗn hợp này có thể gây choáng ngợp cho người mới.

Nhược điểm #2: Có thể bị sa lầy vào sự dài dòng

Ví dụ: thay vào đó:

Hàm không đồng bộ moneyExceedsPurchaseLimit(amount, getPurchaseLimit)( var limit = wait getPurchaseLimit(); return limit > money; )
Chúng ta phải viết:

Hàm không đồng bộ moneyExceedsPurchaseLimit(amount: number, getPurchaseLimit: () => Promise ): Hứa ( var limit = chờ getPurchaseLimit(); giới hạn trả lại > số tiền; )
Và thay vào đó:

Người dùng Var = ( id: 123456, tên: "Preethi", thành phố: "San Francisco", );
Bạn phải viết điều này:

Gõ Người dùng = ( id: số, tên: chuỗi, thành phố: chuỗi, ); var user: User = ( id: 123456, name: "Preethi", city: "San Francisco", );
Rõ ràng, các dòng mã bổ sung được thêm vào. Nhưng có một số lập luận phản đối việc coi đây là một bất lợi.

Đầu tiên, như chúng tôi đã đề cập trước đó, các kiểu tĩnh đang loại bỏ toàn bộ danh mục thử nghiệm. Một số nhà phát triển có thể coi đây là một sự thỏa hiệp hoàn toàn hợp lý.

Thứ hai, như chúng ta đã thấy trước đó, các kiểu tĩnh đôi khi có thể loại bỏ nhu cầu xử lý lỗi phức tạp và điều này giúp giảm đáng kể sự lộn xộn của mã.

Thật khó để nói liệu tính dài dòng có phải là lý lẽ thực sự chống lại các loại hay không, nhưng điều đó đáng để ghi nhớ.

Nhược điểm #3: Cần có thời gian để sử dụng thành thạo các loại.

Ví dụ: một cách tiếp cận là mã hóa logic nghiệp vụ quan trọng bằng các kiểu tĩnh, nhưng để lại các phần logic động ngắn hạn hoặc không quan trọng để tránh sự phức tạp không cần thiết.

Biết được sự khác biệt có thể khó khăn, đặc biệt nếu một nhà phát triển ít kinh nghiệm phải đưa ra quyết định nhanh chóng.

Nhược điểm #4: Kiểu tĩnh có thể trì hoãn sự phát triển nhanh chóng

Lập luận ở đây là việc kiểm tra kiểu tĩnh có thể khiến lập trình viên mất tập trung quá thường xuyên - và bạn biết đấy, sự tập trung là yếu tố chínhđể viết một chương trình tốt.

Nó không chỉ có vậy. Bộ điều khiển kiểu tĩnh cũng không phải lúc nào cũng lý tưởng. Đôi khi một tình huống phát sinh khi bạn biết phải làm gì, nhưng việc kiểm tra kiểu lại cản trở và cản trở.

Tôi chắc chắn rằng tôi đã bỏ sót một số sai sót khác, nhưng đây là những sai sót quan trọng nhất đối với tôi.

Tôi có nên sử dụng các loại tĩnh trong JavaScript hay không?

Ngôn ngữ lập trình đầu tiên tôi học là JavaScript và Python, cả hai đều là ngôn ngữ được gõ động.

Nhưng việc nắm vững các kiểu tĩnh đã bổ sung thêm một khía cạnh mới vào cách tôi nghĩ về lập trình. Ví dụ, mặc dù ban đầu tôi nhận thấy các thông báo lỗi trình biên dịch liên tục của Elm khiến tôi choáng ngợp, nhưng việc tìm ra các loại và làm hài lòng trình biên dịch đã trở thành bản chất thứ hai và thực sự đã cải thiện kỹ năng lập trình của tôi. Ngoài ra, không có gì thoải mái hơn việc một robot thông minh cho tôi biết tôi đang làm gì sai và cách khắc phục.

Đúng, có những sự đánh đổi không thể tránh khỏi với các kiểu tĩnh, chẳng hạn như quá dài dòng và phải dành thời gian tìm hiểu chúng. Nhưng các loại tăng thêm tính bảo mật và tính chính xác cho các chương trình, điều này loại bỏ tầm quan trọng của những "nhược điểm" này đối với cá nhân tôi.

Các kiểu động có vẻ nhanh hơn và đơn giản hơn nhưng chúng có thể bị lỗi khi bạn thực sự đưa chương trình vào hoạt động. Đồng thời, bạn có thể nói chuyện với bất kỳ nhà phát triển Java nào xử lý các loại tham số phức tạp hơn và họ sẽ cho bạn biết họ ghét chúng đến mức nào.

Cuối cùng, không có giải pháp nào phù hợp cho tất cả ở đây. Cá nhân tôi thích sử dụng các kiểu tĩnh trong các điều kiện sau:

1. Chương trình này rất quan trọng đối với doanh nghiệp của bạn.
2. Chương trình có thể sẽ được tái cấu trúc để phù hợp với nhu cầu mới.
3. Chương trình này phức tạp và có nhiều phần chuyển động.
4. Chương trình được hỗ trợ bởi một nhóm lớn các nhà phát triển, những người cần hiểu mã nhanh chóng và chính xác.

1. Mã này tồn tại trong thời gian ngắn và không có nhiệm vụ quan trọng.
2. Bạn tạo một nguyên mẫu và cố gắng tiến về phía trước càng nhanh càng tốt.
3. Chương trình này nhỏ và/hoặc đơn giản.
4. Bạn là nhà phát triển duy nhất.

Phần kết luận

Khả năng chuyển đổi giữa các loại động và tĩnh là một công cụ mạnh mẽ cho cộng đồng JavaScript và là một công cụ thú vị :)

Lập trình không chỉ là một cách để kiếm được số tiền lớn và thậm chí không hoàn toàn là công việc trí óc. Đây là cơ hội để hiểu thế giới xung quanh chúng ta bao gồm những gì, phân tách nó thành các hạt nhỏ và sau đó tập hợp lại nó, được hướng dẫn bởi logic và kiến ​​​​thức của chính chúng ta.

Ngôn ngữ lập trình chỉ là một công cụ để con người xây dựng các quy tắc trong các hệ thống được tạo ra.

Internet mang đến vô số cơ hội mà những bộ óc thông minh và dám nghĩ dám làm đang nắm bắt. Tất nhiên, phát triển web cũng có những công cụ riêng để biến ý tưởng thành hiện thực. Một trong số đó là ngôn ngữ lập trình JavaScript, sẽ được thảo luận trong bài viết này:

thông tin chung

Nhiều người, kể cả những người không liên quan gì đến lĩnh vực CNTT, đều đã nghe đến từ Java. Một ngôn ngữ độc lập với nền tảng mang tính cách mạng trong đó các ứng dụng dành cho hệ thống di động được viết tích cực. Nó được phát triển bởi công ty đầy triển vọng Sun, công ty sau đó thuộc quyền quản lý của Oracle. Nhưng cả hai công ty đều không liên quan gì đến JavaScript:

Tất cả những gì Sun yêu cầu là sự cho phép sử dụng một phần tên. Điều đáng ngạc nhiên là JavaScript hoàn toàn không thuộc sở hữu của bất kỳ công ty nào.

Khi viết ứng dụng web, lập trình JavaScript được sử dụng thường xuyên nhất. Nếu chúng ta liệt kê ngắn gọn các tính năng chính của ngôn ngữ này, chúng ta nên nhấn mạnh những điều sau:

• Định hướng đối tượng. Việc thực thi chương trình thể hiện sự tương tác của các đối tượng;
• Việc chuyển đổi kiểu dữ liệu được thực hiện tự động;
• Hàm đóng vai trò là đối tượng lớp cơ sở. Tính năng này làm cho JavaScript giống với nhiều ngôn ngữ lập trình chức năng như Lisp và Haskell;
• Tự động xóa bộ nhớ. Cái gọi là thu thập rác làm cho JavaScript tương tự như C# hoặc Java.

Nếu chúng ta nói về bản chất của việc sử dụng JavaScript, thì ngôn ngữ này cho phép bạn “hồi sinh” các trang web bất động bằng cách sử dụng mã có thể được thực thi ( cái gọi là kịch bản). Tức là, chúng ta có thể so sánh với phim hoạt hình, trong đó html và css là các ký tự được vẽ và JavaScript là thứ khiến chúng chuyển động.

Nếu nói về Cú pháp JavaScript, thì nó có các tính năng sau:

• Đăng ký là quan trọng. Các hàm được gọi là func() và Func() hoàn toàn khác nhau;
• Sau các toán tử phải có dấu chấm phẩy;
• Các đối tượng và hoạt động tích hợp;
• Khoảng trống không được tính. Bạn có thể sử dụng bao nhiêu thụt lề tùy thích cũng như ngắt dòng để định dạng mã của mình.

Mã JavaScript đơn giản nhất trông như thế này:

Phạm vi ứng dụng

Để hiểu tại sao cần có JavaScript và mức độ cần thiết của việc học nó, chúng ta nên nêu bật một số lĩnh vực sử dụng nó ngôn ngữ nhất định lập trình.

• Phát triển ứng dụng web. Bạn có muốn cài đặt một bộ đếm đơn giản, tổ chức truyền dữ liệu giữa các biểu mẫu hoặc đặt trò chơi trên trang web của mình không? Sau đó JavaScript sẽ tiếp quản trợ lý trung thành trong trường hợp này;
• "Tham gia tích cực" vào AJAX. Công nghệ này giúp tăng tốc đáng kể hoạt động của ứng dụng bằng cách trao đổi dữ liệu với máy chủ ở chế độ “nền”:

• hệ điều hành. Một số người có thể chưa biết, nhưng Windows, Linux và Mac có những đối thủ trình duyệt riêng, phần lớn trong số đó được viết bằng JavaScript;
• Ứng dụng di động;
• Chuyên ngành. Bất kỳ chuyên ngành lập trình nào ở trường đại học đều bao gồm việc nghiên cứu JavaScript ở mức độ này hay mức độ khác. Điều này là do ngôn ngữ này ban đầu được phát triển dành cho những lập trình viên không giỏi lắm. Các bài học về JavaScript được lồng ghép một cách hợp lý vào khóa học HTML cơ bản nên việc học khá đơn giản.

Ưu điểm và nhược điểm

Đừng nghĩ rằng JavaScript là một loại thuốc chữa bách bệnh cho mọi vấn đề và mọi lập trình viên đều sử dụng ngôn ngữ này với nụ cười trên môi. Mọi thứ trên đời đều có mặt tích cực và Mặt tiêu cực. Đầu tiên, chúng ta hãy lưu ý những thiếu sót.

• Sự cần thiết phải cung cấp khả năng tương thích giữa nhiều trình duyệt. Vì JavaScript hoạt động như một công nghệ Internet nên bạn phải tuân theo các quy tắc mà nó đặt ra. Mạng toàn cầu. Mã phải chạy chính xác trong tất cả hoặc ít nhất là các trình duyệt phổ biến nhất;
• Hệ thống kế thừa trong một ngôn ngữ khiến cho việc hiểu chuyện gì đang xảy ra trở nên khó khăn. JavaScript triển khai tính kế thừa dựa trên nguyên mẫu. Những người đã học các ngôn ngữ lập trình hướng đối tượng khác đều quen với " lớp con kế thừa lớp cha " Nhưng trong JavaScript, những thứ như vậy được xử lý trực tiếp bởi các đối tượng và điều này nằm ngoài tầm hiểu biết của bạn;
• Không có thư viện tiêu chuẩn. JavaScript không cung cấp bất kỳ khả năng nào để làm việc với tệp, luồng I/O hoặc những thứ hữu ích khác;
• Cú pháp nói chung làm cho nó khó hiểu. Vẻ đẹp của code rõ ràng không phải là điểm mạnh của JavaScript, nhưng nguyên tắc chính của các lập trình viên được tuân thủ: “ Làm? Đừng chạm vào!».

Bây giờ điều đáng chú ý là một số lợi thế

• JavaScript cung cấp một số lượng lớn cơ hội để giải quyết nhiều vấn đề khác nhau. Tính linh hoạt của ngôn ngữ cho phép sử dụng nhiều mẫu lập trình liên quan đến các điều kiện cụ thể. Trí óc sáng tạo sẽ có được niềm vui thực sự;
• Sự phổ biến của JavaScript mở ra một số lượng đáng kể các thư viện được tạo sẵn cho lập trình viên, có thể đơn giản hóa đáng kể việc viết mã và loại bỏ các khiếm khuyết về cú pháp;
• Ứng dụng trong nhiều lĩnh vực. Rộng Khả năng JavaScript mang đến cho các lập trình viên cơ hội thử sức mình với tư cách là nhà phát triển nhiều loại ứng dụng và điều này tất nhiên sẽ thúc đẩy sự quan tâm đến các hoạt động nghề nghiệp.

Đừng chú ý đến thực tế là có nhiều điểm trừ hơn điểm cộng. JavaScript đã cố thủ vững chắc trong thị trường ngách của nó và không có lời chỉ trích nào có thể đánh bật nó ra khỏi đó vào lúc này.

Dành cho những ai muốn học

Phức tạp và một cách lâu dài dành cho những người quyết định nghiên cứu kỹ lưỡng về JavaScript. Đối với người mới bắt đầu, có những khuyến nghị cơ bản, theo đó bạn có thể đơn giản hóa đáng kể việc học của mình.

• Trước hết, HTML. Bạn không thể bắt đầu làm bất cứ điều gì cho Internet nếu không có kiến ​​thức cơ bản. Cascading Style Sheets (CSS) cũng sẽ rất hữu ích;
• Sử dụng văn học mới. Lập trình không phải là vật lý, các quy luật của nó là không thể phá vỡ, và các sách giáo khoa mới là những sách cũ đã được lược bỏ. Công nghệ CNTT không ngừng phát triển và không nên bỏ qua những cập nhật hữu ích;
• Cố gắng tự viết tất cả các phần của chương trình. Nếu có điều gì đó không ổn, bạn có thể mượn mã của người khác, nhưng chỉ sau khi bạn đã hiểu rõ từng dòng trước tiên;
• Gỡ lỗi là người bạn tốt nhất của bạn. Việc phát hiện lỗi nhanh chóng là một trong những những khoảnh khắc quan trọng nhất trong lập trình;
• Đừng bỏ qua các quy tắc định dạng. Tất nhiên, mã sẽ không trở nên tốt hơn hay tệ hơn từ số lượng khác nhau thụt lề và khoảng trắng, nhưng người lập trình dễ đọc và hiểu cũng là một điểm quan trọng. Mã dưới đây? rất khó nhận biết, đặc biệt nếu bạn không phải là anh ấy

• Tên biến phải có ý nghĩa từ vựng. Trong quá trình viết các chương trình đơn giản, điều này tưởng chừng như không quan trọng chút nào, nhưng khi số dòng mã vượt quá một nghìn dòng thì lũ quỷ dữ đều gãy chân;

phát triển web

Vue.JS: tính năng, ưu điểm và nhược điểm

Vue.JS là tên của framework front-end này mà chúng ta nghe thấy ngày càng thường xuyên hơn. Nói một cách khoa trương thì hiện tại anh ấy đang ở đỉnh cao của sự nổi tiếng. Thực tế này không thể thoát khỏi đội ngũ front-end của chúng tôi. Chúng tôi quyết định tìm hiểu kỹ lý do Vue.JS xuất hiện và nó giải quyết được những vấn đề gì.

Giới thiệu

Việc triển khai giao diện người dùng web phải đối mặt với những thách thức ngày càng phức tạp đòi hỏi phải sử dụng các công cụ ngày càng phức tạp. Hãy thêm vào đây xu hướng rời xa kiến ​​trúc ứng dụng MVC và chúng ta nhận được một xu hướng khá thú vị. Các nhà phát triển hiện đại có xu hướng sử dụng các thư viện riêng biệt cho từng lớp nhiệm vụ. Trong bối cảnh của những thay đổi này, khung Vue.JS đã xuất hiện và bắt đầu trở nên phổ biến.

Về mặt lý thuyết, nó là một giải pháp thay thế cho jQuery. Nhưng trên thực tế, Vue.JS cạnh tranh khá thành công với React.JS, người dẫn đầu rõ ràng trong không gian View. Trong số các công nghệ phổ biến hiện đại giải quyết các vấn đề tương tự, chúng ta cũng có thể nêu bật Angular và Ember. Mỗi người trong số họ đều có những ưu điểm và nhược điểm riêng. Tuy nhiên, tất cả các khuôn khổ này có thể quy về một mẫu số chung - độ phức tạp tương đối của quá trình phát triển.

Tính năng của Vue.JS

Vue.JS được tạo ra dựa trên những phương pháp thực hành tốt nhất của các công nghệ được liệt kê. Nhóm Vue đã mượn ý tưởng về DOM ảo từ React.JS. Cách tiếp cận này loại bỏ sự tương tác trực tiếp với các nút giao diện. Công việc ban đầu được thực hiện với bản sao nhẹ (DOM ảo). Và chỉ sau khi thay đổi này được áp dụng cho các nút giao diện thực tế. Đồng thời, xảy ra sự so sánh giữa cây DOM thực và bản sao ảo của nó. Bằng cách này, sự khác biệt được xác định và chỉ những gì đã thay đổi mới được vẽ lại.

Tôi đã mượn liên kết dữ liệu hai chiều từ Angular Vue.JS. Điều này cho phép bạn thiết kế các giao diện: đầu tiên, mang tính khai báo; thứ hai, sử dụng Vue trong công cụ tạo mẫu. Chẳng hạn như Haml hoặc Pug. Tuy nhiên, chúng tôi lưu ý rằng phương pháp này đã được thực hiện trước đây. Ví dụ: trong khung Knockout.JS.

Cốt lõi của Vue.JS, giống như React, chỉ chứa các chức năng cần thiết để hoạt động với giao diện. Do đó, nó nhỏ gọn, dễ dàng tích hợp với các công nghệ khác, bao gồm cả jQuery và thậm chí có thể được sử dụng thay thế (để phát triển các giao diện đơn giản).

Ngoài ra, Vue còn có sẵn một số plugin triển khai cách tiếp cận hiện đại để phát triển ứng dụng web. Chúng ta đang nói về điều gì vậy? Ví dụ: hầu hết tất cả các ứng dụng React đều được thiết kế song song với công nghệ kiểm soát trạng thái Redux, đây là một thư viện riêng biệt và triển khai kiến ​​trúc thông lượng. Cách tiếp cận của thư viện Redux hóa ra khá thuận tiện và thành công. Vì vậy, Vue.JS đã phát triển công nghệ giám sát trạng thái ứng dụng của riêng mình - Vuex. Vuex hoàn toàn mượn ý tưởng từ Redux, nhưng mức độ tích hợp của thư viện này với Vue cao hơn nhiều so với trường hợp của React và Redux. Và điều này chuyển thành tốc độ và sự tiện lợi.

Chúng ta không nên quên rằng sự thành công của một công nghệ phụ thuộc trực tiếp vào hoạt động của người dùng nó. Đó là cộng đồng nhà phát triển. Vì vậy, React, có lẽ là công nghệ phổ biến nhất, có số lượng lớn các tiện ích mở rộng cho chức năng chính. Chúng được tạo bởi các thành viên cộng đồng và các nhà phát triển React có bộ công cụ cho mọi trường hợp. Vue.JS hoạt động không tốt về mặt này. Ít nhất là bây giờ. Tuy nhiên, công nghệ này đang phát triển và đã có nhiều thư viện hữu ích giúp giải quyết hầu hết các vấn đề cấp bách của các nhà phát triển.

Kinh nghiệm sử dụng trên một dự án thực tế

Chúng tôi phải đối mặt với nhiệm vụ phát triển một giao diện chứa bản đồ, bộ lọc, kết quả lọc và một số yếu tố tương tác trên một trang. Chúng tôi biết rõ rằng việc sử dụng Vanilla JavaScript hoặc jQuery đơn giản có thể gây ra khó khăn trong quá trình phát triển. Tại sao không phải là React.js? Bởi vì Vue.JS đơn giản và nhẹ nhàng hơn. Tại sao phải bận tâm đến một framework nặng hơn để phát triển một giao diện duy nhất?

Chúng tôi đã xem xét kỹ Vue.JS trong một thời gian dài và nhận ra rằng những ưu điểm của nó có thể mang lại cho chúng tôi lợi nhuận thực sự. Kết quả là, một quyết định cơ bản đã được đưa ra là “thử nghiệm” công nghệ này trong thực tế.

Đây là một ví dụ nhỏ về khởi tạo ứng dụng Vue.

Trong app.js, biến ứng dụng được tạo dưới dạng đối tượng Vue. Hàm tạo duyệt qua mẫu template.haml và tạo các liên kết cần thiết.

Việc khai báo trong Vue dễ dàng đến mức nó cho phép chúng tôi tích hợp nó vào một ứng dụng web nguyên khối bằng cách sử dụng công cụ tạo khuôn mẫu Haml.

Ở đây, tùy thuộc vào tính trung thực của cờ 'filtersOpen', lớp 'rentbuy__filters—open' được thêm hoặc xóa khỏi phần tử

Vue.JS ngoài việc thực hiện mọi thứ cách tiếp cận hiện đại trong phát triển giao diện người dùng web, là một khung cực kỳ dễ học, linh hoạt và tích hợp cao với các công nghệ của bên thứ ba. Việc tạo khuôn mẫu của Vue đã cho chúng tôi khả năng liên kết các thành phần trường bộ lọc với các trường của một đối tượng. Điều này giúp bạn luôn có sẵn các tùy chọn lựa chọn cập nhật và giúp việc xác thực và làm sạch bộ lọc trở nên dễ dàng hơn.

Ở đây, các giá trị của các trường đầu vào được liên kết với các trường của đối tượng “dữ liệu” bằng cách sử dụng liên kết hai chiều. Điều này khiến trường đối tượng thay đổi khi giá trị trong trường đầu vào thay đổi và ngược lại.

Nhờ khả năng phản ứng của Vue.JS, chúng tôi đã loại bỏ được tình trạng trùng lặp mã. Làm sao chuyện này lại xảy ra? Trong một số trường hợp, tập hợp các trường bộ lọc trùng khớp một phần (tùy thuộc vào trạng thái của ứng dụng). Có một mối đe dọa thực sự về việc sao chép mã lớn. Tuy nhiên, bằng cách sử dụng các vị từ đơn giản được xác định trong mẫu, bạn có thể chuyển đổi nhanh chóng và thuận tiện giữa các nhóm trường.

Ở đây khối có trường đầu vào hiển thị trên trang khi điều kiện được đáp ứng

Ngoài ra, nhờ tính linh hoạt của Vue.JS, chúng tôi có thể tận dụng sự phát triển dựa trên thành phần trong các thành phần danh sách kết quả lọc. Như bạn còn nhớ, framework của chúng tôi sử dụng công nghệ DOM ảo. Theo đó, với sự xuất hiện của các kết quả mới, các thành phần hiện tại sẽ không được vẽ lại. Điều này chuyển thành tốc độ và sự thoải mái cho người dùng.

Các phần tử từ mảng 'thuộc tính' được hiển thị dưới dạng 'đề xuất' thành phần Vue. Tập hợp các phần tử trên trang sẽ tự động thay đổi theo những thay đổi trong mảng. Thành phần 'đề xuất' là một thành phần thông thường mẫu HTML, mã của nó được đặt trong thẻ script có loại 'text/x-template'

Cũng lưu ý rằng Vue theo dõi vòng đời các thành phần. Nghĩa là, bạn có thể áp dụng bất kỳ phương thức nào cho chúng (thay đổi, xóa, v.v.) sau khi khởi tạo và đính kèm vào cây DOM. Đặc biệt, chúng ta có thể dễ dàng khởi tạo ứng dụng khi tải trang trên trình duyệt. Ví dụ: yêu cầu lựa chọn phần tử ban đầu, tùy thuộc vào kích thước hiện tại của bản đồ trên trang của người dùng.

Kiến trúc ứng dụng Vue cung cấp sự phân tách đơn giản và rõ ràng giữa các phương thức, thành phần và dữ liệu. Mã trở nên dễ đọc hơn, dễ mở rộng hơn và cho phép bạn tích hợp trực tiếp các công nghệ của bên thứ ba vào các phương thức ứng dụng Vue. Kết quả là việc phát triển giao diện mất tương đối ít thời gian. Mã hóa ra nhỏ gọn và dễ dàng mở rộng. Và tính linh hoạt của Vue.JS đã góp phần tạo nên sự kết hợp của nó với các công nghệ khác.

Lợi ích của Vue.JS

Sau khi nghiên cứu các tính năng chính của công nghệ và thử nghiệm chúng trong thực tế, chúng ta có thể liệt kê những ưu điểm chính của Vue framework:

• Thư viện khá đơn giản và đầy đủ chức năng. Để hiểu được nó, bạn cần có một lượng kiến ​​​​thức tối thiểu.
• Không có yêu cầu về ngăn xếp, vì vậy Vue.JS có thể được sử dụng trên bất kỳ dự án nào.
• Khung nặng khá nhiều. Chúng tôi tiết kiệm thời gian tải trang và nhận được rất nhiều lợi ích: cộng với chuyển đổi, cộng với UX, cộng với xếp hạng tìm kiếm, v.v.
• Tốc độ phát triển khá nhanh. Nhờ sử dụng bất kỳ mẫu nào và sự sẵn có của tài liệu, hầu hết các vấn đề phát sinh đều được giải quyết khá nhanh chóng. Bao gồm so với React, vì trong hầu hết các ứng dụng không có giao diện phức tạp, tất cả sức mạnh của khung này hơi dư thừa.
• Khả năng tìm kiếm và kết nối với dự án của hầu hết mọi nhà phát triển ít nhất có chút quen thuộc với việc phát triển front-end. Rào cản gia nhập thấp cho phép cả nhà phát triển front-end và back-end làm việc với framework.

Vue cho phép bạn tạo ứng dụng chức năng, phù hợp với tất cả tiêu chuẩn hiện đại, với sự kết nối tối thiểu của các tài nguyên mới và trên thực tế, rẻ hơn.

Nhược điểm của Vue.JS

Cũng có những nhược điểm. Đặc biệt so với React.JS.

• Hoạt động trên trạng thái ứng dụng diễn ra “dưới mui xe”. TRONG dự án quy mô lớnĐiều này có thể dẫn đến hoạt động của các thành phần không rõ ràng, điều này thường tạo ra các vấn đề về gỡ lỗi và phát triển hiệu quả.
• Cách tiếp cận thành phần trong Vue.JS không linh hoạt và rõ ràng như trong React.
• Hệ thống kết xuất React có nhiều chức năng hơn. Nó cung cấp nhiều tùy chọn gỡ lỗi hơn.
• Tạo khuôn mẫu phản ứng linh hoạt hơn nhiều (JS so với DSL).

Phần kết luận

Vue.JS triển khai tất cả các phương pháp tiếp cận hiện đại để phát triển giao diện người dùng web và là một framework dễ học, linh hoạt và tích hợp cao với các công nghệ của bên thứ ba. Tất nhiên, về mặt tạo giao diện phức tạp (ví dụ: đối với trang web công ty), React vượt trội hơn. Nhưng để giải quyết các vấn đề tương đối đơn giản, việc sử dụng Vue dường như không chỉ hợp lý mà còn thích hợp hơn.

Đã chuẩn bị bài viết

Phòng phát triển web

Phát triển chuyên nghiệp các trang web và ứng dụng trên phía máy chủ và phía máy khách. Thiết kế thiết kế, bố cục trang và BẢO TRÌ các dự án đã triển khai.