木灵鱼儿

木灵鱼儿 3年前你不知道的JavaScript

关于this

为什么会有thisthis在JavaScript中是一个非常复制的机制，它的存在其实是为了能让我们更好的复用代码，this提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将API设计的更加简洁且易于复用。我们举个例子：new一个构造函数，我们可以得到一个新的实例对象，这个对象会继承原型，此时，如果没有this，如何在原型方法里去访问你的新的实例对象，以及获取属性这些操作。显然是不太好做的，难道每次都把自身作为参数传递给prototype上的方法吗？显然这非常不方便，如果使用了this，this会指向这个新的实例对象，那么我们在书写代码是就会更加方便了，复用也更加简单。这个thi...

2707 0 0

上下文 this

块作用域的代替方案

木灵鱼儿 3年前你不知道的JavaScript

块作用域的代替方案

随着ES6的let和const的声明，我们终于可以创建完整，不受约束的块作用域，但是这个功能终究是新的功能，老设备怎么办呢，它不支持啊！所以我们现在都是使用新的语法，再打垫片（polyfill）去支持新旧设备。那么块级作用域怎么实现旧设备也能用呢？以这段为例：{ let a = 2; console.log(a); // 2 } console.log(a); // ReferenceError分析之前说过的，with和catch，你会发现只能通过使用catch的方式实现这个功能。try { throw 2; } catch (a) { console....

2218 0 0

catch 块作用域

闭包

木灵鱼儿 3年前你不知道的JavaScript

闭包

前言闭包是基于词法作用域在书写代码时所产生的自然结果，不需要刻意的去创建闭包，闭包的创建和使用在代码中随处可见，我们需要的是怎么去识别和根据自己的需要去使用它。什么是闭包先看一段代码：function foo() { var a = 2; function bar() { console.log(a); // 2 } bar(); } foo();当我们运行foo函数的时候，foo函数里面会运行bar函数，打印时通过作用域链往上RHS查询，在foo函数作用域中查询到了a变量，并得到它的值。我们根据之前学习的作用域知识，很快的明白了为什么...

2640 0 0

模块作用域闭包

提升

木灵鱼儿 3年前你不知道的JavaScript

提升

前言到现在为止，我们应该知道作用域是做啥的了，以及词法作用域模式中，根据代码声明的位置和方式分配作用域的相关原理，。函数作用域和块作用域的行为是一样的，可以总结为：任何声明在某个作用域内的变量，都将附属于这个作用域。但是作用域中的变量标识符和其声明的位置却有一些微妙的联系。编译a = 2; var a; console.log(a);这段代码，其实会输出2；至于为什么，我们可以从编译的角度去理解。我们知道，JavaScript在运行之前会进行一次编译，其中就有词法分析，并将词法与对应的作用域进行关联，于是会将声明先提取出去，于是乎上述的var a;会被先取走并丢入作用域中去。当代码编译完...

1942 0 0

提示变量提升函数提升

函数作用域和块作用域

木灵鱼儿 3年前你不知道的JavaScript

函数作用域和块作用域

前言函数作用域和块作用域，并不是高出词法作用域的一种东西，可以将其理解为词法作用域的一些单元，如果词法作用域是房子，函数作用域和块作用域就是房间。函数作用域每个函数都会为其自身创建一个新的局部环境（函数作用域），属于这个函数的全部变量（函数内声明的），都只能在该环境范围内使用，当然也包括作用域嵌套。function foo(a) { var b = 2; // 一些代码 function bar() { // ... } // 更多的代码 var c = 3; } bar(); // ReferenceError 上述代码中，ba...

2407 0 0

函数作用域块作用域 IIFE

词法作用域

木灵鱼儿 3年前你不知道的JavaScript

词法作用域

什么是词法作用域在上文中我们说道作用域的概念，这套规则是用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。而作用域共有两种工作模型：词法作用域动态作用域词法作用域是被普遍使用的一种工作模式，也是JavaScript所使用的，而动态作用域也是有语言在使用的，比如：Bash脚本，perl。词法作用域称之为静态作用域，这个也是由他的实际原理所提现的，具体我们往下看。词法阶段在JavaScript编译时，第一个阶段就是词法分析；简单来说，词法作用域就是定义在词法分析阶段的作用域，换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处...

2373 0 0

词法作用域静态作用域词法

作用域是什么

木灵鱼儿 3年前你不知道的JavaScript

作用域是什么

什么是作用域几乎是所有编程语言的最基本的功能之一，就是能够存储变量的值，并且后续能够对这个值进行访问和修改，这种能力被称之为状态。如果没有状态这个概念，程序的使用会受到很大的限制，虽然没有状态也能执行一些简单的任务。变量的引入会有几个有意思的问题：变量存储在哪里？程序如果找到它们？解决这些问题的方式就是设计一套良好的规则来存储变量，并且之后也可以很方便的找到这些变量，这套规则被称之为作用域。编译原理JavaScript在运行的时候，如何创建一个变量，如何获取一个变量的值，都是通过作用域来实现的，可以将作用域理解为一个工具，往里面存东西，从里面拿东西等一系列操作。js的完整运行有三个模块：...

2611 0 0

作用域 LHS RHS

实现一个自定义虚拟滚动条

木灵鱼儿 3年前前端功能

实现一个自定义虚拟滚动条

根据element框架的el-scrollbar来实现的，根据官方源码自己写了一版，用于了解该功能的实现。要点：通过margin的负值以及不定宽高的父级元素verflow: hidden实现隐藏滚动条真实的滚动条被隐藏后实现一个自己的滚动条（点击滚动滑轨滚动和拖拽滑块滚动）实现一个div的resize事件监听来动态更新虚拟滚动条的大小其中最难的就是拖拽滑块滚动，那个算法真的看不懂，反正照抄了，由于不是很有时间研究，所以没有对移动端的touch事件进行兼容。参考文章： Element-ui el-scrollbar 源码解析本人仓库：CustomScrollBar效果展示：总结：个人的实现...

2472 0 0

虚拟滚动条

vue cli3-cli4 打包后项目在二级路径的方法

木灵鱼儿 3年前 vue cli

vue cli3-cli4 打包后项目在二级路径的方法

默认情况vue的build打包，都是基于根路径来进行的，但是，如果我们将打包的文件放置再二级目录，就会导致文件无法加载，页面空白。原因有两个：路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时，我们常常会看到一个base选项，内容如下：const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释：类型: string 默认值: "/"应用的基路径。例如，如果整个单页应用服...

6335 0 0

vue cli 打包二级目录

url文件的下载

木灵鱼儿 3年前前端功能

url文件的下载

前言以前写过一篇《目前前端下载文件的最佳实践》的文章，虽然这个文章是我经过工作实践得出得，但是直到今天我才发现，原来不止如此，根据我目前的知识，可以把文件下载分为两类：接口返回文件流文件下载地址之前分析的文章仔细一想，其实都在做一个事情：读取文件流再手动转文件进行本地下载首先我们需要知道，我们的a链接下载其实并没有问题，本来是不需要读取文件流的，但是后端对头信息的了解不多，导致下载文件的链接是一个预览的头信息，这就导致我们a链接无法直接通过点击直接下载，反而是直接打开了这个文件。这带来的结果就是我们会认为图片啊，pdf这些浏览器可以直接打开的文件，并不会触发下载，而是预览，因为我们很少去...

2712 1 0

文件下载

Nginx默认不支持带下划线的头信息

木灵鱼儿 3年前运维

Nginx默认不支持带下划线的头信息

前言最近国庆了，由于主要计划被迫放弃，所以只能走点次要计划，就是将个人全栈开发的书签系统移动到其它服务器上，主要还是因为财力问题，无法供给多台服务器，腾讯云也没有什么好活动，全是老用户与狗不得参与系列。无奈的搬运，其中最简单的是项目打包带走，数据库的还原，站点的配置，其中我就遇到了个贼奇葩的问题，就是我的头信息总是获取不到。一开始我是以为是我的反代服务的问题，因为是nodejs的后端服务，如果想要通过域名访问api就不得不通过反代的方式来使用。反代是将a的请求接受后自己再发给真实服务，然后将真实服务的返回再返回给a，其中我们知道一个xhr请求是有很多参数的，其中header头信息也是一种...

4114 0 1

http nginx 头信息

使用howler.js封装一个网页游戏音乐管理器

木灵鱼儿 3年前 JavaScript

使用howler.js封装一个网页游戏音乐管理器

踩坑指南虽然howler.js说他可以自动感知然后自动播放，事实上没什么软用，所以我们还需要自己去配置一下触发器。监听一个全局的click事件之类的。虽然howler.js说可以自动降级到h5播放，但是实际测试无法在安卓4.4中进行播放，但是个人测试，如果你使用一个audio元素，是可以播放的，但是这样就需要自己去手动封装一个基于audio元素的播放管理，项目赶的很，实在没有多余的时间去研究这个，特别是音效的播放，还是专业的库处理比较好，所以暂时对于安卓4.4的兼容是没法做到的。官方对于这个问题也是很模糊，找不到解决办法。howler.js在文档中找了半天，也没看到官方提供动态替换资源的...

3193 0 0

howler 音乐管理器

实现一个点击空白区域关闭显示的自定义指令

木灵鱼儿 3年前 vue 项目实战

实现一个点击空白区域关闭显示的自定义指令

typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...

3079 0 0

vue 自定义指令空白区域关闭

使用vue2.7的一些踩坑事项

木灵鱼儿 3年前 vue 项目实战

使用vue2.7的一些踩坑事项

eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这...

8364 83 1

vue vuex vue-router

实现一个自动高度的输入框

木灵鱼儿 3年前前端功能

实现一个自动高度的输入框

前言大概在上个月的时候我就看了对应的一些资料，但是一直拖着，因为这个功能其实vue的框架就有提供，比如element ui的input组件，它的这个功能叫自适应文本域，属性为autosize。所以本文也不过多讲解具体实现，主要还是它的原理层的东西。这个功能可以用在哪呢？比如移动端的聊天输入框的高度判断，拿我们的QQ来讲，在没有内容的时候它就只有1行的高度，如果内容过高，就会自动变高，然后也会有一个max的最大高度阈值，这个高度一般是几行，比如最大6行高度，多了就滚动条处理。那么就开始吧！最基本的实现变高原理其实非常简单，假设我现在有一个textarea元素用于用户的输入，然后我希望它在用...

3240 2 0

textarea 输入框自动高度

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

木灵鱼儿 3年前 Cocos Creator

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

问题起源可能Cocos Creator软件的开发人员认为每个开发者都是有两个电脑屏幕的（苦笑）;它的脚本检测逻辑是：当你改动完脚本文件后，切换到Cocos Creator面板，此时才会触发预览更新，如果你是双屏的话，就不用切换，一个屏幕打开Cocos Creator，一个屏幕打开vscode，然后vscode保存后就会自动更新，此时切换到浏览器预览，一切都是那么的正常，前提你得有两块屏幕。非常蛋疼！！！这真是一个糟糕的体验！如果我们是单屏，你vscode改动脚本保存后，还得切换到Cocos Creator软件上，然后再切到浏览器去查看，超恶心有没有，怎么会有这种体验，都2022年了，文件...

4210 0 0

Cocos Creator 脚本编译自动编译

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

让typecho支持特殊字符

木灵鱼儿 3年前 Typecho博客教程

让typecho支持特殊字符

起因由于最近在了解前端js中length不准的问题，其中文章带有一些特殊字符，而typecho和mysql都只是支持UTF-8字符，但是这个utf-8并不是真正意义上的utf-8，它最多支持3个字节的内容，也就是24bit，而我文章中的特殊字符是需要4个字节来存储的，这就导致文章无法正常的展示和保存。这个特殊字符和现在移动端常用的emoji表情差不多，emoji也是一种特殊字符，所以该教程同样适用于如何让typecho支持emoji表情。教程打开宝塔的phpmyadmin -> 找到typecho的数据库 -> 操作 -> 滑动到最底部找到排序规则 -> 选择ut...

3116 0 0

typecho 特殊字符 emoji

为什么length不准

木灵鱼儿 3年前前端功能

为什么length不准

前言这个问题在最近经常被刷到，虽然我知道怎么解决这个问题，但是为什么会这样，其实并不太明白，所以这次特此开一篇文章讲讲为什么length获取字符位数会不准的问题，以及我们的解决办法。"𠮷".length //2 "💩".length //2𠮷与吉利的吉是一个意思，𠮷是异体写法，古文中会出现。按照我们的认知，上述的length输出应该是1才对，但事实上却是2。计算机是如何存储字符的早期的ASCII字符集在计算机中，所有的数据存储最终都是二进制，如何正确的存储及其识别字符，做法就是定制一个编码规则，让每个字符都由一个个数字来表示，这些数字被...

3369 0 0

length Unicode ASCII

2022下半年计划

木灵鱼儿 3年前教程

2022下半年计划

今晚心潮澎湃写下了下半年的计划，加油搞下去吧，任务不分先后，加油，下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[x] 看书《你不知道JavaScript》上[x] 看书《你不知道JavaScript》中[ ] 看书《你不知道JavaScript》下前端功能：[x] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid总结下半年这几个月也是攒足了劲了，好多东西混在一起，随着时间有些东西都忘了，哈哈。。。还好写了博客，回头用的时候来...

2651 0 0

uuid

木灵鱼儿 3年前前端功能

uuid

什么是uuidUUID 是通用唯一识别码（Universally Unique Identifier）的缩写，其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。uuid是指在一台机器上生成的数字，它保证对在同一时空中的所有机器都是唯一的说白了就是生成唯一标识符的作用，那么它的重复几率就一定要极低。每秒产生10亿笔UUID，100年后只产生一次重复的机率是50%。如果地球上每个人都各有6亿笔UUID，发生一次重复的机率是50%所以我们在日常使用中，可以不用考虑重复性的问题，几率非常非常小...

2774 0 0

uuid 唯一值 nanoid

mock 快速入门

木灵鱼儿 3年前 JavaScript

mock 快速入门

基本概念问题的起源：前后端分离在前后端开发的时候，前端的数据基本都是通过api请求获取到的，但是后端可能在开发的时间上与前端不一致，这就导致前端常常需要等待后端提供接口，等待会耗去很多开发时间，所以我们经常做的方式就是自己模拟数据（假数据时代）。比如写个定时器返回一个数据对象，或者使用一个json文件，去模拟请求。但是这些其实都并不方便，每次都要自己去写一堆数据，如果是json格式还不能for循环，以及一些随机数据，最重要的是这些代码最终都得删除，因为耦合在业务代码中，而且我们的请求并不是真正的请求代码，最终在后端接口出来后我们还得改一遍代码。难道就不能前端模拟的效果和真实请求一样，后端...

3486 1 0

mock

vue-router4 新增功能

木灵鱼儿 3年前 vue3 快速上手

vue-router4 新增功能

动态路由这个其实在3版也有，不过3版原来使用的api是addRoutes，这个api顾名思义，就是可以传入一个路由数组来进行注册，后来被废弃，现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由，但是有两种用法：添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由，父路由必须有name属性route...

3504 0 0

vue-router vue3 动态路由

vue-router4 一些常见配置的改动

木灵鱼儿 3年前 vue3 快速上手

vue-router4 一些常见配置的改动

创建路由实例方式改变3版本的时候是通过new的方式创建路由实例，4版本是改用了createRouter的方式：import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制，值为字符串，现在通过import引入不同函数来创建不同的路由模式："history"改为createWebHistory()"hash"改为createWebHashHistory()"abst...

5797 0 0

vue-router vue3

vue3 filter过滤器

木灵鱼儿 3年前 vue3 快速上手

vue3 filter过滤器

vue3直接移除了filter过滤器，官方推荐，如果要使用过滤器可以使用computed计算属性和method函数来代替。如果使用了全局过滤器，官方也提供了一个属性来进行迁移修复，但是也只推荐用于迁移。const app = createApp(App) //给当前app的全局属性上挂载一个过滤器对象 app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }使用的时候：<template> <h1>Bank Ac...

6821 4 0

过滤器 filter 全局过滤器

vue3 keyCode修饰符

木灵鱼儿 3年前 vue3 快速上手

vue3 keyCode修饰符

vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的。<input @keyup.13="submit" />甚至我们还可以使用按钮别名alias的方式调用<input @keyup.enter="submit" />还可以全局自定义别名，通过Vue.config.keyCodes属性。Vue.config.keyCodes = { f1: 112 }随着ECMAScript的标准推荐，官方已经不推荐使用keyCode键码了，这个功能在js的官方定义上是一个已弃用的状态，最新的标准是使用...

3425 0 0

修饰符 vue3 keyCode

木灵鱼儿

关于this

块作用域的代替方案

闭包

提升

函数作用域和块作用域

词法作用域

作用域是什么

实现一个自定义虚拟滚动条

vue cli3-cli4 打包后项目在二级路径的方法

url文件的下载

Nginx默认不支持带下划线的头信息

使用howler.js封装一个网页游戏音乐管理器

实现一个点击空白区域关闭显示的自定义指令

使用vue2.7的一些踩坑事项

实现一个自动高度的输入框

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

让typecho支持特殊字符

为什么length不准

2022下半年计划

uuid

mock 快速入门

vue-router4 新增功能

vue-router4 一些常见配置的改动

vue3 filter过滤器

vue3 keyCode修饰符

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

关于this

块作用域的代替方案

闭包

提升

函数作用域和块作用域

词法作用域

作用域是什么

实现一个自定义虚拟滚动条

vue cli3-cli4 打包后项目在二级路径的方法

url文件的下载

Nginx默认不支持带下划线的头信息

使用howler.js封装一个网页游戏音乐管理器

实现一个点击空白区域关闭显示的自定义指令

使用vue2.7的一些踩坑事项

实现一个自动高度的输入框

解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

让typecho支持特殊字符

为什么length不准

2022下半年计划

uuid

mock 快速入门

vue-router4 新增功能

vue-router4 一些常见配置的改动

vue3 filter过滤器

vue3 keyCode修饰符

最近评论

博客文章RSS订阅

博客评论RSS订阅