Tổng hợp các javascript trick hữu ích cho Developer phần 2. Tiếp nói phần 1 hôm nay mình sẽ chia sẽ thêm về các tricks hay về javascript. Nội dung sẽ xoay quanh vấn đề Javascript nhằm giúp các bạn biết thêm những thủ thuật hay phục vụ trong quá trình phát triển ứng dụng web.

• Javascript Và Những Thủ Thuật Hay Dành Cho Developer (P1)
• Thủ thuật lập trình javascript bạn nên nhớ

1. Cách lấy tham số trên URL

Giả sử trong trường hợp thao tác với javascript. Chúng ta cần lấy params từ URL, chuyện sẽ quá đơn giản với lập trình phía server nhưng khi dùng với javascript chúng ta cần phải tùy chỉnh để có được giá trị mong muốn. Các bạn có thể tham khảo như sau:

[code language="js"]
    function getVariableFromUrl(variable)
    {
        var query = window.location.search.substring(1);
        var vars  = query.split('&');
        for (var i= 0;i < vars.length; i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
[/code]

Để sử dụng chúng ta gọi lại hàm như sau:

[code language="js"]
    //url: http://codevivu.com?name=longpham&job=deverloper
    console.log(getVariableFromUrl(name));
    console.log(getVariableFromUrl(job));
[/code]

2. Cách lấy ID Youtube video từ liên kết cho trước

Giả sử tôi có một liên kết dẫn đến một video trên Youtube như sau:

[code language="html"]
    // Example link:
    <a id="codevivu_youtube" href="https://www.youtube.com/watch?v=R6-NrXPfygI">Youtube link</a>

[/code]

Để lấy được video ID tôi sẽ viết như sau:

[code language="js"]
    var youtubeLink = document.getElementById('codevivu_youtube').href;
    var youtubeVideoKey = youtubeLink.substr(youtubeLink.lastIndexOf("v=") + 2, 11);
    // + 2 it's will skip params "v="
    // 11 it's key length
    // youtubeVideoKey will return "R6-NrXPfygI"
[/code]

3. htmlEntities trong javascript

htmlEntities có lẽ quá quen thuộc với lập trình phía server. Cụ thể htmlEntities() là một PHP function nó giúp cho chúng ta chuyển đổi các ký tự đặc biệt nhằm không cho trình duyệt đọc các kí tự này như HTML.

[code language="js"]
    function htmlEntities(str) {
        return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
    }
[/code]

4. Loại bỏ toàn bọ inline CSS bằng Javascript

Đôi khi bạn quá đau đầu vì tập tin CSS style bị đè vì viết quá nhiều inline CSS. Cách đơn giản để loại bỏ nó như sau:

[code language="js"]
    function removeStyle(all) {
          var i = all.length;
          var j, is_hidden;

          // Presentational attributes.
          var attr = [
            'align',
            'background',
            'bgcolor',
            'border',
            'cellpadding',
            'cellspacing',
            'color',
            'face',
            'height',
            'hspace',
            'marginheight',
            'marginwidth',
            'noshade',
            'nowrap',
            'valign',
            'vspace',
            'width',
            'vlink',
            'alink',
            'text',
            'link',
            'frame',
            'frameborder',
            'clear',
            'scrolling',
            'style'
          ];

          var attr_len = attr.length;

          while (i--) {
            is_hidden = (all[i].style.display === 'none');

            j = attr_len;

            while (j--) {
              all[i].removeAttribute(attr[j]);
            }

            // Re-hide display:none elements,
            // so they can be toggled via JS.
            if (is_hidden) {
              all[i].style.display = 'none';
              is_hidden = false;
            }
          }
    }
[/code]

Để sử dụng chúng ta gọi lại hàm như sau:

[code language="js"]
    var all = document.getElementsByTagName('*');
    removeStyle(all);
[/code]

Bên cạnh đó việc dùng select tất cả sẽ làm giảm performance của trang. Nên chúng ta nên select element cụ thể thì việc thự thi sẽ thanh và ko ảnh hướng qua lớn tới performance của trang :

[code language="js"]
    var element = document.getElementById('foo').getElementsByTagName('bar');
    removeStyle(element);
[/code]

Phần 2 của javascript và những thủ thuật mình sẽ kết thúc tại đây. Nếu thấy bổ ích hãy like và share cho bạn bè. Chúc các bạn thành công !