- 经常我们在页面中写if…else…会这样写
if (条件成立) { // 条件成立执行 } else { // 条件不成立执行 }
- 然而在工作中我们经常会碰到条件语句只有一行代码时,建议这样写(代码少了一些)
if (条件成立) // 条件成立执行 else // 条件不成立执行
- 当然在工作中如果写太多的if…else…就容易写成面条代码例如这样
if (条件成立1) { // 执行成立1 } else if (条件成立2) { // 执行成立2 } else if (条件成立3) { // 执行成立3 } else if (等等) { // 执行成立等等 }
- 这时候我们如果条件语句中只有一行代码,我们可以考虑用 2 方法例如
if (条件成立1) // 执行成立1 else if (条件成立2) // 执行成立2 else if (条件成立3) // 执行成立3 else if (等等) { // 执行成立等等 }
- 想想我们是否还有什么优化的地方,这样写最后还是会像面条代码,那我们可以这样写
if (条件成立1) { return } if (条件成立2) { return } if (条件成立3) { return } if (等等) { return }
- 像 5 这样写虽然相对好一些,我们应该想到还有其他方法可以代替,例如switch
switch(条件){ case '条件成立1' break case '条件成立2' break case '条件成立3' break case '等等' break }
- 以上写法感觉代码要嘛是一团,要嘛像面条,这个时候我们可以考虑用策略模式来写这些逻辑代码,例如这样
function 条件成立1方法(params) { // 条件成立1方法 } function 条件成立2方法(params) { // 条件成立2方法 } function 条件成立3方法(params) { // 条件成立3方法 } function 等等方法(params) { // 等等方法 } const config = { '条件成立1': '条件成立1方法', '条件成立2': '条件成立2方法', '条件成立3': '条件成立3方法', '等等方法': '等等方法' } config[条件] && config[条件]()
- 注意 代码尽量越简洁越好,但是这边还有一个就是后期一眼要能直接看出代码逻辑就更完美了。想象一下最终大家都是特别牛的前端,所有语法熟记于心,那就看代码优雅程度了。越优雅的代码后期维护起来事半功倍。
- 本文作者: MrRetro博客
- 本文链接: http://mrretro.gitee.io/retroblog/retroblog/2022/09/29/前端如何写一个最终版本的页面/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!