前言

自从毕业开始工作之后，我坚持写了 2 年多的日记，基本节奏是每半年会写一篇，目的是为了记录自己成长的痕迹。

未来某个时间自己再回首的时候，能回味到此时此刻自己在做什么。当时的选择是否正确，是否在此时此刻，看到了未来发展的趋势，跟上了正确的车。

现在是 23 年 6 月，我第一次羊了，上一轮虽然逃过去了，但是这一次没能幸免，现在还在发着低烧。

距离上次写日记又过去了半年多，自己也步入 25 岁，这半年发生了很多事情，体会到时间变得更快了。

工作第一年：误打误撞加入创业公司

在来到字节之前，经历了校招被毁约，来到了创业公司，在创业公司工作了一年，作息是大小周，早 9 晚 9 ，对我来说这是一段比较记忆深刻的经历，教会了我很多互联网行业的东西。

校招被毁约

19 年的时候签约了一家金融公司，也是临近 20 年毕业前几十天，才被公司以疫情经济情况不好的理由，告知单方面毁约。

那个时候的我还是很害怕的，一点是临近毕业，大多校招已停止，第二点是自己有一段时间没有复习，很多知识已经遗忘。

一个朋友得知了我的情况，内推我到一家创业公司，也是内推第二天一大早就去公司面试，还好我还有一些基础在脑子里，现场面了两轮，当场就通过了，成为了前端的实习生一枚，公司也是答应毕业之后就转正。

面试通过之后，第二天就去公司上班了。第一天入职就拿到了 Macbook，也是第一次用 Mac 办公，想象那时的自己，就跟刚进城的人一样。

公司的结构

一个公司，总共就 50 来个人，做着 DAU 百万的产品。由于公司不大，所以做各种不同事情的人（销售、CEO、内容运营、新媒体运营、算法、产品），都坐在一起。敲代码的时候还能听到销售打电话的声音，因为是教育产品，所以销售的合作方大多是猿辅导、好未来、作业帮、学霸君等教育头部公司。

虽然公司小，但是产品各个环节非常全面：

• ABTest


• 算法


• Hive

公司小的好处是，决策层级少，一个想法想要落地是很快的。在公司 1 年期间，快速上线了 3 款小程序，也快速从 0 到 1 上线了金融产品。PC、H5、小程序开发都有涉及。

整个团队的氛围是非常 Open 的，可以试验各种新技术，不像大厂内部会封装一些框架，有内部标准，不好去实践一些开源的框架。

与普通公司不同的地方

个人扮演的角色

我觉得最大不同的地方是角色，我是一名前端，但不仅扮演着前端的角色。要对产品体验负责，也要自己设计页面 UI。

公司没有测试，所以在日常开发中，每个研发和产品都是 QA，要对 C 端百万 DAU 产品对应的用户体验负责。

每个人都对需求负责，一个需求上线之后，可以自己写 SQL 去 Hive 里捞埋点数据，验证 AB 的可行性。

可以深入感受互联网不同角色发挥的作用

在创业公司，因为每周都有公司周会，大家会聚在一起聊每周各部门的进展，在会上，也可以全流程的了解到一个产品的完整生命周期。

• 
  

  内容运营视角：

  
  
  
  
  • 做公众号，发文章，在存在粉丝基础的情况下，头版收入是很可观的，可以达到 6 位数+。
  
  
  
  


• 
  

  产品运营视角：

  
  
  
  
  • 做竞品分析，看出对方哪方面做的好，我们要抄袭哪快的功能。
  
  
  • 做电话回访，了解用户的痛点，尤其针对停留时间较长的重度 C 端用户。
  
  
  
  


• 
  

  销售视角：

  
  
  
  
  • 通过和大型教育机构合作，由于家长是很愿意为孩子进行教育付费的，所以通过弹窗收集信息配合电销，可以达到很可观的收入。
  
  
  
  


• 
  

  算法视角：

  
  
  
  
  • 通过 AB 试验调整算法策略，可以优化广告收入，另外也可以提前计算预测插入广告可能带来的收益。
  
  
  • 调整算法策略，也可以优化用户停留时长，增强用户粘性。
  
  
  
  


• 
  

  数据分析：

  
  
  
  
  • 通过 Hive 离线数据计算，可以生成一些报表数据，给提供用户信息聚合查看功能。
  
  
  
  


• 
  

  产品视角：

  
  
  
  
  • 在产品基本功能打磨完毕后，要尽可能往付费方向引导。
  
  
  
  


• 
  

  运维视角：

  
  
  
  
  • 将服务迁移到 K8S 集群，可以降低维护成本。
  
  
  
  


• 
  

  后端视角：

  
  
  
  
  • 和算法、数分团队配合，另外还需要负责机器运维相关。
  
  
  
  


• 
  

  老板视角：

  
  
  
  
  • 关注一些重要事项的进展，以及查看上线后的数据，是否符合产品预期。
  
  
  • 最终产品需要自负盈亏，功能不能一步设计到位，也需要把一些功能做成付费使用的。
  
  
  • 关注公司每个方向资金支出情况，控制公司收支，避免快速花光融资资金。保持自己的股份不被过度稀释。
  
  
  
  

我的直观感受是，自己虽然初入茅庐，但通过这一年的感知，深入理解了 C 端产品的全流程。这对我来说也是一笔很大的财富。

营收方面

App 内广告占大头，开屏广告>插屏广告>贴片广告，其次公众号文章等也是赚钱的利器，销售带来的收益远不如以上两个。总共这些一个月7位数还是有的。实际上最大的开销除了人力成本，还是服务器的成本，这个成本逼近7位数。

创业公司的生命周期

1. 公司在快速发展期，有很多功能需要开发，这时是需要人的时候，会无限招人。


2. 在产品 2-3 年之后，如没有新的大方向，进入一段停滞期，指的是 DAU 的不增长或下降。


3. 产品稳定期，不再需要人，核心骨干退出团队，HC 缩减，产品转向以盈利为目标。


4. 自负盈亏，break even。不再为公司资金发愁，不再需要融资。


5. 保持公司运作，通过手段维持 DAU 和用户付费意愿，通过一些预消费手段留住用户，扩大收益。

快速验证

快速验证是 CEO 经常提的一个点，不过在王兴和张一鸣成功的经验来看，这也是正确的。

快速验证是说快速从 0 到 1 上线一个产品，冷启动或硬广，在短期查看一个产品的数据，如果产品数据不够理想，便放弃产品。试验下一个风口上的题材。

像美团，或者字节现在也在使用这种策略，快速上线 App 并试错，留下那些抓住用户的产品。

公司的瓦解

一个产品的瓶颈

当一个产品被打磨到 3 年之后，一般来说主流程就比较完善了，换句话说是用户需要的功能，产品都有了。这个时候也就过了 PM 发力 RD 开发的时期，在这之后即便这个公司只有运营，也可以保持产品正常运行。

创业公司的问题

CEO 的话语权会很大

一个人带来的决策不一定合理，当产品的发展不再合理时。大家会出现不满情绪，久而久之大家也不再团结协作，在快速上线几个小程序无果之后，3 个月内 50% 的研发团队成员纷纷离职了，不过大伙也很厉害，离职之后大多都去了大厂。

转变方向为营收优先

通过缩减一系列支出，想方设法让公司达到赚钱的状态。

手段有：砍 HC，团建，下线产品不需要的费钱的功能。

另外我也是一步步看着，公司从半层多楼的工区面积，变成 5分之二，4分之一的大小，最后工区被卖掉，撤离北京。

我的离开

我的离开也是必然，在后期被拉到老板的新产品线帮忙做产品从 0 到 1 建设。对当时工作还不到 1 年的我来说，还是很有压力，独自 own 一个私人银行项目。

在长时间宣传下，仍是没有用户使用，我能明显的感受到，新产品前景是渺茫的，只是老板的一厢情愿。另外新产品线的研发非常少，只是一番的催活，其实过程也决定了结果，产品是做不成的。在这种情况下，我提出了离职。

不过我也很感谢这段经历，能让我对从 0 到 1 创业有新的理解，另外也锻炼了我的抗压能力，增强了技术积累。

最近的工作

工作上

工作上在建设插件市场，提供了一种能快速开发页面组件的方式，能直接嵌入组件到前端中，类似动态执行模块联邦注入的组件。是一块很有意思的功能，类似于 Chrome 应用商城，其实开发工具建设一直是我比较喜欢也擅长的方向，未来也会继续在这方面努力，学习其它语言，做更快更高效的工具，为开发提效。

详细可以看这篇我今年写的文章 带你从 0 到 1 实现前端「插件市场架构」

能力提升方面

编程技能

学习并实战了以下技能：

• VSCode 插件开发
  
  
  
  • 实践开发插件 VSCode 插件开发
  
  
  
  


• Rush.js
  
  
  
  • 大型项目构建管理。
  
  
  
  


• Golang (MySQL / Redis / Kafka)
  
  
  
  • 主要还是 API 层面的熟悉，目的还是为了能用非 NodeJS 语言写一写后端，以及了解更多的后端知识。
  
  
  
  


• Rust
  稍微了解了一下语法，之前也写了一篇文章：以 JS 的视角带你入门 Rust 语言，快速上手

开源库

轻量的模块联邦

非编程相关

最近这 2 年，锻炼了画图、写 PRD、拉通对齐的能力，大厂更加专精一个方面，这让我能静下心来，不再像创业公司一样，受老板的影响，不再做快速迭代的事情，而是把产品打磨好，更加以用户角度出发思考用户需要什么，补齐什么功能。

愿望

毕业之后，由于疫情一直都是在国内旅游。还没出过国，希望疫情后每年自己都能出去走走，行万里路。把最好的景色都记录下来，拓宽眼界，放松心情。我很喜欢大海，尤其是四环环海的小岛，看着大海能让自己的心平静下来。接下来还有几个非常想去的地方、意大利、冰岛、新西兰、瑞士，夏威夷，希望能在 3

因为一些缘故，最近一直在找工作，再加上这个互联网寒冬的大环境，从三月找到六月了，一直没有合适的机会

先说一下背景，目前三年半年经验，base 杭州，大专学历+自考本科

就在前几天，Boss 上收到了阿里某个团队的投递邀请（具体部门就不透露了），因为学历问题，基本上大厂简历都不会通过初筛，但还是抱着破罐子破摔的心态投递给了对方，出乎意料的是简历评估通过了，可能是因为有两个开源项目和一个协同文档加分吧。

进入到面试环节，首先是两道笔试题，算是前置面试：

第一道题目是算法题：

提供了一个数组结构的 data，要求实现一个 query 方法，返回一个新的数组，query 方法内部有 过滤、排序、分组 等操作，并且支持链式调用，调用最终的 execute 方法返回结果：

const result = query(list)

  .where(item => item.age > 18)

  .sortBy('id')

  .groupBy('name')

  .execute();



console.log(result);

具体实现这里就不贴了，过滤用原生的数组 filter 方法，排序用原生的数组 sort 方法，分组需要手写一下，类似 lodash/groupBy 方法。

过滤和排序实现都比较顺利，在实现分组方法的时候不是很顺利，有点忘记思路了，不过最后还是写出来了，关于链式调用，核心是只需要在每一步的操作最后返回 this 即可。

第二道题目是场景题：

要求用 vue 或者 react 实现一个倒计时抢券组件，页面加载时从 10s 开始倒计时，倒计时结束之后点击按钮请求接口进行抢券，同时更新文案等等功能。因为我对 react 比较熟悉一点，所以这里就选择了 react。

