blog
blog copied to clipboard
xuya227939
💡 技术博客
## 前言 作为一名 95 后，小时候非常喜欢玩游戏，印象中，马里奥通关了好几次，魂斗罗一条命通关。经历红白机、Game Boy、PSP、PS4 时代，还没玩过 Xbox 主机，这次在次世代，想体验体验 Xbox，所以，买了国行 Xbox Series X，玩了一周左右，写下该文章，聊聊 Xbox Series X。 ## 外观 长方形的设计，黑色非常好看，很符合本人的气质，低调且沉稳，给你满满的安全感。对比 PS5，非常小巧，很适合摆放在桌面上。  正面可以插入光盘，用作 4k 高清 DVD，非常 Nice  顶部的出风口，可以看到非常大的风扇，本人运行了地平线 4、GTA5、吃鸡等游戏，完全听不到风扇声，很安静，这点非常舒服。 ...
## 前言 `Webpack` 提供的 `devServer` 配置，使我们可以非常方便的设置请求代理目标，通过改配置，有时候可以帮我们解决本地环境的跨域问题。 ## 正向代理 当拥有单独的 `API` 后端开发服务器并且希望在同一域上发送 `API` 请求时，代理某些 `URL` 可能会很有用。 webpack.dev.js ``` devServer: { // ... proxy: { '/api2': { target: 'http://192.168.10.183:8103', changeOrigin: true }...
## 前言 `Webpack` 对于现代前端开发者，想必是相当熟悉了，在很多项目中，应用非常广泛，而 `webpack-dev-server`，相信大家应该也都接触过。最近，作者在配置多入口，热更新在单入口是好使的，结果到了多入口不好使？，然后通过 Google 寻找答案，找到了一篇 `issue`，[HMR not working with multiple entries](https://github.com/webpack/webpack-dev-server/issues/2792)，跟我的问题类似，好像真的有 BUG？看到作者回复  v4 修复了该问题，我丢，我还在使用 v3，翻看 v4 文档  此时，只有一个感觉，热更新都多久的东西了，不应该存在多入口，热更新有问题吧？升级到 v4 之后，还是不行，当时我这暴脾气就上来了，直接翻看源码。翻看源码之前，首先要对热更新是个什么，有个基础的了解。 ## 模块热更新 模块热更新(Hot Module Replacement)是指在浏览器运行过程中，替换、添加或删除模块，而无需重新加载整个页面。 -...
最近迫于签字结果返回太慢，所以需要把旋转图片由原先后端处理改为前端处理，查阅文档，研究一番，发现小程序上旋转，主要是通过canvas的translate、rotate完成。  Canvas坐标系统，由上图可得，Canvas 2D 环境中坐标系统和 Web 的坐标系统是一致的，有以下几个特点： 1. 坐标原点 (0,0) 在左上角 2. X坐标向右方增长 3. Y坐标向下方延伸 ## 伪代码 ``` wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'myCanvas', success: (res) => { wx.getImageInfo({...
## 前言 大概在 2019 年，自己搭建 `React` 开发环境的想法萌芽，到目前为止，公司的很多项目上，也在使用中，比较稳定。为什么要自己造轮子？起初是因为自己并不满意市面上的脚手架。另外，造轮子对于自己也有一些技术上的帮助，学别人二次封装的东西，不如直接使用底层的库，这样也有助于自己系统的学习一遍知识，最近 `Vite` 很火，所以用 `Vite` 搭建一波，废话不多说，直接进入正文，如何搭建自己的开发环境。 ## 初始化 创建文件夹并进入： ``` $ mkdir tristana && cd tristana ``` 初始化 `package.json` ``` $ npm init ``` 安装...
## Stores(存储) `Store` 可以在任何 `Flux` 系架构中找到，可以与 MVC 模式中的控制器进行比较。 `Store` 的主要职责是将逻辑和状态从组件中移至一个独立的，可测试的单元，这个单元在 `JavaScript` 前端和后端中都可以使用。 ## 单一 Stores RootStore ``` import { observable, action, configure } from 'mobx'; // configure({ enforceActions: 'always' });...
背景：在第一家公司呆了两年（含实习），由于技术无法得到成长，拿着存款 1 万，裸辞。迫于不会面试，换过三家公司，在第二家呆了六个月，身体不适，离开。当前这家，已呆满两年，想尝试进入大厂，也面临职业选择问题。 ## 最有收获的三个问题与回复 #### 问题一：我如今四年工作经验，目前担任的是项目负责人/前端组长，关于未来的方向是选择前端技术专家还是项目管理？ 我的想法：偏项目管理去走，因为我目前在做项目管理的一些事，负责把控项目进度，人力资源规划等。 Scott 的分析与建议：Scott 分析了我的技术深度和广度，项目管理上是否有一套自己的方法论。 建议我往前端技术专家这条路走，理由是年轻，技术深度也不够，如果盲目转型项目管理，遇到一些技术比较厉害的人，很难让人服众，比如我现在的老大，完全不懂技术，对项目开发排期，基本是由开发说了算，因为你心理没底，这个技术到底要多少天？如果你技术吃透了，别人就忽悠不了你。 #### 问题二：项目负责人如何去管理项目，如何建立自己的威信？ 我的想法：无。 Scott 的分析与建议：Scott 分析了我的团队规模，是否有实权。 建议我少管理，现在的我还年轻，如果太早介入项目管理，反而会导致我的侧重点在项目上，而非技术，这样会带来很严重的问题，技术深度不够。会让我在技术上荒废掉，哪样就没啥意义，何况现在前端的技术迭代非常快（前端娱乐圈）。 担任一个中间人，传递消息，知道每个人手头上的事，排期计划，遇到有何困难，汇报上去即可。 因为没有实权，没有 KPI 考核权，底下的人，压根不听你的，无法树立威严。 #### 问题三：我最近想跳槽进大厂，请问有何建议？ 我的想法：想今年面一波所有中小公司，然后尝试大厂，如果能拿到合适的 offer 就进去。 Scott 的分析与建议：Scott...
## 前言 大概在 2019 年的时候，为公司搭建了一套项目框架，截止到今天，用起来很不错，最近 `Vite` 太火，折腾了下，花了两天的时间，用 `Vite` 替换了 `Webpack`（`Webpack5`、`Webpack4` 都有，切换分支即可），体验直接起飞，基于 `Vite` + `React` + `Ant Design` + `Mobx` + `ESLint` + `TypeScript` 的项目框架。 ## 特点 - **快速开始**，只要您了解 `react`、`mobx`、`webpack` 和...
## 跨域 跨域是指：a页面想要访问b页面，但是这两个页面的域名、端口、协议不同。而浏览器为了保证安全，只允许同源访问。所以就出现了跨域的问题。 ## 同源策略 指ab页面域名、端口、协议一样。 ## 解决方案 #### jsonp解决：jsonp利用script标签可以访问任何链接的原理，通过目标服务器设置一个callback，来进行跨域。 ``` //Js 客户端 方法一 function jsonpCallback(result) { //alert(result); for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";...
## 图片服务器需要配置Access-Control-Allow-Origin 设置通配符，允许任何域名访问 ``` header("Access-Control-Allow-Origin: *"); ``` 指定域名 ``` header("Access-Control-Allow-Origin: www.xxx.com"); ``` 此时，Chrome浏览器不会有Access-Control-Allow-Origin相关的错误信息，但是，还会有其他的跨域错误信息。 ## HTML crossOrigin属性解决资源跨域问题 在HTML5中，有些元素提供了```CORS(Cross-Origin Resource Sharing)```属性，这些元素包括，，等，而提供的属性名就是crossOrigin属性。 因此，上面的跨域问题可以这么处理： ``` const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const...