Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Cải tiến kỹ thuật Ajax cho WordPress: Lập trình hướng đối tượng

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Trong phần trước của loạt bài này, chúng tôi đã xem xét chủ đề làm việc cùng Ajax trong WordPress. Sau cùng, mục tiêu là cải thiện những bản trước đó vài năm.

Để nhắc lại, không phải là các kỹ thuật được dạy trong loạt bài ban đầu là sai, nhưng phần mềm thay đổi qua thời gian nên luôn tốt khi xem lại các khái niệm đã được nhắc đến từ nhiều năm trước và cố gắng cập nhật theo những thứ hiện tại và linh hoạt hơn cho những nỗ lực phát triển của chúng tôi.

Nhớ lại từ bài trước, chúng tôi đã xem xét nhận xét sau từ loạt bài gốc:

Chúng ta sẽ đưa ra một cái nhìn tổng quan ngắn gọn về Ajax là gì, cách thức nó hoạt động, cách thiết lập nó và hiểu các hook mà WordPress cung cấp. Chúng tôi cũng sẽ thực sự xây dựng một dự án nhỏ thực tế hoá lý thuyết. Chúng tôi sẽ xem qua mã nguồn và cũng sẽ đảm bảo nó có sẵn trên GitHub.

Và trong bài viết đó, chúng tôi đã xem xét một số cách nâng cao nhằm kết hợp API WordPress Ajax vào các dự án của chúng tôi bằng cách sử dụng lập trình thủ tục (procedural programing). Trong bài này, chúng tôi sẽ lấy mã mà chúng tôi đã viết trong phần đầu của loạt bài này và cấu trúc lại nó để nó sử dụng phương pháp hướng đối tượng.

Tổng kết thì mục tiêu không phải để bàn đến một trường hợp nên sử dụng mô hình nào; thay vào đó, là cho thấy cách chúng ta đạt được cùng chức năng dù cho sử dụng bất kỳ phương pháp nào khi bạn chọn để xây dựng plugin của mình.

Lên kế hoạch cho Plugin

Trước khi chúng tôi bắt đầu tái cấu trúc mã, một cái gì đó mà chúng tôi cần phải xem xét là làm thế nào chúng tôi sẽ bố trí các file khác nhau. Sau cùng, một phần của quá trình bắt đầu một dự án mới - hoặc thậm chí can thiệp vào một dự án cũ - là lên kế hoạch công việc sẽ được thực hiện như thế nào.

Đối với plugin cụ thể này, chúng tôi sẽ cần những điều sau đây:

  • file bootstrap chịu trách nhiệm khởi tạo class chính và bắt đầu plugin
  • một class có trách nhiệm tải các phụ thuộc như JavaScript
  • một class đóng vai trò là class plugin chính

Như bạn có thể thấy, không có quá nhiều thứ mà chúng tôi cần phải làm với plugin. Chúng tôi cũng sẽ tổ chức lại một số file để có cấu trúc thư mục nhất quán và chúng tôi sẽ đảm document lại tất cả code để theo WordPress Coding Standards.

Với điều đó, chúng tôi hãy bắt đầu.

Tổ chức các file

Trước khi chúng tôi viết bất kỳ code gì, hãy tiếp tục làm như sau:

  1. Tạo thư mục assets.
  2. Tạo thư mục js sẽ nằm trong thư mục assets.
  3. Di chuyển frontend.js vào thư mục js.
The assets directory

Lý do để làm điều này là chúng tôi đang chuyển sang phong cách lập trình hướng đối tượng. Một phần của điều này gồm việc tổ chức các file của chúng tôi để chúng tuân theo các quy ước thường được coi là các package.

Trong trường hợp của chúng tôi, thư mục assets bao gồm tất cả những thứ cần thiết để giúp cho chương trình chạy. Đối với một số plugin, đây có thể là JavaScript, CSS, image (hình ảnh), font (phông chữ), v.v. Trong trường hợp này, chúng tôi có một file JavaScript duy nhất.

Dependency loader (trình tải phần phụ thuộc)

Tiếp theo, chúng tôi cần giới thiệu một class sẽ chịu trách nhiệm tải các phụ thuộc cho dự án của chúng tôi. Đối với plugin cụ thể này, phụ thuộc duy nhất mà chúng tôi có là file JavaScript mà chúng tôi vừa đặt trong thư mục nội dung.

Một phần của lập trình hướng đối tượng là đảm bảo rằng mỗi class có một mục đích cụ thể. Trong trường hợp này, class chúng tôi sắp giới thiệu sẽ chịu trách nhiệm tải JavaScript bằng cách sử dụng API WordPress.

