程序员玛丽的星海方舟

去年（2021）大约12月开始，毕设的选题定下了，内容是用Vue3和Django3做一个高考志愿辅助填报系统的Web程序，全栈独立完成。考虑到自己今后的工作，我确实是打算选择一个Web应用的工程性毕设，而不打算选人工智能或者通信相关的题目了。而且看到Vue3觉得挺不错的，因为本身就是预计会找需要Vue开发的工作，之前也有用Vue2做过简单的程序（见巨匠手工收益计算器），就很自信地接下了。

引言

出于即兴制作一个网页的想法，考虑到最近玩FF14的实际需求，于是制作了这样一个页面的小工具来实现根据材料价格来计算成本，并且根据成本和售价计算利润的功能，然后索性将页面搭载在了自己的博客上（买不起服务器）。
做了不同设备适配的响应式布局（使用了媒体查询）。

地址导航

巨匠手工收益计算器

JavaScipt是一门单线程的语言。

解释：因为用于页面交互和操作DOM，多线程会导致各种同步错误。为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

CSS选择器的权重（赋属性时的覆盖优先级）：

• style: 1000 （HTML中的行内样式）
• id: 100 （#id{}）
• class: 10 （.class{}）
• element: 1 （element{}）

section标签：Html5语义化后的新标签，表示将一大块内容分成几个部分。

题目描述

来自：Zoom2021年秋招前端工程师笔试编程题2

给定2个非负整数x, n, 需要求 x^n （x的n次方）的最后一位。 x, n都可能很大很大。

任何数的0次方都是1.

分析

思路1

不难发现规律： ((x%y)^n)%y = (x^n)%y

简介

Union-find，合并-查找，这个算法是在学习Algorithms这本书的时候看到的。

用于解决的问题

假定一个学校的圈子中，有A,B,C…这些人，而A,B存在联系，B,C存在联系，若要寻找A,C是否存在联系，只要存在B这个媒介，那么就说明有联系。为了建立这样的关系网，把存在联系的人连接合并成集合，这样在判断联系时，只需要判断是否存在这个集合里即可。抽象地说，就是在一个图中划分出连通子图。

核心的方法需求

Union(p, q): 将点p和点q建立连接的方法。

Find(p): 寻找点p所在的子集。通常用Find(p)==Find(q)来判断p和q具有连通性。

上一章内容：关于我如何艰难地在公司业务中实现侧滑置顶删除功能（一）

原代码不再贴出。

新的工程需求

上次算是做出来一个像样的侧滑置顶删除功能了，在微信小程序调试中以及安卓机上调试都没有问题，但在iOS测试机上运行时却出现了问题：

不知道是因为这个APP在iOS端上的一个整体功能还是微信小程序原生的触发，在右滑取消菜单的时候会触发一个返回到上级页面的操作……着实是让人不解。理论上，iOS原生的返回手势只有在手指接近屏幕左侧且右滑的时候才会触发。事实上，这个APP的另一个模块也有类似的侧滑删除功能，且右滑该条消息取消菜单时不会触发返回。于是mentor带我去请教了负责这块的iOS开发大哥，他表示：可以尝试在右滑取消时接管手势，但是微信小程序如何实现他也不知道。

初步想法：阻止手势穿透

微信小程序的事件有着冒泡机制，而手势则是整个窗口的一些事件（具体事件为tap, touchstart, touchmove, touchend, touchcancel等）。在wxml代码中进行事件捕捉时，需要设定组件的属性catchtap/bindtap, catchtouchstart/bindtouchstart等，这些都是用来捕捉微信小程序原生事件的属性。catch和bind的区别则是，catch会阻止事件冒泡，而bind不会。也就是说，只要设置catchtap，tap事件就会被局限在这个组件上，在它之后可能会收到事件的父组件、子组件都无法收到这个事件了。所以，如果对消息条组件设置catchtap，会不会就能够阻止页面返回呢？

工程需求

开发的应用：用微信小程序经由hera生成的跨平台移动端APP。

在“收藏列表”的模块中，需要添加一个类似于微信/QQ对话列表，对每一条信息左滑可以置顶或删除的功能。

方案参考

由于公司的APP构建框架似乎无法显示微信的新组件movable-view，因此选用了网络上使用view组件来实现的方案。

参考链接：https://blog.csdn.net/LiaoFengJi/article/details/105218664

工程需求

开发的应用：用微信小程序经由hera生成的跨平台移动端App。

作为实习生在工作中遇到了这样的需求：需要顶部的标题栏和选择标签栏保持一直在窗口顶部（样式即top:0; position:fixed;），而其他的内容组件则可以随着页面滚动（样式即position:absolute;）。而我开发的小程序属于跨平台App，不知道公司的标题栏大小是如何设置的，总之会产生不同设备上标题栏高度不一的问题（尤其体现在微信小程序和hera生成的Android/IOS应用之间）。那么则需要解决一个问题，如何让absolute的内容组件自动贴着fixed的顶部组件生成呢？

首先，对于需要分别设置不同position的组件，当然不能使用flex布局之类的进行自动黏贴。那么接下来的想法是想办法获取fixed部分的底部高度。

方案参考

在公司其他员工的代码中发现了这样的操作：在html页面中建立一个wxs脚本，运行时获取设备是否为Android，如果是则通过Android系统接口获取标题栏高度而进行对固定内容组件的top样式的渲染，否则就不要使用位置fixed。

私以为，还能够用更优雅的代码和适配性更强的方案去解决这个问题，于是经过一番思考有了以下的方案：