Javascript Và Những Thủ Thuật Hay Dành Cho Developer (P2)

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:

    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);
    }
Để sử dụng chúng ta gọi lại hàm như sau:
    //url: https://codevivu.com?name=longpham&job=deverloper
    console.log(getVariableFromUrl(name));
    console.log(getVariableFromUrl(job));
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:
    // Example link:
    <a id="codevivu_youtube" href="https://www.youtube.com/watch?v=R6-NrXPfygI">Youtube link</a>

Để lấy được video ID tôi sẽ viết như sau:
    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"
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.
    function htmlEntities(str) {
        return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
    }
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:
    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;
            }
          }
    }
Để sử dụng chúng ta gọi lại hàm như sau:
    var all = document.getElementsByTagName('*');
    removeStyle(all);
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 :
    var element = document.getElementById('foo').getElementsByTagName('bar');
    removeStyle(element);
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 !