Có thể chia mã JavaScript thành nhiều dòng không?

Phương pháp thêm chuỗi nhiều dòng trong Javascript

Ví dụ 1. Đây là một ví dụ cơ bản về in văn bản nhiều dòng trong JavaScript. Trong ví dụ này, chúng tôi chỉ sử dụng thẻ HTML
để phân tách các câu thành nhiều dòng.

   
       Multiple new lines example 
   
   

đầu ra
ví dụ 2. Trong ví dụ này, chúng ta sẽ chuyển chuỗi văn bản bên trong
hoặc hoặc tab tiêu đề [
to] để chia chúng thành nhiều dòng hoặc đoạn văn. 


    

đầu ra
ví dụ 3. Trong ví dụ này, chúng ta sẽ nối các chuỗi riêng lẻ bằng toán tử +. Đây là phương pháp đơn giản nhất nhưng tốn thời gian nhất để tách từng dòng thành một chuỗi và nối chúng thành một chuỗi cuối cùng


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

đầu ra
Trước khi nhấp vào nút
Sau khi nhấp vào nút
Ví dụ 4. Trong ví dụ này, chúng ta sẽ nối các chuỗi riêng lẻ bằng toán tử \. Khi viết chuỗi nhiều dòng trong javascript sử dụng dấu ngoặc kép/đơn, chúng ta có thể sử dụng ký tự xuống dòng [\n]. Sau mỗi ký tự xuống dòng [n], hãy thêm dấu gạch chéo ngược [ \ ], dấu gạch chéo ngược này cho công cụ JavaScript biết rằng chuỗi chưa kết thúc


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using / operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

đầu ra
Trước khi nhấp vào nút
Sau khi nhấp vào nút
Ví dụ 5. Trong ví dụ này, chúng tôi sẽ sử dụng một mẫu chữ để nối các chuỗi riêng biệt. Chữ mẫu được sử dụng để tạo chuỗi nhiều dòng trong javascript. Không giống như dấu phân cách dấu nháy đơn/kép tiêu chuẩn, các chuỗi được phân tách bằng dấu gạch ngược
 
Java AWT và SwingOOAD [Phân tích và thiết kế hướng đối tượng]SAT [Bài kiểm tra năng lực học thuật] Sửa câuMạngHTMLSQLQuản lýBài kiểm tra năng lực sinh họcBài kiểm tra năng lực thống kêBài kiểm tra năng lực hóa học
 
Câu trả lời
Có,
Có thể ngắt trong câu lệnh chuỗi bằng cách sử dụng dấu gạch chéo ngược "\" ở cuối. 
Người cũ. 
tài liệu. write["Chào buổi sáng. \
Tôi là Mr. John"];
Nhưng không thể thực hiện được trong bất kỳ câu lệnh javascript nào khác. 
Ví dụ. 
có thể nhưng không
tài liệu. write \
["Chào buổi sáng. tôi là ông. John"];
 
Lưu ý rằng cách tiếp cận dấu gạch chéo ngược này không nhất thiết phải được ưu tiên và có thể không được hỗ trợ phổ biến [tôi gặp khó khăn khi tìm dữ liệu cứng về điều này]. Nó không có trong ECMA 5. 1 thông số kỹ thuật
Khi làm việc với mã khác [không nằm trong dấu ngoặc kép], ngắt dòng sẽ bị bỏ qua và hoàn toàn chấp nhận được. Ví dụ
 
Trong những năm gần đây, microservice đã trở nên phổ biến, với nhiều tổ chức sử dụng kiểu kiến ​​trúc này để tránh những hạn chế của các phần phụ trợ lớn, nguyên khối. Mặc dù đã có nhiều bài viết về phong cách xây dựng phần mềm phía máy chủ này, nhưng nhiều công ty vẫn tiếp tục gặp khó khăn với các cơ sở mã giao diện người dùng nguyên khối.
Có lẽ bạn muốn xây dựng một ứng dụng web đáp ứng hoặc tiến bộ, nhưng không thể tìm thấy một nơi dễ dàng để bắt đầu tích hợp các tính năng này vào mã hiện có. Có lẽ bạn muốn bắt đầu sử dụng các tính năng mới của ngôn ngữ JavaScript [hoặc một trong vô số ngôn ngữ có thể biên dịch thành JavaScript], nhưng bạn không thể lắp các công cụ xây dựng cần thiết vào quy trình xây dựng hiện có của mình. Hoặc có thể bạn chỉ muốn mở rộng quy mô phát triển của mình để nhiều nhóm có thể làm việc đồng thời trên một sản phẩm, nhưng sự liên kết và độ phức tạp trong khối nguyên khối hiện có có nghĩa là mọi người đang giẫm lên chân nhau. Đây đều là những vấn đề thực sự có thể ảnh hưởng tiêu cực đến khả năng mang lại trải nghiệm chất lượng cao cho khách hàng của bạn một cách hiệu quả
Gần đây, chúng ta ngày càng chú ý nhiều hơn đến kiến ​​trúc tổng thể và cơ cấu tổ chức cần thiết cho sự phát triển web hiện đại, phức tạp. Đặc biệt, chúng tôi đang chứng kiến ​​các mẫu xuất hiện để phân tách các nguyên khối giao diện người dùng thành các phần nhỏ hơn, đơn giản hơn, có thể được phát triển, thử nghiệm và triển khai một cách độc lập, trong khi vẫn hiển thị cho khách hàng dưới dạng một sản phẩm gắn kết duy nhất. Chúng tôi gọi kỹ thuật này là giao diện vi mô, mà chúng tôi định nghĩa là
"Một phong cách kiến ​​trúc trong đó các ứng dụng giao diện người dùng có thể phân phối độc lập được kết hợp thành một tổng thể lớn hơn"
Trong ấn bản tháng 11 năm 2016 của ra-đa công nghệ Thoughtworks, chúng tôi đã liệt kê các giao diện vi mô là một kỹ thuật mà các tổ chức nên Đánh giá. Sau đó, chúng tôi đã quảng bá nó thành Thử nghiệm và cuối cùng là Áp dụng, điều đó có nghĩa là chúng tôi coi đó là một phương pháp đã được chứng minh mà bạn nên sử dụng khi thấy hợp lý.
Hình 1. Micro frontends đã xuất hiện trên radar công nghệ nhiều lần
Một số lợi ích chính mà chúng tôi đã thấy từ giao diện vi mô là
cơ sở mã nhỏ hơn, gắn kết hơn và dễ bảo trì
các tổ chức có khả năng mở rộng hơn với các nhóm tự trị, tách rời
khả năng nâng cấp, cập nhật hoặc thậm chí viết lại các phần của giao diện người dùng theo cách gia tăng hơn so với trước đây
Không phải ngẫu nhiên mà những lợi thế nổi bật này lại là một trong những lợi ích mà microservices có thể cung cấp

  

