Làm cách nào để thuyết phục sếp của tôi (và các nhà phát triển khác) sử dụng / xem xét JavaScript không phô trương


21

Tôi khá mới trong đội ngũ phát triển của chúng tôi.

Tôi cần một số lập luận mạnh mẽ và / hoặc "ví dụ" cạm bẫy ", vì vậy cuối cùng ông chủ của tôi sẽ hiểu được những lợi thế của JavaScript không phô trương, để anh ấy và các thành viên khác trong nhóm ngừng làm những việc như thế này:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

Tôi đề nghị sử dụng một mô hình khá phổ biến:

<button id="ajaxer" type="button">click me...</button>

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

Lý do tại sao ông chủ của tôi (và những người khác) không muốn sử dụng phương pháp này là vì Kiểm tra sự kiện trong FireBug (hoặc Chrome Dev Tools) không còn đơn giản nữa, ví dụ như với

<input type="text" name="somename" id="someid" onchange="performChange()">

anh ta có thể thấy ngay hàm nào thực thi trên sự kiện thay đổi và chuyển ngay đến nó trong một tệp JS lớn chứa đầy mã spaghetti .

Trong trường hợp JavaScript không phô trương, điều duy nhất anh ta sẽ thấy là:

<input type="text" name="somename" id="someid" />

và anh ta không biết liệu một số sự kiện, nếu có, bị ràng buộc với yếu tố này và chức năng nào sẽ được kích hoạt.

Tôi đang tìm kiếm một giải pháp và tìm thấy nó:

$(document).data('events') // or .. $(document).data('events').click

nhưng, "cách tiếp cận" này khiến nó mất "quá lâu ..." để tìm ra chức năng nào kích hoạt sự kiện nào, vì vậy tôi được yêu cầu dừng các sự kiện ràng buộc như thế.

Tôi đang hỏi bạn một số ví dụ hoặc lợi thế mạnh mẽ hoặc bất kỳ loại đề xuất nào khác cho "Tại sao chúng ta nên sử dụng UJS"

CẬP NHẬT: đề nghị "thay đổi công việc" không phải là một giải pháp lý tưởng.

CẬP NHẬT 2: Ok, tôi không chỉ đề xuất sử dụng ràng buộc sự kiện jQuery, tôi đã làm như vậy . Sau khi tôi viết tất cả Phái đoàn sự kiện, ông chủ đến gặp tôi và hỏi tôi, tại sao tôi lại làm phái đoàn sự kiện với cách tiếp cận và cách tiếp cận khác nhau mà anh ta không biết

Tôi đã đề cập đến một số lợi ích rõ ràng, như - Có 15 trường đầu vào và tất cả sau đó đều có một onchangesự kiện (không chỉ, một số trong số chúng cũng có onkeyup) Vì vậy, sẽ thực tế hơn khi viết loại ủy nhiệm sự kiện này cho TẤT CẢ các trường đầu vào, thay vì làm điều đó 15 lần, đặc biệt là nếu tất cả các HTML sẽ được hiển thị với tiếng vang của PHP ->echo '... <input type="text" id="someid" ... />...'


"Lớp" trong bộ mã đầu tiên của bạn có thể cần một =.
Joe Z.

6
Bạn có thể: 1) thuyết phục sếp cho phép bạn sử dụng các kỹ thuật mà anh ta không biết; 2) dạy cho sếp của bạn những kỹ thuật mới; 3) ngừng sử dụng các kỹ thuật mà ông chủ của bạn không biết; hoặc 4) thay đổi một công việc. Tôi đã quên một lựa chọn? Nếu bạn không muốn 4 và bạn không thể thành công trong 1 và 2, tùy chọn duy nhất còn lại của bạn là 3. Hãy nhớ rằng giá trị thị trường của bạn phụ thuộc vào những gì bạn biết. Vì vậy, sau khi bạn học mọi thứ mà sếp của bạn chấp thuận, các lựa chọn còn lại của bạn là: 3A) ngừng học hỏi và xem giá trị thị trường của bạn giảm xuống; 3B) học và sử dụng các kỹ thuật mới trong thời gian rảnh của bạn. Tùy chọn 3A tốn tiền của bạn, tùy chọn 3B làm bạn mất thời gian.
Viliam Búr