Hãy bắt đầu bằng cách tạo cấu trúc cơ bản của class:

Tiếp theo, chúng tôi sẽ thêm một phương thức chịu trách nhiệm cho việc enqueuing JavaScript theo API WordPress.

Sau đó, chúng tôi cần triển khai các hàm chịu trách nhiệm xử lý các yêu cầu Ajax và cung cấp response và sau đó bổ sung chúng vào class. Vì chúng sẽ trong ngữ cảnh của một class, chúng tôi cần thêm một hàm mới sẽ đăng ký chúng với WordPress.

Chúng ta sẽ tạo một hàm setup_ajax_handlers. Hàm đó trông như thế này:

Tiếp theo, chúng tôi cần chuyển các hàm vào class này. Lưu ý rằng các hàm ban đầu được bắt đầu bằng _sa không còn được đánh dấu như vậy nữa. Vì chúng nằm trong class, chúng tôi có thể bỏ tiền tố và cũng bỏ dấu gạch dưới có lợi cho từ khóa private.

Sau đó, chúng tôi sẽ lưu file này trong thư mục includes trong thư mục gốc của thư mục plugin. Thư mục includes gồm thường là nơi chứa code được sử dụng trong suốt dự án. Có thể nói thêm về thư mục quan trọng này, nhưng đó là nội dung ở một bài viết dài hơn.

Phiên bản cuối cùng của class này sẽ giống như sau:

Class chính

Bây giờ chúng tôi đã sẵn sàng để viết class chính cho plugin. Class đặc biệt này sẽ nằm trong thư mục gốc của thư mục plugin và cấu trúc cơ bản của class sẽ trông giống như sau:

Tiếp theo, chúng tôi sẽ thêm một vài thuộc tính mà chúng tôi sẽ thiết lập khi class được khởi tạo:

Sau đó, chúng tôi sẽ tạo một hàm tạo và một hàm khởi tạo sẽ được sử dụng để kích hoạt plugin.

Trong đoạn code trên, hàm constructor sẽ thiết lập các thuộc tính và khởi tạo các dependency cần thiết để kích hoạt plugin.

Khi hàm initialize được gọi, plugin sẽ khởi động và nó sẽ gọi phương thức khởi tạo trong class dependency mà chúng tôi đã tạo trước đó trong hướng dẫn này.

Bootstrap

Điều cuối cùng mà chúng tôi cần làm là lấy file chính mà chúng tôi có, sử dụng chức năng include của PHP và đảm bảo rằng nó biết đến các file PHP cần thiết mà chúng tôi có.

Sau đó, chúng tôi cần định nghĩa một phương thức sẽ khởi tạo file plugin chính và kích hoạt mọi thứ.

Phiên bản cuối cùng của file bootstrap sẽ trông giống như sau:

Đầu tiên, file sẽ kiểm tra xem liệu nó có được truy cập trực tiếp hay không bằng cách kiểm tra xem hằng số WordPress đã được định nghĩa chưa. Nếu chưa, thì xử lý dừng lại.

Sau đó, nó include các class khác nhau mà chúng tôi đã tạo ra trong hướng dẫn này. Cuối cùng, nó định nghĩa một hàm được gọi khi WordPress tải plugin để khởi động plugin và đưa mọi thứ vào hoạt động.

Tổng kết

Và chúng ta đã đi đến kết thúc của loạt bài gồm hai phần này. Hy vọng rằng bạn không chỉ học được một số thực hành tốt nhất để kết hợp Ajax vào các dự án WordPress của bạn, mà còn một chút về việc làm tài liệu cho code thủ tục và hướng đối tượng, cũng như nhìn ra sự khác biệt trong mức độ sắp đặt của code.

Trong bài viết sắp đến, tôi có thể xem lại một số khái niệm hướng đối tượng đã được giới thiệu ở đây và bao gồm chúng chi tiết hơn. Tuy nhiên, bây giờ, hãy xem qua plugin bằng cách sử dụng liên kết GitHub trên sidebar của trang này.

Hãy nhớ rằng, bạn có thể tìm thấy tất cả các khóa học và hướng dẫn của tôi trên trang profile của tôi và bạn có thể theo dõi tôi trên blog và/hoặc Twitter của tôi tại @tommcfarlin, đó là nơi tôi nói về phát triển phần mềm trong bối cảnh của WordPress.

Như thường lệ, vui lòng để lại bất kỳ câu hỏi hoặc nhận xét nào trong feed bên dưới và tôi sẽ cố gắng trả lời từng cái một.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.