涉及到的知识点有 hook 中对 setTimeout 的封装、异步请求处理、状态更新、CSS基本功 的考察等等……

具体实现这里也不贴了，写了一堆自定义 hook，因为平时也在参与 ahooks 的维护工作，ahooks 源码背的滚瓜烂熟，所以直接搬过来了，这道题整体感觉没啥难度，算是比较顺利的。

笔试题整个过程中唯一不顺利的是在线编辑器没有类似 vscode 这样的 自动补全 功能，不管是变量还是保留字，很多单词想不起来怎么拼写，就很尴尬，英文太差是硬伤 :(

笔试过程最后中出现了一点小插曲，因为笔试有时间限制，需要在规定的时间内完成，但是倒计时还没结束，不知道为什么就自动交卷了，不过那个时候已经写的差不多了，功能全部实现了，还剩下卡片的样式没完成，css 还需要完善一下，于是就在 Boss 上跟对方解释了一下，说明了情况。

过了几分钟，对面直接回复笔试过了，然后约了面试。

一面：

• 
  

  自我介绍

  
  

  这里大概说了两分钟，介绍了过往工作经历，做过的业务以及技术栈。

  
  


• 
  

  七层网络模型、和 DNS 啥的

  
  

  计网这方面属于知识盲区了，听到这个问题两眼一黑，思索了一会儿，直接说回答不上来。

  
  


• 
  

  然后问了一些 host 相关的东西

  
  
  
  
  • 很遗憾也没回答上来，尴尬。对方问我是不是计算机专业的，我坦诚的告诉对方是建筑工程。
  
  
  
  


• 
  

  React 代码层的优化可以说一下么？

  
  
  
  
  • 大概说了 class 组件和 function 组件两种情况，核心是通过减少渲染次数达到优化目的，具体的优化手段有 PureComponent、shouldComponentUpdate、React.memo、React.useMemo、React.useCallback、React.useRef 等等。
  
  
  
  


• 
  

  说一下 useMemo 和 useCallback 有什么区别

  
  
  
  
  • 很基础的问题，这里就不展开说了。
  
  
  
  


• 
  

  说一下 useEffect 和 useLayoutEffect 有什么区别

  
  
  
  
  • 很基础的问题，这里就不展开说了。
  
  
  
  


• 
  

  问了一下 useEffect 对应在 class 中都生命周期怎么写？

  
  
  
  
  • 很基础的问题，这里就不展开说了。
  
  
  
  


• 
  

  如果在 if 里面写 useEffect 会有什么表现？

  
  
  
  
  • 开始没听清楚，误解对方的意思了，以为他说的是在 useEffect 里面写 if 语句，所以胡扯了一堆，后面对方纠正了一下，我才意识到对方在问什么，然后回答了在条件语句里面写 useEffect 控制台会出现报错，因为 hook 的规则就是不能在条件语句或者循环语句里面写，这点在 react 官方文档里面也有提到。
  
  
  
  


• 
  

  说一下 React 的 Fiber 架构是什么

  
  
  
  
  • 
    

    这里说了一下 Fiber 本质上就是一个对象，是 React 16.8 出现的东西，主要有三层含义：

    
    
    
    
    1. 
       

       作为架构来说，在旧的架构中，Reconciler（协调器）采用递归的方式执行，无法中断，节点数据保存在递归的调用栈中，被称为 Stack Reconciler，stack 就是调用栈；在新的架构中，Reconciler（协调器）是基于 fiber 实现的，节点数据保存在 fiber 中，所以被称为 fiber Reconciler。

       
       
    
    
    2. 
       

       作为静态数据结构来说，每个 fiber 对应一个组件，保存了这个组件的类型对应的 dom 节点信息，这个时候，fiber 节点就是我们所说的虚拟 DOM。

       
       
    
    
    3. 
       

       作为动态工作单元来说，fiber 节点保存了该节点需要更新的状态，以及需要执行的副作用。

       
       
    
    
    
    

    （这里可以参考卡颂老师的《自顶向下学 React 源码》课程）

    
    
  
  
  
  


• 
  

  前面提到，在 if 语句里面写 hook 会报错，你可以用 fiber 架构来解释一下吗？

  
  
  
  
  • 这里说了一下，因为 fiber 是一个对象，多个 fiber 之间是用链表连接起来的，有一个固定的顺序…… 其实后面还有一些没说完，然后对方听到这里直接打断了，告诉我 OK，这个问题直接过了。
  
  
  
  


• 
  

  个人方面有什么规划吗？

  
  
  
  
  • 主要有两个方面，一个是计算机基础需要补补，前面也提到，我不是科班毕业的，计算机底层这方面比起其他人还是比较欠缺的，尤其是计网，另一方面就是英文水平有待提高，也会在将来持续学习。
  
  
  
  


• 
  

  对未来的技术上有什么规划呢？

  
  
  
  
  • 主要从业务转型工程化，比如做一些工具链什么的，构建、打包、部署、监控几个大的方向，node 相关的，这些都是我感兴趣的方向，未来都可以去探索，当然了现在也慢慢的在做这些事情，这里顺便提了一嘴，antd 的 script 文件夹里面的文件是我迁移到 esm + ts 的，其中一些逻辑也有重构过，比如收集 css token、生成 contributors 列表、预发布前的一些检查等等…… 所以对 node 这块也有一些了解。
  
  
  
  


• 
  

  能不能从技术的角度讲一下你工作中负责业务的复杂度？

  
  
  
  
  • 
    

    因为前两份工作中做的是传统的 B 端项目和 C 端项目，并没有什么可以深挖的技术难点，所以这里只说了第三份工作负责的项目，这是一个协同文档，既不算 B 端，也不算 C 端，这是一款企业级的多人协作数据平台，竞品有腾讯文档、飞书文档、语雀、WPS、维卡表格等等。

    
    

    协同文档在前端的难点主要有两个方面：

    
    
    
    
    1. 
       

       实时协同编辑的处理：当两个人同时进入一个单元格编辑内容，如果保证两个人看到的视图是同步的？那么这个时候就要提到冲突处理了，冲突处理的解决方案其实已经相对成熟，包括：

       
       
       
       
       • 
         

         编辑锁：当有人在编辑某个文档时，系统会将这个单元格锁定，避免其他人同时编辑，这种方法实现方式最简单，但也会直接影响用户体验。

         
         
       
       
       • 
         

         diff-patch：基于 Git 等版本管理类似的思想，对内容进行差异对比、合并等操作，也可以像 Git 那样，在冲突出现时交给用户处理。

         
         
       
       
       • 
         

         最终一致性实现：包括 Operational Transformation（OT）、 Conflict-free replicated data type（CRDT，称为无冲突可复制数据类型）。

         
         
       
       
       
       
    
    
    2. 
       

       性能问题

       
       
       
       
       • 
         

         众所周知，互联网一线大厂的协同文档工具都是基于 canvas 实现，并且有一套自己的 canvas 渲染引擎，但是我们没有，毕竟团队规模没法跟大厂比，这个项目前端就 2 个人，所以只能用 dom 堆起来（另一个同事已经跑路，现在就剩下我一个人了）。这导致页面卡顿问题非常严重，即使做了虚拟滚动，但是也没有达到很好的优化效果。老板的要求是做到十万量级的数据，但是实际上几千行就非常卡了，根本原因是数据量太大（相当于一张很大的 Excel 表格，里面的每一个单元格都是一个富文本编辑器），渲染任务多，导致内存开销太大。目前没有很好的解决方案，如果需要彻底解决性能问题，那么就需要考虑用 canvas 重写，但是这个基本上不太现实。

         
         
       
       
       • 
         

         因为卡顿的问题，暴露出来另一个问题，状态更新时，视图同步缓慢，所以这时候不得不提到另一个优化策略：乐观更新。乐观更新的思想是，当用户进行交互的时候，先更新视图，然后再向服务端发送请求，如果请求成功，那么什么都不用管，如果请求失败，那么就回滚视图。这样做的好处是，用户体验会好很多，在一些强交互的场景，不会阻塞用户操作，比如抖音的点赞就是这样做的。但是也会带来一些问题，比如：如果用户在编辑某个单元格时，另一个用户也在编辑这个单元格，那么就会出现冲突，这个时候就需要用到前面提到的冲突处理方案了。

         
         
       
       
       
       
    
    
    
    
  
  
  
  


• 
  

  可以讲一下你在工作中技术上的建设吗？

  
  
  
  
  • 这里讲了一下对 hooks 仓库的建设，封装了 100 多个功能 hook 和 业务 hook，把不变的部分隐藏起来，把变化的部分暴露出去，在业务中无脑传参即可，让业务开发更加简单，同时也提高了代码的复用性。然后讲了一下数据流重构之类的 balabala……
  
  
  
  


• 
  

  你有什么想问我的吗？

  
  
  
  
  • 问了一下面试结果大概多久能反馈给我，对方说两三天左右，然后就结束了。
  
  
  
  

结束之后不到 20 分钟，对方就在 Boss 上回复我说面试过了，然后约了二面。

二面：

• 
  

  自我介绍

  
  
  
  
  • 跟上一轮一样，大概说了两分钟，介绍了过往工作经历，做过的业务以及技术栈。
  
  
  
  


• 
  

  在 js 中原型链是一个很重要的概念，你能介绍一下它吗？

  
  
  
  
  • 要介绍原型链，首先要介绍一下原型，原型是什么…… 这块是纯八股，懒得打字了，直接省略吧。
  
  
  
  


• 
  

  object 的原型指向谁？

  
  
  
  
  • 回答了 null。（我也不知道对不对，瞎说的）
  
  
  
  


• 
  

  能说一下原型链的查找过程吗？

  
  
  
  
  • 磕磕绊绊背了一段八股文，这里省略吧。
  
  
  
  


• 
  

  node 的内存管理跟垃圾回收机制有了解过吗？

  
  
  
  
  • 
    

    暗暗窃喜，这个问题问到点子上了，因为两年前被问到过，所以当时专门写了一篇文章，虽然已经过去两年了，但还是背的滚瓜烂熟：

    
    
  
  
  • 
    

    首先分两种情况：V8 将内存分成 新生代空间 和 老生代空间

    
    
    
    
    • 
      

      新生代空间: 用于存活较短的对象

      
      
      
      
      • 
        

        又分成两个空间: from 空间 与 to 空间

        
        
      
      
      • 
        

        Scavenge GC 算法: 当 from 空间被占满时，启动 GC 算法

        
        
        
        
        • 存活的对象从 from space 转移到 to space
        
        
        • 清空 from space
        
        
        • from space 与 to space 互换
        
        
        • 完成一次新生代 GC
        
        
        
        
      
      
      
      
    
    
    • 
      

      老生代空间: 用于存活时间较长的对象

      
      
      
      
      • 
        

        从 新生代空间 转移到 老生代空间 的条件（这个过程称为对象晋升）

        
        
        
        
        • 经历过一次以上 Scavenge GC 的对象
        
        
        • 当 to space 体积超过 25%
        
        
        
        
      
      
      • 
        

        标记清除算法：标记存活的对象，未被标记的则被释放

        
        
        
        
        • 增量标记：小模块标记，在代码执行间隙执，GC 会影响性能
        
        
        • 并发标记：不阻塞 js 执行
        
        
        
        
      
      
      
      
    
    
    
    
  
  
  
  


• 
  

  js 中的基础类型和对象类型有什么不一样？

  
  
  
  
  • 基础类型存储在栈中，对象类型存储在堆中。
  
  
  
  


• 
  

  看你简历上是用 React，你能简单的介绍一下 hooks 吗？

  
  
  
  
  • 本质上就是一个纯函数，大概介绍了一下 hooks 的优点，以及 hooks 的使用规则等等。
  
  
  
  


• 
  

  简单说一下 useEffect 的用法：

  
  
  
  
  • useEffect 可以代替 class 中的一些生命周期，讲了一下大概用法，然后讲了一下 useEffect 的执行时机，以及 deps 的作用。
  
  
  
  


• 
  

  说一下 useEffect 的返回值用来做什么？

  
  
  
  
  • 返回一个函数，用来做清除副作用的工作，比如：清除定时器，清除事件监听等等。
  
  
  
  


• 
  

  你知道 useEffect 第二个参数内部是怎么比较的吗？

  
  
  
  
  • 说了一下内部是浅比较，源码中用 for 循环配合 Object.is 实现。（感觉这个问题就是在考察有没有读过 React 源码）
  
  
  
  


• 
  

  前端的话可能跟网络打交道比较多，网络你了解多少呢？

  
  
  
  
  • 这里直接坦诚的说了一下，网络是我的弱项，前面一面也问到了网络七层模型，没回答出来。
  
  
  
  


• 
  

  那你回去了解过七层模型吗？我现在再问你一遍，你能回答出来吗？

  
  
  
  
  • 磕磕绊绊回答出来了。
  
  
  
  


• 
  

  追问：http 是在哪一层实现的？

  
  
  
  
  • 应用层。
  
  
  
  


• 
  

  说一下 get 跟 post 有什么区别？

  
  
  
  
  • 两眼一黑，脑子一片空白，突然不知道说什么了，挤了半天挤出来一句：get 大多数情况下用来查询，post 大多数情况下用来提交数据。get 的入参拼在 url 上，post 请求的入参在 body 里面。面试官问我还有其它吗？我说想不起来了……
  
  
  
  


• 
  

  说一下浏览器输入 url 到页面加载的过程：

  
  
  
  
  • 
    

    输入网址发生以下步骤：

    
    
    
    
    1. 通过 DNS 解析域名的实际 IP 地址
    
    
    2. 检查浏览器是否有缓存，命中则直接取本地磁盘的 html，如果没有命中强缓存，则会向服务器发起请求（先进行下一步的 TCP 连接）
    
    
    3. 若强缓存和协商缓存都没有命中，则返回请求结果
    
    
    4. 然后与 WEB 服务器通过三次握手建立 TCP 连接。期间会判断一下，若协议是 https 则会做加密，如果不是，则会跳过这一步
    
    
    5. 加密完成之后，浏览器发送请求获取页面 html，服务器响应 html，这里的服务器可能是 server、也可能是 cdn
    
    
    6. 接下来是浏览器解析 HTML，开始渲染页面
    
    
    
    
  
  
  • 
    

    顺便说了渲染页面的过程：

    
    
    
    
    1. 浏览器会将 HTML 解析成一个 DOM 树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
    
    
    2. 将 CSS 解析成 CSS Rule Tree（css 规则树）。
    
    
    3. 解析完成后，浏览器引擎会根据 DOM 树和 CSS 规则树来构造 Render Tree。（注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。）
    
    
    4. 有了 Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系。下一步进行 layout，进入布局处理阶段，即计算出每个节点在屏幕中的位置。
    
    
    5. 最后一个步骤就是绘制，即遍历 RenderTree，层绘制每个节点。根据计算好的信息绘制整个页面。
    
    
    
    
  
  
  • 
    

    渲染完成之后，开始执行其它任务：

    
    
    
    
    1. dom 操作
    
    
    2. ajax 发起的 http 网络请求等等……
    
    
    3. 浏览器处理事件循环等异步逻辑等等……
    
    
    
    
  
  
  
  


• 
  

  菜单左中右布局，两边定宽，中间自适应，说一下有几种实现方式

  
  
  
  
  • 比较经典的面试题，说了 flex 和 float 两种方式。
  
  
  
  


• 
  

  项目难点

  
  
  
  
  • 和一面一样，说了协同文档的两大难点，这里就不重复了。
  
  
  
  


• 
  

  你有什么想问我的吗？

  
  
  
  
  • 和一面一样，问了一下面试结果大概多久能反馈给我，对方说两三天左右，然后就结束了。
  
  
  
  


• 
  

  最后问了期望薪资什么的，然后就结束了。

  
  

二面结束之后，大概过了几个小时，在 Boss 上跟对方说了一声，如果没过的话也麻烦跟我说一下，然后这时候，对方在 Boss 上问我，第一学历是不是专科？我说是的，感觉到不太妙的样子，

然后又过了一会儿，对方说定级应该不会高，他后续看一下面试官的反馈如何……

然后又追问我，换工作的核心诉求是涨薪还是能力的提升，这里我回答的比较委婉，其实两个都想要 QAQ

今天已经是第二天了，目前没有下文，看起来二面是过了，但是因为学历不够，中止了三面的流程，基本上是失败了，我也不会报有什么希望了，所以写个面经记录一下。

最后，给自己打个广告！求职求职求职！！！

社交信息：

• GitHub：github.com/li-jia-nan


• 掘金：juejin.cn/user/782508…

个人优势：

• antd 团队成员、ahooks 团队成员，活跃于 github 开源社区，给众多知名大型开源项目提交过 PR，拥有丰富的 React + TS 实战经验


• 熟悉前端性能优化的实现，例如代码优化、打包优化、资源优化，能结合实际业务场景进行优化


• 熟悉 webpack / vite 等打包工具的基本配置， 能够对以上工具进行二次封装、基于以上工具搭建通用的开发环境


• 熟悉 prettier / eslint 基本配置，有良好且严格的编码习惯，唯客户论，实用主义者


• 熟悉代码开发到上线全流程，对协同开发，分支管理，项目配置等都有较深刻的最佳实践

可内推的大佬们麻烦联系我！在 github 主页有联系方式，或者直接在掘金私聊我也可，谢谢！！

作者：三年没洗澡
来源：juejin.cn/post/7239715208792342584

头像

头像是指在互联网上用于代表个人或实体的图像。在社区中，头像通常用于标识和区分用户，是用户身份的象征。

社区的头像有多种意义，不限于以下几点:

• 身份标识：社区头像可以让用户在互联网上更好地代表自己，帮助用户与其他用户区分身份。


• 个性表达：社区头像可以是用户个人喜好的表达，例如使用特定的头像可以代表用户的风格、爱好等。


• 社交互动：社区头像也可以促进用户之间的互动，例如用户可以通过观察其他用户的头像来了解对方的性格、兴趣爱好等。


• 社区文化：在某些社区中，头像可能会成为社区文化的的一部分，例如某些社区可能会有特定的头像格式、颜色等。

怎么获取一个头像

如果你想要获取一个头像，你可以考虑以下几种方法:

• 使用第三方头像库：有许多第三方头像库提供大量的头像选择，你可以通过搜索或浏览这些头像库来获取头像。常见的第三方头像库包括 imgur、imgur、av.com 等。


• 使用网站或应用程序的内置头像选择器：许多网站和应用程序都提供了内置的头像选择器，你可以通过选择器来浏览和使用现有的头像。例如，在社交媒体网站上，你可以使用内置的头像选择器来浏览和使用其他用户分享的头像。


• 使用自己的图片编辑器：如果你拥有一张图片，你可以考虑使用一些图片编辑器来创建或修改头像。例如，你可以使用 Photoshop、GIMP 等专业的图形编辑软件来创建或修改头像。


• 使用在线头像制作工具：有一些在线头像制作工具可以帮助你创建自己的头像。这些工具通常提供各种图像模板、字体和颜色选择，你可以根据工具的指导来创建自己的头像。

AIGC

• 确定您的头像风格：您可以选择自己喜欢的风格，例如卡通、现代、传统等等。


• 选择适当的图像工具：您可以选择任何适当的图像工具，例如 Photoshop、GIMP 等等。


• 创建您自己的头像：您可以使用工具中的绘图工具、滤镜和调整工具等来创建自己的头像。


• 参考其他头像：您可以浏览互联网上的各种头像，以获得灵感和创意。


• 注意细节：当您创建头像时，一定要注意细节，例如颜色、纹理、形状等等。

我们来生成一下

介绍

动画是 Android 应用程序中重要的交互特性。Android 提供了多种动画效果，包括平移、缩放、旋转和透明度等，它们可以通过代码或 XML 来实现。本文将介绍 Android 动画的原理和实现方法，并提供一些示例。

原理

Android 动画的实现原理是通过改变视图的属性来实现的。当我们在代码中设置视图的属性值时，Android 会通过平滑过渡的方式来将视图从一个状态过渡到另一个状态。这种平滑过渡的效果就是动画效果。

属性

Android 中有许多属性可以用来实现动画效果，以下是一些常用的属性：

• translationX：视图在 X 轴上的平移距离。


• translationY：视图在 Y 轴上的平移距离。


• scaleX：视图在 X 轴上的缩放比例。


• scaleY：视图在 Y 轴上的缩放比例。


• rotation：视图的旋转角度。


• alpha：视图的透明度。

类型

Android 中有多种不同类型的动画，每种类型都有其自身的特点和用途：

View 动画

View 动画是一种在应用程序中实现动画效果的简单方法。它可以通过 XML 或代码来实现。View 动画可以应用于任何 View 对象，包括按钮、文本框、图像等等。常见的 View 动画包括平移、缩放、旋转和透明度等效果。以下是一个 View 动画的 XML 示例：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate

        android:fromXDelta="0%"

        android:toXDelta="50%"

        android:duration="500"

        android:repeatCount="infinite"

        android:repeatMode="reverse" />

</set>

帧动画

帧动画是一种将一系列图像逐帧播放来实现动画效果的方法。它可以通过 XML 或代码来实现。帧动画常用于播放一系列连续的图像，例如动态图像、电影等等。以下是一个帧动画的 XML 示例：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

    <item android:drawable="@drawable/animation_frame1" android:duration="50" />

    <item android:drawable="@drawable/animation_frame2" android:duration="50" />

    <item android:drawable="@drawable/animation_frame3" android:duration="50" />

    ...

</animation-list>

属性动画

属性动画是一种可以改变视图属性值的动画效果。它可以通过 XML 或代码来实现。属性动画可以应用于任何属性，包括大小、颜色、位置、透明度等等。它可以在运行时动态地更改属性值，从而实现平滑的动画效果。以下是一个属性动画的 Java 代码的示例：

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);

