Hướng dẫn how do you create a comment section in javascript? - làm thế nào để bạn tạo một phần bình luận trong javascript?

Ảnh của Brett Jordan trên unplash

Một ngày mới, một tuyên bố vấn đề mới! Hôm nay chúng tôi sẽ tạo một phần bình luận bằng cách sử dụng Pure Vanilla JavaScript và HTML. Nhiều công ty như Swiggy, Uber, Flipkart, OLA, CRED, v.v ... Sử dụng các vòng mã hóa máy làm bộ lọc chính của họ để loại bỏ các ứng cử viên. Và bất kỳ vòng mã hóa máy nào cũng không cho phép bạn sử dụng các phụ thuộc hoặc thư viện như React, Lodash, JQuery, Bootstrap, v.v. Do đó, bạn nên giải quyết một số vấn đề khi sử dụng vani JavaScript và HTML để cải thiện tốc độ của bạn, có được sự thoải mái xung quanh các dòng này và Cuối cùng, ace vòng đặc biệt này.

Như tôi luôn nói, chia vấn đề của bạn thành các tập hợp con, sau đó giải quyết từng tập hợp con một.

TẬP HỢP CON -

1. Trang luôn được khởi chạy với một Textarea tĩnh ở phía trên và một nút Thêm cho phép người dùng thêm nhận xét.
2. Mỗi bình luận được thêm vào sẽ có một câu trả lời, một nút thích và một nút xóa.
3. Nút trả lời sẽ khởi chạy Textarea mới bên dưới bình luận của cha mẹ, cho phép người dùng thêm trả lời hoặc hủy bỏ bổ sung.
4. Một nút thích sẽ tiếp tục tăng số lượng lượt thích trên bình luận tương ứng ở mỗi lần nhấp.
5. Một nút xóa sẽ xóa toàn bộ chuỗi bình luận.
6. Nhận xét có thể được chuỗi giống như một cấu trúc giống như cây trong đó mọi bình luận của trẻ sẽ được căn chỉnh một số pixel còn lại để nhận xét của cha mẹ.
7. Nhận xét Một khi được thêm vào nên được duy trì trên trang tải lại trang-đây là một cải tiến, nó có thể được tham dự cuối cùng nếu bạn có thời gian.

Trước khi bạn nhảy vào mã, hãy lùi lại trong vài phút, nhìn vào các yêu cầu của bạn và đánh giá phần nào có thể sử dụng cùng một đoạn mã. Hãy nhớ rằng câu nói của Google Mã tốt nhất không phải là mã. Don lồng lấy điều này theo nghĩa đen. Cụm từ này đang cố gắng nói với chúng tôi rằng chất lượng của một mã được xác định bằng cách tái sử dụng và nhỏ gọn. Và chúng tôi muốn cung cấp chất lượng cao, don don chúng tôi?

Một yếu tố mà chúng tôi có thể đánh giá chỉ bằng cách xem xét yêu cầu của chúng tôi là các bình luận được tạo ra trong suốt sẽ trông giống nhau với một biên độ khác với các bình luận của trẻ em. Do đó, chúng ta có thể có một phần chức năng có thể tái sử dụng để xử lý việc tạo ra các bình luận.

Hãy để mã hóa cùng với sau đó!

Textarea tĩnh ở đầu và một nút để thêm nhận xét -

    Add your comment below-
    
    Add Comment
    

Chúng tôi bắt đầu mã bằng cách thêm Textarea ở đầu trang để chấp nhận nhận xét mới và nút Thêm để thêm nhận xét mới trong phần của chúng tôi.

Tôi cũng đã tạo ra một div - allComments trong đó tôi có kế hoạch nối thêm tất cả các nhận xét được thêm vào trang của tôi.

Thêm nhận xét một cách linh hoạt -

