Mã rõ ràng JavaScript

Question

Bộ. nguyên mẫu. xa lạ()

Phương thức

<input onfocus=this.value=''>

9 xóa tất cả các phần tử khỏi đối tượng

<button onclick="document.getElementById('InputID').value = ''>

0

Nội dung chính Show

Giá trị trả về
Sử dụng phương thức clear()
thông số kỹ thuật
Tính tương thích của trình duyệt web
Tìm thấy một vấn đề với trang này?
đầu vào rõ ràng JavaScript
Không thêm các từ không cần thiết vào tên biến
Không thực thi nhu cầu ghi nhớ ngữ cảnh biến
Không thêm ngữ cảnh không cần thiết
Sử dụng cùng một từ vựng cho cùng một loại biến
Tránh một số lượng lớn các đối số
Sử dụng đối số mặc định thay vì điều kiện
Tránh thực hiện nhiều hành động trong một chức năng
Sử dụng 'let name;let product;8để đặt các đối tượng mặc định
Không sử dụng cờ làm tham số vì chúng cho bạn biết rằng chức năng đang hoạt động nhiều hơn mức cần thiết
Đừng gây ô nhiễm Globals
Sử dụng tốc ký có điều kiện
Tránh điều kiện bất cứ khi nào có thể
Sử dụng chuỗi phương pháp
Làm cách nào để xóa nút trong JavaScript?
Làm cách nào để làm trống bộ trong js?

Thử nó

cú pháp

clear()

Giá trị trả về

<button onclick="document.getElementById('InputID').value = ''>

1

ví dụ

Sử dụng phương thức clear()

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

thông số kỹ thuật

Thông số kỹ thuật Đặc tả ngôn ngữ ECMAScript
# sec-set. nguyên mẫu. xa lạ

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Xem thêm

<button onclick="document.getElementById('InputID').value = ''>

0

<button onclick="document.getElementById('InputID').value = ''>

3

Tìm thấy một vấn đề với trang này?

Chỉnh sửa trên GitHub
Nguồn trên GitHub
Báo cáo sự cố với nội dung này trên GitHub
Bạn muốn tự khắc phục sự cố?

Sửa đổi lần cuối. Ngày 13 tháng 12 năm 2022, bởi những người đóng góp MDN

Bạn có thể xóa trường nhập bằng onFocus hoặc bằng Nút trong JavaScript. Chỉ cần đặt thuộc tính onfocus thành NULL bằng cách này. giá trị

<input onfocus=this.value=''>

Hoặc Xóa đầu vào với sự trợ giúp của nút

<button onclick="document.getElementById('InputID').value = ''>

đầu vào rõ ràng JavaScript

Mã ví dụ đơn giản

<!DOCTYPE html>
<html>
<body>

    <input type="text" onfocus="this.value=''" value="Click here to clear">
</body>

</html>

đầu ra

Sử dụng nút

<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" value="txt" id="myInput">

Sử dụng JavaScript

Chỉ xóa nếu giá trị = exemplo@exemplo. com

<script type="text/javascript">
    function clearThis(target) {
        if (target.value == '[email protected]') {
            target.value = "";
        }
    }
</script>

<input type="text" name="email" value="[email protected]" size="30" onfocus="clearThis(this)">

Hãy bình luận nếu bạn có bất kỳ nghi ngờ hoặc đề xuất nào về mã thẻ đầu vào Js HTML này

Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome
hệ điều hành. cửa sổ 10
Mã số. Phiên bản HTML5

Rohit

Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật

Bộ. Phương thức clear() trong JavaScript được sử dụng để xóa tất cả các phần tử khỏi một tập hợp và làm cho nó trống. Không có đối số nào được yêu cầu gửi dưới dạng tham số cho Tập hợp. clear() và nó trả về một giá trị trả về không xác định

Nếu bạn quan tâm đến bản thân mã và cách nó được viết, thay vì chỉ lo lắng liệu nó có hoạt động hay không, bạn có thể nói rằng bạn thực hành và quan tâm đến mã sạch

