Framework để cấu trúc mã JS hiện có

Question

Tôi có một số mã javascript thủ tục mà tôi đã viết cho một ứng dụng nguồn mở và tôi muốn cấu trúc lại nó thành OOP và vì tôi có rất ít kinh nghiệm với các khuôn khổ javascript tôi gặp khó khăn khi tìm kiếm một cái phù hợp với nhu cầu của tôi, mặc dù tôi chưa thử bất cứ điều gì, tôi chỉ đọc về AngularJS, Backbone.js và Knockout.

Tôi muốn cấu trúc mã, bởi vì, tại thời điểm này, có một mớ hỗn độn, các biến toàn cầu và chức năng nằm rải rác xung quanh.

Tôi phải đề cập rằng tất cả logic nghiệp vụ được xử lý ở cấp máy chủ, do đó mã phía máy khách chỉ xử lý giao diện người dùng bằng dữ liệu nhận được hoặc yêu cầu từ máy chủ.

Mã này có thể được tìm thấy ở đây: https://github.com/paullik/webchat/blob/asp.net/webchat/Static/Js/chat.js

Bạn có bất cứ lời đề nghị?

Answer 1

JavaScript hướng đối tượng không nhất thiết phải là câu trả lời cho tất cả các sự cố của bạn.

Lời khuyên của tôi là phải cẩn thận lựa chọn mà bạn chọn về chủ đề này.

Trong thực tế, OO-JS có thể thêm phức tạp hơn vào mã của bạn vì mục đích cố gắng giống như các ngôn ngữ hướng đối tượng truyền thống. Như bạn có thể biết, JS là duy nhất.

Điều quan trọng là phải biết rằng có các mẫu thiết kế sẽ cấu trúc mã của bạn và giữ cho ánh sáng triển khai và linh hoạt.

Đây là mẫu thiết kế mà tôi thấy cơ cấu triển khai JS nâng cao, không phải OO. Để diễn giải Axel Rauchmeyer - "Object Phương pháp định hướng không phù hợp với cú pháp JavaScript cơ bản, nó là thực hiện xoắn và méo mó, và JS rõ ràng hơn là biểu hiện ."

Gốc của phân tích này tóm tắt thực tế là JS không có lớp. Về bản chất, vì mọi thứ đều là một đối tượng, bạn đã có các biến và các hàm hướng đối tượng. Do đó, vấn đề hơi khác với vấn đề được tìm thấy trong các ngôn ngữ được biên dịch (C/Java).

Mẫu thiết kế nào có sẵn cho JavaScript?

Một tài nguyên tuyệt vời để kiểm tra là Addy O 'Somani và các mẫu thiết kế thiết yếu. He wrote this book on Design Patterns in JavaScript.

Nhưng có nhiều hơn ... nhiều hơn thế nữa.

A. require.js - Có cách tải các mô-đun mã JS theo cách rất ấn tượng. Đây thường được gọi là bộ nạp mô-đun và được xem là tương lai của việc tải các tệp js vì chúng tối ưu hóa hiệu suất khi chạy. yepnope và những người khác tồn tại. Hãy ghi nhớ điều này nếu bạn đang tải nhiều hơn một vài tệp js. (được chuyển lên đầu theo yêu cầu).

B. MVC - Có hàng tá khung điều khiển Chế độ xem mô hình để giúp bạn cấu trúc mã. Đây là một Mẫu, nhưng có thể không hợp lý cho các mục đích của bạn.Bạn đã đề cập đến xương sống, loại trực tiếp và góc cạnh ... Vâng. Chúng có thể làm điều này cho bạn, nhưng tôi sẽ lo ngại rằng chúng có thể là 1) đường cong học tập cao và 2) quá mức cần thiết cho môi trường của bạn.

C. Không gian tên hoặc mẫu mô-đun. Có lẽ là quan trọng nhất đối với nhu cầu của bạn. Để giải quyết các biến toàn cục, chỉ cần bọc chúng vào một không gian tên và tham khảo. Đây là những mẫu rất tốt giúp tăng trình mô đun.

D. Đóng cửa - Bạn đã đề cập đến OO JS. Về phần này hữu ích là khái niệm đóng cửa để cung cấp cho bạn ... thành viên riêng. Lúc đầu, đây là một ý tưởng khó hiểu, nhưng sau khi bạn nhận ra khuôn mẫu, đó là thực hành tầm thường.

E. Sự kiện tùy chỉnh - Việc sử dụng tham chiếu cứng giữa các đối tượng trở nên rất quan trọng. Ví dụ: AnotherObject.member; Điều này là do nó sẽ kết hợp chặt chẽ hai đối tượng lại với nhau và làm cho cả hai đối tượng không linh hoạt để thay đổi. Để giải quyết điều này, hãy kích hoạt và lắng nghe các sự kiện. Trong các mẫu thiết kế truyền thống, đây là người quan sát. Trong JS nó được gọi là PubSub.

F. Gọi lại - Mẫu gọi lại là AJAX đã kích hoạt và nó đang cách mạng hóa sự phát triển về Window 8, Firefox OS và Node.js - vì một thứ gọi là non-blocking-io. Rất quan trọng.

Đừng sợ. Đây là hướng đi để triển khai JavaScript lâu dài và nâng cao.

Khi bạn nhận ra các mẫu, đó là đồi từ đó.

Hy vọng điều này sẽ hữu ích.