const commentContainer = document.getElementById('allComments');
document.getElementById('addComments').addEventListener('click', function (ev) {
   addComment(ev);
});
function addComment(ev) {
    let commentText, wrapDiv;
    const textBox = document.createElement('div');
    const replyButton = document.createElement('button');
    replyButton.className = 'reply';
    replyButton.innerHTML = 'Reply';
    const likeButton = document.createElement('button');
    likeButton.innerHTML = 'Like';
    likeButton.className = 'likeComment';
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.className = 'deleteComment';
    const wrapDiv = document.createElement('div');
    wrapDiv.className = 'wrapper';
    wrapDiv.style.marginLeft = 0;
    commentText = document.getElementById('newComment').value;
    document.getElementById('newComment').value = '';
    textBox.innerHTML = commentText;
    wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
    commentContainer.appendChild(wrapDiv);
    }

Trong mã ở trên, trước tiên chúng tôi đang thêm trình nghe sự kiện vào nút Thêm bình luận. Người nghe thực hiện một cuộc gọi đến addComment Function. Đó là một thực tiễn tốt để xác định các chức năng của bạn với các tên tự giải thích. Luôn luôn thêm khả năng đọc nhiều hơn vào mã của bạn.

Trong addComment Function, chúng tôi đang tạo nhận xét mà sau này sẽ được thêm vào trang của chúng tôi. Chúng tôi chọn văn bản nhận xét được nhập ở trên trong TextArea, nối nó vào Div mới được tạo của chúng tôi. Chúng tôi cũng tạo các nút trả lời, như và xóa các nút cho nhận xét mới được tạo của chúng tôi. Chúng tôi bọc tất cả các yếu tố trong một Div mới, sau đó được thêm vào allComments DIV. Ngoài ra, việc đưa ra giả định này là hợp lệ, rằng một khi nhận xét mới được thêm vào phần bên dưới, TextArea sẽ trống trở lại để các nhận xét mới được nhập. Do đó, chúng tôi xóa văn bản được nhập vào Textarea ở trên.

Xử lý các nút trả lời, như và xóa -

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}document.getElementById('allComments').addEventListener('click', function (e) {
    if (hasClass(e.target, 'reply')) {
        const parentDiv = e.target.parentElement;
        const wrapDiv = document.createElement('div');
        wrapDiv.style.marginLeft = (Number.parseInt(parentDiv.style.marginLeft) + 15).toString() + 'px';
        wrapDiv.className = 'wrapper';
        const textArea = document.createElement('textarea');
        textArea.style.marginRight = '20px';
        const addButton = document.createElement('button');
        addButton.className = 'addReply';
        addButton.innerHTML = 'Add';
        const cancelButton = document.createElement('button');
        cancelButton.innerHTML = 'Cancel';
        cancelButton.className='cancelReply';
        wrapDiv.append(textArea, addButton, cancelButton);
        parentDiv.appendChild(wrapDiv);
    } else if(hasClass(e.target, 'addReply')) {
        addComment(e);
    } else if(hasClass(e.target, 'likeComment')) {
         const likeBtnValue = e.target.innerHTML;
         e.target.innerHTML = likeBtnValue !== 'Like' ? Number.parseInt(likeBtnValue) + 1 : 1;
    } else if(hasClass(e.target, 'cancelReply')) {
        e.target.parentElement.innerHTML = '';
    } else if(hasClass(e.target, 'deleteComment')) {
        e.target.parentElement.remove();
    }
});

Một cách mô -đun để thêm người nghe sự kiện khi nhấp vào các nút trả lời, thích và xóa cho mỗi nhận xét.

Xác định sự kiện để bắt bất kỳ nhấp chuột nào bên trong Div chính allcomments. Khi sự kiện bị bắt, bạn có thể tìm thấy phần tử đã kích hoạt sự kiện bằng cách kiểm tra lớp được thêm vào phần tử đó. Thay vì thực hiện phương pháp này, bạn cũng có thể xác định các sự kiện riêng lẻ để trả lời, xóa và thích các nút ngay khi bạn đang tạo chúng trong