Một nhà phát triển chuyên nghiệp sẽ viết mã cho bản thân trong tương lai và cho “anh chàng khác” chứ không chỉ cho cỗ máy

Dựa vào đó, mã sạch có thể được định nghĩa là mã được viết theo cách dễ hiểu, dễ hiểu đối với con người và dễ thay đổi hoặc mở rộng.

Ngay cả mã xấu cũng có thể hoạt động, nhưng nếu mã không sạch, nó có thể khiến tổ chức phát triển phải quỳ gối

Trong bài viết này, trọng tâm sẽ là JavaScript, nhưng các nguyên tắc có thể được áp dụng cho các ngôn ngữ lập trình khác

1. Kiểm tra loại mạnh

Sử dụng

let name;let product;

6 thay vì

let name;let product;

7

2. Biến

Đặt tên cho các biến của bạn theo cách mà chúng tiết lộ ý định đằng sau nó

Bằng cách này, chúng trở nên dễ tìm kiếm và dễ hiểu hơn sau khi một người nhìn thấy nó

Xấu 👎

Tốt 👍

Không thêm các từ không cần thiết vào tên biến

Xấu 👎

let nameValue;let theProduct;

Tốt 👍

let name;let product;

Không thực thi nhu cầu ghi nhớ ngữ cảnh biến

Xấu 👎

Tốt 👍

Không thêm ngữ cảnh không cần thiết

Xấu 👎

Tốt 👍

Sử dụng cùng một từ vựng cho cùng một loại biến

Xấu 👎

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

1

Tốt 👍

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

23. Chức năng

Sử dụng tên dài và mô tả

Xem xét rằng nó đại diện cho một hành vi nhất định, tên hàm phải là một động từ hoặc một cụm từ thể hiện đầy đủ ý định đằng sau nó cũng như ý định của các đối số

Tên của họ nên nói những gì họ làm

Xấu 👎

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

3

Tốt 👍

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

4

Tránh một số lượng lớn các đối số

Lý tưởng nhất là một hàm nên có hai đối số trở xuống được chỉ định

Càng ít đối số, chức năng càng dễ kiểm tra

Xấu 👎

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

5

Tốt 👍

Sử dụng đối số mặc định thay vì điều kiện

Xấu 👎

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

6

Tốt 👍

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

7

Tránh thực hiện nhiều hành động trong một chức năng

Xấu 👎

Tốt 👍

Sử dụng 'let name;let product;8để đặt các đối tượng mặc định

Xấu 👎

Tốt 👍

Không sử dụng cờ làm tham số vì chúng cho bạn biết rằng chức năng đang hoạt động nhiều hơn mức cần thiết

Xấu 👎

Tốt 👍

Đừng gây ô nhiễm Globals

Nếu bạn cần mở rộng một đối tượng hiện có, hãy sử dụng Lớp ES và kế thừa thay vì tạo hàm trên chuỗi nguyên mẫu của đối tượng gốc

Xấu 👎

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

9

Tốt 👍

let name;let product;

04. điều kiện

Tránh điều kiện phủ định

Xấu 👎

let name;let product;

1

Tốt 👍

let name;let product;

2

Sử dụng tốc ký có điều kiện

Điều này có thể là tầm thường, nhưng nó đáng nói

Chỉ sử dụng phương pháp này cho các giá trị boolean và nếu bạn chắc chắn rằng giá trị đó sẽ không phải là

let name;let product;

9 hoặc

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

10

Xấu 👎

let name;let product;

3

Tốt 👍

let name;let product;

4

Tránh điều kiện bất cứ khi nào có thể

Thay vào đó, hãy sử dụng đa hình và kế thừa

Xấu 👎

Tốt 👍

5. lớp ES

Các lớp là đường cú pháp mới trong JavaScript

Mọi thứ hoạt động giống như trước đây với nguyên mẫu, chỉ có điều bây giờ nó trông khác và bạn nên thích chúng hơn các chức năng đơn giản của ES5

Xấu 👎

Tốt 👍

Sử dụng chuỗi phương pháp