Tất nhiên, không có bữa trưa nào miễn phí khi nói đến kiến ​​trúc phần mềm - mọi thứ đều phải trả giá. Một số triển khai giao diện người dùng vi mô có thể dẫn đến trùng lặp các phần phụ thuộc, làm tăng số lượng byte mà người dùng của chúng tôi phải tải xuống. Ngoài ra, sự gia tăng đáng kể quyền tự chủ của nhóm có thể gây ra sự phân mảnh trong cách nhóm của bạn làm việc. Tuy nhiên, chúng tôi tin rằng những rủi ro này có thể được quản lý và lợi ích của các giao diện vi mô thường lớn hơn chi phí
Những lợi ích
Thay vì xác định các giao diện vi mô theo phương pháp tiếp cận kỹ thuật cụ thể hoặc chi tiết triển khai, thay vào đó, chúng tôi nhấn mạnh vào các thuộc tính xuất hiện và lợi ích mà chúng mang lại
nâng cấp gia tăng
Đối với nhiều tổ chức, đây là khởi đầu của hành trình vi mô của họ. Nguyên khối cũ, lớn, có giao diện người dùng đang bị kìm hãm bởi ngăn xếp công nghệ của năm qua hoặc bởi mã được viết dưới áp lực phân phối và đã đến lúc phải viết lại toàn bộ. Để tránh nguy cơ viết lại toàn bộ, chúng tôi muốn bóp nghẹt ứng dụng cũ từng phần một và trong thời gian chờ đợi tiếp tục cung cấp các tính năng mới cho khách hàng của mình mà không bị khối nguyên khối đè nặng
Điều này thường dẫn đến một kiến ​​trúc micro frontends. Khi một nhóm đã có kinh nghiệm đưa một tính năng vào sản xuất mà không cần sửa đổi nhiều so với thế giới cũ, các nhóm khác cũng sẽ muốn tham gia vào thế giới mới. Mã hiện có vẫn cần được duy trì và trong một số trường hợp, có thể hợp lý khi tiếp tục thêm các tính năng mới vào mã, nhưng hiện tại đã có lựa chọn
Mục đích cuối cùng ở đây là chúng tôi có nhiều quyền tự do hơn để đưa ra quyết định theo từng trường hợp đối với từng bộ phận riêng lẻ của sản phẩm và thực hiện các nâng cấp gia tăng đối với kiến ​​trúc, phần phụ thuộc và trải nghiệm người dùng của chúng tôi. Nếu có một thay đổi đột phá lớn trong khuôn khổ chính của chúng tôi, mỗi giao diện người dùng vi mô có thể được nâng cấp bất cứ khi nào có ý nghĩa, thay vì buộc phải dừng thế giới và nâng cấp mọi thứ cùng một lúc. Nếu chúng ta muốn thử nghiệm công nghệ mới hoặc các phương thức tương tác mới, chúng ta có thể thực hiện điều đó theo cách riêng biệt hơn so với trước đây
Cơ sở mã đơn giản, tách rời
Theo định nghĩa, mã nguồn cho từng giao diện vi mô riêng lẻ sẽ nhỏ hơn nhiều so với mã nguồn của một giao diện người dùng nguyên khối duy nhất. Các cơ sở mã nhỏ hơn này có xu hướng đơn giản hơn và dễ dàng hơn cho các nhà phát triển làm việc với. Đặc biệt, chúng tôi tránh sự phức tạp phát sinh từ việc ghép nối không chủ ý và không phù hợp giữa các thành phần không nên biết về nhau. Bằng cách vẽ các đường dày hơn xung quanh các bối cảnh có giới hạn của ứng dụng, chúng tôi làm cho việc ghép nối ngẫu nhiên như vậy khó xảy ra hơn
Tất nhiên, một quyết định kiến ​​trúc cấp cao duy nhất [i. e. "hãy làm giao diện người dùng vi mô"], không phải là sự thay thế cho mã sạch kiểu cũ tốt. Chúng tôi không cố miễn bản thân khỏi suy nghĩ về mã của mình và nỗ lực nâng cao chất lượng của nó. Thay vào đó, chúng tôi đang cố gắng chuẩn bị để rơi vào hố sâu của thành công bằng cách đưa ra những quyết định tồi tệ một cách khó khăn và những quyết định đúng đắn thì dễ dàng. Ví dụ: việc chia sẻ các mô hình miền trên các bối cảnh có giới hạn trở nên khó khăn hơn, vì vậy các nhà phát triển ít có khả năng làm như vậy hơn. Tương tự, giao diện người dùng vi mô thúc đẩy bạn phải rõ ràng và cân nhắc kỹ lưỡng về cách dữ liệu và sự kiện lưu chuyển giữa các phần khác nhau của ứng dụng, đây là điều mà lẽ ra chúng ta nên làm.
triển khai độc lập
Cũng giống như với microservice, khả năng triển khai độc lập của các giao diện người dùng vi mô là chìa khóa. Điều này làm giảm phạm vi của bất kỳ triển khai cụ thể nào, do đó làm giảm rủi ro liên quan. Bất kể mã giao diện người dùng của bạn được lưu trữ như thế nào hoặc ở đâu, mỗi giao diện người dùng vi mô phải có quy trình phân phối liên tục của riêng mình, quy trình này sẽ xây dựng, kiểm tra và triển khai tất cả các quy trình đó cho đến khi sản xuất. Chúng tôi sẽ có thể triển khai từng giao diện vi mô mà không cần suy nghĩ nhiều về trạng thái hiện tại của các cơ sở mã hoặc đường ống khác. Sẽ không có vấn đề gì nếu nguyên khối cũ nằm trong chu kỳ phát hành cố định, thủ công, hàng quý hoặc nếu nhóm bên cạnh đã đẩy một tính năng dở dang hoặc bị hỏng vào nhánh chính của họ. Nếu một giao diện người dùng vi mô nhất định đã sẵn sàng để đi vào sản xuất, thì nó sẽ có thể làm như vậy và quyết định đó sẽ tùy thuộc vào nhóm xây dựng và duy trì nó
Hình 2. Mỗi giao diện vi mô được triển khai để sản xuất độc lập
đội tự trị
Vì lợi ích cấp cao hơn của việc tách rời cả cơ sở mã và chu kỳ phát hành của chúng tôi, chúng tôi sẽ có một chặng đường dài hướng tới việc có các nhóm hoàn toàn độc lập, những người có thể sở hữu một phần của sản phẩm từ ý tưởng đến sản xuất và hơn thế nữa. Các nhóm có thể có toàn quyền sở hữu mọi thứ họ cần để mang lại giá trị cho khách hàng, điều này cho phép họ di chuyển nhanh chóng và hiệu quả. Để điều này hoạt động, các nhóm của chúng tôi cần được hình thành xung quanh các chức năng kinh doanh theo chiều dọc, thay vì xoay quanh các khả năng kỹ thuật. Một cách dễ dàng để làm điều này là tạo ra sản phẩm dựa trên những gì người dùng cuối sẽ nhìn thấy, vì vậy mỗi giao diện người dùng nhỏ gói gọn một trang của ứng dụng và được sở hữu từ đầu đến cuối bởi một nhóm duy nhất. Điều này mang lại sự gắn kết cao hơn trong công việc của các nhóm so với việc các nhóm được thành lập dựa trên các mối quan tâm về kỹ thuật hoặc “theo chiều ngang” như kiểu dáng, biểu mẫu hoặc xác nhận
Hình 3. Mỗi ứng dụng nên được sở hữu bởi một nhóm duy nhất
Tóm lại
Nói tóm lại, giao diện người dùng vi mô là chia nhỏ những thứ lớn và đáng sợ thành những phần nhỏ hơn, dễ quản lý hơn và sau đó làm rõ ràng về sự phụ thuộc giữa chúng. Các lựa chọn công nghệ, cơ sở mã, nhóm và quy trình phát hành của chúng tôi đều có thể hoạt động và phát triển độc lập với nhau mà không cần phối hợp quá mức
ví dụ
Hãy tưởng tượng một trang web nơi khách hàng có thể đặt thức ăn để giao. Nhìn bề ngoài, đó là một khái niệm khá đơn giản, nhưng có một lượng chi tiết đáng kinh ngạc nếu bạn muốn thực hiện tốt
Nên có một trang đích để khách hàng có thể duyệt và tìm kiếm nhà hàng. Các nhà hàng phải có thể tìm kiếm và lọc theo bất kỳ số lượng thuộc tính nào bao gồm giá cả, món ăn hoặc những gì khách hàng đã đặt hàng trước đó
Mỗi nhà hàng cần có trang riêng hiển thị các món trong thực đơn và cho phép khách hàng chọn món họ muốn ăn, kèm theo giảm giá, ưu đãi bữa ăn và các yêu cầu đặc biệt
Khách hàng nên có một trang hồ sơ nơi họ có thể xem lịch sử đặt hàng, theo dõi việc giao hàng và tùy chỉnh các tùy chọn thanh toán của mình
hinh 4. Một trang web giao đồ ăn có thể có một số trang khá phức tạp
Có đủ độ phức tạp trong mỗi trang để chúng tôi có thể dễ dàng biện minh cho một nhóm chuyên dụng cho từng trang và mỗi nhóm đó sẽ có thể làm việc trên trang của họ một cách độc lập với tất cả các nhóm khác. Họ có thể phát triển, thử nghiệm, triển khai và duy trì mã của mình mà không phải lo lắng về xung đột hoặc phối hợp với các nhóm khác. Tuy nhiên, khách hàng của chúng tôi vẫn sẽ thấy một trang web liền mạch duy nhất
Trong suốt phần còn lại của bài viết này, chúng ta sẽ sử dụng ứng dụng ví dụ này ở bất cứ nơi nào chúng ta cần mã ví dụ hoặc kịch bản
phương pháp tích hợp
Với định nghĩa khá lỏng lẻo ở trên, có nhiều cách tiếp cận hợp lý có thể được gọi là giao diện vi mô. Trong phần này, chúng tôi sẽ đưa ra một số ví dụ và thảo luận về sự đánh đổi của chúng. Có một kiến ​​trúc khá tự nhiên xuất hiện trên tất cả các cách tiếp cận - nói chung có một giao diện vi mô cho mỗi trang trong ứng dụng và có một ứng dụng vùng chứa duy nhất, trong đó
hiển thị các phần tử trang phổ biến như đầu trang và chân trang
giải quyết các mối quan tâm xuyên suốt như xác thực và điều hướng
tập hợp các giao diện người dùng vi mô khác nhau lại với nhau trên trang và cho mỗi giao diện người dùng vi mô biết khi nào và ở đâu tự kết xuất
Hình 5. Bạn thường có thể lấy kiến ​​trúc của mình từ cấu trúc trực quan của trang
Thành phần mẫu phía máy chủ
Chúng tôi bắt đầu với một cách tiếp cận rõ ràng là không mới để phát triển giao diện người dùng - hiển thị HTML trên máy chủ từ nhiều mẫu hoặc đoạn. Chúng tôi có một 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
3 chứa bất kỳ thành phần trang phổ biến nào, sau đó sử dụng bao gồm phía máy chủ để cắm nội dung dành riêng cho trang từ các tệp HTML phân đoạn
  
    
    Feed me
  
  
    🍽 Feed me
    
  

