2024-04-20
部署Go语言项目 本文以部署 Go Web 程序为例,介绍了在 CentOS7 服务器上部署 Go 语言程序的若干方法。 独立部署 Go 语言支持跨平台交叉编译,也就是说我们可以在 Windows 或 Mac 平台下编写代码,并且将代码编译成能够在 Linux amd64 服务器上运行的程序。 对于简单的项目,通常我们只需要将编译后的二进制文件拷贝到服务器上,然后设置为……
Continue reading
2023-05-10
当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。 整个渲染流程分为多个阶段,分别是: HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个阶段都有明确的输入输出,上一……
Continue reading
2023-05-10
CSS 属性计算过程 你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{ color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就是其中的一个 CSS 属性。 但是要说 CSS 属性的计算过程,还真的不是很清楚。 没关系,通过此篇文章,能够让你彻底明白什么是 CSS 属性的计算流程。 首先,不知……
Continue reading
2023-05-06
背景: 最近的一个小程序项目中有这么一个需求:进入我的主页后, 如果用户没有关注过我们的公众号, 则展示一个引导关注公众号组件, 点击后跳转到一篇公众号文章, 指引用户进行关注,用户完成关注隐藏该组件。 方式一(前后端参与): 由于对微信的UnionID机制一知半解(知道用户在同一个开放平台下……
Continue reading
2023-05-04
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } }) 上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。 handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,……
Continue reading
2023-05-04
Vue2 回顾 首先回顾一下在Vue2中我们是如何创建一个响应式数据 (reactive data)的: Vue3新特性 ref的使用 而在Vue3中,我们可以用Composition API: ref 来改写上述代码: ref 的作用就是将一个原始数据类型(primitive data type)转换成一个带有响应式类型 的数据类型,原始数据类型共……
Continue reading
2023-04-26
需求:在任意一个页面上实时监听全局变量发生的改变。 第一步 新建 utils 文件夹,并在文件夹中新建 onEvent.js 文件。 var events = {}; function on(name, self, callback) { var tuple = [self, callback]; var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.push(tuple); } else { events[name] = [tuple]; } } function remove(name, self) { var callbacks = events[name]; if (Array.isArray(callbacks)) { events[name] = callbacks.filter((tuple) => { return tuple[0] != self; }) } } function emit(name, data) { var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.map((tuple) => { var self = tuple[0]; var callback = tuple[1]; callback.call(self, data); }) } } exports.on = on; exports.remove = remove; exports.emit = emit; 第二步 在……
Continue reading
2023-04-14
简介 JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型。实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型。 当我们期望一个变量是数字时,对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本……
Continue reading
2023-03-24
期待了很久的vue3,一发布就上手体验了一把,这里记录几个自己碰到的网上不常见的小坑~ 自定义全局参数 定义: // main.js const app = createApp(App) app.config.globalProperties.$test = 'test' 除了setup()需要先获得实例,其他地方可以直接通过$test使用: <tempalte> <div>{{ $test }}</div> </tempalte> <script> import { getCurrentInstance } from 'vue' export default { setup() { const test = getCurrentInstance()?.appContext.config.globalProperties.$test console.log('test===') console.log(test) }, } </script> Vite通过alias别名引用 在w……
Continue reading
2023-03-24
1. Cookie 产生的背景 我们都知道,HTTP 协议是无状态的,服务器无法知道两个请求是否来自同一个浏览器,也不知道用户上一次做了什么,每次请求都是完全相互独立,这严重阻碍了交互式 Web 应用程序的实现。例如: 购物车:在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时,由……
Continue reading