总结一下比较好玩儿的特效，用的时候直接来CV。长期更新 边框与背景半透明边框 背景知识 background-clip 默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在CSS3中，我们可以通过设置background-clip: padding-box来改变背景的默认行为，打到我们想要的效果 12345678910111213141516171819202122232425<style> main { width: 100%; height: 100vh; background: #4b7b7c; padding-top: 100px; } div { padding: 12px; margin: 20px auto; width: 200px; background: #c7b723; border: 10px solid hsla(0, 0%, 100%, .5 ...

通过Hexo搭建的个人博客，虽然很强大、很方便，输入命令就可以快速生成静态页面并部署访问，但是还有让它更好用的优化空间，比如直接把打包部署环境放到Github Actions上面，我个人就是用这种形式部署博客的。下面来介绍一下。 总体思路 Hexo项目里配置好Github Actions流程 Hexo博客项目上传到GIthub Github Actions自动打包并把打包文件上传到腾讯云服务器 腾讯云服务器替换Nginx的入口文件为新的打包文件 功能实现创建配置在项目根目录创建 .github/workflows/{workflow-name}.yml 文件。这里的workflow-name根据根据不同的 event 或者要实现的 actions 来创建。 项目配置根据注释，修改自己的配置 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950name: main# 触发条件：push到main分支后on: push: branc ...

批量导入文件：require.context通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块 使用语法Webpack 会在构建中解析代码中的 require.context() 。 123456require.context( directory, (useSubdirectories = true), (regExp = /^\.\/.*$/), (mode = 'sync')); 示例： 1234require.context('./test', false, /\.test\.js$/);//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。require.context('../', true, /\.stories\.js$/);// （创建出）一 ...

Plugin介绍顾名思义，plugin是插件的意思，它是一种遵循Webpack应用程序接口规范编写的程序，在webpack规定的系统下运行。plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会在webpack不同阶段（钩子函数、生命周期）中运行，贯穿了webpack的整个编译周期。 插件目的在于解决 loader无法实现的其他事。Webpack 提供很多开箱即用的插件 用法由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。 取决于你的 webpack 用法，对应有多种使用插件的方式。 webpack.config.js 1234567891011121314151617181920212223const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 访问内置的插件const path = requi ...

Loader介绍webpack做的事情，仅仅是分析出各种模块的依赖关系，然后整理成资源列表，最终打包生成到指定的文件中。 上一节我们说过，在webpack内部，任何文件都是模块，不仅仅是js文件。但是在默认情况下，在遇到require和import的时候，webpack只支持对js和json文件的打包，像css、scss、jpg等这些类型的文件，webpack就无能为力了，这时候就用到了loader来对文件的内容进行解析 loader的定义：loader用于对模块的源代码进行转换，在import或加载模块时预处理文件 在加载模块时，执行顺序如下： 当webpack碰到识别不了的文件时，就会从配置中找该文件的解析规则，来看个示例：使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader： 1npm install --save-dev css-loader ts-loader 然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 t ...

简介Nuxt 是支持 Vue SSR 的一个框架，底层需要运行 Node 服务。大概描述一下 Vue 的渲染过程，首先每个组件都会被编译生成一个渲染函数（这部分基本 webpack 打包已经做掉），然后渲染函数生成虚拟 dom，最后虚拟 dom 通过 patch 方法将真实 dom 渲染到页面上。Nuxt 其实就是将这部分放到了服务端去做，在服务端拿到渲染页面所需要的 html，从而使得 html 能够直出，而客户端其实还是会运行整个 Vue 的生命周期，这就带来了一个问题，这部分操作放在了服务端其实是非常耗 cpu 的，创建组件实例和虚拟 DOM 节点的开销，无法与纯基于字符串拼接的模版的性能相当，如果是不加优化的 Nuxt 项目，高并发下是很脆弱的，毕竟 Node 运行在单线程下，不适合 cpu 操作密集型的场景 使用 Nuxt 的项目无非看中了它的两大优点，一是服务端渲染满足 SEO 的需求，二是首屏直出比 SPA 快，再加上如果如果公司是 Vue 系，使用 Nuxt 就更顺理成章。但是不要忘了性能，高并发下 Nuxt 性能确实不乐观，我测试了官网的 hackernews dem ...

对Webpack的理解，解决了什么问题？Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。 静态模块这里的静态模块指的是开发阶段，可以被webpack直接引用的资源（可以直接被获取打包进bundle.js的资源） 当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限于js文件），并生成一个或多个bundle webpack的能力和解决的问题 编译代码能力 在开发过程中，我们经常会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码。webpack可以通过编译的形式，把不同特性的代码编译成浏览器能识别的ES5语法或者css文件，解决浏览器兼容问题 压缩代码，优化网站性能 模块整合能力 提高性能，可维护性，解决浏览器频繁请求文件的问题 万物皆可模块化能力 项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载可以通过代码控制 webpack的构建流程运行流程 webpack的 ...

本文原文链接https://github.com/skyhee/gin-doc-cn，放在自己的博客是因为github打开比较慢，侵删。 安装与配置安装： 1$ go get gopkg.in/gin-gonic/gin.v1 注意：确保 GOPATH GOROOT 已经配置 导入： 1import "gopkg.in/gin-gonic/gin.v1" 框架架构 HTTP 服务器 1.默认服务器 1router.Run() 2.HTTP 服务器 除了默认服务器中 router.Run() 的方式外，还可以用 **http.ListenAndServe()**，比如 1234func main() { router := gin.Default() http.ListenAndServe(":8080", router)} 或者自定义 HTTP 服务器的配置： 123456789101112func main() { router := gin.Default() s := &http.Server ...

代码如下 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152/** 水印添加方法 */let setWatermark = (str1) => { let id = '532432.5435435324.543543543' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') // 设置canvas画布大小 can.width = 300 can.height = 200 let cans = can.getContext('2d') cans.rot ...

当对象存在一对多的关系时，则使用观察者模式（Observer Pattern），例如当一个对象被修改时，则会通它的依赖对象。观察者模式属于行为型模式。与发布/订阅模式不同的是，观察者模式没有调度中心，由目标直接调度观察者，观察者模式的观察者和目标之间是存在依赖的。 介绍 意图： 定义对象的一种一对多的依赖关系，当一个对象的状态发生改变的时候，所有依赖它的对象都被通知且更新状态。 主要解决： 一个对象状态改变给其他对象通知的问题，而且要考虑到易用性和低耦合，保证高度的动作 何时使用： 一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知，进行广播通知。 如何解决： 使用面向对象技术，可以将依赖关系弱化 关键代码： 在抽象类里有一个ArrayList存在观察者们 应用实例： 拍卖系统，拍卖师观察最高价，通知其他竞价者竞价 优缺点优点 观察者和被观察者是抽象耦合的 建立一套触发机制 缺点 一个被观察者对象如果有太多间接或直接的观察者，将花费时间通知观察者 如果存在循环依赖，可能导致系统崩溃 观察者仅仅知道被观察者发生了变化，而不知道如何发生了变化