Chúng tôi cung cấp tệp này bằng Nginx, định cấu hình biến 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
4 bằng cách khớp với URL đang được yêu cầu
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
Đây là thành phần phía máy chủ khá chuẩn. Lý do chúng tôi có thể gọi đây là giao diện người dùng vi mô một cách chính đáng là vì chúng tôi đã chia nhỏ mã của mình theo cách mà mỗi phần đại diện cho một khái niệm miền độc lập có thể được phân phối bởi một nhóm độc lập. Điều không được hiển thị ở đây là cách các tệp HTML khác nhau kết thúc trên máy chủ web, nhưng giả định là mỗi tệp có quy trình triển khai riêng, cho phép chúng tôi triển khai các thay đổi đối với một trang mà không ảnh hưởng hoặc suy nghĩ về bất kỳ trang nào khác
Để độc lập hơn nữa, có thể có một máy chủ riêng biệt chịu trách nhiệm kết xuất và phục vụ từng giao diện vi mô, với một máy chủ ở phía trước đưa ra yêu cầu cho các máy chủ khác. Với bộ nhớ đệm cẩn thận của phản hồi, điều này có thể được thực hiện mà không ảnh hưởng đến độ trễ
Hình 6. Mỗi máy chủ này có thể được xây dựng và triển khai độc lập
Ví dụ này cho thấy giao diện vi mô không nhất thiết phải là một kỹ thuật mới và không cần phải phức tạp. Miễn là chúng tôi cẩn thận về cách các quyết định thiết kế của chúng tôi ảnh hưởng đến quyền tự chủ của cơ sở mã và nhóm của chúng tôi, chúng tôi có thể đạt được nhiều lợi ích giống nhau bất kể hệ thống công nghệ của chúng tôi là gì
tạo kiểu
CSS với tư cách là một ngôn ngữ vốn có tính toàn cầu, kế thừa và xếp tầng, theo truyền thống không có hệ thống mô-đun, không gian đặt tên hoặc đóng gói. Một số tính năng đó hiện đã tồn tại, nhưng hỗ trợ trình duyệt thường thiếu. Trong bối cảnh giao diện người dùng vi mô, nhiều vấn đề trong số này trở nên trầm trọng hơn. Ví dụ: nếu giao diện người dùng vi mô của một nhóm có biểu định kiểu có nội dung là 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
5 và một biểu định kiểu khác có nội dung là 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
6 và cả hai bộ chọn này đều được đính kèm vào cùng một trang, thì ai đó sẽ thất vọng. Đây không phải là một vấn đề mới, nhưng nó trở nên tồi tệ hơn bởi thực tế là các bộ chọn này được viết bởi các nhóm khác nhau vào các thời điểm khác nhau và mã có thể được chia thành các kho lưu trữ riêng biệt, khiến việc khám phá trở nên khó khăn hơn

  