Nhiều thư viện như jQuery và Lodash sử dụng mẫu này

Do đó, mã của bạn sẽ ít dài dòng hơn

Trong lớp của bạn, chỉ cần trả về

const mySet = new Set();
mySet.add(1);
mySet.add("foo");

console.log(mySet.size); // 2
console.log(mySet.has("foo")); // true

mySet.clear();

console.log(mySet.size); // 0
console.log(mySet.has("bar")); // false

11 ở cuối mỗi hàm và bạn có thể xâu chuỗi các phương thức lớp khác vào đó

Xấu 👎

Tốt 👍

6. Tránh sử dụng Eval

Hàm Eval cho phép chúng ta chuyển một chuỗi tới trình biên dịch JavaScript và để nó thực thi dưới dạng JavaScript

Nói một cách đơn giản, mọi thứ bạn truyền vào trong thời gian chạy sẽ được thực thi như thể nó được thêm vào lúc thiết kế

let name;let product;

5

Thao tác này sẽ bật lên một hộp cảnh báo có thông báo “Xin chào” trong đó

Nên tránh chức năng eval vì nó không an toàn và nó mở ra mối đe dọa tiềm ẩn cho các lập trình viên độc hại khai thác

7. Sử dụng JSLint

JSLint là một công cụ tuyệt vời để giúp bạn xác định các vấn đề phổ biến trong mã JavaScript của mình, nó sẽ phát hiện mã xấu đang bị trình duyệt che giấu

Bạn có thể sử dụng một trang web khác như JavaScriptLint. com hoặc bạn có thể sử dụng một trong nhiều công cụ JSLint có thể tải xuống

Chẳng hạn, Visual Studio có một bổ trợ cho JSLint sẽ cho phép bạn kiểm tra lỗi tại thời điểm biên dịch (hoặc theo cách thủ công)

Điều này sẽ làm cho mã của bạn sạch hơn và nó sẽ giúp ngăn những lỗi khó chịu đó xuất hiện trong quá trình sản xuất

8. Tránh nói chung

Nói chung, bạn nên cố gắng hết sức để không lặp lại chính mình, nghĩa là bạn không nên viết mã trùng lặp và không để lại các lỗi phía sau như chức năng không sử dụng và mã chết

Loại bỏ mã trùng lặp trong tình huống này có nghĩa là trừu tượng hóa sự khác biệt và xử lý chúng ở cấp độ đó

Và về mã chết, đúng như tên gọi của nó

Đó là mã nằm đó trong cơ sở mã của chúng tôi không làm bất cứ điều gì bởi vì, tại một thời điểm nào đó trong quá trình phát triển, bạn đã quyết định rằng nó không còn mục đích nữa

Bạn nên tìm kiếm các phần này trong cơ sở mã của mình và xóa tất cả các chức năng và khối mã không cần thiết

Một lời khuyên mà tôi có thể dành cho bạn là ngay khi bạn quyết định nó không còn cần thiết nữa, hãy xóa nó đi

Phần kết luận

Đây chỉ là một phần nhỏ của những gì bạn có thể làm để cải thiện mã của mình

Theo tôi, những nguyên tắc bị cáo buộc ở đây là những nguyên tắc mà mọi người thường không tuân theo

Họ cố gắng, nhưng không dễ để duy trì sức mạnh tinh thần và luôn viết mã tuyệt vời

Có thể khi bắt đầu dự án, mã rất gọn gàng và sạch sẽ nhưng khi đến thời hạn hoàn thành, các nguyên tắc thường bị bỏ qua và chuyển sang phần “CẦN LÀM” hoặc “REFACTOR”

Làm cách nào để xóa nút trong JavaScript?

Hàm reset() được xác định trong JavaScript và chỉ cần nhấp vào biểu mẫu đó, biểu mẫu sẽ được liên kết với phương thức onclick() của nó sẽ đặt lại mọi phần đầu vào của biểu mẫu được cung cấp . Ngoài ra, nếu có bất kỳ giá trị được xác định trước nào cho bất kỳ đầu vào nào thì nó sẽ nhận được giá trị đó.