乐趣区

关于前端:前端都在聊什么-第-3-期

jiezi

Hello 小伙伴们早上、中午、下午、早晨、深夜好，我是爱折腾的 jsliang~

「前端都在聊什么」是 jsliang 日常写文章 / 做视频 / 玩直播过程中，小伙伴们的发问以及我的解疑整顿。

本文章视频同步：https://www.bilibili.com/vide…

本期对应 2023 年的 01.24 当天直播间的粉丝互动。

次要讲 jsliang 这个 React 菜鸡，帮忙剖析 Vue 多层嵌套时界面不渲染问题，以及对代码格调的一些见解。

你的 关注 和 点赞 是我继续更新的能源💖，谢谢大家~

一 嗨！界面咋不进去

首先，那天小伙伴求助过去，我是很懵的。

因为我这 React 小菜鸡，没法确认是否能帮忙解决到问题。

如果最初没帮忙解决掉问题，想必会被打得很惨吧~

而后，想着大过年的，小伙伴还在惦记这个问题，能帮一个是一个吧~

那就问分明问题，帮忙剖析剖析！

小伙伴形容说：

用 Vue 耍级联操作组件
一开始一级联动没问题，能获取到数据并渲染
然而多级嵌套出问题了，数据获取到了，然而渲染失败
尝试过用 `setTimeout`，成果不好

于是，听完形容后，我开始重复看 ta 代码，并开始 Google 之旅。

大略花了 40 分钟后，尝试用本人常识但发现没卵用后，终于找到一个貌似可行的解释：

最终通过 vm.$forceUpdate() 解决了这次「脸面」危机~

同样碰到数据渲染问题的小伙伴，能够看看这篇文章 Vue 数据更新了但页面没有更新的 7 种状况汇总及延长总结

二 唠嗑！代码格调争议

解决完小伙伴问题后，俺也是名正言顺了一回，于是跟小伙伴探讨下他们代码格调问题。

当然，小伙伴也阐明了，他们的代码由多个成员参加，没有对立的 Lint，所以才会呈现这个问题。

所以全程沟通气氛“十分敌对”，切勿瞎想妄议~

2.1 层级缩进 – 2 空格 4 空格之争

像下面代码贴图，一会 2 空格，一会 4 空格的，团队标准很是问题。

JavaScript 有个很奇怪的争执：用 2 空格还是 4 空格比拟适合。

第一次理解到这个辨别的，还是因为工作中写 2 空格被大佬吐槽。

前面跟大佬混熟后，我搞懂了：

  • 屏幕比拟「大」的，都喜爱 4 空格
  • 屏幕比拟「小」的，都喜爱 2 空格

震惊我一整年！！

这让我这个用笔记本电脑，而后外接显示器的情何以堪~

变身，间接成为两头党！你强任你强，能跑就成王。

2.2 正文地位 – 前置还是后置

对于正文地位放到行尾还是上方，其实是较有争议的：

  • 行尾
const name = 'jsliang'; // 这是我的网名
  • 上方
// 这是我的网名
const name = 'jsliang';

在公司团队单干的时候，也会碰到这种抵触。

因为我的项目构建问题，正文可能会被独自一行，所以会导致呈现上面的状况：

const name = 'jsliang';
// 这是我的网名

所以在工作中养成了习惯，代码正文在上方独自一行。

不过感觉如果是一些比拟简短的正文，放在行尾也是 OK 的，例如：

const name = 'jsliang'; // 网名
const age  = 28;
const like = 'play'; // 喜好

// ? 这个常量做什么的，如果没有正文怎么了解
const TODO = [];

蹩脚！当初看行尾正文有点不习惯了~

集体感觉次要还是变量名问题。

因为有些变量名，英文翻译进去有多个意思，所以才须要咱们通过正文来增强解释。

所以工作中，不太容易了解的变量名和办法函数，最好加上正文。

感兴趣的小伙伴能够关注下 JSDoc：https://www.jsdoc.com.cn/

2.3 _this = this? 令人抓狂

上面是 Vue 中，一个我当初也没想明确的操作：

jsliang 查了下，Vue 上这么写是因为有 this 指向问题，所以才须要：

const _this = this;

可参考：Vue 中 的 var that=this 语句是什么意思？

尽管下面帖子探讨能够应用箭头函数，然而我还是顺带查问了下 Vue 官网。

外面也阐明分明，申明办法时该当防止应用箭头函数：

仁者见仁，如果有 Vue 比拟纯熟的小伙伴，能够评论区下留言对于本人对这块的见解~

2.4 var/let 和 const

在文章 document-library/ 系列 - 面试材料 /JavaScript/ 变量 中，咱们探讨过。