Trong những năm qua, nhiều phương pháp đã được phát minh để làm cho CSS dễ quản lý hơn. Một số chọn sử dụng quy ước đặt tên nghiêm ngặt, chẳng hạn như BEM, để đảm bảo bộ chọn chỉ áp dụng khi dự kiến. Những người khác, không muốn chỉ dựa vào kỷ luật của nhà phát triển, sử dụng bộ xử lý trước như SASS, có thể sử dụng bộ chọn lồng nhau như một hình thức không gian tên. Một cách tiếp cận mới hơn là áp dụng tất cả các kiểu theo chương trình với các mô-đun CSS hoặc một trong các thư viện CSS-in-JS khác nhau, điều này đảm bảo rằng các kiểu chỉ được áp dụng trực tiếp ở những nơi mà nhà phát triển dự định. Hoặc đối với cách tiếp cận dựa trên nền tảng hơn, Shadow DOM cũng cung cấp cách ly kiểu
Cách tiếp cận mà bạn chọn không quan trọng lắm, miễn là bạn tìm ra cách đảm bảo rằng các nhà phát triển có thể viết các kiểu của họ một cách độc lập với nhau và tin tưởng rằng mã của họ sẽ hoạt động có thể dự đoán được khi được kết hợp với nhau thành một ứng dụng duy nhất
thử nghiệm
Chúng tôi không thấy nhiều sự khác biệt giữa giao diện người dùng nguyên khối và giao diện vi mô khi thử nghiệm. Nói chung, bất kỳ chiến lược nào bạn đang sử dụng để kiểm tra giao diện người dùng nguyên khối đều có thể được sao chép trên từng giao diện người dùng vi mô riêng lẻ. Nghĩa là, mỗi giao diện vi mô phải có bộ kiểm tra tự động toàn diện của riêng mình để đảm bảo chất lượng và tính chính xác của mã
Khoảng cách rõ ràng sau đó sẽ là thử nghiệm tích hợp của các giao diện người dùng vi mô khác nhau với ứng dụng vùng chứa. Điều này có thể được thực hiện bằng cách sử dụng công cụ kiểm tra chức năng/đầu cuối ưa thích của bạn [chẳng hạn như Selenium hoặc Cypress], nhưng đừng đưa mọi thứ đi quá xa; . Điều đó có nghĩa là, hãy sử dụng các bài kiểm tra đơn vị để bao quát logic nghiệp vụ cấp thấp và logic hiển thị của bạn, sau đó sử dụng các bài kiểm tra chức năng chỉ để xác thực rằng trang được lắp ráp chính xác. Ví dụ: bạn có thể tải lên ứng dụng được tích hợp đầy đủ tại một URL cụ thể và xác nhận rằng tiêu đề được mã hóa cứng của giao diện người dùng vi mô có liên quan xuất hiện trên trang
Nếu có các hành trình của người dùng trải dài trên các giao diện người dùng vi mô, thì bạn có thể sử dụng thử nghiệm chức năng để bao gồm các hành trình đó, nhưng hãy để các thử nghiệm chức năng tập trung vào việc xác thực sự tích hợp của các giao diện người dùng chứ không phải logic kinh doanh nội bộ của từng giao diện người dùng vi mô, điều lẽ ra đã có . Như đã đề cập ở trên, các hợp đồng hướng đến người tiêu dùng có thể giúp chỉ định trực tiếp các tương tác xảy ra giữa các giao diện người dùng vi mô mà không cần đến môi trường tích hợp và thử nghiệm chức năng.
Ví dụ chi tiết
Hầu hết phần còn lại của bài viết này sẽ là giải thích chi tiết về một cách mà ứng dụng ví dụ của chúng tôi có thể được triển khai. Chúng tôi sẽ tập trung chủ yếu vào cách ứng dụng vùng chứa và giao diện người dùng vi mô tích hợp với nhau bằng JavaScript, vì đó có lẽ là phần thú vị và phức tạp nhất. Bạn có thể xem kết quả cuối cùng được triển khai trực tiếp tại https. //thử nghiệm. giao diện người dùng vi mô. com và mã nguồn đầy đủ có thể được xem trên Github
Hình 8. Trang đích 'duyệt' của ứng dụng demo giao diện người dùng vi mô đầy đủ
Bản demo được xây dựng bằng React. js, vì vậy đáng để chỉ ra rằng React không có độc quyền về kiến ​​trúc này. Giao diện người dùng vi mô có thể được triển khai bằng nhiều công cụ hoặc khung khác nhau. Chúng tôi chọn React ở đây vì tính phổ biến của nó và vì sự quen thuộc của chúng tôi với nó
thùng chứa
Chúng tôi sẽ bắt đầu với vùng chứa, vì đó là điểm khởi đầu cho khách hàng của chúng tôi. Hãy xem những gì chúng ta có thể tìm hiểu về nó từ 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
7 của nó


    

