Khóa học Javascript - Bài 1: Giới thiệu về những thư viện / framework Javascript

Phần mã của một website luôn gồm 2 phần: thư viện "tự phát" (triển) và thư viện sử dụng / kế thừa lại từ những thư viện có sẵn trên Internet. Dạng thư viện có sẵn này do một số "mạnh thường quân" phát triển nhằm cung cấp cho người sử dụng Javascript sự đơn giản, tiện lợi. Có thể kể đến những thư viện sau:

Prototype
Trang chủ http://www.prototypejs.org/

Là một Javascript framework mạnh mẽ, lâu đời. Điểm mạnh của Prototype là tập thư viện hướng đối tượng dùng để xử lý dữ liệu rất phong phú. Đi kèm theo đó có một add-on nổi tiếng là http://script.aculo.us/ trang bị cho Prototype khả năng tạo hiệu ứng phong phú.

MooTools
Trang chủ http://mootools.net/

Một Javascript framework khác - MooTools cũng hướng đối tượng và có những tập lệnh xử lý dữ liệu tuy không nhiều như Prototype nhưng cũng "dừa đủ xoài". MooTools cũng trang bị thêm những thư viện về hiệu ứng và Ajax cơ bản.

Dojo
Trang chủ http://www.dojotoolkit.org/

Anh "nì" tự nhận là toolkit, là một bộ công cụ Javascript dùng để phục vụ cho việc xử lý dễ dàng, đơn giản. Dojo có những điểm nhấn riêng qua tập điều khiển (control) dùng xử lý và trang trí cho trang web rất tiện lợi.

YUI
Trang chủ http://developer.yahoo.com/yui/
Là thư viện "cây nhà lá vườn" của Yahoo, giúp cho những nhà phát triển đơn giản hóa việc tạo giao diện, tạo hiểu ứng, xứ lý Ajax cho website

ExtJS
Trang chủ http://www.sencha.com/

Chú ý chú ý, anh nì có "tính phí", nhưng bạn đừng lo vẫn có một phiên bản miễn phí dành cho nhà phát triển. ExtJS là một lão làng cứng cựa trong việc tạo giao diện cho ứng dụng web, do tính đặc thù riêng, ExtJS thường được dùng để xây dựng form xử lý, bảng biểu... Và bộ điều khiển của ExtJS thì rất phong phú và cool, long lanh "lém".

jQuery
Trang chủ http://jquery.com/

Là một thư viện Javascript theo trường phái "ăn ít nhưng no lâu". jQuery có ưu điểm nhỏ gọn và có bộ plugin phong phú nhất. Dù là hàng "hậu bối" nhưng jQuery cũng phần nào chứng tỏ được sức trẻ của mình và cũng làm cho những nhà phát triển "ngất ngây" không ít.

Trên đây là những thư viện / framework được tổng hợp dựa trên hiểu biết nông cạn của mình, còn có rất nhiều thư viện khác, nhưng do tính phổ dụng chưa cao, cộng thêm sự chuyên môn xử lý của những thư viện đó nên mình không tiện đưa vào.

Nhiều quá, nên chọn cái nào đây ?
Khi bước chân vào thế giới dùng "đồ chùa, đồ sẵn có", bạn sẽ luôn bị bỡ ngỡ bởi có quá nhiều "hàng", "thượng vàng hạ cám đủ" cả. Vì quá nhiều nên đôi khi "hoa cả mắt", không biết "chọn mặt gửi tiền" vào ai. Đây cũng chính là lúc bạn cần tỉnh táo để nhìn nhận, xác định nhu cầu công việc của mình để có thể chọn được một "em" ưng ý. Mình sẽ trình bày một số tiêu chí chọn lựa, nhưng cũng xin nhắc lại, đây là quan điểm cá nhân, cũng như đây là tiêu chí chọn ra thư viện thích hợp nhất cho bạn việc này không đánh giá rằng thư viện này thì "mạnh" hay "yếu" hơn thư viện kia

Đơn giản, dễ học
Đây là tiêu chí khá thông dụng, vì đơn giản, dễ học, mì ăn liền thì người sử dụng thường thích thú hơn, dễ tiếp cận hơn. Còn việc chỉ ra thư viện nào đơn giản thì bạn phải tự mình tìm hiểu vì ý nghĩ đơn giản phụ thuộc vào trình độ cũng như công việc của bạn.

Tốc độ
Tốc độ có thể hiểu là tốc độ xử lý. Tất nhiên sự "rề rà" ở đây không phải là một vài giây mới làm xong được một việc mà nhìn tổng thể, thư viện đó có nặng nề xử lý, kém cỏi hơn những thư viện khác hay không, bạn tham khảo thử nghiệm về tốc độ xử lý truy vấn thẻ của một số thư viện:

Nhấn vào hình để xem chi tiết

