Đây là những gì các nhà phát triển nên tìm kiếm trong bản phát hành Chrome mới nhất

Google đã thêm một loạt các tính năng vào phiên bản mới nhất của trình duyệt Chrome để giúp các nhà phát triển tạo ra các trang web và ứng dụng phong phú hơn.

Chrome 38, được phát hành trong tuần này, giới thiệu hỗ trợ cho chức năng HTML và JavaScript mới. Dưới đây là danh sách những gì mới cho các nhà phát triển.

thành phần

Tải hình ảnh trông đẹp trên mọi thứ từ màn hình rộng đến điện thoại cỡ lòng bàn tay có thể khó khăn nếu không có sự trợ giúp từ JavaScript và CSS.

Bản phát hành bổ sung hỗ trợ cho thành phần hình ảnh HTML, cho phép các nhà phát triển hướng dẫn trình duyệt điều chỉnh độ phân giải của hình ảnh mà nó tải tùy thuộc vào kích thước của thiết bị và sử dụng HTML.

Đây là cách nó hoạt động:

Hình ảnh và thành phần nguồn cho trình duyệt tải một trong ba hình ảnh khác nhau tùy thuộc vào kích thước khung nhìn của trình duyệt. Nếu chế độ xem rộng trên 700 pixel, nó tải độ phân giải cao.jpg, trên 450 pixel, nó tải độ phân giải trung bình.jpg và bất kỳ kích thước nào khác và nó tải độ phân giải thấp.jpg.

Phần tử hình ảnh là một thùng chứa cho phần tử nguồn, là yếu tố quyết định hình ảnh nào được trình duyệt tải.

Phần tử nguồn có thuộc tính đa phương tiện, chấp nhận mọi truy vấn phương tiện CSS hợp lệ và thuộc tính srcset, là đường dẫn đến tệp hình ảnh cần được tải.

Mọi thành phần hình ảnh cũng phải chứa một yếu tố img để chỉ định một hình ảnh sẽ tải trong trường hợp trình duyệt không hỗ trợ thành phần hình ảnh.

Yếu tố hình ảnh có khả năng chỉ đạo trình duyệt phục vụ nhiều phiên bản hình ảnh dựa trên nhiều đặc điểm khác nhau, chẳng hạn như kích thước thiết bị, độ phân giải, hướng, v.v. Để biết thêm chi tiết, hãy xem hướng dẫn cơ bản về web của Google.

Hình ảnh: Google theo Giấy phép Creative Commons Attribution 3.0

Bản đồ và bộ

Bản phát hành giới thiệu các cách lặp đơn giản hơn, thực hiện tốt hơn thông qua các bộ sưu tập các giá trị, với sự hỗ trợ cho các lớp Set và Map trong JavaScript.

Không giống như mảng hoặc đối tượng, Bộ sẽ chỉ chấp nhận các giá trị duy nhất, với mỗi giá trị mới được thêm vào được kiểm tra đối với Bộ để tránh trùng lặp được thêm vào. Tuy nhiên, Tập hợp có thể chứa số nguyên 5 và chuỗi "5", vì chuyển đổi loại không được thực hiện khi kiểm tra đẳng thức.

Khả năng này chỉ lưu trữ các giá trị duy nhất có thể hữu ích trong một số tình huống, ví dụ nếu bạn muốn lưu trữ mọi từ trong một đoạn văn bản.

Để tạo một bộ mới, chỉ cần gọi hàm tạo.

var First set = new Set ();


Hàm tạo Set () chấp nhận một đối số duy nhất, một đối tượng có thể lặp lại, chẳng hạn như Mảng hoặc Bản đồ có thể đặt giá trị của nó.

// Truyền vào mảng chứa 1, 2, 3 để tạo Tập giữ các giá trị đó

var First set = new Set (1, 2, 3);


Có nhiều phương thức khác nhau để tương tác với Set.

// add () cho phép thêm các giá trị mới

First set.add (10); // Thêm 10

Firstset.add ("Xin chào thế giới"); // Thêm thế giới Hello

First set.add (10); // Không thêm giá trị là 10 đã có trong Firstset


// has () kiểm tra xem giá trị có nằm trong Set không

firstet.has (10) // Trả về true

Firstset.has ("Cá") // Trả về false


// clear () xóa tất cả các giá trị khỏi Set

First set.clear ();

Firstset.has (10) // Trả về false


// Số lượng giá trị trong Tập hợp được lưu trữ trong thuộc tính kích thước

First set.add (1);

First set.add (2);

console.log (Firstset.size) // In 2


Bản đồ là bộ sưu tập các cặp khóa / giá trị. Không giống như các cặp khóa / giá trị được tìm thấy trong các đối tượng JavaScript, trong đó khóa phải là một chuỗi, Bản đồ chấp nhận mọi giá trị - đối tượng hoặc giá trị nguyên thủy - làm khóa.