1
Từ sự phụ thuộc vào 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
8 và 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
9, chúng ta có thể kết luận rằng đó là một React. ứng dụng js được tạo bằng 


    

10. Thú vị hơn là những gì không có ở đó. bất kỳ đề cập nào về giao diện người dùng vi mô mà chúng ta sẽ cùng nhau soạn thảo để tạo thành ứng dụng cuối cùng của chúng ta. Nếu chúng tôi chỉ định chúng ở đây là phần phụ thuộc của thư viện, chúng tôi sẽ đi theo con đường tích hợp thời gian xây dựng, như đã đề cập trước đây có xu hướng gây ra sự ghép nối có vấn đề trong chu kỳ phát hành của chúng tôi
Để xem cách chúng tôi chọn và hiển thị giao diện người dùng vi mô, hãy xem 


    

11. Chúng tôi sử dụng Bộ định tuyến React để khớp URL hiện tại với danh sách các tuyến được xác định trước và hiển thị một thành phần tương ứng


    

6
Thành phần 


    

12 không thú vị lắm - nó chỉ chuyển hướng trang đến một URL nhà hàng được chọn ngẫu nhiên. Các thành phần 


    

13 và 


    

14 trông như thế này


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

0
Trong cả hai trường hợp, chúng tôi kết xuất thành phần 


    

15. Ngoài đối tượng lịch sử [sẽ trở nên quan trọng sau], chúng tôi chỉ định tên duy nhất của ứng dụng và máy chủ lưu trữ có thể tải xuống gói của nó. URL hướng cấu hình này sẽ giống như 


    

16 khi chạy cục bộ hoặc 


    

17 trong sản xuất
Đã chọn một micro frontend trong 


    

11, bây giờ chúng ta sẽ kết xuất nó trong 


    

19, đây chỉ là một thành phần React khác


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

6
Khi kết xuất, tất cả những gì chúng tôi làm là đặt một phần tử vùng chứa trên trang, với một ID duy nhất cho giao diện người dùng vi mô. Đây là nơi chúng tôi sẽ yêu cầu giao diện người dùng vi mô của mình tự hiển thị. Chúng tôi sử dụng React's 


    

60 làm trình kích hoạt để tải xuống và cài đặt giao diện người dùng vi mô
lớp MicroFrontend…


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

8
Trước tiên, chúng tôi kiểm tra xem tập lệnh có liên quan, có ID duy nhất, đã được tải xuống chưa, trong trường hợp đó, chúng tôi có thể hiển thị tập lệnh đó ngay lập tức. Nếu không, chúng tôi tìm nạp tệp 


    

61 từ máy chủ thích hợp để tra cứu URL đầy đủ của nội dung tập lệnh chính. Khi chúng tôi đã đặt URL của tập lệnh, tất cả những gì còn lại là đính kèm nó vào tài liệu, với trình xử lý 


    

62 hiển thị giao diện người dùng vi mô
lớp MicroFrontend…


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using / operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

1
Trong đoạn mã trên, chúng tôi đang gọi một hàm toàn cầu có tên là 


    

63, được đặt ở đó bởi tập lệnh mà chúng tôi vừa tải xuống. Chúng tôi chuyển nó ID của
phần tử nơi giao diện người dùng vi mô sẽ tự hiển thị và đối tượng 


    

64, chúng tôi sẽ giải thích sớm. Chữ ký của chức năng toàn cầu này là hợp đồng chính giữa ứng dụng vùng chứa và giao diện người dùng vi mô. Đây là nơi mọi giao tiếp hoặc tích hợp sẽ diễn ra, vì vậy việc giữ cho nó khá nhẹ sẽ giúp dễ bảo trì và thêm các giao diện vi mô mới trong tương lai. Bất cứ khi nào chúng ta muốn làm điều gì đó yêu cầu thay đổi mã này, chúng ta nên suy nghĩ kỹ và lâu dài về ý nghĩa của việc ghép nối các cơ sở mã của chúng ta và việc duy trì hợp đồng
Còn một phần cuối cùng, đó là xử lý việc dọn dẹp. Khi thành phần 


    

15 của chúng tôi hủy gắn kết [bị xóa khỏi DOM], chúng tôi cũng muốn hủy gắn kết giao diện người dùng vi mô có liên quan. Có một chức năng toàn cầu tương ứng được xác định bởi mỗi giao diện vi mô cho mục đích này, chúng tôi gọi chức năng này từ phương thức vòng đời React thích hợp
lớp MicroFrontend…


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using / operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

5
Xét về nội dung của chính nó, tất cả những gì vùng chứa hiển thị trực tiếp là tiêu đề cấp cao nhất và thanh điều hướng của trang web, vì chúng không đổi trên tất cả các trang. CSS cho các thành phần đó đã được viết cẩn thận để đảm bảo rằng nó sẽ chỉ tạo kiểu cho các thành phần trong tiêu đề, do đó, nó sẽ không xung đột với bất kỳ mã kiểu dáng nào trong giao diện người dùng vi mô
Và đó là phần cuối của ứng dụng container. Nó khá thô sơ, nhưng điều này mang lại cho chúng tôi một trình bao có thể tự động tải xuống các giao diện vi mô của chúng tôi trong thời gian chạy và dán chúng lại với nhau thành một thứ gì đó gắn kết trên một trang. Những giao diện người dùng vi mô đó có thể được triển khai độc lập trong suốt quá trình sản xuất mà không cần thực hiện thay đổi đối với bất kỳ giao diện người dùng vi mô nào khác hoặc đối với chính vùng chứa
Các giao diện vi mô
Vị trí hợp lý để tiếp tục câu chuyện này là với chức năng kết xuất toàn cầu mà chúng tôi tiếp tục đề cập đến. Trang chủ của ứng dụng của chúng tôi là một danh sách các nhà hàng có thể lọc được, có điểm vào trông như thế này

  



   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using / operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

