Wyatex`s blog

发表于 更新于 分类于

虽说这是第一篇，但还是建议先看看前置教程：

flutter快速入门笔记（1） 和 环境搭建教程

上面提到的环境搭建教程基于安卓和iOS用户来讲解，但是既然看到咱们这个标题点进来的应该大部分掘友都是网页前端开发，那么咱们后续的讲解都以Web的方式来运行Flutter项目啦，所以请各位掘友准备好一个比较新的Chrome浏览器哦，当然对于Windows10或者Windows11的开发者来说，系统自带有新版Edge也可以不需要安装Chrome。

当然如果是客户端开发的掘友也可以选择自己熟悉的客户端，比如安卓、iOS甚至是Windows、Linux、Mac OS客户端来运行，这些都是支持的，而且不涉及和系统之间的调用的话，所有方式的开发都是能保持一致的，这就是Flutter这个大前端框架的强大能力哦！

阅读全文 »

发表于 更新于 分类于

距离上次看qwik已经过去一年多的时间了，当时qwik才刚出没多久，那时候还是v0.1还是0.2的版本，还有很多bug就没兴趣研究了。如今过去一年多了，qwik版本已经到达了正式版，api也相对固定下来了，所有又有兴趣研究一下。

至于qwik是什么、对比别的框架有什么优势这里我就不重复提了，在掘金站内一搜一大堆。下面直接根据官方教程开始入门。这里推荐有一定的React基础（懂基本的jsx语法）、Vue3响应式基础（会用ref、watch等）、TS基础的小伙伴观看。

官方入门原文：https://qwik.builder.io/docs/getting-started/

阅读全文 »

发表于 更新于 分类于

这里说的是不应该使用 if-else 的地方尽量不去写 if，而不是去掉所有的 if-else

不必要的 else 块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function func(arg) {
  if (arg) {
    // do something
  } else {
    // do something
  }
}
// 这里的else明显可以去掉
function func(arg) {
  if (arg) {
    // do something
  }
  // do something
}

价值分配

有些时候不需要生命个变量，然后再赋值返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function func(arg) {
  let gender;
  if (arg === 0) {
    gender = "woman";
  } else if (arg === 1) {
    gender = "man";
  } else {
    gender = "unknown";
  }
}
// 为什么需要多写一个gender呢
function func(arg) {
  if (arg === 0) return "woman";
  if (arg === 1) return "man";
  throw new Error("非法参数");
}

简单值多个条件，转成对象形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function func(arg) {
  if (arg === "xxx") {
    // do something
  } else if (arg === "yyy") {
    // do something
  } else {
    throw new Error("非法参数");
  }
}
// 不好修改，而且代码很丑
function func(arg) {
  const actions = {
    xxx: () => {
      /* do something */
    },
    yyy: () => {
      /* do something */
    },
    // 以后要加什么这里直接在这里加
  };
  if (actions["xxx"]) {
    actions["xxx"]();
  } else {
    throw new Error("非法参数");
  }
}

复杂条件，改用策略模式

1
2
3
4
5
6
7
8
9
function func(arg1, arg2, arg3) {
  if ((arg1 === "xxx" && arg2 === "yyy") || arg3 === "zzz") {
    // do something
  } else if (arg1 === "xxx" || (arg2 === "yyy" && arg3 === "zzz")) {
    // do something
  } else {
    throw new Error("非法参数");
  }
}

如果是这种复杂的条件，对象的形式就实现不了了，这没有办法了吗？

其实有个设计模式叫策略模式，先上个策略模式的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// js版：
function exeStrategyActions(actions) {
  actions.some(([flag, action]) => {
    if (flag) {
      action();
    }
    return flag;
  });
}
// ts版：
type StrategyAction = [boolean, () => void];
function exeStrategyActions(actions: StrategyAction[]) {
  actions.some((item) => {
    const [flag, action] = item;
    if (flag) {
      action();
    }
    return flag;
  });
}

用法也很简单，比如上面的 if 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function func(arg1, arg2, arg3) {
  exeStrategyActions([
    [
      (arg1 === "xxx" && arg2 === "yyy") || arg3 === "zzz",
      () => {
        /* do something */
      },
    ],
    [
      arg1 === "xxx" || (arg2 === "yyy" && arg3 === "zzz"),
      () => {
        /* do something */
      },
    ],
    [
      true,
      () => {
        throw new Error("非法参数");
      },
    ],
  ]);
}

exeStrategyActions 函数会一个一个寻找条件是 true 的值，直到找到 true，然后执行传进去的回调函数，

0%