1
Tôi sẽ sử dụng một cách tiếp cận như github: mọi phần tử có các sự kiện được liên kết trong JS đều có một js-this-class-do-somethinglớp, vì vậy, bạn có thể dễ dàng CTRL + F cho nó trong mã.
caarlos0

FireQuery có thể giúp với phần "mất quá nhiều thời gian". Không chắc nó hoạt động tốt như thế nào với các sự kiện, nhưng ít nhất nó sẽ cho bạn biết rằng một yếu tố các sự kiện trên đó.
Izkata

1
Đây là một tiện ích tuyệt vời mà tôi thích sử dụng khi làm việc với các sự kiện
karka91

Câu trả lời:


49
  1. Ngừng sử dụng buzzwords và thay vào đó hãy thử đưa ra những lập luận mạnh mẽ. Ngay cả trang Wikipedia cho JavaScript không phô trương cũng nói rằng thuật ngữ này không được định nghĩa chính thức. Nó có thể là một thuật ngữ mền cho một số ý tưởng hay, nhưng nếu nó có vẻ như chỉ là mốt nhất thời hoặc thời trang thì sếp và đồng nghiệp của bạn sẽ không chú ý nhiều. Tồi tệ hơn, nếu bạn cứ tiếp tục về một thứ mà họ cho là vô dụng, họ có thể bắt đầu giảm giá những ý tưởng hoàn toàn không liên quan mà bạn ủng hộ.

  2. Tìm hiểu lý do tại sao bạn nghĩ rằng các ý tưởng JavaScript không phô trương là quan trọng. Có phải bởi vì bạn đọc rằng họ được coi là thực hành tốt nhất? Bạn đã gặp phải những vấn đề mà bạn có thể gán cho việc không tuân theo những ý tưởng này chưa? Bao nhiêu sẽ áp dụng những ý tưởng này tác động đến lợi nhuận của công ty?

  3. Vào trong đầu sếp của bạn. Tại sao anh ấy làm mọi thứ theo cách anh ấy làm, và tại sao anh ấy từ chối những thay đổi của bạn? Anh ta có lẽ không ngu ngốc, và anh ta có lẽ có nhiều kinh nghiệm hơn bạn, vì vậy anh ta có thể có một số lý do tốt để làm mọi thứ theo cách của mình. Bạn đã ám chỉ một số trong số họ - theo chủ đề đó đến cùng. Sau đó, tìm hiểu xem và làm thế nào đề xuất của bạn sẽ cải thiện những điều mà anh ấy quan tâm nhất.

  4. Gợi ý 1: Người quản lý thích tiền. Bạn càng có thể ràng buộc trực tiếp các đề xuất của mình để tăng thu nhập hoặc giảm chi tiêu, thì cuộc tranh luận của bạn sẽ càng có tác động. Gợi ý 2: Thời gian là tiền bạc. Gợi ý 3: Chính nó, sự hấp dẫn thẩm mỹ của mã không kiếm được tiền. Thực tế thì ngược lại - cần có thời gian để làm cho mã trông đẹp. Mã xấu mà hoạt động tốt là tốt với hầu hết các nhà quản lý.

  5. Đừng chỉ nói về nó, làm điều đó . Nếu bạn đủ may mắn để có một dự án nhỏ, khép kín theo cách của bạn, hãy hỏi người quản lý của bạn xem bạn có thể làm điều đó bằng cách sử dụng kiểu "UJS" như một cách trình diễn không. Khi bạn đã sẵn sàng, hãy tổ chức đánh giá mã nơi bạn có thể giải thích cách tất cả hoạt động và lý do tại sao bạn nghĩ nó tốt hơn phong cách hiện tại.

  6. Chủ nghĩa lý tưởng là tuyệt vời, nhưng đừng để nó cản trở. Điều quan trọng hơn khi được xem là một người hoàn thành công việc hơn là một người pha chế phàn nàn về phong cách mã hóa lạ thường. Điều này đặc biệt đúng nếu bạn là người mới. Nếu bây giờ bạn không thể có được lực kéo với UJS, hãy hoàn thành một số công việc tốt và từ từ xây dựng một trường hợp cho những thay đổi bạn muốn thực hiện khi bạn có được sự tin cậy.

  7. Đọc chuyển đổi: Làm thế nào để thay đổi mọi thứ khi thay đổi là khó khăn . Nó sẽ cung cấp cho bạn nhiều ý tưởng hay hơn về cách xây dựng trường hợp của bạn một cách hiệu quả.