animator.setDuration(1000);

animator.start();

过渡动画

过渡动画是一种在应用程序中实现平滑过渡效果的方法。它可以通过 XML 或代码来实现。过渡动画常用于实现屏幕之间的切换效果，例如滑动、淡入淡出等等。以下是一个过渡动画的 XML 示例：

<transition xmlns:android="http://schemas.android.com/apk/res/android">

    <fade android:duration="500" />

</transition>

Lottie 动画

Lottie 是 Airbnb 开源的一种动画库，它可以将 Adobe After Effects 中制作的动画直接导出为 JSON 格式，并在 Android 应用程序中使用。Lottie 动画可以实现非常复杂的动画效果，例如骨骼动画、粒子效果等等。

实现

要实现 Android 动画，我们需要按照以下步骤：

1. 创建动画资源文件。


2. 在代码中加载动画资源文件。


3. 将动画应用到相应的视图中。

我们可以通过 XML 或代码来创建动画资源文件。以下是一个简单的平移动画的 XML 示例：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate

        android:fromXDelta="0%p"

        android:toXDelta="50%p"

        android:duration="500"

        android:repeatCount="infinite"

        android:repeatMode="reverse" />

</set>

在代码中加载动画资源文件的方法如下：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);

最后，我们需要将动画应用到相应的视图中：

