Javascripts Tips – Những điều có thể hay trong JS (full)

1344

Xem phần 1 tại đây

Những điều có thể bạn đã biết hoặc chưa, những kinh nghiệm của mình chia sẽ khi lập trình Javascript (ep2). Các bạn có thể xem phần 1 tại đây.

Tạo 1 plugin bằng javascript hoặc xài jquery

Cái này thì những bạn nào hay xài libary của javascript thì hay gặp cái này, thật ra cách tạo 1 cái plugin hay 1 component mà xài nhiều lần với các config khác nhau trong 1 dự án lớn thì khá là cần thiết cũng như code rõ ràng sạch đẹp, clearly, usable, maintainable,… các kiểu. Mình sẽ code để tạo một plugin đơn giản cho việc tạo một grid đơn giản kiểu kiểu như kendo Grid. Mình sẽ viết một cách đơn giản nhất, tập trung để những bạn chưa biết format của một plugin hay component.Và cho cái nhìn sơ qua để dễ hiểu hơn.

Thường thì một component sẽ có cách khai báo như này.

Bắt đầu nào, nếu mà component của bạn sẽ là một plugin của jQuery thì bạn sẽ xài cú pháp được jQuery cung cấp $.fn.yourGrid = function(settings) (yourGrid là tên component của bạn), còn nếu bạn chỉ sài javascript thuần thì chỉ cần là một function bình thường thôi function YourGrid(settings), bạn cũng có thể đưa nó vào một module nào đó của bạn yourModule.youGrid = function(settings).Ở đây mình follow theo plugin của jQuery nhé.

Xác định format component định viết. Mình sẽ viết theo cái kiểu này.

Code thôi nào, mình show code mình rồi giải thích sơ qua nhé, nó cũng đơn giản, đọc qua là hiểu ngay ý mà :3.

OK mong là những dòng giải thích của mình dễ hiểu (y), run thử nào.

Thật ra nói về component grid thì nó là một trong những component lắm thứ nhất quả đất, nhiêu đây khá là cơ bản về nó, nhưng từ đây bạn có thể phát triển thêm tính năng cho nó, những tính năng hay ho có thể được tạo ra từ bạn. Nhiều khi cần một cái hàm tạo grid đơn giản thôi mà phải down những library to tướng dư thừa cũng ko đc hay lắm, đơn giản mà cứ nhỏ nhỏ vừa đủ xài và biết 100% về nó vẫn là phê hơn :D. Còn những feature lớn cần rất nhiều tính năng phức tạp viết lại tốn time thì cứ xài library nhé, hiểu thì modify lại ko có gì là khó cả ;).

Define Enum trong javascript (same same Flags in C#)

Đa số các bạn chắc đều biết kiểu Enum nhỉ, mình viết cái này lấy cảm hứng từ [Flags]bên C# khi đọc code của ai đó mà quên mất rồi :D. Thì trong lập trình có nhiều khi chúng ta cần kiểm tra hai chiều (Flags trong C# là 1 chiều nhé) ví dụ như là:

Thì để tìm những giá trị như VIETNAM, USA, LAOS,… mình cần một hàm đưa vào một id và sau đó tìm ra một value tương ứng, cũng như ngược lại, nhập cái giá trị value để tìm lại id. Thử nào.

Giờ thì test nào.

Mình thêm một cái object Foods nữa là để thể hiện cái hàm _enum nó sẽ được khởi tạo mỗi lần user instance hàm Flags nên sẽ không bị override lên nhau thôi. Với lại dù _enum là 1 function không có nghĩa là nó không có quyền được có property, các bạn biết đó function bản chất cũng là object mà thôi.

U5HxMfv

(1) __proto__ của nó là function nhưng nó kế thừa prototype (2) từ object nên nó có tất cả các thứ của object.

Và có một điều nữa là là object ko còn kết thừa bất kì một prototype nào nữa, nó là cái root của mọi thứ rầu ;).

.html() và array trong jQuery

Không biết cái này nhiều bạn biết không nhỉ? Đọc trên documents của jQuery mình cũng ko thấy nói, chỉ thử thôi coi nó có support không thôi, trong đầu cũng nghỉ chắc nó phải support chứ nhỉ, cuối cùng thì nó có support :D.

Bạn cũng có thể thêm một list con cho một element theo trình tự trái qua phải của 1 array bằng cách này.

Tạo một collection jQuery

Từ một list data bạn có thể tạo ra danh sách các jQuery object bằng cách dùng hàmmap của javascript. Nó cũng khá gọn gàng cho công việc tạo một list con, mình thấy nhiều bạn cộng chuỗi nhìn code không được đẹp lắm.

Techtalk via jinhduong

CHIA SẺ