6
Thông thường trong React. js, lệnh gọi tới 


    

66 sẽ ở phạm vi cấp cao nhất, nghĩa là ngay khi tệp tập lệnh này được tải, nó sẽ ngay lập tức bắt đầu hiển thị thành phần tử DOM được mã hóa cứng. Đối với ứng dụng này, chúng tôi cần có khả năng kiểm soát cả thời gian và địa điểm kết xuất diễn ra, vì vậy chúng tôi gói nó trong một hàm nhận ID của phần tử DOM làm tham số và chúng tôi gắn hàm đó vào đối tượng toàn cục 


    

67. Chúng ta cũng có thể thấy chức năng gỡ cài đặt tương ứng được sử dụng để dọn dẹp
Mặc dù chúng ta đã thấy chức năng này được gọi như thế nào khi giao diện người dùng vi mô được tích hợp vào toàn bộ ứng dụng bộ chứa, nhưng một trong những tiêu chí thành công lớn nhất ở đây là chúng ta có thể phát triển và chạy giao diện người dùng vi mô một cách độc lập. Vì vậy, mỗi giao diện người dùng vi mô cũng có 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
3 riêng với tập lệnh nội tuyến để hiển thị ứng dụng ở chế độ “độc lập”, bên ngoài vùng chứa
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
0
Hình 9. Mỗi giao diện người dùng vi mô có thể được chạy dưới dạng một ứng dụng độc lập bên ngoài vùng chứa
Từ thời điểm này trở đi, các giao diện vi mô hầu hết chỉ là các ứng dụng React cũ đơn giản. Ứng dụng 'duyệt' tìm nạp danh sách các nhà hàng từ phần phụ trợ, cung cấp các phần tử 


    

69 để tìm kiếm và lọc các nhà hàng, đồng thời hiển thị các phần tử 


    

69 của Bộ định tuyến React để điều hướng đến một nhà hàng cụ thể. Tại thời điểm đó, chúng tôi sẽ chuyển sang giao diện người dùng vi mô thứ hai, 'đặt hàng', hiển thị một nhà hàng với thực đơn của nó
Hình 10. Các giao diện vi mô này chỉ tương tác thông qua thay đổi tuyến đường, không trực tiếp
Điều cuối cùng đáng nói về giao diện người dùng vi mô của chúng tôi là cả hai đều sử dụng 


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

01 cho tất cả kiểu dáng của họ. Thư viện CSS-in-JS này giúp dễ dàng liên kết các kiểu với các thành phần cụ thể, vì vậy chúng tôi được đảm bảo rằng các kiểu của giao diện người dùng vi mô sẽ không bị rò rỉ và ảnh hưởng đến bộ chứa hoặc một giao diện người dùng vi mô khác
Nội dung chung
Mặc dù chúng tôi muốn các nhóm của mình và các giao diện vi mô của chúng tôi càng độc lập càng tốt, nhưng vẫn có một số điểm chung. Chúng tôi đã viết trước đó về cách các thư viện thành phần được chia sẻ có thể hỗ trợ tính nhất quán trên các giao diện vi mô, nhưng đối với bản trình diễn nhỏ này, một thư viện thành phần sẽ là quá mức cần thiết. Vì vậy, thay vào đó, chúng tôi có một kho lưu trữ nhỏ chứa nội dung chung, bao gồm hình ảnh, dữ liệu JSON và CSS, được cung cấp qua mạng cho tất cả các giao diện vi mô
Có một thứ khác mà chúng ta có thể chọn để chia sẻ trên các giao diện vi mô. phụ thuộc thư viện. Như chúng tôi sẽ mô tả ngay sau đây, sự trùng lặp của các phụ thuộc là một nhược điểm chung của các giao diện vi mô. Mặc dù việc chia sẻ những phụ thuộc đó giữa các ứng dụng đi kèm với những khó khăn riêng, nhưng đối với ứng dụng demo này, điều đáng nói là cách thực hiện
Bước đầu tiên là chọn phụ thuộc nào để chia sẻ. Phân tích nhanh mã được biên dịch của chúng tôi cho thấy khoảng 50% gói được đóng góp bởi 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
8 và 


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

03. Ngoài kích thước của chúng, hai thư viện này là phần phụ thuộc 'cốt lõi' nhất của chúng tôi, vì vậy chúng tôi biết rằng tất cả các giao diện vi mô đều có thể hưởng lợi từ việc trích xuất chúng. Cuối cùng, đây là những thư viện hoàn thiện, ổn định, thường giới thiệu các thay đổi đột phá trên hai phiên bản chính, vì vậy, các nỗ lực nâng cấp ứng dụng chéo sẽ không quá khó khăn
Đối với việc trích xuất thực tế, tất cả những gì chúng ta cần làm là đánh dấu các thư viện là bên ngoài trong cấu hình webpack của chúng ta, điều mà chúng ta có thể thực hiện với một vòng lặp lại tương tự như mô tả trước đó
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
1
Sau đó, chúng tôi thêm một vài thẻ 


   
       Create multi-line strings 
   
   
       JavaScript multi-line Strings using + operator
      

         How to create multi-line
         strings in JavaScript?
      
      
      
	Click on the button to insert multiline text 
       Click here 
      
   