imageView.startAnimation(animation);

下面是一个实现平移动画效果的 Java 代码示例：

View view = findViewById(R.id.view);

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);

animator.setDuration(1000);

animator.start();

结论

无论是在应用程序设计中还是在用户体验中，动画都是一个非常重要的因素。如果你想要在你的应用程序中实现动画效果，本文提供了 Android 动画的基本原理和实现方法。你可以根据自己的需要使用不同类型的动画来实现不同的效果。

推荐

android_startup: 提供一种在应用启动时能够更加简单、高效的方式来初始化组件，优化启动速度。不仅支持Jetpack App Startup的全部功能，还提供额外的同步与异步等待、线程控制与多进程支持等功能。

AwesomeGithub: 基于Github的客户端，纯练习项目，支持组件化开发，支持账户密码与认证登陆。使用Kotlin语言进行开发，项目架构是基于JetPack&DataBinding的MVVM；项目中使用了Arouter、Retrofit、Coroutine、Glide、Dagger与Hilt等流行开源技术。

flutter_github: 基于Flutter的跨平台版本Github客户端，与AwesomeGithub相对应。

android-api-analysis: 结合详细的Demo来全面解析Android相关的知识点, 帮助读者能够更快的掌握与理解所阐述的要点。

daily_algorithm: 每日一算法，由浅入深

前文

今天聊到的是滚动视图的 刷新与加载，对于这个老生常谈的问题解决方案就太多了，优秀的插件也屡见不鲜，譬如 pull_to_refresh、 easy_refresh、还有笔者前段时间使用过的 infinite_scroll_pagination 这些都是极具代表性的优秀插件。
那你在使用时有没有类似情况：

• 为了重复的样版式代码感到厌倦？


• 为了Ctrl V+C感到无聊？


• 看到通篇类似的代码想大刀阔斧的整改？


• 更有甚者有没有本来只想自定义列表样式，却反而浪费更多的时间来完成基础配置？

现在我们来解决这类问题，欢迎来到走近科学探索发现 - Approaching Scientific Exploration and Discovery。（可能片场走错了：) ）

注意

• 本文以 easy_refresh 作为刷新框架举例说明（其他框架的类似）


• 本文案例demo以 getx 作为项目状态管理框架（与刷新无关仅作为项目基础框架构成，不喜勿喷）

正文

现在请出我们重磅成员mixin,对于这个相信大家已经非常熟悉了。我们要做的就是利用easy_refresh提供的refresh controller对视图逻辑进行拆分，从而精简我们的样板式代码。

首页拆离我们刷新和加载方法：

import 'dart:async';

import 'package:easy_refresh/easy_refresh.dart';

import 'state.dart';



mixin PagingMixin<T> {

  /// 刷新控制器

  final EasyRefreshController _pagingController = EasyRefreshController(

      controlFinishLoad: true, controlFinishRefresh: true);

  EasyRefreshController get pagingController => _pagingController;



  /// 初始页码      <---- 单独提出这个的原因是有时候我们请求的起始页码不固定，有可能是0，也有可能是1

  int _initPage = 0;



  /// 当前页码

  int _page = 0;

  int get page => _page;



  /// 列表数据

  List<T> get items => _state.items;

  int get itemCount => items.length;



  /// 错误信息

  dynamic get error => _state.error;



  /// 关联刷新状态管理的控制器       <----  自定义状态类型，后文会有阐述主要包含列表数据、初始加载是否为空、错误信息

  PagingMixinController get state => _state;

  final PagingMixinController<T> _state = PagingMixinController(

    PagingMixinData(items: []),

  );



  /// 是否加载更多       <----  可以在控制器中初始化传入，控制是否可以进行加载

  bool _isLoadMore = true;

  bool get isLoadMore => _isLoadMore;



  /// 控制刷新结束回调（异步处理）       <----  手动结束异步操作，并返回结果

  Completer? _refreshComplater;



  /// 挂载分页器

  /// `controller` 关联刷新状态管理的控制器

  /// `initPage` 初始页码值(分页起始页)

  /// `isLoadMore` 是否加载更多

  void initPaging({

    int initPage = 0,

    isLoadMore = true,

  }) {

    _isLoadMore = isLoadMore;

    _initPage = initPage;

    _page = initPage;

  }



  /// 获取数据

  FutureOr fetchData(int page);



  /// 刷新数据

  Future onRefresh() async {

    _refreshComplater = Completer();

    _page = _initPage;

    fetchData(_page);

    return _refreshComplater!.future;

  }



  /// 加载更多数据

  Future onLoad() async {

    _refreshComplater = Completer();

    _page++;

    fetchData(_page);

    return _refreshComplater!.future;

  }



  /// 获取数据后调用

  /// `items` 列表数据

  /// `maxCount` 数据总数，如果为0则默认通过 `items` 有无数据判断是否可以分页加载, null为非分页请求

  /// `error` 错误信息

  /// `limit` 单页显示数量限制，如果items.length < limit 则没有更多数据

  void endLoad(

    List<T>? list, {

    int? maxCount,

    // int limit = 5,

    dynamic error,

  }) {

    if (_page == _initPage) {

      _refreshComplater?.complete();

      _refreshComplater = null;

    }



    final dataList = List.of(_state.value.items);

    if (list != null) {

      if (_page == _initPage) {

        dataList.clear();

        // 更新数据

        _pagingController.finishRefresh();

        _pagingController.resetFooter();

      }

      dataList.addAll(list);

      // 更新列表

      _state.value = _state.value.copyWith(

        items: dataList,

        isStartEmpty: page == _initPage && list.isEmpty,

      );



      // 默认没有总数量 `maxCount`，用获取当前数据列表是否有值判断

      // 默认有总数量 `maxCount`, 则判断当前请求数据list+历史数据items是否小于总数

      // bool hasNoMore = !((items.length + list.length) < maxCount);

      bool isNoMore = true;

      if (maxCount != null) {

        isNoMore = page > 1; // itemCount >= maxCount;

      }

      var state = IndicatorResult.success;

      if (isNoMore) {

        state = IndicatorResult.noMore;

      }

      _pagingController.finishLoad(state);

    } else {

      _state.value = _state.value.copyWith(items: [], error: error ?? '数据请求错误');

    }

  }



}

创建PagingMixin<T>混入类型，泛型<T>属于列表子项的数据类型

void initPaging(...)：初始化的时候可以写入基本设置（可以不调用）

Future onRefresh() Future onLoad()：供外部调用的刷新加载方法

FutureOr fetchData(int page)：由子类集成重写，主要是完成数据获取方法，在获取到数据后，需要调用方法void endLoad(...)来结束整个请求操作，通知视图刷新

PagingMixinController继承自ValueNotifier，是对数据相关状态的缓存，便于独立逻辑操作与数据状态：

class PagingMixinController<T> extends ValueNotifier<PagingMixinData<T>> {

  PagingMixinController(super.value);



  dynamic get error => value.error;

  List<T> get items => value.items;

  int get itemCount => items.length;

}

// flutter 关于easy_refresh更便利的打开方式

class PagingMixinData<T> {

  // 列表数据

  final List<T> items;



  /// 错误信息

  final dynamic error;



  /// 首次加载是否为空

  bool isStartEmpty;



  PagingMixinData({

    required this.items,

    this.error,

    this.isStartEmpty = false,

  });

  

  ....

  

  }

完成这两个类的编写，我们对于逻辑部分的拆离已经完成了。

下面是对easy_refresh的使用，封装：

class PullRefreshControl extends StatelessWidget {

  const PullRefreshControl({

    super.key,

    required this.pagingMixin,

    required this.childBuilder,

    this.header,

    this.footer,

    this.locatorMode = false,

    this.refreshOnStart = true,

    this.startRefreshHeader,

  });



  final Header? header;

  final Footer? footer;



  final bool refreshOnStart;

  final Header? startRefreshHeader;



  /// 列表视图

  final ERChildBuilder childBuilder;



  /// 分页控制器

  final PagingMixin pagingMixin;



  /// 是否固定刷新偏移

  final bool locatorMode;



  @override

  Widget build(BuildContext context) {

    final firstRefreshHeader = startRefreshHeader ??

        BuilderHeader(

          triggerOffset: 70,

          clamping: true,

          position: IndicatorPosition.above,

          processedDuration: Duration.zero,

          builder: (ctx, state) {

            if (state.mode == IndicatorMode.inactive ||

                state.mode == IndicatorMode.done) {

              return const SizedBox();

            }

            return Container(

              padding: const EdgeInsets.only(bottom: 100),

              width: double.infinity,

              height: state.viewportDimension,

              alignment: Alignment.center,

              child: SpinKitFadingCube(

                size: 25,

                color: Theme.of(context).primaryColor,

              ),

            );

          },

        );



    return EasyRefresh.builder(

      controller: pagingMixin.pagingController,

      header: header ??

          RefreshHeader(

            clamping: locatorMode,

            position: locatorMode

                ? IndicatorPosition.locator

                : IndicatorPosition.above,

          ),

      footer: footer ?? const ClassicFooter(),

      refreshOnStart: refreshOnStart,

      refreshOnStartHeader: firstRefreshHeader,

      onRefresh: pagingMixin.onRefresh,

      onLoad: pagingMixin.isLoadMore ? pagingMixin.onLoad : null,

      childBuilder: (context, physics) {

        return ValueListenableBuilder(

          valueListenable: pagingMixin.state,

          builder: (context, value, child) {

            if (value.isStartEmpty) {

              return _PagingStateView(

                isEmpty: value.isStartEmpty,

                onLoading: pagingMixin.onRefresh,

              );

            }

            return childBuilder.call(context, physics);

          },

        );

      },

    );

  }

}

创建PullRefreshControl类型，设置必须属性pagingMixin 和 childBuilder，前者是我们创建的PagingMixin对象（可以是任何类型，只要支持混入就可以了），后者是对我们滚动列表的实现。 其他的都是对 easy_refresh的属性配置，参考相关文档就行了。

到这里我们减配版的封装就完成了，使用方式如下：

但是我们并没有完成我们前文所说的简化操作，还是需要一遍又一遍创建重复的滚动列表，所以我们继续：

/// 快速构建 `ListView` 形式的分页列表

/// 其他详细参数查看 [ListView]

class SpeedyPagedList<T> extends StatelessWidget {

  const SpeedyPagedList({

    super.key,

    required this.controller,

    required this.itemBuilder,

    this.scrollController,

    this.padding,

    this.header,

    this.footer,

    this.locatorMode = false,

    this.refreshOnStart = true,

    this.startRefreshHeader,

    double? itemExtent,

  })  : _separatorBuilder = null, 

        _itemExtent = itemExtent;



  const SpeedyPagedList.separator({

    super.key,

    required this.controller,

    required this.itemBuilder,

    required IndexedWidgetBuilder separatorBuilder,

    this.scrollController,

    this.padding,

    this.header,

    this.footer,

    this.locatorMode = false,

    this.refreshOnStart = true,

    this.startRefreshHeader,

  })  : _separatorBuilder = separatorBuilder,

        _itemExtent = null;



  final PagingMixin<T> controller;



  final Widget Function(BuildContext context, int index, T item) itemBuilder;



  final Header? header;

  final Footer? footer;



  final bool refreshOnStart;

  final Header? startRefreshHeader;

  final bool locatorMode;



  /// 参照 [ScrollView.controller].

