Trang Chính
1
Tìm hiểu về Minified, Obfuscated Code với Javascript Tue Nov 01, 2011 4:10 pm
El Kun
Super Moderator
Nếu bạn là một Web Developer, thì hẳn các bạn cũng đã từng Code Javascript ít nhất một 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
vận hành trơn tru hơn và trở nên mượt mà 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ư một 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ó một cái nhìn toàn diện
hơn về các vấn đề mà một 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à
Tại sao phải là Javascript?
Sử dụng Javascript IDE nào?
Minified Code là gì?
Obfuscated Code là gì?
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à một 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 ( 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 DOCTYPE và 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ã.
Ví dụ thư viện A thì sử dụng DOCTYPE X, thư viện B thì sử dụng DOCTYPE Y, chỉ cần
thay đổi 1 trong 2 cái DOCTYPE thì sẽ lổi 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 từ khóa 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 ( giảm khoảng 50-60% so với ban đầu ), nên nếu bạn nào đã từng tìm hiểu 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 đủ chứa nguyên văn script của tác giả và phiên bản Min 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
function doSomething(b,a){return b+a} alert(344,999)
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 hoặc 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 như 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 hoặc 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.
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
Còn đây là đoạn Javascript ở trên đã được obfuscated
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,…..
Đố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 đó các bạn nếu chưa học JS Framework nào thì hãy bắt đầu 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
Hi vọng bài này có ích đối với bạn.
Nguồn Sưu Tầm
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
vận hành trơn tru hơn và trở nên mượt mà 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ư một 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ó một cái nhìn toàn diện
hơn về các vấn đề mà một 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à
Tại sao phải là Javascript?
Sử dụng Javascript IDE nào?
Minified Code là gì?
Obfuscated Code là gì?
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à một 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 ( 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 DOCTYPE và 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ã.
Ví dụ thư viện A thì sử dụng DOCTYPE X, thư viện B thì sử dụng DOCTYPE Y, chỉ cần
thay đổi 1 trong 2 cái DOCTYPE thì sẽ lổi 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 từ khóa 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 ( giảm khoảng 50-60% so với ban đầu ), nên nếu bạn nào đã từng tìm hiểu 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 đủ chứa nguyên văn script của tác giả và phiên bản Min 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
function doSomething(b,a){return b+a} alert(344,999)
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 hoặc 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 như 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 hoặc 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.
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
- Code:
//------------------------------------------------------
// 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
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,…..
Đố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 đó các bạn nếu chưa học JS Framework nào thì hãy bắt đầu 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
Hi vọng bài này có ích đối với bạn.
Nguồn Sưu Tầm
