Cái gì ??? Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức. Nó là một trong bốn […]

Tagged #javascript

Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức.

Nó là một trong bốn trụ cột của OOP, cùng với Kế thừa, Đa hình và Trừu tượng dữ liệu.

Tại sao ?

Việc đưa ra giả định mù quáng và tiếp tục sử dụng tính năng Encapsulation ở mọi nơi sẽ dễ dàng hơn, nhưng điều quan trọng là phải hiểu lý do tại sao để bạn có thể sử dụng nó đúng cách.

Hãy cố gắng hiểu (các) lý do tại sao bằng cách xem một nhiệm vụ ví dụ.

Nhiệm vụ:

Xây dựng một máy tính kết quả học sinh,

Tính điểm trung bình
Xác định xem học sinh có trượt hay đỗ không
Lỗi ném nếu bất kỳ dấu chủ đề nào không hợp lệ ( < 0 || > 100)

Giải pháp 1: cách không đóng gói

Ý tưởng chỉ nhằm giải quyết vấn đề nên tôi đã chọn Lập trình thủ tục cách đạt được nó mà tôi tin rằng có thể cho thấy sự tương phản tốt và làm cho vấn đề có vẻ rõ ràng hơn.

type Subject = "english" | "maths"; interface IStudent { name: string; marks: Record<Subject, number>; } // Receive Input const studentInput: IStudent = { name: "John", marks: { english: 100, maths: 100, }, }; // Step1: Validate the provided marks Object.keys(studentInput.marks).forEach((subjectName) => { const mark = studentInput.marks[subjectName as Subject]; if (mark > 100 || mark < 0) { throw new Error(`invlid mark found`); } }); // Step2: find the total marks const totalMarks = Object.keys(studentInput.marks).reduce( (accumulator: number, current: string) => studentInput.marks[current as Subject] + accumulator, 0 ); // Step3: find the average const average = totalMarks / Object.keys(studentInput.marks).length; // Step4: find the result const boolResult = average > 40; // Step 5: print result console.log(boolResult); console.log(average);

Vấn đề với giải pháp 1:

Điều này chắc chắn đạt được kết quả mong đợi nhưng có một số vấn đề liên quan đến nó. Để kể tên một vài,

Mọi triển khai ở đây đều có thể truy cập được trên toàn cầu và những người đóng góp trong tương lai không có quyền kiểm soát việc sử dụng nó.

Dữ liệu và hoạt động tách biệt nên khó theo dõi chức năng nào ảnh hưởng đến dữ liệu. Bạn sẽ phải xem xét cẩn thận từng đoạn mã để hiểu cái gì được gọi và một phần của quá trình thực thi.

Các chức năng trở nên khó quản lý hơn khi logic mở rộng. Các thay đổi có thể phá vỡ mã không liên quan do khớp nối chặt chẽ.

Làm thế nào để giải quyết vấn đề ?

Bằng cách kết hợp Đóng gói hoặc làm cho nó rõ ràng hơn bằng cách thực hiện hai bước dưới đây,

Kiểm soát quyền truy cập vào dữ liệu và chức năng
Kết hợp dữ liệu với hành vi

Giải pháp 2: Cách đóng gói

type SubjectNames = "english" | "maths"; interface IStudent { name: string; marks: Record<SubjectNames, number>; } class ResultCalculator { protected student: IStudent; constructor(student: IStudent) { this.student = student; } isPassed(): boolean { let resultStatus = true; Object.keys(this.student.marks).forEach((subject: string) => { if (this.student.marks[subject as SubjectNames] < 40) { resultStatus = false; } }); return resultStatus; } getAverage(): number { this.validateMarks(); return this.totalMarks() / this.subjectCount(); } private validateMarks() { Object.keys(this.student.marks).forEach((subject: string) => { if ( this.student.marks[subject as SubjectNames] < 0 || this.student.marks[subject as SubjectNames] > 100 ) { throw new Error(`invalid mark`); } }); } private totalMarks() { return Object.keys(this.student.marks).reduce( (acc, curr) => this.student.marks[curr as SubjectNames] + acc, 0 ); } private subjectCount() { return Object.keys(this.student.marks).length; } } // Receive Input const a: IStudent = { name: "jingleheimer schmidt", marks: { english: 100, maths: 100, }, }; // Create an encapsulated object const result = new ResultCalculator(a); // Perform operations & print results console.log(result.isPassed()); console.log(result.getAverage());

