Linq2Js: Thực thi chậm trong Linq2Js

Đặc tính thực thi chậm trong Linq2Js giúp cho hệ thống tiết kiệm bộ nhớ khi ta chưa sử dụng kết quả, lấy ví dụ:

// Bước 1: Khởi tạo mảng
var numbers = [1, 2, 3, 4];
// Bước 2: Sắp xếp theo thứ tự giảm
var sortedNumbers = linq(numbers).desc();
// Bước 3: Thêm một phần tử mới vào mảng gốc
numbers.push(5);
// Bước 4: Xuất ra kết quả
sortedNumbers.alert();

Ở tại bước 2, nếu ngay lúc đó biểu thức linq thực thi và sắp xếp lại thứ mảng giảm dần là không cần thiết, vì ta chưa sử dụng đến kết quả sắp xếp đó, đến bước 3 ta thêm một phần tử vào mảng numbers thì linq vẫn chưa làm công việc của mình, chỉ khi ta gọi những hàm kết xuất như alert, array.. thì toàn bộ biểu thức mới được thực thi.

Theo như mình tham khảo một số thư viện khác, ngay tại bước 2 thì linq của họ đã thực thi và chuyển hóa thành một mảng số mới đã được sắp xếp, những thao tác sau đó với linq đều không có tác dụng.

Khắc phụ lỗi "rớt hàng", khi sử dụng những thẻ có thuộc tính float và clear

Giới thiệu
Ta có đoạn mã html sau