const commentContainer = document.getElementById('allComments');
document.getElementById('addComments').addEventListener('click', function (ev) {
   addComment(ev);
});
function addComment(ev) {
    let commentText, wrapDiv;
    const textBox = document.createElement('div');
    const replyButton = document.createElement('button');
    replyButton.className = 'reply';
    replyButton.innerHTML = 'Reply';
    const likeButton = document.createElement('button');
    likeButton.innerHTML = 'Like';
    likeButton.className = 'likeComment';
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.className = 'deleteComment';
    const wrapDiv = document.createElement('div');
    wrapDiv.className = 'wrapper';
    wrapDiv.style.marginLeft = 0;
    commentText = document.getElementById('newComment').value;
    document.getElementById('newComment').value = '';
    textBox.innerHTML = commentText;
    wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
    commentContainer.appendChild(wrapDiv);
    }

0function. Nhưng chúng ta có thực sự cần một loạt các trình xử lý sự kiện khi chúng ta có thể đạt được hành vi tương tự từ một?

Khi nhấp vào nút Thêm trả lời, tôi đang sử dụng lại chức năng bổ sung. Mặc dù, chúng ta phải xử lý điều này trong chức năng vì hiện tại chỉ biết cách nối các bình luận vào thùng chứa bình luận chính.

function addComment(ev) {
    let commentText, wrapDiv;
    const textBox = document.createElement('div');
    const replyButton = document.createElement('button');
    replyButton.className = 'reply';
    replyButton.innerHTML = 'Reply';
    const likeButton = document.createElement('button');
    likeButton.innerHTML = 'Like';
    likeButton.className = 'likeComment';
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.className = 'deleteComment';
    if(hasClass(ev.target.parentElement, 'container')) {
        const wrapDiv = document.createElement('div');
        wrapDiv.className = 'wrapper';
        wrapDiv.style.marginLeft = 0;
        commentText = document.getElementById('comment').value;
        document.getElementById('comment').value = '';
        textBox.innerHTML = commentText;
        wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
        commentContainer.appendChild(wrapDiv);
    } else {
        wrapDiv = ev.target.parentElement;
        commentText = ev.target.parentElement.firstElementChild.value;
        textBox.innerHTML = commentText;
        wrapDiv.innerHTML = '';
        wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
    }
  }

Đây là cách chức năng

const commentContainer = document.getElementById('allComments');
document.getElementById('addComments').addEventListener('click', function (ev) {
   addComment(ev);
});
function addComment(ev) {
    let commentText, wrapDiv;
    const textBox = document.createElement('div');
    const replyButton = document.createElement('button');
    replyButton.className = 'reply';
    replyButton.innerHTML = 'Reply';
    const likeButton = document.createElement('button');
    likeButton.innerHTML = 'Like';
    likeButton.className = 'likeComment';
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.className = 'deleteComment';
    const wrapDiv = document.createElement('div');
    wrapDiv.className = 'wrapper';
    wrapDiv.style.marginLeft = 0;
    commentText = document.getElementById('newComment').value;
    document.getElementById('newComment').value = '';
    textBox.innerHTML = commentText;
    wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
    commentContainer.appendChild(wrapDiv);
    }

1 sửa đổi của chúng tôi sẽ trông như thế nào. Bây giờ nó chăm sóc để thêm nhận xét cho cả container chính hoặc chuỗi nhận xét. Và có thể tái sử dụng nó là!

Tải lại các bình luận -

Phần bình luận của chúng tôi đã khá sẵn sàng. Chỉ là bit cuối cùng của nó là để được thêm vào. Một phần bình luận phải được duy trì trên trang làm mới vì các bình luận không được liên quan chỉ cho một phiên, mà mãi mãi cho đến khi bị xóa.

Chúng tôi sẽ sử dụng sức mạnh của trình duyệt LocalStorage để đạt được điều này. Bộ phận địa phương vẫn tồn tại dữ liệu của nó cho đến khi xóa hoặc loại bỏ thủ công.

