组织版前端开发心得分享②

这是一篇面向公司内部的分享，部分方案具有时效性。

多写注释

如题，不管对于自己开发还是团队协作开发，在编写可维护性代码方面，多写注释真的太重要了。

{
  data() {
    return {
      listData: [],
      form: {},

      editModalInfo: {
        visible: false,
        isSubmitting: false,
        data: {}
      },
      previewModalInfo: {
        visible: false,
        data: {}
      }
    };
  }
}

beforeRouteEnter VS 生命周期钩子

非业务逻辑必要，更推荐用生命周期钩子，而不是 beforeRouteEnter，因为 Vue 热更新不会重新触发 beforeRouteEnter，需要手动刷新页面，开发调试时并没有很方便。

{
	// 路由页面使用，可处理一些路由跳转相关需求
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getReady();
    });
  },

  // 路由参数变化
  beforeRouteUpdate(to, from, next) {
    next();
    this.getReady(); // 注意顺序
  },

  // 更通用 created/mounted/activated
  created() {
    this.getReady();
  },
}

countStringLength

1个中文当2个字符计算的设计需求。

// 25 字符
"90题细品吴恩达《机器学习》，感受被刷题支配的恐惧"
// 45 字符
"deep learning with pytorch: a 60 minute blitz"

import { countStringLength } from '@fe-standard-libs/utils';

if (countStringLength(this.form.Name) > 50) {
  return '课程名称字数超过限制';
}

组合式代码的应用场景

密码格式要求的多处使用场景：注册、忘记密码、管理员添加用户、重置密码。

统一的逻辑抽离和使用方法：

// 引入
import useResetPassword from '@/use/reset-password';

const { setResetPassordPlaceHolder, checkResetPasswordError } = useResetPassword();

// 使用
const hasError = this.checkResetPasswordError(password);
if (resetErrorMsg) {
  console.log(resetErrorMsg);
  return;
}

自适应的卡片列表

.list-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;

  /** grid 布局响应式的局限性 */
  /** grid-template-columns: 1fr; */
}

CSS Grid 网格布局教程 - 阮一峰的网络日志

flex gap

⚠️ 兼容性注意：chrome ≥84

时间刺客

in JAVA

2021 年 12 月 31 日 周五

y: year-of-era 正正经经的年，即元旦过后；yyyy=2022
Y: week-based-year 只要本周跨年，那么这周就算入下一年；YYYY=2023

CSS

语义化命名，减少冲突可能性

子选择器☆

可以有效减小后代选择器给子组件带来的潜在影响。

.task-list-container {
    & > .header-container {
	    /** ... */
    }
    & > .main-container {
	    /** ... */
    }
}

流式布局，关注不同尺寸下的页面布局