Ý chính của câu trả lời là chứng minh rằng ujs hoạt động thực tế. Cho họ thấy nó hoạt động.
OnesimusUnbound

2
@AvinashR Vấn đề chỉ là điều thúc đẩy các nhà quản lý thường không giống với điều thúc đẩy các nhà phát triển. Chúng tôi các nhà phát triển thích mã để đẹp và gọn gàng, được thiết kế trang nhã, v.v ... Người quản lý muốn tối đa hóa lợi nhuận. Nếu thay đổi của bạn sẽ dẫn đến doanh số nhiều hơn, tuyệt vời. Nếu nó dẫn đến thời gian phát triển ngắn hơn hoặc mất ít thời gian hơn để làm lại hoặc sửa lỗi, thật tuyệt. Vui mừng khi biết rằng các máy khách thích GUI của bạn, nhưng liệu thuộc tính boss có thuộc về UJS hay giao diện của GUI không? Nếu khách hàng nhìn vào mã của bạn và nói "chúng tôi muốn mã của chúng tôi trông như thế này!" nó sẽ dễ dàng để làm cho trường hợp của bạn.
Caleb

3
Ngoài "Chuyển đổi", tôi cũng khuyên bạn nên "Thay đổi kỹ thuật lái xe" của Terrance Ryan: terrenceryan.com/book . Ngoài ra, trong "Xin chào HTML5 và CSS3", Rob Crowther chỉ đơn giản là: "HTML cho nội dung, CSS để trình bày và JavaScript cho hành vi." Bằng cách loại bỏ JavaScript khỏi HTML, bạn có thể xây dựng thư viện các hành vi và sử dụng lại HTML ở mọi nơi mà không cần thêm mã hóa. Điều đó, đến điểm số 4 của Caleb, tiết kiệm thời gian và tiền bạc.
Adrian J. Moreno

2
Điểm 3: Không đánh giá quá cao kinh nghiệm. Tôi muốn có trong đội của mình một Leo Messi siêu tài năng 22 tuổi chứ không phải là một cầu thủ 32 tuổi lười biếng có kinh nghiệm ở Premier League. Máu trẻ, tươi, tài năng thường rất có giá trị.
Robert Niestroj

1
"Các nhà quản lý muốn tối đa hóa lợi nhuận." - Người quản lý cũng muốn giảm rủi ro; có thể là một con đường khác.
Roger Lipscombe

8

Những gì bạn có thể làm là cung cấp cho họ bản demo gỡ lỗi html USJ bằng các công cụ FireQuery cũng như Chrome Query .

FireQuery là một phần mở rộng của firebird và làm rất tốt công việc đó. Đối với Truy vấn Chrome, tôi không thể đảm bảo mức độ tốt của nó, nhưng nó chắc chắn được sử dụng bởi một số nhà phát triển ( một bài đăng tại stackoverflow ).

Cũng biết rằng .datahàm bị loại bỏ để trả về dữ liệu sự kiện nội bộ kể từ jQuery 1.8.0 và được thay thế bằng dữ liệu $._data(element, "events")có thể không ổn định, theo thay đổi chính thức

Điều này hiện đã bị xóa trong 1.8, nhưng bạn vẫn có thể truy cập dữ liệu sự kiện cho mục đích gỡ lỗi thông qua dữ liệu $ ._ (phần tử, "sự kiện"). Lưu ý rằng đây không phải là một giao diện công cộng được hỗ trợ; cấu trúc dữ liệu thực tế có thể thay đổi không thể thay đổi từ phiên bản này sang phiên bản khác.

CẬP NHẬT:
Khi tôi bắt đầu làm việc tôi cũng gặp tình huống khó xử. Nhưng khi tạo một bản demo với GUI đầy đủ chức năng (ứng dụng một trang) bao gồm các tab mở động (cũng có thể đóng), menu Accordion (được tạo động từ db), cuối cùng họ hiểu rằng nên sử dụng USJ tốt hơn.

