有人在代码里下毒，啊……
0%

发表于 更新于 Valine： 0

好久没写文章了，适当的回顾下过去展望下未来总是好的。

  1. 先说前端框架，jsx,SSR逐渐流行，相当于是PHP跟JSP的复兴，跟10年前最大的区别是统一成nodejs技术栈了。
  2. 微前端架构主要解决的事老旧系统的集成问题，主要适用于大厂，如果是新兴创业公司，不适合盲目跟风。个人感觉直接ESM的原生解决方案更优秀。样式的话支持tailwindcss整合起来。
  3. ES标准化目前都是些语法糖，没发现很大意义的创新。
  4. 低代码的维护与调试成本远远高于开发成本，所以如果是一次性的页面，比如活动页，商品展示页，增删改查管理页，强烈建议安排上。但是复杂交互的页面还是高码更好，选择低码平台的话一定要选择支持高低码结合的。
  5. AI方向的话，cursor编辑器强烈安利给大家，花钱也是值得的。最好的功能是它生成的代码能够一键给整合到现有代码中自动diff。v0/vue0 也是不错的，但是cursor用好，vue0我觉得是可有可无。
  6. 鸿蒙这个方向，华为可以说是对前端开后门了，会TS就直接上吧。当然uniapp后面也会支持鸿蒙，应该这个优先级会比写原生高吗？
  7. wasm感觉适用于特定场景，比如web端边缘计算。比如nodejs诟病的读写性能问题，直接适用wasm模块，效果嘎嘎好。
  8. 跨平台当然还是Electron，Tauri应该是未来，建议再看两年，毕竟QQ都没用，咱就不试了。
  9. 3D渲染引擎，Three.js是主流，这个没得选真好。对有选择困难症的我真友好
  10. GIS还是老三件，Leaflet,Mapbox,OpenLayers。Leaflet是轻量级，Mapbox是商业，OpenLayers是开源。
  11. 视频播放器，我就安利个西瓜播放器吧，功能齐全，支持定制。
  12. 音频播放器，推荐个APlayer吧，功能齐全，支持定制。
  13. 网络请求，axios是主流，但是目前感觉fetch已经足够用了，而且支持ESM，不用额外引入。
  14. 前端UI框架，Vuetify是主流，Material-UI是备选，Element-Plus是备选，Ant Design Vue是备选。
  15. 后端框架，Koa是主流，Express是备选，Nest.js是备选。
  16. 构建的话，字节的repack,vue的vite要统一dev跟preview了，期待！
  17. 容器化推荐个sealos，他们还有个fastGTP的产品很不错，有点扣子的味道，都支持私有化部署。
  18. 前端团队组件分享建议用bit.dev，小团队直接用免费的，团队大了也支持私有化部署
  19. CI/CD前端建议私有化部署sealos，利用S3的桶去承载web静态资源

发表于 更新于 Valine： 0

事件

弹框看起来很模糊

原因

弹框写了居中效果,但是用了的方式是 transform:translate(-50%,-50%,);left:50%,但是弹框的宽度 或者 高度使用的单位是奇数 例如 501px 就会模糊 因为电脑是没办法识别0.5px这种显示的

知识点

居中的话建议用使用 上下左右0 的写法 , margin auto 或者flex布局

发表于 更新于 Valine： 0

事件

使用了 position:fixed定位发现弹框不能定位到页面相对位置

原因

fixed默认是相对于页面的根元素的,但是有一种情况例外,就是如果父有元素做了transfrom变换的时候。此时会相对于该元素定位

知识点

fixed定位的元素建议作为body直接子元素使用

发表于 更新于 Valine： 0

wa-lang windows系统初体验


按照官网的执行的install，嗯安装不上，应该是被墙了？
不过翻墙后仍然报错!!

于是从gitee上下载了源代码,执行了go install .，报错如下

于是网上找了下国内的镜像仓库，安装成功，但是 wa 不是内部或外部命令

在项目目录下创建一个wa.cmd来执行下go run main.go %*,这样也能愉快的执行wa命令咯,效果如下

后来检查了下 install 的时候会在 $home/go/bin目录(我的电脑是这个路径C:\Users\win7\go\bin)创建 wa.exe的

配置下这个目录的地址到path就行了,最根本的原因是安装前系统中的 $GO_PATH没有设置对。

总结

  1. 安装前检查go有没用正确安装
  2. 安装前设置好go的国内的镜像仓库
  3. 安装完如果出现wa 不是内部或外部命令,用Everything全盘检索wa.exe文件,把所在目录配置到环境变量中

发表于 更新于 Valine： 0

菜单栏收缩主要使用下面的样式实现

1
2
3
nav:hover,nav:focus-within{
   transform:translateX(100%)
}

折叠面板动画

1
2
3
4
5
6
7
8
details[open] summary ~ *{
  animation:sweep .5s ease-in-out
}
@keyframs sweep{
  0% {opcity:0;margin-left:-10px}
  100% {opcity:100;margin-left:0px}
}

发表于 更新于 Valine： 0

isNaN(null) === false 按照方法名的字面意思 null不是一个数组,没毛病。
但是这个方法认为是一个数字，它的逻辑是先用Number(null)得到0,0是数字,所以等式成立。

['']==false这个也是成立的哟

  • 隐式转换规则,跟字符串比都转字符串比较,跟数字比转数字,布尔值当数字0跟1看待,对象的话用valueOf拿值,拿到的如果不是原始值就toString后比较
  • [''].toString()得到’’ 右边是false

发表于 更新于 Valine： 0

之前把开发者工具设置成中文了，然后发现还是英文用着习惯了，就切回了英文。但是切的是UK而不是US，导致打开的时候巨慢。

遇到同样问题的同学一定记得语言要切回US才行

发表于 更新于 Valine： 0

水印一般要求zIndex层级特别高，但是又不能影响到点击事件

1
2
3
4
5
6
7

<div style="height:0;width:100%;pointer-events:none">
  <div style="height:50px;width:50px:position:absolute;top:50px;z-index:100000000;transform:rotate(45deg)">
    LOGO
  </div>
</div>

  • 外层声明一个高度0的容器，并给上pointer-events:none取消鼠标事件
  • 内层水印给上很高的z-Index也不会影响到用户操作咯

发表于 更新于 Valine： 0

UI设计师给的图片（Icon）有时候出奇的大

有两种方案解决，精灵图（雪碧图），不过这种要输出css文件，还要改代码。不想动代码的情况下，我们直接使用另一种 无损压缩下图片再替换掉原图提交到代码仓库即可

使用PS批处理图片

  1. 录制动作-》打开图片-》储存为web格式-》保存动作
  2. 文件-》自动-》批处理-》选中文件夹-》选中刚保存的动作

使用npm图片压缩工具 imgmin

imgmin包含了下面的模块，分别用于gif jpg png svg格式压缩

  • gifsicle
  • mozjpeg
  • optipng
  • svgo

这几个工具都用到了C模块

webpack img-loader(不推荐)

不推荐的原因是压缩图片一般是一次性的动作，而且耗时较长，另外原图提交到仓库，别的同学下载也麻烦

发表于 更新于 Valine： 0
  • OR 原始需求，可能会涉及到多个系统 SE输出
  • SR 系统需求，单系统，开发PL输出，原始需求分解到单系统的大颗粒需求
  • DR 开发需求，单系统的具体模块，需要拆解成可编码的模块