Liên kết dữ liệu
Bạn đi khắp nơi tạo trang web của mình và tiếp tục đặt {{liên kết dữ liệu}} bất cứ khi nào bạn cảm thấy bạn sẽ có dữ liệu động. Angular sau đó sẽ cung cấp cho bạn một trình xử lý $ scope, mà bạn có thể cư trú (tĩnh hoặc thông qua các cuộc gọi đến máy chủ web).
Đây là một sự hiểu biết tốt về ràng buộc dữ liệu. Tôi nghĩ rằng bạn đã có được điều đó xuống.
Thao tác DOM
Đối với thao tác DOM đơn giản, không liên quan đến thao tác dữ liệu (ví dụ: thay đổi màu khi di chuột, ẩn / hiển thị các phần tử khi nhấp), jQuery hoặc js trường học cũ là đủ và sạch hơn. Điều này giả định rằng mô hình trong mvc của angular là bất cứ thứ gì phản ánh dữ liệu trên trang và do đó, các thuộc tính css như màu sắc, hiển thị / ẩn, v.v ... không ảnh hưởng đến mô hình.
Tôi có thể thấy quan điểm của bạn ở đây về thao tác DOM "đơn giản" là sạch hơn, nhưng chỉ hiếm khi và nó sẽ phải thực sự "đơn giản". Tôi nghĩ rằng thao tác DOM là một trong những lĩnh vực, giống như liên kết dữ liệu, nơi Angular thực sự tỏa sáng. Hiểu điều này cũng sẽ giúp bạn thấy Angular xem xét quan điểm của mình như thế nào.
Tôi sẽ bắt đầu bằng cách so sánh cách Angular với cách tiếp cận vanilla js với thao tác DOM. Theo truyền thống, chúng tôi nghĩ rằng HTML không "làm" bất cứ điều gì và viết nó như vậy. Vì vậy, js nội tuyến, như "onclick", v.v ... là thực tiễn tồi vì họ đặt "làm" trong ngữ cảnh của HTML, không "làm". Góc lật mà khái niệm trên đầu của nó. Khi bạn viết quan điểm của mình, bạn nghĩ rằng HTML có thể "làm" rất nhiều thứ. Khả năng này được trừu tượng hóa trong các chỉ thị góc cạnh, nhưng nếu chúng đã tồn tại hoặc bạn đã viết chúng, bạn không phải xem xét "nó" được thực hiện như thế nào, bạn chỉ cần sử dụng sức mạnh có sẵn cho bạn trong HTML "tăng cường" này góc cho phép bạn sử dụng. Điều này cũng có nghĩa là TẤT CẢ logic của chế độ xem của bạn thực sự được chứa trong chế độ xem, không có trong các tập tin javascript của bạn. Một lần nữa, lý do là các chỉ thị được viết trong các tệp javascript của bạn có thể được coi là làm tăng khả năng của HTML, vì vậy bạn để DOM lo lắng về việc tự thao tác (có thể nói như vậy). Tôi sẽ chứng minh bằng một ví dụ đơn giản.
Đây là đánh dấu chúng tôi muốn sử dụng. Tôi đã đặt cho nó một cái tên trực quan.
<div rotate-on-click="45"></div>
Đầu tiên, tôi chỉ muốn nhận xét rằng nếu chúng tôi cung cấp cho HTML chức năng này thông qua Chỉ thị góc tùy chỉnh, chúng tôi đã hoàn thành . Đó là một luồng không khí trong lành. Thêm vào đó trong một thời điểm.
Triển khai với jQuery
demo trực tiếp tại đây (click).
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
Thực hiện với Angular
demo trực tiếp tại đây (click).
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
Khá nhẹ, RẤT sạch và đó chỉ là một thao tác đơn giản! Theo tôi, cách tiếp cận góc cạnh chiến thắng trong tất cả các vấn đề, đặc biệt là cách chức năng được trừu tượng hóa và thao tác dom được khai báo trong DOM. Chức năng được nối vào phần tử thông qua thuộc tính html, do đó không cần truy vấn DOM thông qua bộ chọn và chúng tôi đã có hai lần đóng đẹp - một lần đóng cho nhà máy chỉ thị nơi các biến được chia sẻ trên tất cả các cách sử dụng lệnh và một lần đóng cho mỗi lần sử dụng lệnh trong linkhàm (hoặc compilehàm).
Liên kết và chỉ thị dữ liệu hai chiều cho thao tác DOM chỉ là khởi đầu cho những gì làm cho Angular trở nên tuyệt vời. Angular thúc đẩy tất cả các mã là mô-đun, có thể tái sử dụng và dễ dàng kiểm tra và cũng bao gồm một hệ thống định tuyến ứng dụng một trang. Điều quan trọng cần lưu ý là jQuery là một thư viện gồm các phương thức tiện lợi / trình duyệt chéo cần thiết, nhưng Angular là một khung đầy đủ tính năng để tạo các ứng dụng trang đơn. Kịch bản góc cạnh thực sự bao gồm phiên bản jQuery "lite" của riêng nó để có sẵn một số phương thức thiết yếu nhất. Do đó, bạn có thể lập luận rằng sử dụng Angular IS bằng jQuery (nhẹ), nhưng Angular cung cấp nhiều "phép thuật" hơn để giúp bạn trong quá trình tạo ứng dụng.
Đây là một bài viết tuyệt vời để biết thêm thông tin liên quan: Tôi nghĩ thế nào về AngularJS ném nếu tôi có nền jQuery?
Khác biệt chung.
Các điểm trên nhằm vào các mối quan tâm cụ thể của OP. Tôi cũng sẽ cung cấp một cái nhìn tổng quan về sự khác biệt quan trọng khác. Tôi đề nghị làm thêm đọc về mỗi chủ đề là tốt.
Angular và jQuery hợp lý không thể được so sánh.
Angular là một khung công tác, jQuery là một thư viện. Khung có vị trí của họ và thư viện có vị trí của họ. Tuy nhiên, không có câu hỏi rằng một khung công tác tốt có sức mạnh hơn trong việc viết một ứng dụng hơn là một thư viện. Đó chính xác là điểm của một khung. Bạn có thể viết mã của mình bằng JS đơn giản hoặc bạn có thể thêm vào thư viện các hàm phổ biến hoặc bạn có thể thêm một khung để giảm đáng kể mã bạn cần để thực hiện hầu hết mọi thứ. Do đó, một câu hỏi thích hợp hơn là:
Tại sao nên sử dụng khung?
Các khung công tác tốt có thể giúp kiến trúc mã của bạn sao cho mã theo mô-đun (do đó có thể tái sử dụng), DRY, có thể đọc, biểu diễn và bảo mật. jQuery không phải là một khung công tác, vì vậy nó không giúp ích gì trong những vấn đề này. Chúng ta đều đã thấy những bức tường điển hình của mã spaghetti jQuery. Đây không phải là lỗi của jQuery - đó là lỗi của các nhà phát triển không biết cách kiến trúc mã. Tuy nhiên, nếu các nhà phát triển biết cách kiến trúc mã, cuối cùng họ sẽ viết một loại "khung" tối thiểu nào đó để cung cấp nền tảng (ach architecture, v.v.) Tôi đã thảo luận một lúc trước, hoặc họ sẽ thêm một cái gì đó vào. có thể thêm RequireJS để hoạt động như một phần trong khuôn khổ của bạn để viết mã tốt.
Dưới đây là một số điều mà các khung hiện đại đang cung cấp:
- Tạo khuôn
- Liên kết dữ liệu
- định tuyến (ứng dụng trang đơn)
- kiến trúc sạch sẽ, mô-đun, tái sử dụng
- Bảo vệ
- chức năng / tính năng bổ sung cho thuận tiện
Trước khi tôi thảo luận thêm về Angular, tôi muốn chỉ ra rằng Angular không phải là người duy nhất thuộc loại này. Durandal, ví dụ, là một khung được xây dựng dựa trên jQuery, Knockout và RequireJS. Một lần nữa, jQuery không thể tự cung cấp những gì Knockout, RequireJS và toàn bộ khung được xây dựng trên đầu chúng có thể. Nó chỉ là không thể so sánh.
Nếu bạn cần phá hủy một hành tinh và bạn có một Ngôi sao chết, hãy sử dụng Ngôi sao chết.
Góc cạnh (xem lại).
Dựa trên các điểm trước đây của tôi về những khung công tác cung cấp, tôi muốn khen ngợi cách mà Angular cung cấp cho họ và cố gắng làm rõ lý do tại sao điều này thực sự vượt trội so với jQuery.
Tham chiếu DOM.
Trong ví dụ trên của tôi, điều hoàn toàn không thể tránh khỏi là jQuery phải nối vào DOM để cung cấp chức năng. Điều đó có nghĩa là chế độ xem (html) quan tâm đến chức năng (vì nó được gắn nhãn với một số loại định danh - như "thanh trượt hình ảnh") và JavaScript quan tâm đến việc cung cấp chức năng đó. Angular loại bỏ khái niệm đó thông qua sự trừu tượng. Mã được viết đúng với Angular có nghĩa là khung nhìn có thể khai báo hành vi của chính nó. Nếu tôi muốn hiển thị đồng hồ:
<clock></clock>
Làm xong.
Đúng, chúng ta cần truy cập JavaScript để làm điều đó có nghĩa gì đó, nhưng chúng ta đang làm điều này theo cách ngược lại với cách tiếp cận jQuery. Chỉ thị Angular của chúng tôi (trong thế giới nhỏ bé của riêng nó) đã "tăng cường" html và html móc các chức năng vào chính nó.
MVW Architecure / Modules / Dependency Injection
Angular cung cấp cho bạn một cách đơn giản để cấu trúc mã của bạn. Xem mọi thứ thuộc về chế độ xem (html), chức năng xem tăng cường thuộc về chỉ thị, logic khác (như cuộc gọi ajax) và chức năng thuộc về dịch vụ và kết nối dịch vụ và logic với chế độ xem thuộc về bộ điều khiển. Ngoài ra còn có một số thành phần góc cạnh khác giúp xử lý cấu hình và sửa đổi dịch vụ, v.v. Bất kỳ chức năng nào bạn tạo đều tự động có sẵn ở bất cứ đâu bạn cần thông qua hệ thống con In phun chăm sóc Dependency Injection trong ứng dụng. Khi viết một ứng dụng (mô-đun), tôi chia nó thành các mô-đun có thể tái sử dụng khác, mỗi mô-đun có các thành phần có thể tái sử dụng của riêng chúng, sau đó đưa chúng vào dự án lớn hơn. Khi bạn giải quyết vấn đề với Angular, bạn ' đã tự động giải quyết nó theo cách hữu ích và có cấu trúc để tái sử dụng trong tương lai và dễ dàng đưa vào dự án tiếp theo. MộtHUGE thưởng cho tất cả điều này là mã của bạn sẽ dễ dàng hơn để kiểm tra.
Không dễ để khiến mọi thứ "hoạt động" trong Angular.
ƠN CHÚA. Mã spaghetti jQuery đã nói ở trên xuất phát từ một nhà phát triển đã làm cho một cái gì đó "hoạt động" và sau đó tiếp tục. Bạn có thể viết mã Angular xấu, nhưng làm điều đó khó hơn nhiều, vì Angular sẽ chống lại bạn về nó. Điều này có nghĩa là bạn phải tận dụng (ít nhất là phần nào) cho kiến trúc sạch mà nó cung cấp. Nói cách khác, viết mã xấu bằng Angular khó hơn, nhưng thuận tiện hơn để viết mã sạch.
Angular là xa hoàn hảo. Thế giới phát triển web luôn phát triển và thay đổi và có những cách mới và tốt hơn được đưa ra để giải quyết vấn đề. Chẳng hạn như React và Flux của Facebook có một số lợi thế lớn so với Angular, nhưng đi kèm với những nhược điểm của riêng họ. Không có gì hoàn hảo, nhưng Angular đã và vẫn còn tuyệt vời cho đến bây giờ. Giống như jQuery từng giúp thế giới web tiến lên, Angular cũng vậy, và nhiều thứ sẽ đến.