  final ScrollController? scrollController;



  /// 参照 [ListView.itemExtent].

  final EdgeInsetsGeometry? padding;



  /// 参照 [ListView.separator].

  final IndexedWidgetBuilder? _separatorBuilder;



  /// 参照 [ListView.itemExtent].

  final double? _itemExtent;



  @override

  Widget build(BuildContext context) {

    return PullRefreshControl(

      pagingMixin: controller,

      header: header,

      footer: footer,

      refreshOnStart: refreshOnStart,

      startRefreshHeader: startRefreshHeader,

      locatorMode: locatorMode,

      childBuilder: (context, physics) {

        return _separatorBuilder != null

            ? ListView.separated(

                physics: physics,

                padding: padding,

                controller: scrollController,

                itemCount: controller.itemCount,

                itemBuilder: (context, index) {

                  final item = controller.items[index];

                  return itemBuilder.call(context, index, item);

                },

                separatorBuilder: _separatorBuilder!,

              )

            : ListView.builder(

                physics: physics,

                padding: padding,

                controller: scrollController,

                itemExtent: _itemExtent,

                itemCount: controller.itemCount,

                itemBuilder: (context, index) {

                  final item = controller.items[index];

                  return itemBuilder.call(context, index, item);

                },

              );

      },

    );

  }

}



...

归纳我们所需要的使用方式（我这里只写了ListView/GridView）,构创建快速初始化加载列表的方法，将我们仅需要的Widget Function(BuildContext context, int index, T item) itemBuilder单个元素的创建（因为对于大多列表来说我们仅关心单个元素样式）暴露出来，简化PullRefreshControl的使用。

对比前面的使用方式，现在更加简洁了，总计代码也就十几行吧。

到这里就结束啦，文章也仅算是对繁杂重复使用的东西进行一些归纳总结，没有特别推崇的意思，更优秀的方案也比比皆是，所以仁者见仁了各位。

附GIF展示：

附Demo地址： boomcx/templat

前端的菜单和按钮权限都可以通过配置来实现，但很多时候，后台查询数据库数据的权限需要通过手动添加SQL来实现。

比如员工打卡记录表，有id,name,dpt_id,company_id等字段，后两个表示部门ID和分公司ID。

查看员工打卡记录SQL为：select id,name,dpt_id,company_id from t_record

当一个总部账号可以查看全部数据此时,sql无需改变。因为他可以看到全部数据。

当一个部门管理员权限员工查看全部数据时，sql需要在末属添加 where dpt_id = #{dpt_id}

如果每个功能模块都需要手动写代码去拿到当前登陆用户的所属部门，然后手动添加where条件，就显得非常的繁琐。

因此，可以通过mybatis的拦截器拿到查询sql语句，再自动改写sql。

mybatis 拦截器

MyBatis 允许你在映射语句执行过程中的某一点进行拦截调用。默认情况下，MyBatis 允许使用插件来拦截的方法调用包括：

• Executor (update, query, flushStatements, commit, rollback, getTransaction, close, isClosed)


• ParameterHandler (getParameterObject, setParameters)


• ResultSetHandler (handleResultSets, handleOutputParameters)


• StatementHandler (prepare, parameterize, batch, update, query)

这些类中方法的细节可以通过查看每个方法的签名来发现，或者直接查看 MyBatis 发行包中的源代码。 如果你想做的不仅仅是监控方法的调用，那么你最好相当了解要重写的方法的行为。 因为在试图修改或重写已有方法的行为时，很可能会破坏 MyBatis 的核心模块。 这些都是更底层的类和方法，所以使用插件的时候要特别当心。

通过 MyBatis 提供的强大机制，使用插件是非常简单的，只需实现 Interceptor 接口，并指定想要拦截的方法签名即可。

分页插件pagehelper就是一个典型的通过拦截器去改写SQL的。

可以看到它通过注解 @Intercepts 和签名 @Signature 来实现，拦截Executor执行器，拦截所有的query查询类方法。

我们可以据此也实现自己的拦截器。

    import com.skycomm.common.util.user.Cpip2UserDeptVo;

    import com.skycomm.common.util.user.Cpip2UserDeptVoUtil;

    import lombok.extern.slf4j.Slf4j;

    import org.apache.commons.lang3.StringUtils;

    import org.apache.ibatis.cache.CacheKey;

    import org.apache.ibatis.executor.Executor;

    import org.apache.ibatis.mapping.BoundSql;

    import org.apache.ibatis.mapping.MappedStatement;

    import org.apache.ibatis.mapping.SqlSource;

    import org.apache.ibatis.plugin.Interceptor;

    import org.apache.ibatis.plugin.Intercepts;

    import org.apache.ibatis.plugin.Invocation;

    import org.apache.ibatis.plugin.Signature;

    import org.apache.ibatis.session.ResultHandler;

    import org.apache.ibatis.session.RowBounds;

    import org.springframework.stereotype.Component;

    import org.springframework.web.context.request.RequestAttributes;

    import org.springframework.web.context.request.RequestContextHolder;

    import org.springframework.web.context.request.ServletRequestAttributes;



    import javax.servlet.http.HttpServletRequest;

    import java.lang.reflect.Method;



    @Component

    @Intercepts({

            @Signature(type = Executor.class, method = "query", args = {MappedStatement.class, Object.class, RowBounds.class, ResultHandler.class}),

            @Signature(type = Executor.class, method = "query", args = {MappedStatement.class, Object.class, RowBounds.class, ResultHandler.class, CacheKey.class, BoundSql.class}),

    })

    @Slf4j

    public class MySqlInterceptor implements Interceptor {



        @Override

        public Object intercept(Invocation invocation) throws Throwable {

            MappedStatement statement = (MappedStatement) invocation.getArgs()[0];

            Object parameter = invocation.getArgs()[1];

            BoundSql boundSql = statement.getBoundSql(parameter);

            String originalSql = boundSql.getSql();

            Object parameterObject = boundSql.getParameterObject();



            SqlLimit sqlLimit = isLimit(statement);

            if (sqlLimit == null) {

                return invocation.proceed();

            }



            RequestAttributes req = RequestContextHolder.getRequestAttributes();

            if (req == null) {

                return invocation.proceed();

            }



            //处理request

            HttpServletRequest request = ((ServletRequestAttributes) req).getRequest();

            Cpip2UserDeptVo userVo = Cpip2UserDeptVoUtil.getUserDeptInfo(request);

            String depId = userVo.getDeptId();



            String sql = addTenantCondition(originalSql, depId, sqlLimit.alis());

            log.info("原SQL：{}， 数据权限替换后的SQL：{}", originalSql, sql);

            BoundSql newBoundSql = new BoundSql(statement.getConfiguration(), sql, boundSql.getParameterMappings(), parameterObject);

            MappedStatement newStatement = copyFromMappedStatement(statement, new BoundSqlSqlSource(newBoundSql));

            invocation.getArgs()[0] = newStatement;

            return invocation.proceed();

        }



        /**

         * 重新拼接SQL

         */

        private String addTenantCondition(String originalSql, String depId, String alias) {

            String field = "dpt_id";

            if(StringUtils.isBlank(alias)){

                field = alias + "." + field;

            }



            StringBuilder sb = new StringBuilder(originalSql);

            int index = sb.indexOf("where");

            if (index < 0) {

                sb.append(" where ") .append(field).append(" = ").append(depId);

            } else {

                sb.insert(index + 5, " " + field +" = " + depId + " and ");

            }

            return sb.toString();

        }



        private MappedStatement copyFromMappedStatement(MappedStatement ms, SqlSource newSqlSource) {

            MappedStatement.Builder builder = new MappedStatement.Builder(ms.getConfiguration(), ms.getId(), newSqlSource, ms.getSqlCommandType());

            builder.resource(ms.getResource());

            builder.fetchSize(ms.getFetchSize());

            builder.statementType(ms.getStatementType());

            builder.keyGenerator(ms.getKeyGenerator());

            builder.timeout(ms.getTimeout());

            builder.parameterMap(ms.getParameterMap());

            builder.resultMaps(ms.getResultMaps());

            builder.cache(ms.getCache());

            builder.useCache(ms.isUseCache());

            return builder.build();

        }





        /**

         * 通过注解判断是否需要限制数据

         * @return

         */

        private SqlLimit isLimit(MappedStatement mappedStatement) {

            SqlLimit sqlLimit = null;

            try {

                String id = mappedStatement.getId();

                String className = id.substring(0, id.lastIndexOf("."));

                String methodName = id.substring(id.lastIndexOf(".") + 1, id.length());

                final Class<?> cls = Class.forName(className);

                final Method[] method = cls.getMethods();

                for (Method me : method) {

                    if (me.getName().equals(methodName) && me.isAnnotationPresent(SqlLimit.class)) {

                        sqlLimit = me.getAnnotation(SqlLimit.class);

                    }

                }

            } catch (Exception e) {

                e.printStackTrace();

            }

            return sqlLimit;

        }





        public static class BoundSqlSqlSource implements SqlSource {



            private final BoundSql boundSql;



            public BoundSqlSqlSource(BoundSql boundSql) {

                this.boundSql = boundSql;

            }



            @Override

            public BoundSql getBoundSql(Object parameterObject) {

                return boundSql;

            }

        }

    }

顺便加了个注解 @SqlLimit，在mapper方法上加了此注解才进行数据权限过滤。

同时注解有两个属性，

@Target({ElementType.METHOD})

@Retention(RetentionPolicy.RUNTIME)

@Documented

@Inherited

public @interface SqlLimit {

    /**

     * sql表别名

     * @return

     */

    String alis() default "";



    /**

     * 通过此列名进行限制

     * @return

     */

    String columnName() default "";

}

columnName表示通过此列名进行限制，一般来说一个系统，各表当中的此列是统一的，可以忽略。

alis用于标注sql表别名，如 针对sql select * from tablea as a left join tableb as b on a.id = b.id 进行改写，如果不知道表别名，会直接在后面拼接 where dpt_id = #{dptId},

那此SQL就会错误的，通过别名 @SqlLimit(alis = "a") 就可以知道需要拼接的是 where a.dpt_id = #{dptId}

执行结果

原SQL：select * from person， 数据权限替换后的SQL：select * from person where dpt_id = 234

原SQL：select * from person where id > 1， 数据权限替换后的SQL：select * from person where dpt_id = 234 and id > 1

但是在使用PageHelper进行分页的时候还是有问题。

可以看到先执行了_COUNT方法也就是PageHelper，再执行了自定义的拦截器。

在我们的业务方法中注入SqlSessionFactory

@Autowired

@Lazy

private List<SqlSessionFactory> sqlSessionFactoryList;

PageInterceptor为1，自定义拦截器为0，跟order相反，PageInterceptor优先级更高，所以越先执行。

mybatis拦截器优先级

@Order

通过@Order控制PageInterceptor和MySqlInterceptor可行吗？

将MySqlInterceptor的加载优先级调到最高，但测试证明依然不行。

定义3个类

@Component

@Order(2)

public class OrderTest1 {



    @PostConstruct

    public void init(){

        System.out.println(" 00000 init");

    }

}

@Component

@Order(1)

public class OrderTest2 {



    @PostConstruct

    public void init(){

        System.out.println(" 00001 init");

    }

}

@Component

@Order(0)

public class OrderTest3 {



    @PostConstruct

    public void init(){

        System.out.println(" 00002 init");

    }

}

OrderTest1，OrderTest2，OrderTest3的优先级从低到高。

顺序预期的执行顺序应该是相反的：

00002 init

00001 init

00000 init

