Các ứng dụng JavaScript lớn được cho là có cấu trúc như thế nào?

Gần đây tôi đã được hiển thị một số plugin JavaScript được viết cho OBIEE Mobile App Developer, cũng như một số thư viện tùy chỉnh cho các dự án khác nhau.

Đến từ nền tảng OOP, tôi hơi bối rối về cấu trúc của các dự án này. Tôi đang nhìn thấy các tập tin dài hàng ngàn dòng. Tôi đã quen với việc phân chia mọi thứ thành các tệp và các lớp nhưng tôi hiểu rằng đây là một khung khác - đối với một, kích thước tệp là một vấn đề - nhưng phải có cách nào tốt hơn để làm tất cả?

Độ dài của các tập lệnh không chỉ ảnh hưởng đến khả năng đọc và khả năng bảo trì mà còn hiểu biết chung về cách thức hoạt động của chương trình.

Các ứng dụng lớn có cấu trúc như thế nào? Bất kỳ mẫu thiết kế OOP chung cho điều này?

Nếu bạn không quen thuộc với các mẫu JavaScript, tôi có thể cho bạn biết rất nhiều ứng dụng và thư viện lớn đang sử dụng Mô hình mô-đun tiết lộ , nhưng có nhiều mẫu khác bạn có thể sử dụng tùy theo nhu cầu của mình.

Mặc dù Mô hình Mô-đun tiết lộ sẽ cung cấp cho bạn một cách hay để phân chia các tệp lớn và sắp xếp chúng một cách hợp lý; Tuy nhiên, khi bạn đang làm việc với bất kỳ mẫu thiết kế nào trong JavaScript, hãy lưu ý rằng điều này có thể trở nên rất khó hiểu. Cố gắng sử dụng cái này , mới , nguyên mẫu , .call()và .apply()khôn ngoan.

Trong khi làm việc trên các dự án lớn, chúng cũng có thể hữu ích:

• Nếu có thể, hãy chuyển sang TypeScript hoặc ES6.
• Viết mã Modular . Có nhiều cách khác nhau và thư viện của bên thứ ba, nhưng bất kỳ trong số chúng đều tốt hơn không có gì.
• Sử dụng một hệ thống chạy / xây dựng nhiệm vụ để tự động hóa các nhiệm vụ.
• Đọc về các mẫu thiết kế . Đây có thể là một khởi đầu tốt. Như tôi đã nói ở trên, Mô hình Mô-đun tiết lộ rất hữu ích, đặc biệt nếu bạn nghĩ rằng bạn cần thời gian để thành thạo tất cả các mẫu phổ biến.
• Viết bài kiểm tra đơn vị . Làm việc với một ngôn ngữ năng động có thể khó khăn hơn. Kiểm tra các phần quan trọng của ứng dụng của bạn có thể tiết kiệm rất nhiều thời gian.
• Sử dụng IDE hoặc Text Editor thực sự có thể giúp bạn trong cả việc viết mã và bắt lỗi. WebStorm là một lựa chọn tốt. Văn bản cao siêu quá.
• Nếu IDE của bạn không cung cấp trình gỡ lỗi, hãy thử làm chủ trình gỡ lỗi trình duyệt web yêu thích của bạn.
• Sử dụng thư viện. Tùy thuộc vào bản chất của dự án, hãy thử sử dụng mã bên thứ ba tốt nhất bạn có thể tìm thấy. Nếu bạn đang viết một ứng dụng web, hãy xem Angular , React và backbone.js cũ . Nếu bạn đang viết một ứng dụng Node.js, thì hãy dành thời gian để tìm kiếm trong kho NPM . Bạn sẽ ngạc nhiên khi có bao nhiêu nhịp đập đang làm những gì bạn sắp làm.
• Ngay cả khi bạn là người duy nhất làm việc trong dự án, vẫn sử dụng hệ thống kiểm soát phiên bản như Git và tuân theo Tiêu chuẩn mã hóa không quá nghiêm ngặt và gây tranh cãi nhưng vẫn cung cấp một hướng dẫn tốt mà các đồng đội của bạn cũng sẽ vui lòng theo.
• Ngay cả khi bạn chọn TypeScript hoặc ES6, vẫn hiểu OOP không có lớp của JavaScript, ProtOPpal OOP có thể hữu ích, đặc biệt trong khi gỡ lỗi.

Tôi là một nhà phát triển C ++ và đã bắt đầu phát triển web gần đây. Tôi đang chuyển một ứng dụng máy tính để bàn lớn sang môi trường web. Tôi cấu trúc mã JavaScript của mình chính xác như tôi đã cấu trúc mã C ++, sử dụng các mẫu tương tự. Tôi có khoảng 25-30 tệp trong tất cả nhưng cuối cùng tôi sẽ giảm chúng xuống còn 3-5 bằng cách club khi thích hợp và giảm thiểu tất cả.

