这篇文章主要介绍了JavaScript如何提炼函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
好处:
避免出现超大函数。
独立出来的函数有助于代码复用。
独立出来的函数更容易被覆写。
独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。
语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么。
代码举例:
实现获取数据,然后操作dom显示数据,最后添加事件
函数提炼前
// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用
function main() {
$.ajax.get('/getData').then((res) => {
const ul = document.getElementById('ul');
ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n');
const list = document.getElementsByClassName('li');
for (let i = 0; i < list.length; i ++) {
list[i].addEventListener('focus', () => {
// do something
});
}
});
}
函数提炼后
function getData() {
return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
const ul = document.getElementById('ul');
ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n');
}
function addEvent() {
const list = document.getElementsByClassName('li');
for (let i = 0; i < list.length; i ++) {
list[i].addEventListener('focus', () => {
// do something
});
}
}
// 逻辑清晰,一眼读懂每一步在做什么,某些提炼出来的函数还可以被复用
async function main() {
const list = await getData(); // 获取数据
showList(list); // 显示页面
addEvent(); // 添加事件
}
感谢你能够认真阅读完这篇文章,希望小编分享的“JavaScript如何提炼函数”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。