但事实上执行的顺序是

00000 init

00001 init

00002 init

@Order 不控制实例化顺序，只控制执行顺序。
@Order 只跟特定一些注解生效 如：@Compent @Service @Aspect … 不生效的如： @WebFilter

所以这里达不到预期效果。

@Priority 类似，同样不行。

@DependsOn

使用此注解将当前类将在依赖类实例化之后再执行实例化。

在MySqlInterceptor上标记@DependsOn("queryInterceptor")

启动报错，

这个时候queryInterceptor还没有实例化对象。

@PostConstruct

@PostConstruct修饰的方法会在服务器加载Servlet的时候运行，并且只会被服务器执行一次。

在同一个类里，执行顺序为顺序如下:Constructor > @Autowired > @PostConstruct。

但它也不能保证不同类的执行顺序。

PageHelper的springboot start也是通过这个来初始化拦截器的。

ApplicationRunner

仿照PageHelper来写

@Component

public class InterceptRunner implements ApplicationRunner {



    @Autowired

    private List<SqlSessionFactory> sqlSessionFactoryList;



    @Override

    public void run(ApplicationArguments args) throws Exception {

        MySqlInterceptor mybatisInterceptor = new MySqlInterceptor();

        for (SqlSessionFactory sqlSessionFactory : sqlSessionFactoryList) {

            org.apache.ibatis.session.Configuration configuration = sqlSessionFactory.getConfiguration();

            configuration.addInterceptor(mybatisInterceptor);

        }

    }

}

再执行，可以看到自定义拦截器在拦截器链当中下标变为了1（优先级与order刚好相反）

后台打印结果，达到了预期效果。

1. 前言

因为最近没有什么比较好的技术想要分享，所以来水一下文章，啊不对，是分享一下一些思路，和大家交流一下想法，没准能产生一些新的想法。这篇文章不具备权威，不一定正确，简单来说全都是我瞎吹。

开发这么久，多多少少也有了解过适配器模式。我还是一如既往的建议学习设计模式，不能光靠看别人的文章，得靠自己的积累和理解源码的做法来得更切实际。

2. 浅谈适配器

我们都知道，适配器模式是一种结构型模式，结构型模式我的理解都有一个特点，简单来说就是封装了一些操作，就是隐藏细节嘛，比如说代理就是隐藏了通过代理调用实体的细节。

我还是觉得我们要重头去思考它是怎样的一个思路。如果你去查“适配器模式”，相信你看到很多关于插头的说法，而且你会觉得这东西很简单，但好像看完之后又感觉学了个寂寞。

还是得从源码中去理解。先看看源码中最经典的适配器模式的使用地方，没错，RecyclerView的Adapter。但是它又不仅仅只使用Adapter模式，如果拿它的源码来做分析反而会有些绕。但是我们可以进行抽象。想想Adapter其实主要的流程就是输入数据然后输出View给RecyclerView

然后又可以大胆的去思考一下，如果不定义一个Adapter，没有ViewHolder，要怎么实现这个效果？写一个循环，然后在循环里面做一些逻辑判断，然后创建对应的子View，添加到父View中 ，大概会这样做吧。那其实Adapter就帮我们做了这一步，并且还做了很多比较经典的优化操作，其实大概就是这样。

然后从这样的模型中，我大概是能看出了一些东西，比如使用Adapter是为了输入一些东西，也可以说是为了让它封装一些逻辑，然后达到某些目的，如果用抽象的眼光去看，我不care你封装的什么东西，我只要你达到我的目的（输出我的东西），RecyclerView的adapter就是输出View。这是其一，另外，在这个模型中我有一个使用者去使用这个Adaper，这个Apdater在这里不是一个概念，而是一个对象，我这个使用者通过Adaper这个对象给它一些输入，以此来实现我的某些目标

ok，结合Adapter模式的结构图看看（随便从网上找一张图）

可以看到这个模型中有个Client，有个Tagrget，有个Adapter。拿RecyclerView的Adapter来说，Client是RecyclerView （当然具体的addView操作是在LayoutManager中，这里是抽象去看），Adapter就是RecyclerView.Adapter，而Tagrget抽象去看就是对view的操作。

3. 天马行空的使用

首先一般使用官方的RecyclerView啊这些，都会提供自己的Adapter，但是会让人会容易觉得Adapter就是在复用View的情况下使用。而我的理解是，RecyclerView的复用是ViewHolder的思想，不是Adapter的思想，比如早期的ListView也有Adapter啊，当时出RecyclerView之前也没有说用到ViewHolder的这种做法（这是很多年前的事），我说这个是想要表达不要把Adapter和RecyclerView绑一起，这样会让思维受到局限。

对我而言，Adapter在RecyclerView中的作用是 “Data To View” ,适配数据而产出对应的View。

那我可以把Apdater的作用理解成“Object To Object” ，对于我来说，Object它可以是Data，可以是View，甚至可以是业务逻辑。

所以当我跳出RecyclerView这种传统的 “Data To View” 的思维模式之后，Adapter适配器模式可以做到的场景就很多，正如上面我理解的，Adapter简单来说就是 “Data To View” ，那我可以用适配器模式去做 “Data To Data” ,可以去做 “View To Data” ，可以去做 “Business To Business” , “Business To View” 等等，实现多种效果。

假设我这里做个Data To Data的场景 （强行举的例子可能不是很好）

我请求后台拿到个人的基本信息数据

data class PeopleInfo(

    var name: String?,

    var sex: Int?,

    ......

)

然后通过个人的ID，再请求服务端另外一个接口拿到成绩数据

data class ScoreInfo(

    var language : Int,

    var math : Int,

    ......

)

然后我有个数据竞赛的报名表对象。

data class MathCompetition(

    var math : Int,

    var name : String

)

然后一般我们使用到的时候就会这样赋值，假设这段代码在一个Competition类中进行

val people = getPeopleInfo()

val score = getScoreInfo()

val mathTable = MathCompetition(

    score.math?,

    people.name?,

    ......

)

就是深拷贝的一种赋值，我相信很多人的代码里面肯定会有

两个对象 A 和 B

A.1 = B.1

A.2 = B.2

A.3 = B.3

......

这样的代码，然后对象的熟悉多的话这个代码就会写得很长。当然这不会造成什么大问题，但是你看着看着，总觉得缺少一些美感，但是好像这玩意没封装不起来这种感觉。

如果用适配器来做的话，首先明确要做的流程是从Competition这个类中，将所有数据整合成MathCompetition对象，目标就是输出MathCompetition对象。那从适配器模式的模型上去看，client就是Competition，是它的需求，Taget就是getMathCompetition，输出mathTable，然后我们可以写一个Adapter。

class McAdapter {



    var mathCompetition : MathCompetition? = null



    init {

        // 给默认值

        mathCompetition = MathCompetition(0, "name", ......)

    }



    fun setData(people : PeopleInfo? = null, score : ScoreInfo? = null){

        people?.let {

            mathCompetition?.name = it.name

            ......

        }



        score?.let {

            mathCompetition?.math = it.math

            ......

        }

    }

    

    fun getData() : MathCompetition?{

        return mathCompetition

    }



}

然后在Competition中就不需要直接引用MathCompetition，而是设置个setAdapter方法，然后需要拿数据时再调用adapter的getData()方法，这样就恰到好处，不会把这些深拷贝方式的赋值代码搞得到处都是。 这个Demo看着好像没什么，但是真碰到了N合1这样的数据场景的时候，使用Adapter显然会更安全。

我再简单举一个Business To View的例子吧。假设你的app中有很几套EmptyView，比如你有嵌入到页面的EmptyView，也有做弹窗类型的EmptyView，我们一般的做法就是对应的页面的xml文件中直接写EmptyView，那这些EmptyView的代码就会很分散是吧。OK，你也想整合起来，所以你会写个EmptyHelper，大概是这个意思，用单例写一个管理EmptyView的类，然后里面统一封装对EmptyView的操作，一般都会这样写。 其实如果你让我来做，我可能就会用适配器模式去实现。 ，当然也有其他办法能很好的管理，这具体的得看心情。

写一个Adapter，我这里写一段伪代码，应该比较容易能看懂

class EmptyAdapter() {

    // 这样语法要伴生，懒得写了，看得懂就行

    const val STATUS_NORMAL = 0

    const val STATUS_LOADING = 1

    const val STATUS_ERROR = 2



    private var type: Int = 0

    var parentView: ViewGroup? = null

    private var mEmptyView: BaseEmptyView? = null

    private var emptyStatus = 0 // 有个状态，0是不显示，1是显示加载中，2是加载失败......



    init {

        createEmptyView()

    }



    private fun createEmptyView() {

        // 也可以判断是否有parentView决定使用哪个EmptyView等逻辑

        mEmptyView = when (type) {

            0 -> AEmptyView

            1 -> BEmptyView

            2 -> CEmptyView

            else -> {

                AEmptyView

            }

        }

    }



    fun setData(status: Int) {

        when (status) {

            0 -> parentView?.removeView(mEmptyView)

            1 -> mEmptyView?.showLoading()

            2 -> mEmptyView?.showError()

        }

    }



    fun updateType(type: Int) {

        setData(0)

        this.type = type

        createEmptyView()

    }

}

然后在具体的Activity调用的时候，可以

val emptyAdapter = EmptyAdapter(getContentView())

// 然后在每次要loading的时候去设置adapter的的状态

emptyAdapter.setData(EmptyAdapter.STATUS_LOADING)

emptyAdapter.setData(EmptyAdapter.STATUS_NORMAL)

emptyAdapter.setData(EmptyAdapter.STATUS_ERROR)

可以看出这样做就有几个好处，其一就是不用每个xml都写EmptyView，然后也能做到统一的管理，和一些人写的Helper这种的效果类似，最后调用的方法也很简单，你只需要创建一个Adaper，然后调用它的setData就行，我们的RecyclerView也是这样的，在外层去创建然后调用Adapter就行。

4. 总结

写这篇文章主要是为了水，啊不对，是为了想说明几个问题：

（1）开发时要善于跳出一些限制去思考，比如RecyclerView你可能觉得适配器模式就和它绑定了，就和View绑定了，有View的地方才能使用适配器模式，至少我觉得不是这样。

（2）学习设计模式，只去看一些介绍是很难理解的，当然要知道它的一个大致的思想，然后要灵活运用到开发中，这样学它才有用。

（3）我对适配器模式的理解就是 Object To Object，我可以去写ViewAdapter，可以去写DataAdapter，也可以去写BusinessAadpter，可以用这个模式去适配不同的场景，利用这个思想来使代码更加合理。

当然最后还是要强调一下，我不敢保证我说的就是对的，我肯定不是权威的。但至少我使用这招之后的的新代码效果要比一些旧代码更容

1. 需求场景

• 有一个项目A，它依赖项目B


• 项目B是本地开发的，也在本地维护


• 项目A通过npm link链接到了项目B


• 随着项目A的不断迭代，功能升级较大创建了新的分支项目A-dev


• 项目A-dev分支也要求项目B也要创建出项目B-dev分支与之对应


• 项目A和项目A-dev都在产品同时运行，遇到问题都要在各自分支同步修复缺陷

在启动或者打包的时候需要特别小心项目B处在什么分支，错配分支就会导致项目启动失败或报错，于是需要有一个脚本帮我在项目启动时，检查依赖脚本是否在正确的分支上，如果不在，就自动将依赖分支切换到对应需要的分支上。

2. 脚本编写

2.1 脚本思路：

• 先去指定项目B的文件夹中查看该项目处于哪一个分支