<style type="text/css">
    .page {width: 800px; margin: 0px auto; background: white; border: 1px solid silver;}
    .left-column {float: left; width: 200px; background: #eee;}
    .right-column {float: right; width: 200px; background: #eee;}
    .center-column {margin-left: 210px; margin-right: 210px; background: #eee;}
    .entry {background: #ddd; margin-top: 10px;}
    .entry .title {display: block;}
    .entry .image {float: left; width: 100px; height: 100px; border: 1px solid silver;}
</style>
<div class="page">
    <div class="left-column">
        Nội dung cột trái
    </div>
    <div class="right-column">
        Nội dung cột phải
    </div>
    <div class="center-column">
        Nội dung cột giữa
        <div class="entry">
            <a class="title">Tiêu đề</a>
            <a class="image"><span>Hình ảnh</span></a>
            <div class="summary">Nội dung sơ lược, nội dung sơ lược</div>
        </div>
        <div class="entry">
            <a class="title">Tiêu đề</a>
            <a class="image"><span>Hình ảnh</span></a>
            <div class="summary">Nội dung sơ lược, nội dung sơ lược</div>
        </div>
    </div>
</div>

Kết quả hiển thị:

Khắc phục lỗi double margin (bị nhân đôi khoảng cách) của một thẻ sử dụng float trên IE6

Giới thiệu
Khi tạo giao diện bằng thẻ DIV, đa phần chúng ta đều sử dụng float để canh chỉnh các cột, hoặc những box. Lỗi double margin là lỗi tạo nên một khoảng trống có kích thước bằng gấp đôi kích thước ta chỉ định, lấy ví dụ:

<style>
    body {margin: 0px; padding: 0px;}
    .wrapper1 {border: 5px solid red; float: left; width: 200px; margin: 20px;}
    .wrapper2 {border: 5px solid blue; float: right; width: 200px; margin: 20px;}
</style>
<div class="wrapper1">Nội dung bên trong</div>
<div class="wrapper2">Nội dung bên trong</div>

Trong trang html trên, ta có 2 class wrapper1 và wrapper2, đều sử dụng thuộc tính float là left và right, có margin là 20px. Khi hiển thị trên firefox:

 

Như bạn thấy, ở firefox hoặc những trình duyệt trừ IE6, kích thước vùng trống margin đúng bằng 20px. Nhưng khi ta duyệt bằng IE6:

Thì bỗng dưng IE6 "hào phóng" "khuyến mãi" cho ta thêm 20px nữa, đúng là "mua 1 tặng 1", lỗi này gây khó chịu cho người thiết kế giao diện html rất nhiều, vì mọi thành phần trong trang sẽ bị xáo trộn khi kích thước bị tăng lên đột ngột, ở đây chỉ là 20px thành 40px, nhưng nếu ta margin khoảng 100px thì sẽ được là 200px, một con số khủng khiếp đủ để làm biến dạng bộ mặt website.

Linq2Js: Một số phương thức thông dụng

var numbers = linq([10, 9, 8, 7, 6]);
numbers.alert('First number: ', 'first');
alert('First number: ' + numbers.first());
numbers.alert('Last number: ', 'last');
alert('Last number: ' + numbers.last());
numbers.alert('Second number: ', 'get', [1]);
alert('Second number: ' + numbers.get(1));
numbers.alert('Count: ', 'count');
numbers.desc().alert('Lowest number: ', 'first');
alert('Lowest number: ' + numbers.desc().first());
numbers.alert('Min: ', 'min');
numbers.concat([1, 2, 3]).alert();

Linq2Js: Sử dụng chuỗi những phương thức truy vấn

Để sử dụng liên tục những phương thức truy vấn ta cần nắm rõ kết quả trả về của một phương thức phải là đối tượng LINQ.
Ví dụ

linq([1, 2, 3, 4, 5]) // hàm linq trả về đối tượng LINQ chứa 1, 2, 3, 4 nên ta có thể gọi phương thức tiếp theo sau
linq([1, 2, 3, 4, 5]).odd() // và ta có thể tiếp tục vì odd() trả về đối tượng LINQ chứa danh sách những số l
linq([1, 2, 3, 4, 5]).odd().array() // nhưng đến đây ta không thể gọi tiếp phương thức của LINQ nữa, vì array() là phương thức trả về một mảng giá trị
// tương tự như vậy
linq([1, 2, 3, 4, 5]).odd().first() // trả về 1 nên chuỗi truy vấn sẽ kết thúc

Linq2Js: Tìm những phần tử có chứa một nội dung chỉ định

Để tìm những phần tử nào đó thỏa điều kiện cho trước ta sử dụng phương thức where.
Tìm những phần tử có chứa ký tự a

var names = ["Tom", "Dick", "Harry"];
// Cách viết thông thường với tham số where là một hàm dùng để kiểm tra
linq(names).where(function() { return this.indexOf('a') != -1; }).alert();
// Cách viết ngắn gọn
linq(names).where('this.indexOf("a") != -1').alert();
// Sử dụng phương thức contains
linq(names).contains('a').alert();

Linq2Js: Tìm tên có độ dài chỉ định

Chúng ta sử dụng đoạn mã sau để tìm những tên có độ dài lớn hơn hoặc bằng 4 ký tự

var names = ["Tom", "Dick", "Harry"];
linq(names).where('this.length >= 4').alert();

Linq2Js: Cú pháp Linq2Js

Khời tạo một đối tượng LINQ

linq([1, 2, 3, 4, 5]);

Hàm linq sẽ nhận những tham số dạng chuỗi, tập hợp, mảng để tạo thành đối tượng LINQ.

Những cú pháp khởi tạo khác
linq(array)
Tạo đối tượng LINQ chứa các phần tử của mảng array

linq(string)
Tạo đối tượng LINQ chứa mảng các ký của chuỗi string

linq(regex, string)
Tạo đối tượng LINQ chứa những kết quả tìm của biểu thực chính quy regex dựa trên chuỗi giá trị string

linq(number)
Tạo đối tượng LINQ chứa dãy số từ 0 đến number

linq(from, to)
Tạo đối tượng LINQ chứa dãy số từ from đến to

Sau khi khởi tạo được đối tượng LINQ ta có thể sử dụng những hàm truy vấn của nó để nhận được những kết quả như mong muốn.