Ngoài ra, điểm cộng của việc sử dụng USJ là bạn có thể thu nhỏ toàn bộ ứng dụng của mình thành một tập lệnh nhỏ (không thể đọc được). Đồng thời hiển thị cho họ các tập lệnh cho google.com / github.com (làm ví dụ) và chỉ ra rằng ngay cả khi họ đang nén mã, điều này luôn tốt hơn, vì người xem trang web sẽ gặp khó khăn khi giải mã các lỗi bảo mật và sử dụng chúng để bắt đầu một cuộc tấn công toàn diện vào trang web của bạn (sợ chúng), mặc dù không thể.

CẬP NHẬT 2 :
Btw, tôi không biết mình đang làm USJ cho đến khi tôi thấy câu hỏi này, vì vậy cảm ơn theo một cách.


2

Trình xử lý sự kiện nội tuyến bốc mùi vì:

  • Không có phái đoàn sự kiện nào - điều này thật tuyệt vời khi bạn muốn có thể trích xuất các yếu tố trong và ngoài trang một cách linh hoạt mà không phải khởi động lại.

  • Bạn đã ràng buộc hành vi với các thẻ HTML thay vì các thuộc tính lớp / ID của các thẻ HTML. Giả sử bạn có một lớp "combo_box" trên toàn bộ ứng dụng của mình. Đột nhiên, trên một nửa trang cũ của bạn, bạn muốn có một biến thể nhỏ trên hộp tổ hợp của mình khi chúng ở trong một thùng chứa khác. Bị ràng buộc với một lớp, bạn có thể thay đổi hành vi đó dựa trên bối cảnh vùng chứa, ví dụ "#special_container .combo_box". Bị ràng buộc bên trong HTML bị nguyền rủa, bạn có thể thấy mình theo dõi từng hộp chọn nhỏ với lớp .combo_box trong bất kỳ trang số nào để thay đổi từng tham chiếu trình xử lý thay vì điều chỉnh hoặc viết một vài dòng mã mới để lọc từ một vị trí tệp duy nhất .

  • Nếu bạn muốn có nhiều trình xử lý, bạn đã bọc chúng trong một hàm và sau đó liên kết nó một cách không cần thiết với các tệp HTML cụ thể. Làm thế nào duy trì được điều đó?

  • Một điểm tinh tế là nó dễ dàng hơn / dễ bảo trì hơn / linh hoạt hơn và mạnh mẽ hơn để xử lý hành vi với tâm lý của bảng điều khiển nhiều hơn. Bằng cách liên kết từ một vị trí trung tâm, bạn đã có một nơi mà bạn có thể có được cái nhìn tổng quan về tất cả các hành vi xảy ra trên trang cùng một lúc, rất tiện lợi khi, ví dụ, bạn cần tìm hiểu tại sao một số trang nhất định thỉnh thoảng chạy vào một lỗi nhất định khó hiểu nhưng không phải là lỗi khác.

  • Đây là phía khách hàng. Chúng tôi có nhiều trình duyệt tất cả diễn giải sự phức tạp nặng nề theo cách riêng của họ để giải thích. Slop-it-all-together và để IDE sắp xếp nó cho bạn tâm lý không hoạt động tốt ở đây. Giữ mã của bạn chặt chẽ, tối thiểu, ghép lỏng lẻo và sạch sẽ không phải là mốt, điều đó hoàn toàn cần thiết để thiết lập một mặt trước có thể bảo trì dễ dàng sửa đổi và cập nhật và vâng, đó là nơi mà $$$ cho rằng người quản lý của bạn thực sự có tầm nhìn xa .

  • Không còn nữa! @ # $ Ing 2002 nữa. Đối số này là cũ như bảng như bố trí. Hãy vượt qua nó và bắt đầu tin tưởng vào nhà phát triển chuyên môn có kinh nghiệm của khách hàng mà bạn tự thuê một cách rõ ràng vì bạn thiếu chuyên môn của họ (không phải là tôi đang có bất kỳ sự tức giận nào từ kinh nghiệm cá nhân hay bất cứ điều gì).

