优化代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> *{margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /*自动换行*/ } </style> </head> <body> <div id="weibo"> 微博内容: <textarea></textarea> <button>发布</button> <ul> <li></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('<li>'+res+'</li>'); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>
时间: 2024-03-21 10:44:40 浏览: 210
以下是代码的优化:
1. 将 script 标签放到 HTML 底部。
```html
<body>
<div id="weibo">
...
</div>
<script src="../jquery-3.7.0.js"></script>
<script>
// JS 代码
</script>
</body>
```
2. 缓存 jQuery 对象,避免重复查找 DOM 元素。
```javascript
$('button').click(function(){
var $textarea = $('textarea');
var $ul = $('ul');
var res = $textarea.val();
if (res) {
var $li = $('<li>').text(res);
$ul.prepend($li);
$textarea.val('');
} else {
alert('请输入内容');
}
});
```
3. 使用事件委托,将事件绑定到父元素上,而不是每个子元素都绑定一次。
```javascript
$('#weibo ul').on('click', 'li', function() {
$(this).remove();
});
```
4. 使用模板引擎,生成 HTML 代码。
```javascript
var template = '<li>{{content}}</li>';
$('button').click(function(){
var $textarea = $('textarea');
var $ul = $('ul');
var res = $textarea.val();
if (res) {
var html = template.replace('{{content}}', res);
$ul.prepend(html);
$textarea.val('');
} else {
alert('请输入内容');
}
});
```
阅读全文