Meathill

Meathill 查看完整档案

广州编辑中国地质大学(武汉)  |  应用化学 编辑OpenResty Inc.  |  高级前端工程师 编辑 blog.meathill.com/ 编辑
编辑

爱编程,爱旅游,爱吐槽。

今年的第一目标是做兴趣使然的分享者,每月至少做一次直播,把肉山小课堂做到线下,帮助尽可能多的小伙伴。前三个月先把坑填上,嗯嗯。

欢迎广州的小伙伴来“肉山小课堂线下版”找我。

《Electron + Vue 实战开发》创作中……

个人动态

Meathill 回答了问题 · 1月18日

解决vue history模式下进入到index.html 404

服务器要配置,404 访问指向 index.html。如果是 nginx,用 try_files 即可:

location / {
    try_files $uri $uri/ /index.html$args;
}

关注 4 回答 3

Meathill 回答了问题 · 1月18日

【移动端】兼容各种机型全屏显示,并且不出现滚动条

  1. 建议用 flex,计算高度的 100% 是父容器的 100%,未必准确
  2. 特定机型的问题得根据机型渲染状态来排查,你这么说没法判断
  3. 如果是我的话,我会先把 4 隐藏起来,看看滚动条是否消失,然后修改 4 的高度观察

关注 2 回答 1

Meathill 回答了问题 · 1月15日

vue3.x写移动端h5项目兼容性怎么样

兼容核心就一个 Proxy,caniuse 查一下对应的版本即可。目测新点的机器都能用。

不过需要注意的是,有些国产系统的浏览器核心未必标准,说不定遇到写奇葩问题。

关注 2 回答 1

Meathill 回答了问题 · 1月15日

一个vue组件打包问题。

直接在 wepback 里试用 lazy load 就行了,参考:

Webpack Lazy loading

关注 3 回答 2

Meathill 回答了问题 · 1月15日

js继承语法

继承还是用 extend 吧。

关注 3 回答 2

Meathill 回答了问题 · 1月12日

解决如何让动态图片地址,在浏览器中转为静态地址,并在浏览器缓存?

貌似应该反过来,把访问 /12345.jpg 的请求指向你生成图片的程序,然后传参,搞成 ?imgid=12345。然后再延长缓存时间。

没有调试,思路是这样,你可以试一下:

location ~ "/imgs/(?<page>\d+).jpg$" {
        alias /var/www/image-generator/img.php?imgid=$page;
        expires 30d;
}

关注 7 回答 5

Meathill 发布了文章 · 1月9日

2020 年知识分享与学习总结

2020 年是我正式参加工作的第十四个年头,我仍然在一线写代码,我很开心。在这个到处弥漫着程序员 35 岁事业恐慌的年代,还能稳扎稳打写代码,对我这个写码爱好者来说,也是一件幸事。

接下来开始总结。

知识付费

前几年,我尝试过投身知识付费,然后失败了——投入产出比太低,家庭条件有限无法做更多尝试。总结经验教训之后,2020 年我只保留了最低限度的尝试:跟思否签了一个实战课程。目前还在拖稿(视频)中,春节前一定会交稿,一定会的!

博客

博客仍然在坚持写,去年总共写了 69 篇(不算草稿箱里的半成品),简单回顾一下吧,可以了解我去年的技术经历。

前端开发工具链:Webpack 4 & 5,webpack-mock-server

年初升级 Webpack 到 4,年底又升级到 5。顺便升级了一大票相关插件,研究了规则、配置、缩减包体积的方法,等等。

发现了 webpack-mock-server 这个工具,可以很方便的添加 mock API,跑测试非常方便。

树莓派/nginx/php/PostgreSQL/MariaDB/Flarum 配置

厂里发了个树莓派,于是就把一些常见的软件,比如 WordPress、Ghost、Flarum 等都装在上面,以及 OpenResty、MariaDB、PostgreSQL 等软件。

如今我大部分后端软件和代码都跑在上面,这样最大的好处,就是我的后端开发环境可以随身携带,更大的扩宽了我远程开发的范围。

Vue 3.0

2020 年前端届的一件大事。年初准备迎接 Vue 3.0,年中关注它的进度,Q3 正式发布,Q4 开始升级到 Vue 3.0

Vue 3 升级比想象中的麻烦,也比想象中的简单,目前仍在摸索中。

浏览器相关

比如自动完成的问题、模拟用户点击动作、扩展开发等。其实我去年大量的工作都围绕在浏览器扩展开发上,不过似乎写的不够多。

Chrome 86 开始支持读取本地文件和文件夹,这个发展需要大家注意。

Ubuntu 20.04

去年久违的装了台新电脑,就给老电脑装上了 Ubuntu 20.04,然后顺带着就摸索了一些 Ubuntu 的使用技术,比如科学上网、配置网卡什么的。

Bootstrap 5/Icons