Và để phản bác lại lập luận của sếp, thực sự không khó để theo dõi lớp hoặc ID nào đang được sử dụng trong ủy nhiệm sự kiện hoặc trình xử lý ràng buộc với CTRL + F và một công cụ cho phép bạn xem tất cả JS trên trang như trò đùa đáng xấu hổ của riêng tôi / phiên bản bookmarklet chỉ dành cho nguyên mẫu Tôi vội vàng kết hợp với nhau khi thanh công cụ của nhà phát triển web bắt đầu xuất hiện trên tôi (mã hóa màu chết tiệt). Đánh dấu trang từ liên kết tại trang js fiddle hoặc sao chép mã JS và tạo mã của riêng bạn.

Một liên kết fiddle JS có thể sẽ hết hạn cuối cùng


+1 Cuối cùng ai đó đã chỉ ra những điểm không phù hợp chính của JS nội tuyến. Sẽ sử dụng lập luận này trong cuộc tranh luận tiếp theo với sếp của tôi.
V-Light

@ V-Light Họ có làm việc không?
Erik Reppen

2
không Tùy chọn 'ChangeYourOrganization' là giải pháp
V-Light

0

Một ưu điểm chính của kỹ thuật được đề xuất của bạn là bạn chỉ phải liên kết một khi trình xử lý sự kiện với cha mẹ như "tài liệu" và trình xử lý này sẽ có thể bắt được các sự kiện đến từ tất cả trẻ em thỏa mãn bộ chọn đã cho như "button.any class ". Lưu bộ nhớ và duy trì sao cho chỉ cần một phiên bản chỉnh sửa và nó ảnh hưởng đến tất cả các yếu tố.

Liên quan đến việc không thể nhận ra ngay lập tức chức năng bị ràng buộc, nhóm của bạn chỉ có thể tiêu chuẩn hóa một cách khai báo các chức năng như vậy có thể ở phần lớn dưới cùng của trang. Vì vậy, tất cả các bạn đều biết nơi để xem, quy ước đặt tên cũng rất quan trọng. Các phần sẽ rất có lợi, nhưng hãy chắc chắn rằng nó đang bị máy chủ loại bỏ trước khi phục vụ nó như một phản ứng với trình duyệt.

Ngoài ra, nếu bạn muốn cung cấp obfuscation và thu nhỏ javascript cho mục đích bảo mật, kỹ thuật của bạn sẽ làm được, không giống như kiểu cũ mà nhóm của bạn vẫn đang sử dụng.


-2

Câu trả lời rõ ràng là bạn chỉ có thể liên kết một chức năng với nút của mình bằng thuộc tính onclick, trong khi sự kiện JQuery cho phép bạn liên kết nhiều chức năng. Một vấn đề phổ biến với sự kiện onload: nếu tài liệu của bạn gồm nhiều tệp, sự va chạm thường xảy ra.

Một giải pháp khác có thể làm thay đổi cả bạn và sếp của bạn là sử dụng liên kết dữ liệu, với một thư viện như Knockout hoặc Angular, sẽ theo dõi các sửa đổi theo quan điểm của bạn và ngăn chặn nhu cầu đối với một phần lớn các trình xử lý sự kiện.


1
liên quan đến Knockout, Angular và các khung công tác JS khác dành cho những đứa trẻ tuyệt vời ... thật không may, đó không phải là một lựa chọn. Lý do cũng giống như trên ... đó là "quá nhiều" hoặc "quá mới" hoặc "quá tuyệt" hoặc chỉ "chúng ta không muốn học một cái gì đó mới, hãy làm theo cách cũ (ngu ngốc / ngu ngốc) .. . "
V-Light

@Niphra: Ngoài ra, bạn chỉ có thể liên kết một chức năng với chỉ một thành phần.
Bruno Schäpper

3
@ V-Light: "Bạn có thể ChangeYourOrganization hoặc ChangeYourOrganization." Có lẽ điều này thú vị với bạn: jamesshore.com/Change-Derator
Bruno Schäpper

Xin chào, công ty của tôi gắn bó với Classic ASP vì ASP.NET "quá mới", nhưng tôi vẫn cố gắng đẩy Knockout trong mã của chúng tôi. Hãy thử xem mối quan tâm của họ thực sự là gì và xem bạn có thể thay đổi không.
DistantEcho

1
@Niphra "công ty của tôi gắn bó với Classic ASP:" đó là .... đáng sợ.
Michael Paulukonis
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.