04 vào mỗi tệp 
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
3 để tìm nạp hai thư viện từ máy chủ nội dung dùng chung của chúng tôi
server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    # Redirect / to /browse
    rewrite ^/$ //localhost:8080/browse redirect;

    # Decide which HTML fragment to insert based on the URL
    location /browse {
      set $PAGE 'browse';
    }
    location /order {
      set $PAGE 'order';
    }
    location /profile {
      set $PAGE 'profile'
    }

    # All locations should render through index.html
    error_page 404 /index.html;
}
2
Chia sẻ mã giữa các nhóm luôn là một điều khó khăn để làm tốt. Chúng tôi cần đảm bảo rằng chúng tôi chỉ chia sẻ những thứ mà chúng tôi thực sự muốn trở thành phổ biến và chúng tôi muốn thay đổi ở nhiều nơi cùng một lúc. Tuy nhiên, nếu chúng ta cẩn thận về những gì chúng ta chia sẻ và những gì chúng ta không chia sẻ, thì chúng ta sẽ đạt được những lợi ích thực sự.
cơ sở hạ tầng
Ứng dụng được lưu trữ trên AWS, với cơ sở hạ tầng cốt lõi [bộ chứa S3, phân phối CloudFront, miền, chứng chỉ, v.v.], được cung cấp tất cả cùng một lúc bằng kho lưu trữ tập trung mã Terraform. Sau đó, mỗi giao diện người dùng vi mô có kho lưu trữ nguồn riêng với quy trình triển khai liên tục riêng trên Travis CI, xây dựng, kiểm tra và triển khai các nội dung tĩnh của nó vào các bộ chứa S3 đó. Điều này cân bằng sự tiện lợi của quản lý cơ sở hạ tầng tập trung với tính linh hoạt của khả năng triển khai độc lập
Lưu ý rằng mỗi giao diện người dùng vi mô [và vùng chứa] đều có nhóm riêng. Điều này có nghĩa là nó có toàn quyền kiểm soát những gì diễn ra trong đó và chúng ta không cần phải lo lắng về xung đột tên đối tượng hoặc xung đột quy tắc quản lý truy cập, từ một nhóm hoặc ứng dụng khác
Nhược điểm
Ở phần đầu của bài viết này, chúng tôi đã đề cập rằng có sự đánh đổi với các giao diện vi mô, cũng như với bất kỳ kiến ​​trúc nào. Những lợi ích mà chúng tôi đã đề cập đi kèm với chi phí mà chúng tôi sẽ đề cập ở đây
kích thước tải trọng
Các gói JavaScript được xây dựng độc lập có thể gây ra sự trùng lặp của các phụ thuộc phổ biến, làm tăng số byte mà chúng tôi phải gửi qua mạng tới người dùng cuối của mình. Ví dụ: nếu mọi giao diện vi mô đều bao gồm bản sao React của riêng nó, thì chúng tôi sẽ buộc khách hàng của mình tải xuống React n lần. Có mối quan hệ trực tiếp giữa hiệu suất trang và mức độ tương tác/chuyển đổi của người dùng và phần lớn thế giới chạy trên cơ sở hạ tầng internet chậm hơn nhiều so với cơ sở hạ tầng ở các thành phố phát triển cao được sử dụng, vì vậy chúng tôi có nhiều lý do để quan tâm đến kích thước tải xuống
Vấn đề này không dễ giải quyết. Có một sự căng thẳng cố hữu giữa mong muốn của chúng tôi là để các nhóm biên dịch ứng dụng của họ một cách độc lập để chúng có thể hoạt động tự chủ và mong muốn của chúng tôi là xây dựng các ứng dụng của mình theo cách mà chúng có thể chia sẻ các phụ thuộc chung. Một cách tiếp cận là đưa ra bên ngoài các phụ thuộc phổ biến từ các gói đã biên dịch của chúng tôi, như chúng tôi đã mô tả cho ứng dụng demo. Tuy nhiên, ngay sau khi chúng tôi đi theo con đường này, chúng tôi đã giới thiệu lại một số khớp nối thời gian xây dựng cho các giao diện vi mô của chúng tôi. Bây giờ có một hợp đồng ngầm giữa họ nói rằng, "tất cả chúng ta phải sử dụng các phiên bản chính xác của các phụ thuộc này". Nếu có một thay đổi lớn trong một phụ thuộc, chúng tôi có thể sẽ cần một nỗ lực nâng cấp phối hợp lớn và một sự kiện phát hành bước khóa một lần. Đây là tất cả những gì chúng tôi đã cố gắng tránh với giao diện vi mô ngay từ đầu
Sự căng thẳng cố hữu này là một điều khó khăn, nhưng không phải tất cả đều là tin xấu. Đầu tiên, ngay cả khi chúng tôi chọn không làm gì với các phụ thuộc trùng lặp, có thể mỗi trang riêng lẻ sẽ vẫn tải nhanh hơn so với khi chúng tôi xây dựng một giao diện người dùng nguyên khối duy nhất. Lý do là bằng cách biên dịch từng trang một cách độc lập, chúng tôi đã triển khai hiệu quả hình thức phân tách mã của riêng mình. Trong monolith cổ điển, khi bất kỳ trang nào trong ứng dụng được tải, chúng tôi thường tải xuống mã nguồn và phần phụ thuộc của mọi trang cùng một lúc. Bằng cách xây dựng độc lập, bất kỳ lần tải trang nào sẽ chỉ tải xuống nguồn và phần phụ thuộc của trang đó. Điều này có thể dẫn đến tốc độ tải trang ban đầu nhanh hơn, nhưng điều hướng sau đó chậm hơn do người dùng buộc phải tải xuống lại các phần phụ thuộc giống nhau trên mỗi trang. Nếu chúng tôi tuân thủ kỷ luật để không làm đầy mặt tiền vi mô của mình với các phần phụ thuộc không cần thiết hoặc nếu chúng tôi biết rằng người dùng thường chỉ dán vào một hoặc hai trang trong ứng dụng, thì chúng tôi có thể đạt được mức tăng ròng về mặt hiệu suất, ngay cả với các phần phụ thuộc trùng lặp
Có rất nhiều "có thể" và "có thể" trong đoạn trước, điều này làm nổi bật thực tế là mọi ứng dụng sẽ luôn có các đặc điểm hiệu suất độc đáo của riêng nó. Nếu bạn muốn biết chắc chắn những tác động đến hiệu suất của một thay đổi cụ thể, không có cách nào thay thế cho việc thực hiện các phép đo trong thế giới thực, lý tưởng nhất là trong sản xuất. Chúng tôi đã thấy các nhóm phải vật lộn với một vài kilobyte JavaScript bổ sung, chỉ để truy cập và tải xuống nhiều megabyte hình ảnh có độ phân giải cao hoặc chạy các truy vấn tốn kém đối với cơ sở dữ liệu rất chậm. Vì vậy, mặc dù điều quan trọng là phải xem xét các tác động về hiệu suất của mọi quyết định kiến ​​trúc, nhưng hãy đảm bảo rằng bạn biết các nút cổ chai thực sự nằm ở đâu
Sự khác biệt về môi trường
Chúng tôi sẽ có thể phát triển một giao diện người dùng vi mô duy nhất mà không cần phải suy nghĩ về tất cả các giao diện người dùng vi mô khác đang được phát triển bởi các nhóm khác. Chúng tôi thậm chí có thể chạy giao diện người dùng vi mô của mình ở chế độ “độc lập”, trên một trang trống, thay vì bên trong ứng dụng bộ chứa sẽ chứa nó trong sản xuất. Điều này có thể làm cho quá trình phát triển trở nên đơn giản hơn rất nhiều, đặc biệt khi vùng chứa thực là một cơ sở mã kế thừa, phức tạp, điều này thường xảy ra khi chúng tôi đang sử dụng giao diện người dùng vi mô để thực hiện di chuyển dần dần từ thế giới cũ sang thế giới mới. Tuy nhiên, có những rủi ro liên quan đến việc phát triển trong một môi trường hoàn toàn khác với môi trường sản xuất. Nếu vùng chứa thời gian phát triển của chúng tôi hoạt động khác với vùng sản xuất, thì chúng tôi có thể thấy rằng giao diện người dùng vi mô của chúng tôi bị hỏng hoặc hoạt động khác khi chúng tôi triển khai vào sản xuất. Mối quan tâm đặc biệt là các kiểu toàn cầu có thể được mang theo bởi vùng chứa hoặc bởi các giao diện người dùng vi mô khác
Giải pháp ở đây không khác với bất kỳ tình huống nào khác mà chúng ta phải lo lắng về sự khác biệt về môi trường. Nếu chúng tôi đang phát triển cục bộ trong một môi trường không giống như sản xuất, thì chúng tôi cần đảm bảo rằng chúng tôi thường xuyên tích hợp và triển khai giao diện người dùng vi mô của mình vào các môi trường giống như sản xuất và chúng tôi nên thực hiện thử nghiệm [thủ công và tự động] trong các môi trường này để . Điều này sẽ không giải quyết được hoàn toàn vấn đề, nhưng cuối cùng, đó là một sự đánh đổi khác mà chúng ta phải cân nhắc. việc tăng năng suất của một môi trường phát triển đơn giản hóa có đáng để mạo hiểm với các vấn đề tích hợp không? 
Sự phức tạp trong vận hành và quản trị
Nhược điểm cuối cùng là song song trực tiếp với microservice. Là một kiến ​​trúc phân tán hơn, giao diện người dùng vi mô chắc chắn sẽ dẫn đến việc có nhiều thứ hơn để quản lý - nhiều kho lưu trữ hơn, nhiều công cụ hơn, nhiều đường ống xây dựng/triển khai hơn, nhiều máy chủ hơn, nhiều miền hơn, v.v. Vì vậy, trước khi áp dụng một kiến ​​trúc như vậy, có một số câu hỏi bạn nên xem xét
Bạn có đủ tự động hóa để cung cấp và quản lý cơ sở hạ tầng cần thiết bổ sung một cách khả thi không?
Các quy trình phát triển, thử nghiệm và phát hành giao diện người dùng của bạn có mở rộng quy mô cho nhiều ứng dụng không?
Bạn có thoải mái với các quyết định xung quanh việc thực hành phát triển và công cụ trở nên phi tập trung hơn và ít kiểm soát hơn không?
Bạn sẽ làm cách nào để đảm bảo mức chất lượng, tính nhất quán hoặc quản trị tối thiểu trên nhiều cơ sở mã giao diện người dùng độc lập của mình?
Chúng tôi có lẽ có thể lấp đầy toàn bộ bài viết khác thảo luận về các chủ đề này. Điểm chính mà chúng tôi muốn đưa ra là khi bạn chọn giao diện người dùng vi mô, theo định nghĩa, bạn đang chọn tạo nhiều thứ nhỏ hơn là một thứ lớn. Bạn nên xem xét liệu bạn có đủ sự trưởng thành về kỹ thuật và tổ chức cần thiết để áp dụng cách tiếp cận như vậy mà không tạo ra sự hỗn loạn hay không
Phần kết luận
Khi các cơ sở mã giao diện người dùng tiếp tục trở nên phức tạp hơn trong những năm qua, chúng tôi nhận thấy nhu cầu ngày càng tăng đối với các kiến ​​trúc có khả năng mở rộng hơn. Chúng ta cần có khả năng vạch ra các ranh giới rõ ràng để thiết lập mức độ khớp nối và gắn kết phù hợp giữa các thực thể kỹ thuật và miền. Chúng tôi sẽ có thể mở rộng quy mô phân phối phần mềm giữa các nhóm độc lập, tự chủ
Mặc dù không phải là cách tiếp cận duy nhất, nhưng chúng tôi đã chứng kiến ​​nhiều trường hợp trong thế giới thực trong đó giao diện người dùng vi mô mang lại những lợi ích này và chúng tôi đã có thể áp dụng kỹ thuật này dần dần theo thời gian cho các cơ sở mã cũ cũng như cơ sở mã mới. Cho dù giao diện người dùng vi mô có phải là cách tiếp cận phù hợp với bạn và tổ chức của bạn hay không, chúng tôi chỉ có thể hy vọng rằng đây sẽ là một phần của xu hướng tiếp tục trong đó kỹ thuật và kiến ​​trúc giao diện người dùng được xử lý nghiêm túc mà chúng tôi biết rằng nó xứng đáng
 

			
Làm cách nào để ngắt một dòng mã trong JavaScript?
			
Ký tự xuống dòng là \n trong JavaScript và nhiều ngôn ngữ khác. Tất cả những gì bạn cần làm là  thêm ký tự \n  bất cứ khi nào bạn yêu cầu ngắt dòng để thêm một dòng mới vào chuỗi. 
		
			
Có chức năng ngắt trong JavaScript không?
			
Câu lệnh break kết thúc câu lệnh vòng lặp, switch hoặc nhãn hiện tại và chuyển điều khiển chương trình sang câu lệnh theo sau câu lệnh đã kết thúc . 
		
			
Làm cách nào để tiếp tục một chuỗi trên dòng tiếp theo trong JavaScript?
			
Hoặc bạn có thể  sử dụng ký tự gạch chéo ngược [ \ ] ở cuối mỗi dòng  để cho biết rằng chuỗi sẽ tiếp tục ở dòng tiếp theo. Đảm bảo không có khoảng trắng hoặc bất kỳ ký tự nào khác sau dấu gạch chéo ngược [ngoại trừ dấu ngắt dòng] hoặc dưới dạng thụt lề; .