前端开发的沮丧之处
听到有人说前端开发一团糟，我总是感到很沮丧，特别是当他们说 JavaScript“什么都接受”、可以随意编写时，因为我们可以用多种方式达到相同的结果。
事实上，他们并非全错。 确实，JavaScript 可以用多种方式编写，但最终目标相同。
主要问题在于，前端开发和 JavaScript 缺乏后端开发那样的明确设计模式和广泛采用的框架及约定。前端的最佳实践和模式分散在网络上，导致观点和意见不一。这种缺乏统一性增加了开发和理解的难度，尤其对初学者而言。
立即学习“Java免费学习笔记（深入）”；
关键在于学习
为了结束这段牢骚，我想强调一点：仅仅因为某些东西不明显并不意味着它不存在，或者你不应该努力学习至少在代码中应用基本模式。以 JavaScript 为例，许多网站提供了该语言的既定实现和模式，可供开发时参考。你只需要花时间学习，就能理解每种资源的用途和使用时机。例如：Mozilla 的 JavaScript 文档。
代码示例：改进的数组和对象处理
以下代码来自一个真实的生产项目。虽然理论上“没有问题”，运行正常，但实际上，方法可以改进，从而提高可读性和性能。
我们将对代码进行一些调整，使其更符合 JavaScript 文档的建议。这是可行的，因为该语言提供了特定方法/函数来更有效地处理某些情况。
我们将讨论一个基本的 JavaScript 概念：使用数组和对象。代码尽可能简洁，避免不必要的复杂性。
我们从一个模拟的后端 API 返回的对象开始：
YXPHP6系统可以看做是一个模版平台,而且它又能独立工作. 而且YXPHP6系统也不需要数据库支持. 你可以开发自己的模板,也可以同步官方的模板后进行自己的二次开发,前提是您对YXPHP6要有一定的了解.YXPHP6不仅可以用作企业建站,甚至是blog,只要是您能想到的,YXPHP6几乎都可以胜任. 因为YXPHP6系统本身与模板之间可以说是独立运行的.也就是说,不管你做什么样的网站或者是应用,
const storeslist = [{
activestories: [
{
name: 'starbucks',
code: 1
},
{
name: 'duck duck coffe',
code: 2
}
],
inactivestories: [
{
name: 'mac coffe',
code: 3
}
]
}]
我们需要添加一个名为“label”的新字段，其值为“opened”加上商店名称。
先来看一个我认为“不太理想”的实现，因为它没有充分利用 JavaScript 的最佳工具和函数：
storeslist.reduce((previous, current) => {
current.activestories.forEach(store => {
previous.push({
...store,
label: `opened ${store.name}`
})
})
return previous
}, [])
// 结果：
[
{
"name": "starbucks",
"code": 1,
"label": "opened starbucks"
},
{
"name": "duck duck coffe",
"code": 2,
"label": "opened duck duck coffe"
}
]
这里使用了 .reduce、.forEach 和 .push，只是为了返回一个新的数组。 .flatMap 和 .map 等函数没有被使用，而这些函数是 JavaScript 中非常重要的资源。代码冗长且难以理解。
改进后的代码：
storeslist.flatMap((item) => {
return item.activestories
}).map((item) => {
return {
...item,
label: `opened ${item.name}`
}
})
是不是更简洁？
.flatMap 将数组“扁平化”为单层：
[
{
"name": "starbucks",
"code": 1
},
{
"name": "duck duck coffe",
"code": 2
}
]
.map 遍历每个项目，添加“label”属性：
[
{
"name": "Starbucks",
"code": 1,
"label": "Opened Starbucks"
},
{
"name": "Duck Duck Coffe",
"code": 2,
"label": "Opened Duck Duck Coffe"
}
]
结论
JavaScript 提供了编写高质量代码所需的一切工具。
关键在于学习并正确应用这些概念，而不是为了编码而编码。