• 通过动态参数获得本地启动或打包的是哪一个分支，和当前项目分支进行比对


• 如果不是当前分支，就切换到要求的分支， 切到对应分支后，再执行install操作


• 如果是当前分支则直接跳过分支切换操作，直接往下走

2.2 脚本创建

在vue项目根目录创建一个脚本文件check-dependency.js

下面脚本中分支名@tiamaes/t4-framework就对应项目B

const t4FrameworkFilePath = "D:/leehoo/t4-framework"; //本地@tiamaes/t4-framework目录地址



const { spawnSync } = require("child_process");



const branchName = process.argv[2];//获取参数分支名，打包时需要传递进来

if (!branchName) {

    console.error("Branch name is not specified.");

    process.exit(1);

}



// 获取当前分支

const result = spawnSync("git", ["rev-parse", "--abbrev-ref", "HEAD"], { cwd: t4FrameworkFilePath });

if (result.status !== 0) {

    console.error("Failed to get current branch:", result.stderr.toString());

    process.exit(1);

}

const currentBranch = result.stdout.toString().trim();



// 判断分支是否需要切换

if (currentBranch !== branchName) {

    console.log(`@tiamaes/t4-framework is not in ${branchName} branch. Switching to ${branchName} branch...`);

    const checkoutResult = spawnSync("git", ["checkout", branchName], { cwd: t4FrameworkFilePath });

    if (checkoutResult.status !== 0) {

        console.error(`Failed to switch to ${branchName} branch:`, checkoutResult.stderr.toString());

        process.exit(1);

    }



    // 安装依赖包

    console.log("Installing dependencies...");

    const installResult = spawnSync(process.platform === "win32" ? "npm.cmd" : "npm", ["install"], { cwd: t4FrameworkFilePath });

    if (installResult.status !== 0) {

        console.error("Failed to install dependencies:", installResult.stderr.toString());

        process.exit(1);

    }

    console.log("Dependencies installed successfully.");

}



console.log(`@tiamaes/t4-framework is in ${branchName} branch. Proceeding to build...`);



process.exit(0);

3. package.json引用

在该脚本的script中增加引用方式，在项目启动或打包的时候都要执行一次node check-dependency.js,其后跟随的是项目B的分支名,我这里是erp-dev和erp-m1两个分支

"scripts": {

    "serve:erp": "node check-dependency.js erp-dev && npm run link:local && vue-cli-service serve --mode development.erp",

    "serve:m1": "node check-dependency.js erp-m1 && npm run link:local && vue-cli-service serve --mode development.m1",

    "build:erp": "node check-dependency.js erp-dev && npm run link:local && vue-cli-service build --report --mode production.erp",

    "build:m1": "node check-dependency.js erp-m1 && npm run link:local && vue-cli-service build --mode production.m1",

    "link:local": "npm link @tiamaes/t4-framework",

  },

下面是执行效果

单例设计模式

单例设计模式是一种对象创建模式，用于产生一个对象的具体实例，它可以确保系统中一个类只产生一个实例。

好处：

• 对于频繁使用的对象，可以省略创建对象所花费的时间，这对于那些重量级对象而言，是非常可观的一笔系统开销。


• 由于new操作的次数减少，因而对系统内存的使用频率也会降低，这将减轻GC压力，缩短GC停顿时间。

单例模式的六种写法：

一、饿汉单例设计模式

步骤：

1. 私有化构造函数。


2. 声明本类的引用类型变量，并且使用该变量指向本类对象。


3. 提供一个公共静态的方法获取本类的对象。

//饿汉单例设计模式 ----> 保证Single在在内存中只有一个对象。

public class HungrySingleton {

	//声明本类的引用类型变量，并且使用该变量指向本类对象

	private static final HungrySingleton instance = new HungrySingleton();

	//私有化构造函数

	private HungrySingleton(){

		System.out.println("instance is created");

	}

	//提供一个公共静态的方法获取本类的对象

	public static HungrySingleton getInstance(){

		return instance;

	}

}

不足：无法对instance实例做延迟加载

优化：懒汉

二、懒汉单例设计模式

1. 私有化构造函数。


2. 声明本类的引用类型变量，但是不要创建对象。


3. 提供公共静态的方法获取本类的对象，获取之前先判断是否已经创建了本类对象，如果已经创建了，那么直接返回对象即可，如果还没有创建，那么先创建本类的对象，然后再返回。

//懒汉单例设计模式 ----> 保证Single在在内存中只有一个对象。

public class LazySingleton {

	//声明本类的引用类型变量，不创建本类的对象

	private static LazySingleton instance;

	//私有化构造函数

	private LazySingleton(){

		

	}

	public static LazySingleton getInstance(){

		//第一次调用的时候会被初始化

		if(instance == null){

			instance = new LazySingleton();

		}

		return instance;

	}

}

不足：在多线程的情况下，无法保证内存中只有一个实例

public class MyThread extends Thread{

	

	@Override

	public void run() {

		System.out.println(LazySingleton.getInstance().hashCode());

	}

	

	public static void main(String[] args) {

		MyThread[] myThread = new MyThread[10];

		for(int i=0;i<myThread.length;i++){

			myThread[i] = new MyThread();

		}

		for(int j=0;j<myThread.length;j++){

			myThread[j].start();

		}

	}

}

打印结果：

257688302

1983483740

1983483740

1983483740

1983483740

1983483740

1983483740

1388138972

1983483740

257688302

在多线程并发下这样的实现无法保证实例是唯一的。

优化：懒汉线程安全

三、懒汉线程安全

通过使用同步函数或者同步代码块保证

public class LazySafetySingleton {

	

	private static LazySafetySingleton instance;

	private LazySafetySingleton(){

		

	}

	//方法中声明synchronized关键字

	public static synchronized LazySafetySingleton getInstance(){

		if(instance == null){

			instance = new LazySafetySingleton();

		}

		return instance;

	}

	

	//同步代码块实现

	public static LazySafetySingleton getInstance1(){

		synchronized (LazySafetySingleton.class) {

			if(instance == null){

				instance = new LazySafetySingleton();

			}

		}

		return instance;

	}

}

不足：使用synchronized导致性能缺陷

优化：DCL

四、DCL

DCL：double check lock （双重检查锁机制）

public class DclSingleton {

	

	private static DclSingleton instance = null;

	

	private DclSingleton(){

		

	}

	public static DclSingleton getInstance(){

		//避免不必要的同步

		if(instance == null){

			//同步

			synchronized (DclSingleton.class) {

				//在第一次调用时初始化

				if(instance == null){

					instance = new DclSingleton();

				}

			}

		}

		return instance;

	}



}

不足：在if判断中执行的instance = new DclSingleton()，该操作不是一个原子操作，JVM首先会按照逻辑，第一步给instance分配内存；第二部，调用DclSingleton()构造方法初始化变量；第三步将instance对象指向JVM分配的内存空间；JVM的缺点：在即时编译器中，存在指令重排序的优化，即以上三步不一定会按照顺序执行，就会造成线程不安全。

优化：给instance的声明加上volatile关键字，volatile能保证线程在本地不会存有instance的副本，而是每次都到内存中读取。即禁止JVM的指令重排序优化。即按照原本的步骤。把instance声明为volatile之后，对它的写操作就会有一个内存屏障，这样，在它的赋值完成之前，就不会调用读操作。

注意：volatile阻止的不是instance = new DclSingleton();这句话内部的指令排序，而是保证了在一个写操作完成之前，不会调用读操作（if(instance == null)）

public class DclSingleton {

	

	private static volatile DclSingleton instance = null;

	

	private DclSingleton(){

		

	}

	public static DclSingleton getInstance(){

		//避免不必要的同步

		if(instance == null){

			//同步

			synchronized (DclSingleton.class) {

				//在第一次调用时初始化

				if(instance == null){

					instance = new DclSingleton();

				}

			}

		}

		return instance;

	}



}

五、静态内部类

JVM提供了同步控制功能：static final，利用JVM进行类加载的时候保证数据同步。

在内部类中创建对象实例，只要应用中不使用内部类，JVM就不会去加载该类，就不会创建我们要创建的单例对象，

public class StaticInnerSingleton {

	

	private StaticInnerSingleton(){

		

	}

	/**

	 * 在第一次加载StaticInnerSingleton时不会初始化instance，

	 * 只在第一次调用了getInstance方法时，JVM才会加载StaticInnerSingleton并初始化instance

	 * @return

	 */

	public static StaticInnerSingleton getInstance(){

		return SingletonHolder.instance;

	}

	//静态内部类

	private static class SingletonHolder{

		private static final StaticInnerSingleton instance = new StaticInnerSingleton();

	}



}

优点：JVM本身机制保证了线程安全，没有性能缺陷。

六、枚举

public enum EnumSingleton {

	//定义一个枚举的元素，它就是Singleton的一个实例

	INSTANCE;

	

	public void doSomething(){

		

	}

}

优点：写法简单，线程安全

注意：如果在枚举类中有其他实例方法或实例变量，必须确保是线程安全的。

作者：我可能是个假开发
来源：juejin.cn/post/7242614671001862199

自我介绍

看官们好，我叫JetTsang，之前都是在掘金潜水来着，现在偶尔做一些内容输出吧。

前言

无论是后台管理系统，还是面向C端的产品，权限控制都是日常工作中常见的需求。在此梳理一下权限控制的那些逻辑，以及在Vue/React框架下是有什么样的解决方案。

什么是权限控制？

现在基本上都是基于RBAC权限模型来做权限控制

一般来说权限控制就是三种

• 
  

  页面权限：说白了部分页面是具备权限的，没权限的无法访问

  
  


• 
  

  操作权限：增删改查的操作会有权限的控制

  
  


• 
  

  数据权限：不同用户看到的、数据是不一样的，比如一个列表，不同权限的查看这部分数据，可能有些字段是**脱敏的，有些条目无法查看详情，甚至部分条目是无法查看

  
  

那么对应到前端的维度，常见的就4种

• 
  

  权限失效（无效）（token过期/尚未登录）

  
  


• 
  

  页面路由控制，以路由为控制单位

  
  


• 
  

  页面上的操作按钮、组件等的权限控制，以组件/按钮为最小控制单位

  
  


• 
  

  动态权限控制，比如1个列表，部分数据可以编辑，部分部分不可编辑

  
  

⚠️注意： 本文一些方案 基于 React18 React-Router V6 以及 Vue3 Vue-Router V4

⚠️Umi Max 这种具备权限控制系统的框架暂时不在讨论范围内~~

前置条件

由于市面上各家实现细节不一样，这里只讨论核心逻辑思路，不考虑细节实现

无论框架如何，后端根据RABC角色权限这套逻辑下来的，会有如下类似的权限标识信息，可以通过专门的接口获取，或者跟登录接口放在一起。

然后根据这些数据，去跟路由，按钮/组件等，比对产生真正的权限

像这种权限标识一般都存在内存当中（即便存在本地存储也需要加密，不过其实真正的权限控制还是需要后端来控），一般都是全局维护的状态，配合全局状态管理库使用。

权限失效（无效）

这种场景一般是在发送某些请求，返回过期状态

或者跟后端约定一个过期时间（这种比较不靠谱）

通常是在 全局请求拦截 下做，整理一下逻辑

路由级别权限控制

通常前端配好的路由可以分为 2 种：

一种是静态路由：即无论什么权限都会有的，比如登录页、404页这些

另一种是动态路由：虽然叫动态路由，其实也是在前端当中定义好了的。说它是动态的原因是根据后端的权限列表，要去做动态控制的

vue实现

