JAVASCRIPT và những thủ thuật hay dành cho developer
1. Back button trong javascript Back button không quá xa la 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: ...
1. Back button trong javascript
Back button không quá xa la 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:
|
1 2 3 |
<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 chac đô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 phụ cho việc này tự động trách viết lại code thì sẽ như thế nào. Mình sẽ chia sẽ cho các bạn ngay thôi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 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 ý
|
1 2 3 4 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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 cho hàm. trong do tham số chúng ta truyền vào chủ yếu là dường dẫn cac tập tin script.
|
1 2 3 4 5 6 7 8 9 10 |
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 dú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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 ma Javascript cung cấp.
|
1 2 3 |
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 va ổ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 đay sẽ giúp bạn.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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. Chúc các bạn thành công !
Techtalk Via Codevivu