Chúng tôi có thể lưu trữ dữ liệu ở bất kỳ định dạng nào mà chúng tôi muốn phù hợp với nhu cầu của mình tốt nhất. Trong trường hợp trên, chúng ta có thể đi trước và chỉ lưu trữ toàn bộ mẫu. Một cách dễ dàng để tải lại toàn bộ phần một lần nữa.

function setOnLocalStorage () {
    localStorage.setItem('template', document.getElementById('allComments').innerHTML);
}

Hàm ở trên sẽ đặt

const commentContainer = document.getElementById('allComments');
document.getElementById('addComments').addEventListener('click', function (ev) {
   addComment(ev);
});
function addComment(ev) {
    let commentText, wrapDiv;
    const textBox = document.createElement('div');
    const replyButton = document.createElement('button');
    replyButton.className = 'reply';
    replyButton.innerHTML = 'Reply';
    const likeButton = document.createElement('button');
    likeButton.innerHTML = 'Like';
    likeButton.className = 'likeComment';
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.className = 'deleteComment';
    const wrapDiv = document.createElement('div');
    wrapDiv.className = 'wrapper';
    wrapDiv.style.marginLeft = 0;
    commentText = document.getElementById('newComment').value;
    document.getElementById('newComment').value = '';
    textBox.innerHTML = commentText;
    wrapDiv.append(textBox, replyButton, likeButton, deleteButton);
    commentContainer.appendChild(wrapDiv);



 }

2Key trong bản sao cục bộ của bạn với bên trong của allComments DIV. Hàm này nên được gọi mỗi khi bạn thêm một nhận xét mới vào phần, hãy thêm trả lời cho một bình luận, như nhận xét hoặc xóa bình luận.

Và ở đó bạn đi! Phần bình luận được cá nhân hóa của bạn đã sẵn sàng và tất cả các bạn đã sẵn sàng sống trong một thế giới ảo của riêng bạn. 😆

Nhưng don dừng lại rồi! Bạn đã thực hiện một hướng dẫn viên đã giảm bớt hành trình của bạn cho đến nay. Và bây giờ, thời gian để bạn đi bộ một mình, khám phá cảnh quan và có được cái nhìn sâu sắc hơn.

Tôi có một số nhiệm vụ cho bạn mà bạn có thể tự mình thực hiện để cảm thấy tự tin hơn về các kỹ năng của bạn.

1. Thêm thuộc tính tên người dùng vào các bình luận (chứa một số tên giả của người dùng đang đưa ra nhận xét).
2. Nút Like hiện có một triển khai đơn giản. Nó sẽ hiển thị 1 lượt thích, 2 lượt thích và như vậy thay vì 1, 2, 3 về mức tăng của lượt thích.
3. Cho phép người dùng chỉnh sửa nhận xét hiện có.
4. Thêm một thuộc tính được đăng vào mỗi nhận xét hiển thị ngày và giờ được chỉnh sửa/đăng lần cuối.
5. Một cách để mở rộng và thu gọn nhận xét của cha mẹ (thông qua Accordian) hoặc bất kỳ cách nào tốt hơn nếu có thể.
6. Giữ nút Thêm/Trả lời bị vô hiệu hóa nếu TextArea mục tiêu trống, điều này sẽ hạn chế người dùng thêm các nhận xét trống.

Khi bạn đã hoàn thành thêm các tính năng này vào dự án của mình, bạn chắc chắn sẽ cảm thấy tự tin hơn về sự hiểu biết của bạn về cách tiếp cận chúng tôi đã thực hiện ở đây.

Tiếp tục thực hành và cảm nhận sự khác biệt của chính mình. :)

Để biết đầy đủ mã, vui lòng truy cập liên kết GitHub đã cho-https://github.com/salonimishra/comment-st

Thêm nội dung tại Plainenglish.ioplainenglish.io

Làm thế nào để bạn viết một phần của nhận xét mã?

Làm thế nào để bạn thực hiện một hộp bình luận?

Làm thế nào để bạn tạo nhận xét trong HTML và JavaScript?

Làm thế nào để bạn tạo một phần bình luận trong HTML?