Các đối tượng JavaScript tự động chuyển đổi các khóa thành các chuỗi, nghĩa là các giá trị không giống nhau, không phải chuỗi được sử dụng làm các khóa có thể được chuyển đổi thành các chuỗi giống hệt nhau. Điều này có thể dẫn đến hành vi không mong muốn, như được chỉ ra trong ví dụ mã này.

// phần tử được chuyển đổi thành một chuỗi

dữ liệu var = {},

siêu dữ liệu = 'phần tử1',

siêu dữ liệu2 = 'phần tử 2',

phần tử = document.getEuityById ("my-div"),

Element2 = document.getEuityById ("my-div2");

dữ liệu phần tử = siêu dữ liệu;

data Element2 = metadata2;


Mặc dù ý định ở trên là sử dụng các tham chiếu đến các đối tượng phần tử HTML khác nhau làm khóa trong đối tượng dữ liệu, nhưng mỗi đối tượng phần tử sẽ được chuyển đổi thành một chuỗi giống hệt nhau dọc theo dòng "Object HTMLDivEuity".

Kết quả là tạo ra một đối tượng dữ liệu chứa một cặp giá trị khóa duy nhất {"Object HTMLDivEuity": "Element2"}, chứ không phải là {Tham chiếu đến đối tượng my-div: "Element1", Tham chiếu đến đối tượng my-div2 : "phần tử2"}. Hành vi này xuất phát từ hai tham chiếu đối tượng riêng biệt được chuyển đổi thành một chuỗi giống nhau, khiến đối tượng ghi đè lên giá trị siêu dữ liệu hiện có bằng siêu dữ liệu2, thay vì tạo cặp giá trị khóa mới.

Khó khăn khác khi sử dụng các đối tượng JavaScript làm bản đồ là các bước bổ sung cần thiết để đảm bảo bạn chỉ lặp qua các thuộc tính của đối tượng đó chứ không phải các thuộc tính của các đối tượng khác trong chuỗi nguyên mẫu của nó.

Giống như khóa, giá trị trong cặp khóa-giá trị Bản đồ cũng có thể thuộc bất kỳ loại nào.

Bản đồ được tạo bằng cách gọi hàm tạo Map. Để đặt các giá trị cho Map, hãy tạo cho hàm tạo một đối tượng có thể lặp có các phần tử là các cặp giá trị khóa, ví dụ như một mảng các mảng.

var firstMap = new Map ('sản ​​phẩm', 'cà chua', 'loại', 'trái cây');


Có nhiều phương pháp khác nhau để tương tác với Bản đồ.

// set () đặt dữ liệu bên trong Bản đồ

var FirstMap = new Map ();

FirstMap.set ("tên", "Andy"); // Thêm cặp khóa-giá trị "tên": "Andy" vào Bản đồ


// get () lấy một giá trị từ Bản đồ

FirstMap.get ("tên"); // Lấy Andy


// has () kiểm tra nếu một giá trị tồn tại trong Bản đồ

FirstMap.has ("Andy"); // Trả về đúng


// Số phần tử trong Bản đồ được lưu trữ trong thuộc tính kích thước

console.log (Firstset.size); // In 1


cho ... các vòng lặp

Một bổ sung khác là cho ... các vòng lặp, cung cấp một cách để lặp lại các đối tượng có thể lặp lại, chẳng hạn như Array, Map, Set và đối tượng đối số.

Vòng lặp for của vòng lặp lặp trên các mảng và Đặt như vậy:

var mảng = 1, 2, 3,

First set = new Set (4, 5, 6);

cho (mục của mảng) {

console.log (mục); // In 1, 2, 3

}

cho (mục đầu tiên) {

console.log (mục); // In 4, 5, 6

}


Nó khác với vòng lặp for ... in được sử dụng để lặp qua các đối tượng, ở chỗ nó trả về các giá trị thuộc tính thay vì tên thuộc tính.

cho (mục trong mảng) {

console.log (mục); // In 0, 1, 2 - tư thế chỉ mục dựa trên số không của mỗi phần tử trong mảng

}


cho ... các vòng lặp cũng có thể sử dụng các phương thức trình tạo khi lặp qua các bộ sưu tập để trả về chỉ là khóa, chỉ là giá trị hoặc một mảng có cả khóa và giá trị.

var FirstMap = new Map ('sản ​​phẩm', 'cà chua', 'loại', 'trái cây');


// phương thức key ()

for (khóa của FirstMap.keys ()) {

console.log (khóa); // In 'sản phẩm', 'loại'

}


Phương thức // giá trị ()

for (giá trị của FirstMap.values ​​()) {

console.log (giá trị); // In 'cà chua', 'trái cây

}


// phương thức ()

cho (mục của FirstMap.items ()) {

console.log (mục); // Hiển thị một mảng chứa 'sản ​​phẩm', 'cà chua', 'loại', 'trái cây'

}


Chrome 38 bao gồm một loạt các tính năng khác, bao gồm các hàm Toán học mới và phương pháp lập trình để xây dựng các đối tượng Tệp. Để biết danh sách đầy đủ các tính năng, hãy truy cập vào đây.

© Copyright 2021 | pepebotifarra.com