Tài liệu.write trong javascript

Question

Trên mạng tràn ngập đủ loại thông tin và các hướng dẫn về JavaScript cũng rất nhiều, trong đó bao gồm nhiều thông tin cũ. Bài viết này tổng hợp những khác biệt giữa cách viết Javascript cũ và mới

Bài viết sử dụng các hướng dẫn đến ECMAScript 5và có giới thiệu một số tính năng mới của ES6(ES2015), ES7

Tác giả cố gắng viết một cách dễ hiểu nhất. Những ai muốn tìm hiểu sâu có thể tham khảo thông số kỹ thuật của ECMAScript hoặc MDN

Các ví dụ trong bài sử dụng cho các trình duyệt tương ứng với ECMAScript 5 tức là không áp dụng cho IE8 trở xuống

lục mục

Phần 1. Tổng hợp các điểm mới có thể thực hiện ngay

Phần 2. Làm quen với CommonJS module

Phần 3. Master Browserify

Phần 4. Tự động hóa xử lý sử dụng Gulp

Phần 5. Nhớ cú pháp của ES2015

Phần 1. Tổng hợp các điểm mới có thể thực hiện ngay

1. Use HTML5

HTML đã được cải thiện rất nhiều lần trong 20 năm nay. Các phiên bản HTML 4. 01 và XHTML 1. 0 là những phiên bản có nhiều bất cập đã tồn tại trong thời gian dài, thậm chí đến nay vẫn còn sót lại trên mạng. Năm 2014, HTML5 được công bố và được khuyến khích sử dụng cho các trang Web hiện nay

Nhìn vào đoạn định nghĩa DOCTYPE HTML, ta có thể biết phiên bản nào đang được sử dụng

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


DOCTYPE html>

Cách viết đơn giản nhất là HTML5. Đơn giản là tốt nhất

Bạn hãy rèn thói quen khi bắt đầu nhìn vào mã nguồn HTML, kiểm tra xem có phải đang sử dụng HTML5 không nhé

2. Không sử dụng tài liệu. viết

HTML5 không khuyến khích sử dụng tài liệu. write(or writeln)

Các bạn có thể tham khảo tại

Lý do nên từ bỏ là do debug rất khó

Please try to use innerHTML instead

Mã sử dụng tài liệu. viết

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
</head>
<body>
    <h1>Show today's date</h1>
    <script>
        var date = new Date();
        var year = date.getYear();
        var month = date.getMonth()+1;
        var day = date.getDate();

        if(year < 1900) year += 1900;

        document.write("Today is " + year + "/" + month + "/" + day + "
");
    </script>
</body>
</html>

Mã cải tiến ( hoạt động tương tự)

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.innerHTML += "Today is " + year + "/" + month + "/" + day + "
";
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

Ở đây có sử dụng addEventListener, sẽ giải thích ở phần sau

Sử dụng insertAdjacentHTML để tăng tốc

Sử dụng innerHTML sẽ cho tốc độ thấp

insertAdjacentHTML sẽ cho tốc độ cao hơn

Mã hiện đại tốc độ

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

Các bạn có thể tham khảo insertAdjacentHTML ở phần tử. chènHTML liền kề - MDN

3. Not used on○○ thùng rác

Đặc biệt không sử dụng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.innerHTML += "Today is " + year + "/" + month + "/" + day + "
";
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

8

Khi người dùng thực hiện bất kỳ hành động nào thì hệ thống cần phải bắt được sự kiện đó bằng cách

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.innerHTML += "Today is " + year + "/" + month + "/" + day + "
";
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

9 hoặc

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

0

Vấn đề của on○○ là tối đa chỉ có thể đăng ký được một phương pháp

Đăng ký sự kiện onload

// Alert này bị bỏ qua
window.onload = function(){
    alert("Finish load！");
};

// Chỉ có alert này được thực hiện
window.onload = function(){
    alert("It overrided the alert before");
};

Như thế có thể có người nghĩ là thường thì ghi đè cũng được nhưng để làm được thế thì chỉ có trường hợp một người viết mã từ đầu đến cuối, hiểu được tất cả các sự kiện của mã mới chắc chắn được

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

1 đã được sinh ra để giải quyết vấn đề này. Thay vì gán thì chuyển sang chức năng đăng ký. Thực hiện chức năng theo thứ tự đăng ký

//addEventListener
// Thực hiện đầu tiên
window.addEventListener("load",function(eve){
    alert("Finish load！");
},false);

// Thực hiện tiếp sau đó
window.addEventListener("load",function(eve){
    alert("After finishing load!");
},false);

AttachEvent Các IE cũ không dùng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

2 mà dùng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

3 nhưng IE cũ gần như không còn nên yên tâm dùng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

2

Ngoài ra có thể dùng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

5 để thay thế cho

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.innerHTML += "Today is " + year + "/" + month + "/" + day + "
";
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

8

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        // Đăng ký event bằng load
        window.addEventListener("load",function(){
            var $text = document.getElementById("text");
            alert("onload: Tag content is " + $text.innerHTML);
        },false);

        // Đăng ký event bằng DOMContentLoaded
        document.addEventListener("DOMContentLoaded",function(eve){
            var $text = document.getElementById("text");
            alert("DOMContentLoaded: Tag content is " + $text.innerHTML);
        },false);
    </script>
</head>
<body>
    <p id="text">Test</p>
    <div>
        <img src="test.png">
    </div>
</body>
</html>

Sự kiện

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

7 được chạy sau khi HTML được tải đầy đủ còn

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
        },false);
    </script>
</head>
<body>
    <h1>Show today's date</h1>
</body>
</html>

5 được chạy sau khi kết thúc quá trình phân tích cấu trúc của HTML tức là khi có thể sử dụng DOM được chạy nên nhanh hơn nhiều

Javascript sử dụng cho trang Web hầu hết các câu trả lời được yêu cầu sau khi phân tích DOM nên khuyến khích sử dụng

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

5

Tuy nhiên,

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Omit -->
    <script>
        document.addEventListener("DOMContentLoaded",function(eve){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            document.body.insertAdjacentHTML("beforeend", "Today is" + year + "/" + month + "/" + day + "
");
},false);
</script>
</head>
<body>
<h1>Show today's date</h1>
</body>
</html>

5 được gọi trước khi thu được chiều ngang của ảnh nên khi chỉnh sửa bố cục theo chiều rộng của ảnh thì không sử dụng

programming javascript

Tài liệu.write trong javascript

lục mục

Phần 1. Tổng hợp các điểm mới có thể thực hiện ngay

1. Use HTML5

2. Không sử dụng tài liệu. viết

3. Not used on○○ thùng rác

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội