Blog Hoc Tap
Javascript và những điều cần biết
trong danh mục Javascript, Web Design, Web Programming
Nếu bạn là 1 Web Developer, thì hẳn các bạn cũng đã từng Code Javascript ít nhất 1 lần. Javascript chính là nhân tố sống còn trong các thiết kế web hiện nay bởi nó giúp cho cái web khô khan của chúng ta trở nên mượt mà và vận hành trơn tru hơn.
Hôm nay mình sẽ chia sẽ tới các bạn một số kinh nghiệm cũng như 1 số lời khuyên khi các bạn viết Javascript. Phạm vi bài này sẽ không phải hướng dẫn các bạn code Javascript mà nó sẽ giúp các bạn có 1 cái nhìn toàn diện hơn về các vấn đề mà 1 Coder cần quan tâm khi làm việc với Javascript.
Các vấn đề mình sẽ đề cập tới là:
1.Tại sao phải là Javascript?
2.Sử dụng Javascript IDE nào?
3.Minified Code là gì?
4.Obfuscated Code là gì?
5.Tại sao phải học thêm jQuery?
——————————————————
1.Tại sao phải là Javascript?
Thật sự nếu không có Javascript thì có lẽ đã không có thế hệ Web 2.0 cùng với xu hướng cải thiện tương tác website như hiện nay. Như các bạn cũng biết, môi trường web thuần túy (không nói Flash, Silverlight…) chỉ có CSS và HTML thì sự tương tác cực kỳ nghèo nàn. Cách thức người dùng tương tác với website chẳng khác gì cách đây 20 năm. Do đó, để làm sống động website thì các Developer cần phải nghiên cứu và áp dụng các kỹ thuật Javascript khác nhau lên website để tăng cường hiệu quả tương tác. Một trong những kỹ thuật cho tới ngày nay vẫn phát huy tác dụng đó là AJAX.
Tuy nhiên, cứ không phải chỗ nào cũng Javascript, không phải chỗ nào cũng AJAX vì cái gì cũng có mặt trái của nó. Đã sử dụng Javascript thì trước tiên Developer phải biết cách vận hành của nó để có thể tích hợp code vào. Ngoài ra, tùy vào hiệu ứng mà các đoạn code Javascript sẽ có kích thước khác nhau, nhưng thường là khá lớn so với kích thước HTML của website, nên sử dụng Javascript cũng phải cần được xem xét kỹ lưỡng.
Dùng chỗ nào, dùng khi nào là 1 vấn đề luôn trăn trở các Web Developer như mình bởi nhiều khi chỉ cần thêm 1 đoạn script nho nhỏ thì cũng cải thiện hiệu quả của tương tác lên khá nhiều. Nhưng đôi khi thêm vào thì chẳng cải thiện được gì ngoài nhìn cho nó đẹp –> không thích hợp cho trường phái cải thiện tương tác.
Ngoài ra, nếu các bạn sử dụng nhiều đoạn Code Javascript trong website thì tốc độ tương tác website(chứ không phải tốc độ load website) sẽ bị ảnh hưởng thấy rõ. Các thao tác chạy chậm hơn vì các đoạn code đó cũng cần trình duyệt xử lý nên phải cân nhắc kỹ lưỡng.
Một vấn đề cũng khá quan trong khi tích hợp Javascript vào 1 trang web đó là tính tương thích, điều này các bạn làm nhiều thì sẽ gặp thôi. Tính tương thích ở đây có thể là tương thích giữa các thư viện javascript với nhau hoặc có thể là tương thích giữa HTML DOCTYPEvà Javascript. Mình đã từng gặp vấn đề tương thích HTML DOCTYPE(khai báo đầu trang HTML) và Javascript và giải quyết cực kỳ vất vã. VD thư viện A thì sử dụng DOCTYPE X, thư viện B thì sử dỵ DOCTYPE Y, chỉ cần thay đổi 1 trong 2 cái DOCTYPEthì sẽ “toi” cái thư viện nên làm sao để workaround cũng là 1 skill mà các bạn nếu làm javascript cũng cần quan tâm.
2.Sử dụng Javascript IDE nào?
Thật sự mà nói nếu chỉ viết vài ba đoạn code Javascript nho nhỏ để xử lý những tương tác đơn giản thì cũng chẳng cần nghĩ tới IDE làm gì cho mệt. Đối với những đoạn script ngắn, số lượng hàm cũng như biến trong 1 phạm vi nào đó (External embed hoặc Internal Embed) là ít và kiểm soát được nên không cần sử dụng IDE. Nếu chỉ phát triển nho nhỏ thì các bạn có thể sử dụng Notepad++, Adobe Dreamweaver…
Tuy nhiên, nếu phát triển Javascript(External Embed) đến 1 bước nào đó sẽ phát sinh thêm khá nhiều hàm, việc quản lý và điều hướng trong code sẽ gặp khá nhiều khó khăn. Lúc đó sử dụng IDE sẽ hiệu quả về tốc độ hơn. IDE (Integrated Development Environment) hay được gọi là Môi trường phát triển tích hợp, tức là các phần mềm đã được tích hợp nhiều công cụ cần thiết cho phát triển phần mềm…IDE sẽ ngoài việc giúp điều hướng nhanh, nó còn cung cấp 1 số chức năng không thể thiếu như Auto-complete, Code Highlighting, On-type Parsing, Debug…
Hiện tại có khả nhiều IDE cho javascript, các bạn có thể sử dụng Google search ‘Javascript IDE‘ sẽ ra cả tá IDE, tùy vào sở thích và túi tiền mà các bạn chọn cho mình 1 IDE thích hợp. Các IDE khá nổi tiếng là: Aptana, 1st Javascript Editor Pro, Spket IDE(cần Java), Javascript IDE for Eclipse(cần Eclipse)…Mình hiện tại đang sử dụng Aptana, đây là một IDE làm việc với Javascript khá tốt và đặc biết nó là FREEWARE. Ngoài việc hỗ trợ Javascript, Aptana cũng là 1 HTML IDE xuất sắc.
3.Minified Code là gì?
Sau khi viết được những file javascript khá lớn (khoảng vài KB trở lên) nếu để như thế mà triển khai cho website chạy trực tiếp thì sẽ không hiệu quả về mặt băng thông. Vì các bạn cũng biết là code javascript của các bạn viết ra có rất nhiều ký tự không cần thiết như khoảng trống, ký tự xuống hàng, comment…những ký tự này chỉ làm nặng thêm cho file chứ không có tác dụng gì cho trình duyệt nên chúng ta cần có cách hạn chế vấn đề này.
Nhu cầu đó dẫn đến khái niệm Minify hay mình gọi là rút gọn code. Minify là quá trình xóa tự động các ký tự không cần thiết và “làm nhỏ” đi file bằng nhiều cách để khi triển khai thực tế, kích thước của file có thể nhỏ đi rất nhiều (có thể giảm ít nhất khoảng 50-60% so với kích thước file ban đầu), nên nếu bạn nào có “xông pha giang hồ” nhiều thì sẽ thấy 1 số thư viện javascript hay plugin người ta vừa cho phiên bản đầy đủ (gọi là phiên bản phát triển) chứa nguyên văn script của tác giả và phiên bản Min(phiên bản rút gọn) là phiên bản đã trải qua quá trình minify. Và phiên bản Min thường chỉ có 1 line ^^.
Dưới đây là 1 ví dụ cho thấy 1 đoạn code đã được minify:
Nói đến minify thì thường nhắc kèm tới kỹ thuật Javascript Packer. Đây cũng là một kỹ thuật rút gọn Code nhưng theo trường phái khác, sử dụng cơ chế của hàm eval() để thực thi, và đoạn code sử dụng cơ chế này sẽ thay đổi phần nào thứ tự và các ký tự, làm cho đoạn code khó đọc hơn. Không khuyến khích sử dụng kỹ thuật packer để làm Minify code.
Có khá nhiều cách để minify code, bạn có thể làm bằng tay (bạn thật là rảnh ^^) và tự động. Để minify tự động thì có nhiều bộ thư viện cũng như phần mềm cho phép minify. Các thư viện nổi tiếng: Minify (PHP5), JSMIN (Có source ở các ngôn ngữ C# , Java, JavaScript, Perl, PHP, Python, OCAML, Ruby), YUI Compressor(Yahoo – Java), Dojo ShrinkSafe (Java), Packer– Dean Edwards(Javascript, .NET, PHP, Perl)
4.Obfuscated Code là gì?
Obfuscate là 1 kỹ thuật trong nhóm minify như cũng được tách riêng ra để nói bởi mục đích và tính chất của nó. Obfuscate nói một cách dễ hiểu là “mã hóa giả” nội dung code. Kỹ thuật này áp dụng cho nhiều ngôn ngữ chứ không phải chỉ riêng cho Javascript. Trong những tình huống bạn triển khai source ra bên ngoài, thì việc người khác có source là điều tất yếu.
Sử dụng kỹ thuật Obfuscate sẽ làm thay đổi các tên hàm, tên biến thành các ký tự đơn giản (ví dụ như a(), b(), var c…) khiến cho người khác dù có nắm source của bạn cũng khó lòng mà nắm tường tận và Reverse Engineering cái source của bạn.
Nên lưu ý là kỹ thuật này có thể sẽ làm thay đổi code chứ không chỉ làm rút gọn như Minify(quá trình này không làm thay đổi Flow của code) khiến cho nếu bạn obfuscate không cẩn thận có thể khiến đoạn javascript sau khi obfuscate trở nên vô tác dụng. Hãy cẩn thận với quá trình obfuscate, nếu bạn sợ có vấn đề thì cứ làm Minify là an tâm ^^.
Hiện tại cũng có nhiều phần mềm cho phép obfuscate javascript nhưng mình thấy tốt nhất là Jasob :: JavaScript Obfuscator (cái này không phải freeware :(). Sử dụng phần mềm dạng này phức tạp hơn 1 xíu so với cách Minify.
Đây là 1 đoạn Javascript gốc:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | //------------------------------------------------------ // Calculate salary for each employee in "aEmployees". // "aEmployees" is array of "Employee" objects. //------------------------------------------------------ function CalculateSalary(aEmployees) { var nEmpIndex = 0; while (nEmpIndex < aEmployees.length) { var oEmployee = aEmployees[nEmpIndex]; oEmployee.fSalary = CalculateBaseSalary(oEmployee.nType, oEmployee.nWorkingHours); if (oEmployee.bBonusAllowed == true) { oEmployee.fBonus = CalculateBonusSalary(oEmployee.nType, oEmployee.nWorkingHours, oEmployee.fSalary); } else { oEmployee.fBonus = 0; } oEmployee.sSalaryColor = GetSalaryColor(oEmployee.fSalary + oEmployee.fBonus); nEmpIndex++; } } |
Còn đây là đoạn javascript ở trên đã được obfuscated :
1 2 | function c(g){var m=0;while(m<g.length){var r=g[m];r.l=d(r.n,r.o);if(r.j==true){ r.k=e(r.n,r.o,r.l);}else{r.k=0;}r.t=f(r.l+r.k);m++;}} |
5.Tại sao phải biết thêm jQuery?
Nếu các bạn đã từng làm việc nhiều với Javascript thì có lẽ cái jQuery không còn xa lạ nữa. jQuery là 1 Javascript framework giúp chúng ta thao tác trên DOM nhanh hơn so với cách sử dụng javascript cổ điển. Bên cạnh jQuery cũng có nhiều framework khác như Prototype, MooTools…
Tuy có nhiều framework, nhưng cách thức vận hành và viết code thì cũng gần như tương đồng, ăn thua là cộng đồng hỗ trợ khi sử dụng 1 framework nào đó thôi. Mỗi người khi bắt đầu sử dụng framework thì sẽ có lẽ do duyên số hay được hướng dẫn mà sẽ tự chọn cho mình 1 framework để đi theo. Và mình cũng không biết vì sao mình đã chọn jQuery nhưng hiện tại jQuery là 1 công cụ đắc lực nhất trong bộ đồ nghề triển khai Javascript của mình.
Đối với jQuery, bạn sẽ dễ dàng làm nhiều thao tác phức tạp trên nội dung HTML hoặc có thể tìm kiếm thêm các plugin để áp dụng các hiệu ứng tương tác mà mình muốn cho website. Cộng đồng hỗ trợ cho jQuery cũng khá lớn, nên hầu hết các vấn đề bạn hỏi thì đều có câu trả lời gần như là chính xác với vấn đề của bạn. Do đó, lời khuyên của mình là các bạn nếu chưa học JS Framework nào thì hãy xoắn tay áo vào nghiên cứu jQuery đi nhé. Hiện cũng có nhiều sách hướng dẫn jQuery rồi đó.
Có một cuốn khá dễ đọc đó là: Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques
—————————————
Như vậy là mình đã giới thiệu tới các bạn – những Web Developer một chút kiến thức rất quan trọng nếu bạn sẽ làm việc lâu dài với javascript trong tương lai. Hy vọng các bạn sẽ yêu thích Javascript hơn nữa và đem lại cho người dùng website của mình những tương tác hiệu quả hơn. Good luck!
Bài đăng
Hì! Về editor, mình toàn dùng Zend Studio 5.5 :d
[Reply]
Bài viết khá hấp dẫn và đầy đủ đó. Cám ơn bạn.
[Reply]
vấn đề em đang quan tâm đến Javascript thì lại chưa đề cập. đó là làm sao SEO được nếu dùng Javascript.
đúng là Javascript là công nghệ web2.0 thiệt nhưng mà một thiết kế đẹp ko hẳn cần hiệu ứng bay bổng. mà là hiệu ứng sao cho ấn tượng phải ko anh
[Reply]
Bài viết rất hữu ích. Mặc dù mình cũng có code Javascript nhưng không để ý được như vậy!
[Reply]
sao không có packer code nhỉ ?
[Reply]
admin Reply:
March 21st, 2010 at 10:56 am
Kỹ thuật Packing là 1 nhánh trong kỹ thuật Minify code và cũng có đề cập tới trong phần minify đó bạn. cảm ơn đã chia sẽ
[Reply]
Thanks bạn nhiều vì đã giới thiệu cái Aptana, trước giờ toàn nodepad++ mà gõ không :))
[Reply]
Hoang Van Thu Reply:
October 25th, 2010 at 10:23 am
Anh ơi quyển sách mà anh giới thiệu đó (Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques), làm cách nào down ở đâu vậy?
[Reply]
Hoang Van Thu Reply:
October 25th, 2010 at 10:35 am
Cảm ơn nhé. Em down đc rồi (http://www.megaupload.com/?d=01967T0B Password: dummies.com.vn)
[Reply]
Cảm ơn bạn rất nhiều vì bài viết này!
[Reply]
Javascript và những điều cần biết…
Thank you for submitting this cool story – Trackback from Up.VietGeeks.com…
Cám ơn bạn đã viết bài này.
[Reply]
Chào bạn
Bài viết rất hay. Cho hỏi có cần biết hết javascript và jquery để xin đi làm ko
[Reply]