thông báo trong giải pháp trên,

phương pháp totalMarks, subjectCount, validateMarks & biến thành viên student không được hiển thị và chỉ có thể được sử dụng bởi đối tượng lớp.

2.dữ liệu student được đi kèm với mọi hành vi của nó.

React Native VS Flutter – Nên Học Cái Nào?

Lập Trình

Lập Trình Mobile

React Native

Tài Liệu - Khóa Học Free

11 min
1 năm ago
3

Giới thiệu Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công. Những […]

Tagged #ReactNative

Giới thiệu

Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công.

Những vấn đề mình gặp phải khi học nó:

Ngôn ngữ: Mình là nhà phát triển web nên tôi biết rõ về JavaScript. Nhưng đối với ứng dụng Android, bạn cần biết Java hoặc Kotlin. Tôi biết Java nhưng không nhiều lắm. Tương tự trên iOS, bạn cần học Swift.
Studio Android: Mình cảm thấy Android Studio phức tạp hơn. Khó hiểu.

Phát triển di động

Gần đây, một lần nữa mình quyết định học phát triển ứng dụng di động nhưng có một sự thay đổi. Tôi sẽ không sử dụng nền tảng phát triển gốc mà sử dụng nền tảng phát triển chéo cho cả Android và iOS.

Sau rất nhiều nghiên cứu và đọc các bài báo, có hai framework đa nền tảng chính để phát triển ứng dụng di động. Một là React Native và cái còn lại là rung chuyển. Hôm nay chúng ta sẽ mổ xẻ cả hai để biết cái nào phù hợp với bạn nhất.

Vì vậy hãy bắt đầu.

Phát triển ứng dụng Cross- PlatForm là gì?

Trước tiên hãy giải quyết câu hỏi phát triển ứng dụng di động Cross.

Thuật ngữ Phát triển ứng dụng Cross- PlatForm ngụ ý rằng nhà phát triển có thể chạy chương trình của họ trên nhiều nền tảng di động khác nhau trong trường hợp của chúng mình là Android và iOS, đồng thời với một cơ sở mã duy nhất.

Bạn không cần phải viết mã riêng cho một nền tảng riêng. Điều này giúp tiết kiệm thời gian và chi phí khi thuê hai nhóm nhà phát triển cho cùng một ứng dụng.

Vì vậy, bây giờ chuyển sang phần giới thiệu về hai framework của chúng ta.

React Native

React bản địa là một khung phát triển ứng dụng di động đa nền tảng Nguồn mở được Facebook phát triển vào năm 2015. Nó có thể được sử dụng để phát triển ứng dụng cho Android, Android TV, iOS, macOS, TV, Web, Windows và UWP bằng cách cho phép các nhà phát triển sử dụng Khung của React cùng với khả năng của nền tảng gốc.
–Wikipedia

React Native sử dụng JavaScript, giúp các nhà phát triển web phát triển ứng dụng di động một cách đơn giản. Nếu bạn đã quen thuộc với khung React. Khái niệm về React-Native gần giống với React.

Tất cả những yếu tố này đã khiến React Native trở nên phổ biến hơn trong cộng đồng.

Ứng dụng được phát triển bằng React Native

Facebook
Instagram
UberEATS
Pinterest
Skype
Và nhiều hơn nữa

Flutter

Flutter là bộ công cụ phát triển phần mềm UI nguồn mở do Google tạo ra. Nó được sử dụng để phát triển các ứng dụng đa nền tảng cho Android, iOS, Linux, Mac, Windows, Google Fuchsia và web từ một cơ sở mã duy nhất. Được mô tả lần đầu tiên vào năm 2015, Flutter được phát hành vào tháng 5 2017.
-Wikipedia

Đối thủ cạnh tranh lớn nhất của React Native là Flutter. Gần đây, rung động đang được rất nhiều người yêu thích. Google Trends hiển thị nhiều tìm kiếm về Flutter hơn React Native trong thời gian gần đây.

Flutter sử dụng ngôn ngữ lập trình Dart. Nó được phát triển bởi Google.

