100行代码实现一个迷你Vue
100行代码实现一个迷你Vue……
从MVVM谈起MVVM全称是Model-View-ViewModel。经历过还没有React、Vue等框架的那个年代的前端们应该都知道，手动去同步页面上的数据与视图是一件多么麻烦的事情，特别是在数据和交互较复杂的页面上，手动同步会带来代码冗余、容易出错、难以追踪错误等问题。
MVVM框架的出现解决了这个问题。我们只要建立好数据结构以及数据与视图的对应关系，在之后的开发中，只需要把关注点放在处理数据上，框架会自动帮我们处理好数据变动带来的视图更新。
如何造一个MVVMMVVM的核心功能在于将数据和视图关联起来。即监听数据变动的事件，事件触发时对关联这个数据的视图进行更新。
我们先明确想要实现的功能，再去思考怎么实现。这里用一个例子来说明： 现在有格式如下的数据
1let data = { text: 'world' };
以及语法如下的视图
1234<body> <div>hello</div> <div>{{ text ...
在微信小程序中使用ProtocolBuffer的方法
在微信小程序中使用 Protocol Buffer 的方法…
前言我去年写过一套自用的微服务网关系统，投入线上使用后效果良好，响应格式采用的是使用广泛的 JSON。最近为了使其支持二进制数据的传输，考虑到对二进制数据进行 base64 等格式的编码同时降低了时空性能，一番简单的搜索后，决定采用 Google 推出的 Protocol Buffer(后文简称 protobuf) 作为消息载体格式替换掉 JSON。
在服务端部分完全升级至 protobuf 以后，微信小程序客户端方面的支持却让我恼火了很久，因为官方对于 protobuf 的支持是无动于衷的。在这之前，我本以为在微信小程序端发起请求就像前端一样简单容易。
尝试protobuf 是强约定的消息格式，消息必须预先编写语言无关的 proto 文件进行消息定义，然后通过 protoc 编译成目标语言的模型文件。
Google 官方提供的 Javascript 的支持无法在微信小程序平台使用，因为出于安全考虑，微信禁止了诸如动态执行 eval, function 等功能。
社区实现的 protobufjs 的最新版原版似乎也不能够 ...
element-ui时间选择组件-时间选择范围限制
element-ui时间选择组件-时间选择范围限制…
限制当天前后45天可选1234567891011121314pickerOptions: { disabledDate: (time) => { const month = 45 * 24 * 60 * 60 * 1000 // 设定日期范围 const startDate = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(); const minTime = startDate - month const maxTime = startDate + month if (startDate) { // 选中第一个时，前后45天[-45,45]共90天可选选择，超出的不可选， return time.getTime() < minTime || time.getTime() > maxTime } // 不选任何日 ...
强缓存和协商缓存
强缓存和协商缓存…
为啥要缓存：
缓存的优点：
1）加快浏览器加载网页的速度，优化用户体验，让用户更快速的打开我们的网页；
2）减少对服务器的访问次数，减轻服务器的负担；
3）节省带宽（就是节省钱…，因为很多带宽服务其实是按流量来计费的，同样对用户也可以省4G、5G流量…也省钱了）
2.有啥缺点：
如果资源一直被缓存了，那当资源发生更改时，用户就无法获取最新的信息了！ 所以缓存虽好，可不能乱用。
强缓存：
什么是强缓存？强制？没错，就是强制把资源缓存起来？ 那不就是会有上面说的缺点了吗？
是的，那为啥还要用强缓存呢？什么情况下要用强缓存呢？又到底怎么用呢？
强缓存是利用http头中的Expires 和 Cache-Control两个字段来控制的：
Expires
从图中可以看到，它的值是一个绝对的时间，这个时间代表资源的失效时间，就是说在这个时间之前缓存始终有效，始终会读取缓存中的数据。但是，这里会有一个明显的缺点：因为它是一个绝对时间，当服务器时间与客户端时间有偏差时，就可能会导致缓存失效，比如用户随意修改了本地时间…
Cach ...
Vue3笔记 --- Suspense
Suspense 组件是 Vue3 中众所周知的特征之一。它可以使我们的 vue 程序在等待异步组件时渲染一些后备内容，从而使用户产生平滑流畅的体验。…
Suspense 组件很容易理解，也不需要额外导入其他的包。
本文讲告诉你：
什么是 Suspense 组件
什么时候使用
怎样使用
什么是 Suspense 组件Suspense 组件用于在等待某些异步组件来解析时显示后备内容。
使用异步组件的场合非常多，尤其是以下情况：
在页面加载之前显示加载动画
显示占位符内容
处理延迟加载的图像
以前在 vue2 中，我们必须使用条件（v-if 或 v-else）来检查数据是否已加载和显示后备内容。
但现在 Vue3 有了内置的 Suspense，使我们不必在加载和渲染相应内容时再去额外处理了。
怎样使用 Suspense由于本文的重点是 Suspense 而不是组件 API，所以不会涉及过多关于 API 的细节。
在下面的例子中，ArticleInfo 会在返回之前用异步 setup 方法加载用户数据。
123456789101112131415// ArticleInfo.v ...
Vue3笔记 --- Teleport
Vue3之新特性Teleport,真香…
在vue2.0时代，我们经常会有这样的需求，写代码逻辑的时候希望将组件写在某个模板之下，因为这样我们很好的使用组件内部的状态数据，控制组件的展示形态。但是从技术的角度上我们又希望将这段代码移到DOM中Vue app之外的其他位置。
举个简单的例子，我们在使用modal组件的时候，我们将它放在了我们的模板template里面，但是由于modal组件希望位于页面的最上方，这时候我们将modal组件挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制modal的位置，当他嵌套在template里面的时候就不那么容易了。
Vue2中的实现 vue2.0中我在写这个组件的时候是通过手动的形式来进行挂载的，我写了一个vue指令来进行这个操作，帮助我将modal组件挂载到body上面去，专这样也能够很好的通过控制zIndex来控制modal的展示。
1234567891011121314151617181920function insert(el) { const parent = el.parentNode; ...
前端鉴权的兄弟们：cookie、session、token、jwt、单点登录
cookie、session、token、jwt、单点登录…
本文你将看到：
基于 HTTP 的前端鉴权背景
cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式
session 方案是如何实现的，存在哪些问题
token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义
session 和 token 有什么异同和优缺点
单点登录是什么？实现思路和在浏览器下的处理
小广告：长期内推滴滴：why318why@gmail.com
从状态说起HTTP 无状态
我们知道，HTTP 是无状态的。也就是说，HTTP 请求方和响应方间无法维护状态，都是一次性的，它不知道前后的请求都发生了什么。
但有的场景下，我们需要维护状态。最典型的，一个用户登陆微博，发布、关注、评论，都应是在登录后的用户状态下的。
标记
那解决办法是什么呢？::标记::。
在学校或公司，入学入职那一天起，会录入你的身份、账户信息，然后给你发个卡，今后在园区内，你的门禁、打卡、消费都只需要刷这张卡。
前端存储
这就涉及到一发、一存、一带， ...
Git常用操作整理
Git常用操作整理…
基础命令
git clone 克隆仓库代码：git clone https://gitee.com/houpai/git-demo.git（仓库地址）
git status查看本地工作区状态git status
如图上所示Untacked files提示该文件为添加到版本追踪里
git add 把修改/新增等提交暂存区 git add . ： 提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件;–仅针对git版本为1.X的，目前2.X的含义是提交所有变化；
git add –u : 提交被修改(modified)和被删除(deleted)文件，不包括新文件(new);
git add –A : 提交所有变化
PS：在未commit命令之前，如果想撤销add , 可以用命令：git reset；
git commit 将暂存区的改动提交到本地仓库
每次使用git commit 命令我们都会在本地版本库生成一个40位的哈希值，这个哈希值也叫commit-id，commit-id在版 ...
gitee使用webhook
gitee配置webhook…
原因我们经常使用GitHub、GitLab、Gitee 之类的仓库，有时候需要频繁的发布代码打包，人工发布，工作量有时候会很大，有时候还容易出错，所以会使用Jenkins一类的工具进行辅助，但是如果是一个简单的项目或者是个人项目使用Jenkins就显得太重了，可以直接使用webhook，比较方便。
什么是webhook
准确的说webhoo是一种web回调或者http的push API，是向APP或者其他应用提供实时信息的一种方式。Webhook在数据产生时立即发送数据，也就是你能实时收到数据。这一种不同于典型的API，需要用了实时性需要足够快的轮询。这无论是对生产还是对消费者都是高效的，唯一的缺点是初始建立困难。
Webhook有时也被称为反向API，因为他提供了API规则，你需要设计要使用的API。Webhook将向你的应用发起http请求，典型的是post请求，应用程序由请求驱动。
配置webhook知道什么是webhook 后我们就要开始配置我们自己的项目了。 环境： CentOS7 Gitee（网上GitHub的教程比较多，这个基于 ...
package.json详解
package.json详解…
前言
平常在工作中，对package.json这个文件的接触非常非常少。
一些同学可能还会看一下script里面有什么命令，执行了哪些方法。
又或者了解一下dependencies和devDependencies
其他大部分的同学可能直接就npm i和npm start就开始工作了。
但是package.json的魅力远不止如此
今天就和我一起探索一下这个项目中不可或缺的——package.json吧！
由浅入深-核心内容准备工作手摸手新建一个空的package.json
npm init
上万个回车
或者直接执行
npm init -y
其意思就是全部都略过，和我们上面的无数个回车的效果一样
先看看上面有的东西。
123456789101112{ "name": "package.json", # 项目名称 "version": "1.0.0", # 项目版本（格式：大版本.次要版本.小版本） "description" ...