在vue体系下，可以通过路由守卫以及动态添加路由来实现

动态路由

先配置静态路由表 ， 不在路由表内的路由重定向到指定页（比如404）

在异步获取到权限列表之后，对动态部分的路由进行过滤之后得到有权限的那部分路由，再通过router.addRoute()添加到路由实例当中。

流程为：

(初始化时) 添加静态路由 --> 校验登录态（比如是否有token之类的） --> 获取权限列表（存到vuex / pinia） --> 动态添加路由（在路由守卫处添加）

rightsRoutesList // 来自后端的当前用户的权限列表，可以考虑存在全局状态库

dynamicRoutes // 动态部分路由，在前端已经定义好, 直接引入



// 对动态路由进行过滤，这里仅用path来比较

// 目的是添加有权限的那部分路由，具体实现方案自定。

const generateRoute = (rightsRoutesList)=>{

    //ps: 这里需要注意下（如果有）嵌套路由的处理

    return dynamicRoutes.filter(i=>

        rightsRoutesList.some(path=>path === i.path)

    )

}



// 拿到后端返回的权限列表

const getRightsRoutesList = ()=>{

    return new Promise(resolve=>{

        const store = userStore()

        if(store.rightsRoutesList){

           resolve(store.rightsRoutesList)

        }else{

            // 这里用 pinia 封装的函数去获取 后端权限列表

          const rightsRoutesList =  await store.fetchRightsRoutesList()

          resolve(rightsRoutesList)

        }

    }

}



let hasAddedDynamicRoute = false

router.beforeEach(async (to, from) => {

    if(hasAddedDynamicRoute){       

        // 获取

        const rightsRoutesList = await getRightsRoutesList()

        

        // 添加到路由示例当中

        const routes = generateRoute(rightsRoutesList)

        routes.forEach(route=>router.addRoute(route))

        // 对于部分嵌套路由的子路由才是动态路由的，可以

        router.addRoute('fatherName',route)        

        hasAddedDynamicRoute = true

    } 

    // 其他逻辑。。。略

    

    

    next({...to})

}

踩坑

通过动态addRoute去添加的路由，如果你F5刷新进入这部分路由，会有白屏现象。

因为刷新进入的过程经历了 异步获取权限列表 --> addRoute注册 的过程，此时跳转的目标路由就和你新增的路由相匹配了，需要去手动导航。

因此你需要在路由守卫那边next放行，等下次再进去匹配到当前路由

你可以这么写

router.beforeEach( (to,from,next) => {

     // ...其他逻辑

     

     // 关键代码

     next({...to})

})

路由守卫

一次性添加所有的路由，包括静态和动态。每次导航的时候，去对那些即将进入的路由，如果即将进入的路由是在动态路由里，进行权限匹配。

可以利用全局的路由守卫

router.beforeEach( (to,from,next) => {

    // 没有访问权限，则重定向到404

    if(!hasAuthorization(to)){

        // 重定向

        return '/404' 

    }

})

也可以使用路由独享守卫，给 权限路由 添加

    // 路由表

    const routes = [

    //其他路由。。。略

        

        // 权限路由

        { 

            path: '/users/:id',

            component: UserDetails, 

            // 定义独享路由守卫

            beforeEnter: (to, from) => {

                // 如果没有许可，则

                if(!hasAuthorization(to)){

                    // 重定向到其他位置

                    return '/404' 

                }

            }, 

        }, 

    ]

react实现

在react当中，一般先将所有路由添加好，再通过路由守卫来做权限校验

局部守卫loader

React-router 当中没有路由守卫功能，可以利用v6版本的新特性loader来做，给权限路由都加上对应的控制loader

import { redirect, createBrowserRouter, RouterProvider } from 'react-router-dom'





const router = createBrowserRouter([

  {

    // it renders this element

    element: <Team />,



    // when the URL matches this segment

    path: "teams/:teamId",



    // with this data loaded before rendering

    loader: async ({ request, params }) => {

       // 拿到权限

       const permission = await getPermission("teams/:teamId")

       // 没有权限则跳到404

       if(!permission){

           return redirect('/404')

       }

       return null

    },



    // and renders this element in case something went wrong

    errorElement: <ErrorBoundary />,

  },

]);



// 使用

function RouterView (){

    return (

        <RouterProvider router={router}/>

    )

}

包装路由（相当于路由守卫）

配置路由组件的时候，先渲染包装的路由组件

在包装的组件里做权限判断

function RouteElementWrapper({children, path, ...props }: any) {

    const [isLoading, setIsLoading] = useState<boolean>(false);

    useEffect(()=>{

        // 判断登录态之类的逻辑

        

        // 如果要获取权限，则需要setIsLoading,保持加载状态

        

        // 这里判断权限

        if(!hasAccess(path)){

           navigate('/404')

        }

    },[])

    // 渲染routes里定义好的路由

    return isLoading ? <Locading/> : children

}

按钮（组件）级别权限控制

组件级别的权限控制，核心思路就是 将判断权限的逻辑抽离出来，方便复用。

vue 实现思路

在vue当中可以利用指令系统，以及hook来实现

自定义指令

指令可以这么去使用

<template>

    <button v-auth='/site/config.btn'> 编辑 </button>

</template>

指令内部可以操作该组件dom和vNode，因此可以控制显隐、样式等。

hook

同样的利用hook 配合v-if 等指令 也可以实现组件级颗粒度的权限控制

<template>

    <button v-if='editAuth'> 权限编辑 </button>

    <div v-else>

        无权限时做些什么

    </div>

    <button v-if='saveAuth'> 权限保存 </button>

    <button v-if='removeAuth'> 权限删除 </button>

</template>

<script setup>

    import useAuth from '@/hooks/useAuth'

    // 传入权限

    const [editAuth,saveAuth,removeAuth] = useAuth(['edit','save','remove'])

</script>

hook里的实现思路： 从pinia获取权限列表，hook里监听这个列表，并且匹配对应的权限，同时修改响应式数据。

react 实现思路

在React当中可以用高阶组件和hook的方式来实现

hook

定义一个useAuth的hook

主要逻辑是： 取出权限，然后通过关联响应式，暴露出以及authKeys ,hasAuth函数

export function useAuth(){

    // 取出权限   ps: 这里从redux当中取

    const authData = useSelector((state:any)=>state.login)

    // 取出权限keys

    const authKeys = useMemo(()=>authData.auth.components ?? [],[authData])

    // 是否拥有权限

    const hasAuth = useCallback(

        (auths:string[]|string)=>(

            turnIntoList(auths).every(auth=>authKeys.includes(auth))

        ),

        [authKeys]

    )

    const ret:[typeof authKeys,typeof hasAuth] = [authKeys,hasAuth]

    return ret

}

使用

const ProductList: React.FC = () => {

    // 引入

    const [, hasAuth] = useAuth();

    // 计算是否有权限

    const authorized = useMemo(() => hasAuth("edit"), [hasAuth]);

    

    // ...略

    return (

        <>

            { authorized ? <button> 编辑按钮(权限)</button> : null}

        </>

    )

};

权限包裹组件

可以跟进一步，依据这个权限hook，封装一层包裹组件

const AuthWrapper:React.FC<{auth:string|string[],children:JSX.Element}> = ({auth, children})=>{

    const [, hasAuth] = useAuth();

    // 计算是否有权限

    const authorized = useMemo(() => hasAuth(auth), [hasAuth]);

    // 控制显隐

    return authorized ? children : null

}

使用

<AuthWrapper auth='edit'>

    <button> 编辑按钮(AuthWrapper) </button>

</AuthWrapper>

还可以利用renderProps特性

const AuthWrapper:React.FC<{auth:string|string[],children:JSX.Element}> = ({auth, children})=>{

    const [, hasAuth] = useAuth();

    // 计算是否有权限

    const authorized = useMemo(() => hasAuth(auth), [hasAuth]);

+    if(typeof children === 'function'){

+       return children(authorized)

+    }

    // 控制显隐

    return authorized ? children : null

}

<AuthWrapper auth='edit'>

    {

        (authorized:boolean)=> authorized ? <button> 编辑按钮(rederProps) </button> : null

    }

</AuthWrapper>

动态权限控制

这种主要是通过动态获取到的权限标识，来控制显隐、样式等。可以根据特定场景做特定的封装优化。主要逻辑其实是在后端处理。

结尾

可以看到在两大框架下实现权限控制时，思路和细节上还是稍稍有点不一样的，React给人的感觉是手上的积木更加零碎的一点，有些功能需要自己搭起来。相反Vue给人的感觉是面面俱到，用起来下限会更高。

最后

如果大家有什么想法和思考，欢迎在评论区留言～～。

另外：本人经验有限，

Element实现响应式布局

分享一下，在Vue3项目中实现响应式布局（一行显示7列）。在这个例子中，我参考了Element官方的Layout布局，使用el-card来放置图片。
利用分栏布局，el-row行上设置每列的间隔gutter，el-col上设置响应式的栅格布局，Element官方预设了5个响应式尺寸，官方给出了详细的属性解释。这个例子中我设置了4个尺寸。

栅格默认的占据的列数是24，设置24就是一列，设置12就显示两列，设置8就显示3列，设置6就显示4列，设置4显示6列......可以根据自己的场景需求来进行布局。这个例子中我设置的响应式布局如下：

:xs="12" 当浏览器宽度<768px时，一行展示2列

:sm="8" 当浏览器宽度>=768px时，一行展示3列

:md="6" 当浏览器宽度>=992px时，一行展示4列

:lg="{ span: '7' }" 当浏览器宽度>=1200px时，一行展示7列 这个需要在css样式中设置一下。

这里例子中的图片都是放在el-card中的，并且图片都是一样大小的。修改图片可以利用图片处理工具，分享一个自己常用的工具：轻量级图片处理工具photopea。
Element的Card组件由 header 和 body 组成。 header 是可选的，卡片可以只有内容区域。可以配置 body-style 属性来自定义body部分的style。
:body-style="{padding:10px}" ，这个其实是对el-card头部自动生成的横线下方的body进行边距设置。也就是除了el-card的header部分，其余都是body部分了。
这里例子中没有头部，就是给卡片的body部分设置内边距。

具体代码如下所示：

图片效果如下所示：
当浏览器宽度>=1200px时，一行展示7列：

当浏览器宽度>=992px时，一行展示4列：

当浏览器宽度>=768px时，一行展示3列：

当浏览器宽度<768px时，一行展示2列：

接下来，优化一下页面，对图片进行懒加载处理。

图片懒加载

看下上面没有用于懒加载方式的情况，F12---NetWork---Img可以看到页面加载就会显示这个页面用到的所有图片。

可以利用vue-lazyload，它是一个Vue.js 图片懒加载插件，可以在页面滚动至图片加载区域内时按需加载图片，进一步优化页面加载速度和性能。采用懒加载技术，可以仅在需要加载的情况下再进行加载，从而减少资源的消耗。也就是在页面加载时仅加载可视区域内的图片，而对于网页下方的图片，我们滑动到该图片时才会进行加载。

下载、引入vue-lazyload

npm install vue-lazyload --save

在package.json中查看：

在main.ts中引入：

使用vue-lazyload

在需要使用懒加载的图片中使用v-lazy指令替换src属性。

也可以是下面的写法：

这样，就实现图片的懒加载了。
验证一下懒加载是否生效，F12---NetWork---Img，可以看到图片的加载情况。

一开始没有滑动到图片区域，就不会加载图片，可以在Img中看到loding占位图片在显示。

滑动到了对应的照片才会显示对应的图片信息。