Ứng dụng được phát triển bằng Flutter

Cửa hàng Google Play
eBay
Tencent
Mơ11
ByteDance
Quảng cáo Google
Và nhiều hơn nữa

Sự khác biệt giữa

Hãy cùng tìm hiểu xem framework nào ưu việt hơn trong concept sau đây

Ý tưởng	Sự miêu tả	Người chiến thắng
Hiệu suất	JS nhanh hơn Dart. Nhưng Flutter trên Android và iOS nhanh hơn React Native rất nhiều.	Flutter
Thiết kế	React Native có giao diện gốc cho cả Android và iOS theo mặc định. Flutter sử dụng widget tùy chỉnh.	React Native
Cộng đồng	React Native có cộng đồng lớn hơn Flutter nhưng cộng đồng Flutter đang phát triển với tốc độ nhanh hơn.	React Native
Hỗ trợ tự động hóa xây dựng và phát hành	Flutter có hỗ trợ phát triển thông qua CLI và triển khai với Fastlane, điều còn thiếu trong React Native.	Flutter
Thư viện của bên thứ ba	React Native hỗ trợ nhiều thư viện, nó cũng hỗ trợ hầu hết các thư viện dựa trên React. Flutter có ít thư viện của bên thứ ba.	React Native
Kiểm tra	Trong Flutter, bạn có thể thực hiện kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử widget. Trong React Native, bạn phụ thuộc vào các công cụ của bên thứ ba.	Flutter
Số lượng ứng dụng	hơn 30 nghìn ứng dụng được xây dựng bằng React Native và chỉ hơn 12 nghìn ứng dụng sử dụng Flutter. Ngoài ra, các ứng dụng hàng đầu sử dụng React Native hơn là Flutter	React Native

Lộ trình học tập

Flutter

Flutter sử dụng Dart. Dart được phát triển bởi google, là Ngôn ngữ lập trình hướng đối tượng. Đối với người mới bắt đầu, việc học Dart và sau đó là Flutter sẽ dễ dàng hơn.

Vì vậy, đối với người mới bắt đầu muốn tìm hiểu framework phát triển ứng dụng di động chéo, Flutter sẽ là lựa chọn lý tưởng.

React Native

Lộ trình học tập của React Native bao gồm học JavaScript làm ngôn ngữ lập trình chính, có kiến thức về React và sau đó bạn có thể học React Native.

Để học React Native bạn nên biết JavaScript và React. Điều này làm cho lộ trình học tập dài hơn một chút so với sự rung động dành cho người mới bắt đầu.

Phần kết luận

Cả hai khung đều có khả năng xây dựng các ứng dụng đẹp và hữu dụng cho cả Android và iOS. Bạn có thể chọn những gì phù hợp nhất với yêu cầu của bạn.

Mình chọn React Native làm lộ trình học tập của nó. Theo mình biết React và JavaScript thì React Native dễ học hơn.

Vì vậy mình sẽ tải lên nhiều nội dung liên quan đến React Native trong những ngày tới. Đảm bảo theo dõi mình về nội dung đó.

Cảm ơn đã đọc bài đăng trên blog.

39 cách kiếm tiền online vào năm 2025

Blog

Kinh Doanh

19 min
1 năm ago

39 cách kiếm tiền trực tuyến vào năm 2025 Bối cảnh kỹ thuật số tiếp tục phát triển, mang đến những cơ hội mới cho cá nhân kiếm tiền trực tuyến. Cho dù bạn đang tìm cách bổ sung thu nhập hay […]

Tagged #kinhdoanh

Từ Web đến Native với React

Lập Trình

Lập Trình Mobile

React Native

50 min
1 năm ago
3
9

Mọi thứ mà nhà phát triển web cần biết về việc xây dựng ứng dụng React Native đầu tiên của mình. React Native là lựa chọn tuyệt vời cho các nhà phát triển web có kinh nghiệm về React và đang muốn […]

Tagged #ReactNative

Phá Kén

Tháng: Tháng mười một 2024

OOP trong javascript – Tính Encapsulation trong Javascript

React Native VS Flutter – Nên Học Cái Nào?

39 cách kiếm tiền online vào năm 2025

Từ Web đến Native với React