年度归档： 2021年

杂文

架构师成长之道

架构师和架构能力是两码事，任何架构师都需要有一定的架构能力，例如软件研发工程、数据库、云原生架构，包括算法，编程协同等等。此外还要关注跨组织和跨设计领域。架构师最需要的能力是什么？第一种能力很普通——研发能力，处理横向问题的能力，比如说成本问题，质量安全等问题。 还需要技术衔接能力，其实架构师是在看别人看不见的东西，比如说前后端之间的衔接，业务和数据的衔接，业务数据到数据仓库到算法，到整个数据链路的衔接，这就需要从架构师的视角来看。另外就是技术视野上，往往这是很多架构师也不一定具备的能力，比如领域拓展，今天在做一个业务，那未来怎么进入下一个业务？ 还有时间跨度前瞻布局能力，一个技术、一个功能现 …

前端

微前端为什么舍弃了 iframe

如果不考虑体验问题，iframe 是最完美的微前端解决方案。 但着产品体验的需求增强，iframe 又带来了一些不好的体验。 url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中.. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加 …

Vue

Vue 3 引入 Fullcalendar

Vue 3 引入 Fullcalendar JS版 <template> <div class=”card” ref=”cal”></div> </template> <script> import { ref,defineComponent, onMounted} from ‘vue’; import {Calendar} from ‘@fullcalendar/core’ import dayGridPlugin from ‘@fullcalendar/daygrid’; import timeGridPlugin from ‘@ …

Vue

vue 3 获取DOM

Vue 2获取DOM <div ref=“Ref”></div> this.$refs.Ref Vue 3获取单DOM <template>   <div ref=“Ref”>获取单个DOM元素</div> </template> <script> import { ref, onMounted } from ‘vue’; export default {   setup() {     const Ref = ref(null);     …

Vue

vue3 迁移 父子组件传值同步

代码中 .sync 的部替换为 v-model： <ChildComponent :title.sync=”pageTitle” /> <!– 替换为 –> <ChildComponent v-model:title=”pageTitle” /> 对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue <ChildComponent v-model=”pageTitle” /> // ChildComponent.vue export default …