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

Tổng hợp các javascript trick hữu ích cho Developer. Chào các bạn hôm nay mình muốn chia sẻ cho các những trick 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 cho developer (p1)

1. Back button trong javascript

Back button không quá xa lạ khi mà trình duyệt nào cũng tích hợp sẳn. Nhưng nếu nó được thiết lập ngay trong trang của bạn nó sẽ giúp ích rất nhiều trong việc tăng sự tương tác của người dùng. Cú pháp rất đơn giản các bạn hãy xem qua ví dụ sao:

        <input type="button" value="Back to your page" onclick="history.back(-1)" />

2 . Tạo chức năng tự động thêm class

Trong qua trình xây dựng ứng dụng web chắc đôi lần chúng ta sẽ xử lý các sự kiện click và thêm các class váo element khác nhau. Nhằm thay đổi tương tác trong các element. Việc viết riêng một chức năng phục vụ cho việc này tự động tránh viết lại code thì sẽ như thế nào. Mình sẽ chia sẽ cho các bạn ngay thôi.

        // Hàm xử lý thêm class
        function addClass(id, new_class){
            var i, n=0;

            new_class = new_class.split(",");

            for(i = 0; i< new_class.length; i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
            }

            return n;
        }

Trên là hàm mình xây dựng dùng cho việc xử lý thêm class. bây chúng ta chỉ cần gọi khi cần dùng để thêm bất cứ class nào cho element tùy ý

        <div id="codevivu" class="great "></div>
        <button onclick="addClass('codevivu', 'like')">click me to add new class</button>

3. Đồng bộ load script file

Đây là cách mình nghĩ sẽ giúp ích cho các bạn khá nhiều trong việc tăng performance cho ứng dụng web. Việc đồng bộ tải các tập tin javascript sẽ giúp giảm thời gian tải trang.

        var jsLoader = function () { }
        jsLoader.prototype = {
            require: function (scripts, callback) {
                this.loadCount      = 0;
                this.totalRequired  = scripts.length;
                this.callback       = callback;

                for (var i = 0; i < scripts.length; i++) {
                    this.writeScript(scripts[i]);
                }
            },
            loaded: function (evt) {
                this.loadCount++;

                if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
            },
            writeScript: function (src) {
                var self = this;
                var s = document.createElement('script');
                s.type = "text/javascript";
                s.async = true;
                s.src = src;
                s.addEventListener('load', function (e) { self.loaded(e); }, false);
                var head = document.getElementsByTagName('head')[0];
                head.appendChild(s);
            }
        }

Sử dụng ra sao. Việc sử dụng khá đơn giản bạn chỉ cần gọi lại hàm truyền tham số cho hàm. Trong đó tham số chúng ta truyền vào chủ yếu là đường dẫn các tập tin script.

        var jsLoader = new jsLoader();
        jsLoader.require([
            "path/script-1.js",
            "path/script-2.js"], 
            function() {
                // Callback
                console.log('Load successfully');
            });

4. Kiểm tra font chữ trong trang.

Để biết trong trang hiện tại có đang dùng đúng phong chử hay không. hàm javascript kiểm tra font chử sao đây sẽ giúp bạn việc này.


        function checkFont(strFamily) {
          var objDiv = document.createElement('div');

          objDiv.style.fontFamily = strFamily;
          objDiv.appendChild(document.createTextNode('FONT TEST'));

          if (window.getComputedStyle) {
              return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
          }

          return objDiv.currentStyle.fontFamily === strFamily;
        }

        //Call function 

        var isFont = checkFont('icomoon');

5. Lấy page hiện tại với Javascript

Lấy page hiện tại với Javascript cũng khá dễ dàng. cúng ta có thể cùng hàm location.href mà Javascript cung cấp.

        location.href.split('/').pop();

6. Hàm Kiểm tra trình duyệt có phải là IE hay không

Trong ứng dụng web đôi khi không phải trình duyệt nào củng hoạt động tốt và ổn định trong đó có IE. IE một trong những trình duyệt gây đau đầu nhất cho Developer. Vì thế để cho ứng dụng chạy tốt trên mọi trình duyệt nhất là IE chúng ta cần phải xác định được người dùng đang dùng trình duyệt nào thì hàm kiểm tra trình duyệt có phải là IE sao đây sẽ giúp bạn.

        if (https://cdn.css-tricks.com/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
         var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
            if (ieversion>=8)
                document.write("You're using IE8 or above");
            else if (ieversion>=7)
                document.write("You're using IE7.x");
            else if (ieversion>=6)
                document.write("You're using IE6.x");
            else if (ieversion>=5)
                document.write("You're using IE5.x");
            }
        else

         document.write("n/a");

Phần 1 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 !