Đây chỉ là tốc độ truy vấn thẻ, nó không là tất cả, nhưng cũng khá quan trọng, nếu bạn đang phát triển một ứng dụng web thì việc truy vấn thẻ nhanh hay chậm, tích lũy dần cũng tạo nên sự khác biệt khá lớn, ngoài ra còn ảnh hưởng bởi tốc độ xử lý đối tượng, tập hợp, dữ liệu... Còn nếu bạn là nhà thiết kế, bạn sẽ không cần quan tâm đến vấn đề này, vì tần suất sử dụng và yêu cầu xử lý không cao.

Nhu cầu thiết kế hay phát triển ứng dụng
Mỗi thư viện đều có điểm hay dở trong việc phát triển UI (user interface) và tạo hiệu ứng. Nếu bạn thiên về tạo hiệu ứng làm đẹp cho website thì bạn có thể chọn jQuery, Mootools, Dojo ... Nếu bạn cần một điều khiển mạnh mẽ để tạo ứng dụng có những form xử lý phức tạp, thì bạn có thể để mắt đến Dojo hoặc ExtJS...

ExtJS với thư viện điều khiển khá "mướt"

Những thư viện mở rộng
Sự thành công của Firefox ngày nay cho thấy việc có một tập những ứng dụng hỗ trợ, những plugin phong phú là một lợi điểm. Thư viện gốc được phát triển, cập nhật rất chậm, nhưng bên cạnh đó những phần "gắn" thêm vào thì phát triển rất nhanh và nhiều. Vì thế chọn lựa một thư viện bạn cũng cần cân nhắc xem cộng đồng phát triển những phần "gắn thêm" có đông đảo hay không, những ứng dụng hỗ trợ có phong phú, tiện lợi phù hợp với nhu cầu của mình hay không.

Do yêu cầu bắt buộc
Do tính đặc thù công việc, bạn đôi khi bị "ép" phải chọn một thư viện Javascript nào đó mà mình không quen sử dụng, khó sử dụng chỉ vì "sếp tao thích thế". Hoặc chỉ tính năng đó được trang bị ở thư viện này nhưng không trang bị ở thư viện khác.

Kết hợp nhiều thư viện
Những tiêu chí trên giúp bạn chọn lựa ra thư viện ưng ý nhất, nhưng không có nghĩa ràng buộc bạn chỉ sử dụng một thư viện. Bạn có thể linh động sử dụng 1, 2 hay nhiều thư viện cùng một lúc. Có những điều bạn lưu ý khi sử dụng nhiều thư viện:

Tránh xung đột
Đề phòng sự xung đột, do nhiều thư viện có cú pháp, cách sử dụng "na ná" nhau, nên xung đột là không tránh khỏi. Đơn cử như cuộc chiến dấu Đô la ($), có khá nhiều thư viện sử dụng dấu này như thành phần cốt yếu, vì vậy, nếu quen sử dụng dấu $ theo ý nghĩa của thư viện bạn yêu thích, thì thư viện này bạn cần tham chiếu sau tất cả những thư viện không yêu thích khác

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>

Mình yêu thích jQuery, nên trong đoạn mã của mình, dấu $ dùng cho việc truy vấn thẻ theo phong cách jQuery, tham chiếu như thế này sẽ giúp jQuery ghi đè thông tin dấu $ của Prototype. Tất nhiên khi có xung đột, giả sử bạn muốn sử dụng tính năng của dấu $ của Prototype thì sao, đa phần các thư viện đều cho phép bạn gọi dấu $ theo một cách thay thế khác, ví dụ:

$('a') // sử dụng dấu $
jQuery('a') // nếu $ đã bị "chiếm" thì vui lòng gọi theo cách này, kết quả vẫn như nhau

Ngoài ra, một số thư viện còn trang bị những tính năng "chống chiến tranh", nhằm sống chung với những thư viện khác

Sử dụng những plugin hỗ trợ khi cần thiết
Bạn đã chọn cho mình thư viện phù hợp và cũng đã chon ra một nhóm những plugin hay sử dụng, bạn cứ thế tham chiếu tất tần tật những plugin vào trang web, dù biết rằng ngay tại trang đó không sử dụng tới plugin này. Vì vậy chỉ nên dùng khi cần thiết, tránh tham chiếu quá nhiều sẽ làm ảnh hưởng đế tốc độ tải trang.

Cha không "đụng" mà con lại "đụng"
Có những lúc đoạn mã gốc của thư viện thì không đụng chạm với ai cả, không ảnh hưởng đến "hòa bình thế giới". Nhưng chính những "thằng con" plugin đôi khi lại gây ra "chiến tranh" không mong muốn, cho nên bạn cần phải "đọc kỹ hướng dẫn sử dụng trước khi dùng" của plugin để tránh những xung đột với thư viện khác. Trong trường hợp không tìm được cách giải quyết ổn thỏa bạn bắt buộc phải gỡ "đối tượng nguy hiểm" đó ra.

Những bài sau mình sẽ đi vào từng thư viện / framework để hướng dẫn cách sử dụng cơ bản, những thông tin tham khảo bổ ích