Trung tâm cá nhân
sách gpt4 ai đã đi

jQuery trừu tượng

In lại Tác giả: Data Little Sun Thời gian cập nhật: 2023-10-29 04:52:51 37 4
mua khóa gpt4 Nike

Trong những cuộc trò chuyện này Nicholas ZakasVà Addy OsmaniHọ thảo luận về ý tưởng sử dụng mô hình facade như một hộp cát khi xây dựng các ứng dụng JavaScript lớn để tách ứng dụng khỏi cơ sở hạ tầng cơ bản.

Về mặt lý thuyết, việc tách rời này cho phép bạn chuyển đổi các thư viện cơ sở mà không cần phải viết lại các mô-đun ứng dụng. Tuy nhiên, trên thực tế, điều này có vẻ khó đạt được hơn.

Kiến trúc được đề xuất này có các triển khai cụ thể, ví dụ:AuraJS Tuy nhiên, khi xem xét mã nguồn, có vẻ như sandbox vẫn còn lỗi trừu tượng, vì nó trả về đối tượng jQuery từ một số phương thức của nó.

Tôi không quan tâm cụ thể đến AuraJS mà quan tâm nhiều hơn đến khái niệm chung về việc cố gắng trừu tượng hóa một thư viện như jQuery mà không làm mất quá nhiều chức năng.

Ví dụ, giả sử facade/sandbox của tôi có phương thức dom .find(bộ chọn). Tôi có thể nghĩ ra 3 lựa chọn cho những gì nó có thể trả về:

  1. Một đối tượng jQuery - Điều này sẽ rò rỉ jQuery vào mô-đun using.

  2. Phần tử DOM gốc - Mất chức năng, thực sự không ai muốn sử dụng! Không có liên kết.

  3. Trình bao bọc tùy chỉnh giống jQuery - Có thể khá phức tạp, nhưng có vẻ như là giải pháp lý tưởng.

Vậy câu hỏi của tôi là,Làm thế nào bạn có thể tóm tắt một thư viện như jQuery mà không làm mất đi quá nhiều chức năng để có thể thay thế nó với ít công sức nhất vào một thời điểm nào đó trong tương lai?

1 Câu trả lời

Sau đây là một ví dụ rất đơn giản về việc sử dụng mô-đun làm kiến ​​trúc:


Chơi mô-đun



// myCore cung cấp tất cả các chức năng cần thiết cho các mô-đun
// Có thể sử dụng thư viện ở đây
var myCore = {

  lấyContainer: hàm() {
    // mã ở đây để tìm một container phù hợp để đặt các tiện ích
    // Đây là nơi các khả năng khác nhau của khách hàng sẽ được kiểm tra để đảm bảo
    // tiện ích hoạt động theo ngữ cảnh của người dùng - máy tính để bàn, điện thoại, máy tính bảng, máy tính bảng, v.v.

    // phím tắt rất đơn giản
    trở lại {
            phần tử: document.body,

            // Hàm này có thể sử dụng một thư viện mục đích chung
            thêm: chức năng(widget) {
              this.element.appendChild(widget.getElement());
            }
    };

  },

  // Hàm này có thể sử dụng một thư viện mục đích chung
  lấyNewWidget: hàm() {
    var element = document.createElement('div');

    trở lại {

      lấy phần tử: hàm() {
        phần tử trả về;
      },

      hiển thị: hàm(văn bản) { 

        // Có liên kết chặt chẽ với chính nó hay không? 
        this.getElement().innerHTML = '' + văn bản + '';

        // hoặc
        element.innerHTML = '' + văn bản + '';
      }
    }
  }
};

// Thiếu lớp hộp cát...

// Thêm một mô-đun - chỉ sử dụng API myCore (quyền truy cập phải được kiểm soát bởi
// hộp cát), không xử lý các đối tượng thư viện hoặc máy chủ cơ bản
(chức năng() {

  // Lấy một container để thêm một widget nữa
  var container = myCore.getContainer();

  // Tạo một tiện ích
  var widget = myCore.getNewWidget();

  // Thêm tiện ích vào vùng chứa
  container.add(tiện ích);

  // Cung cấp thứ gì đó cho tiện ích để hiển thị
  widget.display('Xin chào thế giới');

}());



Vì vậy, bạn có thể thấy rằng ở cấp độ mô-đun, bạn không quan tâm đến môi trường lưu trữ hoặc các thư viện cơ bản, bạn chỉ viết ECMAScript thuần túy. Bạn có thể trở nên thực sự phòng thủ và làm điều gì đó như:

(chức năng() {
    var container, widget;

    nếu (!myCore) trả về;

    if (myCore.getContainer) { // Một số sẽ bao gồm cả bài kiểm tra isCallable

      container = myCore.getContainer();
    }

    // getWidget có thể là một phương thức chứa thay thế để
    // tất cả những gì bạn cần là một phương thức hoặc thuộc tính của container
    // hoặc tiện ích
    nếu (myCore.getWidget) {
      tiện ích = myCore.getWidget();
    }

    ...
}

V.v., vì vậy mọi thứ đều được thử nghiệm và kiểm tra. Tôi đã bỏ qua phần xử lý lỗi, nhưng hy vọng ví dụ này đủ.

Liên quan đến javascript - jQuery trừu tượng, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/16032440/

37 4 0
Bài viết được đề xuất: Làm thế nào để chọn thẻ html có nội dung khi sử dụng selectNodeContents?
Bài viết được đề xuất: Cách vẽ hình chữ nhật bo tròn trong c#
Bài viết được đề xuất: Cách inject UserManager & SignInManager
Bài viết được đề xuất: Kích hoạt một lần nhấn phím trên Plus.Google.com
Dữ liệu Little Sun
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com