Đối với tôi, đó chỉ là ngôn ngữ đã thay đổi, tốt hơn hay tồi tệ hơn, nhưng không phải là mô hình. JavaScript, cho tất cả các lỗi và sự thất vọng của nó, là một sự pha trộn tốt đẹp của phong cách chức năng và OOP. Mọi thứ đã hoạt động tốt cho đến nay.

Cuối cùng, một điều mà tôi nhận ra sớm là JavaScript cho phép viết mã ngắn gọn hơn nhiều so với C ++, do đó, đôi khi có một số lượng lớn LỘC đến từ ngôn ngữ không phải là JS có thể là do cách làm việc cũ. Một khi điều này được giải quyết, tôi không thấy bất cứ điều gì thực sự khác biệt. Thiết kế và thuật toán là sau tất cả ngôn ngữ bất khả tri.

Tất nhiên, nó rất khác nhau giữa các dự án, nhưng thực tế thường được chấp nhận là, đối với những thứ có chức năng như thư viện hoặc mô-đun, hãy đặt chúng vào một tệp lớn và sử dụng đóng gói để ngăn chặn nội bộ của nó ("riêng tư" ) giao diện từ rò rỉ ra bên ngoài. Nó cũng hữu ích cho các nhà phát triển muốn sử dụng thư viện / mô-đun - một tệp để thêm vào cấu hình ứng dụng hoặc đoạn tiêu đề thay vì toàn bộ phân cấp các thư mục và tệp để sao chép và dán. Nó cũng phản ánh thực tế rằng, với tối thiểu hóa và gói, trong một trang sản xuất, rất có thể tất cả sẽ được kết hợp thành một tệp để giảm số lượng yêu cầu HTTP.

Mã ứng dụng của riêng bạn không cần phải tuân theo thực tiễn này và có lẽ không nên. Vì ứng dụng của bạn là ứng dụng duy nhất sử dụng nó, bạn chỉ phải thêm các tệp một lần và có thể dựa vào nền tảng để xử lý tối thiểu hóa và gói cho bạn.

Khi làm việc với mã, các thành phần khác nhau thường được chia thành các mô-đun, mỗi thành phần thường triển khai một lớp duy nhất và mỗi thành phần sống trong một tệp riêng biệt. Trong quá trình sản xuất, các tệp này sau đó được gói lại thành một tệp duy nhất (do đó hàng ngàn dòng mã bạn đang thấy) sử dụng một cái gì đó như Browserify ( http://browserify.org/ ) hoặc RequireJS để giảm số lượng yêu cầu HTTP, nhưng cũng để đảm bảo rằng các phụ thuộc được tải theo đúng thứ tự

Theo như cách các lớp cho các mô-đun này được triển khai, nó hơi khác một chút so với OOP trong cơ học cơ bản, nhưng không khác biệt ở bề mặt. ES6 thậm chí còn giới thiệu classtừ khóa, vì vậy nó sẽ trông khá quen thuộc. Bài viết này về MDN rất hữu ích để bắt đầu: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inherribution_and_the_prototype_chain

Tôi sử dụng (Các phần tử và chú thích thuần) của Petri để tổ chức hoặc cài đặt phần mềm cấu trúc cho các ứng dụng dạng PDF của tôi - các chương trình JavaScript sử dụng API Acrobat / JavaScript. Có lẽ nó có thể hữu ích trong tình huống của bạn.

Một sơ đồ được sử dụng để thiết lập quan hệ đầu vào-đầu ra của các phần tử ròng và hai dạng xem của các chú thích. Dựa trên sơ đồ và dạng xem biểu mẫu, có thể tạo một cách có hệ thống các chương trình JavaScript cho các ứng dụng biểu mẫu PDF. Do đó, việc đọc dữ liệu mã nguồn được giảm xuống để xác minh rằng nó phù hợp với các thông số kỹ thuật: sơ đồ và hai dạng xem.

Việc triển khai phần mềm của tôi sử dụng các hàm tạo và nguyên mẫu. Nếu hiệu suất trở thành một vấn đề thì việc thay thế các nguyên mẫu bằng các thành viên thể hiện có thể cải thiện hiệu suất với chi phí sử dụng nhiều bộ nhớ hơn. Mảng cũng được sử dụng. Nếu hiệu suất trở thành một vấn đề thì tham chiếu trực tiếp được sử dụng.

Một số thuộc tính được tạo bằng eval; đối với các đối tượng có rất nhiều thuộc tính, điều này sẽ làm giảm số lượng mã trong tệp nguồn - và giảm số lượng gõ của lập trình viên.

Bạn vẫn có thể và nên viết JavaScript theo cách OOP mà bạn đã quen. Đây là một cuốn sách hay đã trải qua các mẫu thiết kế quan trọng nhất trong JavaScript.

https://addyosmani.com/resource/essentialjsdesignpotypes/book/

Ngoài ra còn có nhiều khung JavaScript ngoài đó mục tiêu chính là có thể chia mã ra thành các tệp và mô-đun khác nhau. Nếu khung cụ thể mà bạn đang làm việc yêu cầu bạn phải có tất cả mã của mình trong một tệp thì bạn chắc chắn nên tìm cách chuyển đổi.