这也是前端领域值得关注的一件大事。Bootstrap 作为最受关注的前端(CSS)框架,它的发展很能体现页面搭建方面的进程。去年最成功的框架应该是 Tailwind CSS,一篇《从零到200w美金的生意》刷遍了我关注的圈子,今年希望有时间深入体验一把。

Bootstrap icons 则体现了另一方面的循环往复,webfont 从无到有到滥用到回归,值得思考。

自荐三篇博客

然后从去年的博客中选出几篇我觉得值得一读的文章,兼顾新技术、老技术、技术生涯发展:

知识学习和积累

去年计划学习 flutter、TypeScript、Vue3、开发工具链。现在回望一下,完成了一半,Vue3 和开发工具链都有比较大的进步,flutter 和 TS 则基本一点没看。那就顺延到下一年吧。

Vue3

Vue3 方面,迁移了一个自用 UI 组件库到 Vue3,同时保持 Vue2&3 两边同步更新。另外启动了一个 Chrome extension 项目使用 Vue3。整体来说迁移成本不高,但是开发成本略高,主要原因是周边生态落后于主框架,SourceMap 也无法正常工作,给开发带来很多困难。

Chrome Extension

因为工作的关系,去年大量接触到 Chrome Extension 的开发,对浏览器的工作机制加深了很多。比如一次 click 事件包含哪些动作、一次 keypress 包含哪些动作、如何模拟用户输入,等等。

PouchDB & CouchDB

为了让 Navigator Extension 能够适应更多的场景,我选择 PouchDB 作为本地存储方案,它可以很方便的和其它 PouchDB 或者 CouchDB 实例同步数据,很适合用来进行团队协作。

CodeMirror

我厂开发了大量的 DSL,在线写代码是刚需。所以经过一些实践,基本掌握了 CodeMirror 解析代码和添加样式的方法,加深了对 tokenizer 模式的理解。如今让我自己开发语言感觉也不在话下了。

新年计划

  1. flutter
  2. TS
  3. 继续深研工具链
  4. 实现教程小语言

总结

2020 年,比较困难,也有不少收获。2021,虽然前途仍然不明朗,不过也只有努力,才可能会有更好的将来。所以,加油吧。


本文参与了 SegmentFault 思否征文「2020 总结」,欢迎正在阅读的你也加入。

查看原文

赞 3 收藏 2 评论 0

Meathill 回答了问题 · 1月8日

如何在当前js元素前插入其他元素?

多说几句吧。这个问题你要这么分析:

  1. 找到插入的元素
  2. 创建新元素
  3. 插入

先说(1)。JS 无法判断自身在哪个节点,所以你有两个选择:1. 给当前节点加标记;2. 查找最后一个 <script>

(2)比较简单,直接 document.createElement()。(3)也简单,找到父元素,insertBefore()

最终代码大约是:

const newElement = document.createElement('div');
// 采用方案二
const scripts = document.getElementsByTagName('script');
const script = scripts[scripts.length - 1];
const parent = script.parentElement;
parent.insertBefore(newElement, script);

关注 3 回答 2

Meathill 回答了问题 · 2020-12-31

项目中前端部分关于订单状态管理的一些疑问

一般来说就是数据字典+常量吧。

不过有几点:

  1. 常量应该用大写
  2. 最好有个工具来维护常量,这样前后端可以比较方便的分享
  3. 定义常量时最好留有余地,比如订单状态,最开始的时候就不要定 12345,而是 10、20、30、40,甚至 100、200、300,这样如果中间要增加状态,就可以不修改之前的数据,直接加

关注 7 回答 6

Meathill 回答了问题 · 2020-11-26

解决windows.open() 什么情况下是下载文件? 什么情况下是预览文件/视频?

主要看目标 url 的 header,如果能解析且没有标记为 attachment,都会打开,不然就是下载。

关注 4 回答 2

认证与成就

  • SegmentFault 讲师
  • 获得 857 次点赞
  • 获得 23 枚徽章 获得 3 枚金徽章, 获得 10 枚银徽章, 获得 10 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • Meart

    Meart 是一款免费的静态网站生成工具,主要面向摄影师和设计师,帮助他们快速建立个人作品网站。Meart 可以使用各种纯 HTML 的模板,几乎可以生成任何形式的页面。它还附带 HTML 编辑功能,可以使用别的网页作为模板,很轻松的修改成自己希望的样子。 接下来,我还会为 Meart 引入插件体系,提供包括购物在内的一系列功能。 Meart 利用 Electron 基础发布成桌面软件,并且可以快速扩展到服务器端,提供线上服务。

  • JavaScript 异步开发全攻略

    这是一本介绍 JS 异步开发的小书,主要包含 Promise 和 Async,特意介绍了在多个开发场景下的应用。并且保持不断更新。最近更新了在 Vuex 的 action 里返回 Promise 的用法。

注册于 2012-09-03
个人主页被 18.2k 人浏览