对于 var，因为存在不可控因素：

  • var 申明的变量会预解析，晋升到全局变量上，影响整个 JS 脚本

举个栗子：

var temp = new Date();

function f(){console.log(temp);
  if(false){var temp = "hello";}
}

f(); // undefined

在这个代码块执行的时候，temp 被预解析了，晋升下来了，于是成为：

var temp = new Date();

function f(){
+  var temp;
  console.log(temp);
  if(false){
-    var temp = "hello";
+    temp = "hello";
  }
}

f(); // undefined

所以 ES6 进去了 let 和 const。

在变量类型和值不确认的状况，应用 let，在操作常量以及固定类型的时候，应用 const：

let age = 28;
const name = 'jsliang';

const info = {
  name,
  age,
};
// name: 'jsliang', age: 28
console.log(info);

// 一年后
const after1Year = () => {age++;};
after1Year();

const newInfo = {
  name,
  age,
};
// name: 'jsliang', age: 29
console.log(newInfo);

更多能够返回 document-library/ 系列 - 面试材料 /JavaScript/ 变量 理解。

2.5 数据解构 – a.b.c.d

这个问题在工作中十分常见：

在重复调用的时候，尤其是 window.xxx 模式比拟多，须要查找外面属性的时候。

这样子写代码比拟难浏览。

能够尝试这么优化：

// 1. 就是获取，并且兼容
const dataset = e.currentTarget.dataset || {};
// 2. 解构获取
const {id, name, pid, pindex} = dataset;
// 3. 做其余操作
// 留神确保是否需判断 id/name 的兼容性
// 如果可能为 undefined，那应该 if (id) {}

2.6 对象中 key 和 value 命名雷同

上面有 2 个能够尝试晋升浏览体验的操作。

尝试优化：

queryfntQueryVillage({
  // param: param
  param
}).then((res) => {// ...todo});

尝试优化：

// _this.result[_this.navCurrentIndex] = {id: id, name: name, pid: pid};
_this.result[xxx] = {id, name, pid};

这 2 个操作，能够让代码看起来更精简。

2.7 forEach 和 for 的应用

时至今日，看到下面代码，模摸糊糊还是会有点头皮发麻的感觉。

咱们应该了解，forEach 并不会停止后续的循环。

所以当数据过多的时候，对性能来说是个高挑战。

当你有 1w 条数据，尽管我第 1 条就找到了，然而它依然会遍历 1w 遍。

所以这种状况下，应用 for 能够及时止损。

const data = _this.data;
for (let i = 0; i < data.length; i++) {const item = data[i];
  if (item.id === pid) {
    // ...
    // 停止后续循环，因为我曾经找到了
    break;
  }
}

尽管 ES6 新增了 forEach、map 等实用函数，然而编写代码的时候，能够略微留神下性能问题。

2.8 冗余代码问题

上面咱们看一份代码：

很显著，咱们通过 VS Code 区选代码的时候，间接在同一排发现有多个反复调用代码。

const children = _this._deepQuery(_this.data, id).children;
const isDefineChildren = _this.isDefine(children);
if ((!_this.isDefine(_this.layer) && isDefineChildren)
  || (_this.navCurrentIndex < (Number(_this.layer) - 1) && isDefineChildren)
) {children.forEach((item, index) => {const { id, name} = item;
    _arr.push({id, name, pid: id});
  });
}

这样，咱们就让代码看起来更容易了解了。

2.9 \`\` 和 '' 以及 "" 的应用

很多时候，咱们会纠结这 3 种符号的应用，例如：

jsliang 为了让本人工作不再纠结，给本人定了小标准：

  1. 在 HTML 上，对立应用双引号，例如 class=""，又或者 data-value=""
  2. 在 JavaScript 上，定义变量等一律应用 ''，例如 const name ='jsliang'
  3. 在拼接字符上，对立应用 \`\`，例如：
const name = 'jsliang';
const info = ` 你好 ${name}
欢送来到 2077 地球~
`;
const render = () => {
  return (<div className="react-class"></div>);
};

2.10 == 和 ===

这一点想必很多小伙伴也理解：

像下面这种判断的时候，很容易出篓子。

举个栗子：

const d = 1；const e = '1';
console.log(d == e);
console.log(d === e);

像这里，1 等于 '1' 吗？

如果你是应用 ==，那么它只会判断值是否相等，才不论你类型长啥样。

而应用 ===，它还会判断类型是否一样。

三 参考文献

  • Vue 数据更新了但页面没有更新的 7 种状况汇总及延长总结
  • JSDoc
    Vue 中 的 var that=this 语句是什么意思？

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞 / 点 Star。

如果小伙伴须要分割 jsliang：

  • Github
  • 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

退出移动版