木灵鱼儿

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

typecho主题开发：基于webpack5的多页面打包项目

前言一直想把基于webpack5的多页面打包整理一下，做成一个通用的typecho主题开发架子，之前在JJ主题上虽然以及由部分实现了，但是不是很理想，因为是第一次弄，所以还是有些粗糙。现在离职后得了空闲，于是把这个架子给搭起来了，基于这个架子做前端开发还是很方便的，起码各种框架都能通过按照包的方式使用，能用上先进的打包机还是很棒的！仓库地址github地址：webpack-multiple-entry觉得有用的话麻烦点个Star吧。如果有什么问题可以提交Issues或者在该文章下面留言

7602 19 6

typecho 主题开发 webpack5

MVC、MVP、MVVM

木灵鱼儿 2年前设计模式

MVC、MVP、MVVM

MVCmvc其实是从后端mvc架构模式中演变而来的，在2005年之前，也就是ajax还没有出现在前端世界中的时候，页面的处理其实都是由后端一人完成，全栈大师，那会前端技术还是很简单的，后端一个人就能实现从数据库拿数据然后渲染成一个完整html页面返回给浏览器。但是就是这个过程耦合度很高，以至于不太好维护代码，于是采用了一种分层模式，将不同的代码分为不同的部分，也就是解耦处理，总共分为三层：模型层（Model）、视图层（View）、控制器层（Controller）。模型层就是数据库的模型，如果使用过面向对象的数据库框架，比如sequelize，他们将每一个数据库的表转换成一个对象，通过操作...

3068 0 0

mvc mvp mvvm

windows+alist搭建一个web版局域网共享站点

木灵鱼儿 2年前教程

windows+alist搭建一个web版局域网共享站点

前言最近发现一个有意思的项目 alist，官方定义是一个支持多种存储的文件列表程序，而且它使用的新的框架 SolidJS；没有虚拟dom，直接操作原生dom，性能和 Vanilla 相同，于是拿来用了一下，发现解决了我的一个痛点。当我电脑下载完视频后，这些视频文件往往会很多或者文件很大，但是这些文件属于待确认文件，我可能简单略了一遍后就会将它们删除，所以，我不想移动到手机上去查看，但是电脑上看又不是很便捷，特别上晚上想躺床上的时候，操作电脑就不是很方便了。之前我是利用windows自带的文件共享功能Samba来远程查看的，通过手机的文件管理器SMB连接到电脑，然后查看文件，但是这种方式非...

9077 1 0

samba 局域网共享 alist

Event Loop事件队列和宏任务微任务

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

Event Loop事件队列和宏任务微任务

Event Loop我们知道JavaScript是一门单线程的语言，他只能一行一行的执行代码，于是我们的代码应该都是同步的，这里我们暂时忘掉所有的异步，看一下这么做会有什么问题。用户进入了我们的网页，点击了一个按钮，触发加载更多功能，此时浏览器发起ajax请求，如果我们的代码都是同步的，那么页面会在这个请求完成之前是卡主状态的，因为需要等待该代码的完成，此时用户什么都做不了，既不能滚动页面，也无法点击其他内容，如果这个请求需要60s的时间，用户肯定会觉得，这是什么狗屎页面。这显然是不行的，因为代码阻塞导致体验特别的差，解决这个问题的办法就是加入异步功能，我们将请求的回调作为异步处理，不需...

2513 0 0

定时器 promise Event Loop

封装一个dialog弹窗组件

木灵鱼儿 2年前 UNI-APP

封装一个dialog弹窗组件

需求看了半天uniapp官方提供的插件，发现就是没有dialog弹窗的封装，有点难受，这个弹窗其实用的地方还挺多的，但是uni-popup组件的用法实在是有点粗暴啊，需要通过ref获取popup组件实例，操作组件实例的open和close方法实现开关，和我们日常的v-model绑定差了好多，于是自己想着造一个。在网页端我们watch监听props的变量，然后在nextTick会调中使用popup组件实例是没有问题的，但是在微信小程序中发现这个方法有一个问题？如果我这个弹窗默认就是true打开的状态，那么在watch中即便使用了nextTick我们也无法获取到组件的实例，这个不知道是不是...

4277 1 2

dialog 弹窗组件

类型守卫：判断某个key是某个对象的合法key值

木灵鱼儿 2年前 TypeScript

类型守卫：判断某个key是某个对象的合法key值

/** 类型守卫：key是否是指定对象的属性 */ function isLanguageKey(key: string, object: Object): key is keyof typeof object { return Object.prototype.hasOwnProperty.call(object, key); }这个一般用于对象object是其他人提供的，但是我们知道它一定会有某个key值，但是由于这个object它被类型推断为已知key的类型，比如：{ title: "xxx", age: "xxx" }当我们使用...

2973 0 0

is 类型守卫 keyof

封装uni.request api为类似axios的用法

木灵鱼儿 2年前 UNI-APP

封装uni.request api为类似axios的用法

前言uniapp的请求都是通过uni.request的api实现的，但是这个api和前端常用的axios库用法上有着太多的不同了，移植起来非常痛苦，所以萌生了自己造一个轮子的想法，由于本人技术菜鸡，只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求，如下：axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone&#...

4896 0 1

axios 拦截器取消请求

卷轴地图

木灵鱼儿 3年前 Unity 雷电笔记

卷轴地图

雷电这种飞机游戏，他的地图是一个无限滚动的背景，最直白的一个办法就是做两张图，然后y轴移动，当一张图已经移动到最底的时候，也就是这个图的高度已经到0的坐标位置时，将其移动到顶部，以此类推，这样通过两张图来回位置控制，实现一个无限滚动的地图。理论上最简单，但是代码上会复杂一些。本次使用的方法是通过3d的四边形挂上一个材质，控制材质的位移实现，这样只需要一个资源对象就实现了卷轴地图。这种方式可以理解为前端的背景，背景是一个无限repeat的图片，控制他的postion定位实现背景移动，不过unity这个内部实现上可能是不一样的，但是可以这么去理解。教程首先我们需要一张背景图，我们将其丢入 T...

2557 1 0

雷电卷轴地图

尾调用优化

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

尾调用优化

什么是尾调用优化函数的调用会在内存中形成一个调用记录，被称为调用帧，调用帧会保留调用位置和内部变量等信息，一个个调用帧形成了调用栈。而尾部调用优化，意思是：如果一个函数的结尾调用了一个函数，且这个函数不需要依赖当前函数的调用帧，那么就会只保留尾部调用的这个函数调用帧，从而节省内存。es6要求引擎实现尾部调用优化（TCO），因为如果没有TCO会导致一些JavaScript算法因为害怕调用栈限制而降低了通过递归实现的效率。由于缺失TCO确实会导致一些程序无法实现，所以它变成了一个重要的语言特性而不是隐藏的实现细节。es6确保了JavaScript开发者从现在开始可以在所有符合es6+的浏览器...

2615 0 0

尾调用优化 TCO

性能测试

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

性能测试

性能测试如果被问到如何测试某个运算的速度，绝多数JavaScript开发者都会使用类似下面的代码：var start = (new Date()).getTime(); // ईኁDate.now() //需要测试的代码 var end = (new Date()).getTime(); console.log("用时:", (end - start));相信大部分人都是这么想的吧！但是这种方案有很多错误，这里我们能知道的只有这次运算消耗了大概这么长的时间。而它是否总是以这样的速度运行，我们基本上一无所知，你不知道JavaScript引擎这个时候有没有受到什么影响...

2043 0 0

测试性能微性能

生成器 Generator

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

生成器 Generator

简介Promise的出现，我们可以将回调进行反客为主，不在受回调调用者的限制（控制反转和信任问题），但是它并没有解决异步编程导致的代码顺序问题，有没有一种方式，可以让我们的代码虽然是异步的，但是书写顺序却是同步的，这样完全符合我们人类大脑理解方式？console.log("同步的1"); axios({ ... }).then(() => { console.log("异步的回调，如果需要等待结果处理，代码只能写在这个回调里") }); console.log("同步的2")很明显，如果我们希望"同步...

2446 0 0

generator async await

语法

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

语法

上下文规则大括号常见的大括号使用就是对象常量定义var a = { foo: bar() };但是还有一种不是很常用的方式，就是标签{ foo: bar() }很多人以为这种写法是一种对象常量，只是没有赋值给变量，但是事实并不是这样。{ ... }在这里只是一个普通的代码块。从语法上说这段代码是完全合法的，这里涉及到JavaScript中一个不太为人知的特性：标签语句；foo是bar()的标签，这种标签一般用来配合continue 和 break 语句进行跳出处理。比如我们有一个三层的for循环，但是break和continue只能跳出一层循环，如果我们在第三层找到了需要...

2440 0 0

语法上下文规则提前使用变量

强制类型转换

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

强制类型转换

简介将值从一种类型转换为另一种类型通常被称为类型转换，这是显式的情况，而隐式的情况被称为强制类型转换。在JavaScript中通常将它们统称为强制类型转换，而显式和隐式的区分分界线其实并不明显，它很大程度上取决你是否了解这段代码是否转换了类型，如果你知道它转换了类型，那么这段代码对于你而言就是显式的，而隐式常常是那些不了解或者是比较隐晦的代码。var a = 42; var b = a + ""; // 隐式强制类型转换 var c = String(a); // 显式强制类型转换隐式转换带来的副作用其实都是相对而言的，如果你足够了解，其实它就没有副作用，只是我们在编...

2316 0 0

隐式转换类型转换强制类型转换

函数

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

函数

原生函数常用的原生函数有：String()Number()Boolean()Array()Object()Function()RegExp()Date()Error()Symbol()——ES6 中新加入的！实际上，它们就是内建函数。原生函数可以被当作构造函数来使用，但是你得到的就不是常量了，而是对象。var a = new String("abc"); typeof a; // 是"object"，不是"String" a instanceof String; // true Object.prototype.toStr...

2486 1 0

函数原生函数包装器

类型和值

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

类型和值

类型JavaScript 有七种内置类型：空值（null）未定义（undefined）布尔值（ boolean）数字（number）字符串（string）对象（object）符号（symbol，ES6 中新增）除对象之外，其他统称为“基本类型”。其中数组Array和函数Function都是object的子类型，像Date这些也是同理。其中需要特殊记忆的就是null了，typeof对它的处理是有问题的：typeof null === "object"; // true正确的结果应该返回字符串类型的"null"，这个bug是出自历史遗留，起因是因为Ja...

2361 0 0

类型值

屏蔽属性

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

屏蔽属性

前言对于js的原型链继承，大部分都是知道的，但是对于以下内容，很多人可能并不清楚或者理解不完整，那就是屏蔽属性。什么是屏蔽属性，其实这个功能来源于面向对象语言中的多态，表示父级定义的属性，在子级可以自己扩展，虽然属性名相同，但是功能却可以不同。由于js的继承，它不像强类型语言是完全的复制，js对于继承是通过原型链的方式，当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性，显然它是绝对不能直接修改原型链上的内容，这回导致所有继承的子类产生问题，这显然是不合适的。于是就有了屏蔽属性，当子级去覆写一个原型上存在的属性时，其实并不会去修改原型链的属性，而是给子级自己添加一个对...

2216 0 0

原型屏蔽属性

解决vant的tab组件swipeable功能与内部scroll冲突的问题

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

解决vant的tab组件swipeable功能与内部scroll冲突的问题

看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>

4141 28 0

vant tab swipeable

moment utc时间转本地时间

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

moment utc时间转本地时间

服务器返的时间是一个utc的时间字符串2022-12-01 03:00:30，我们需要将其转为我们本地时区，以东八区为准，正确的时间应该是2022-12-01 11:00:30。我当时这么写的：moment(new Date(time)).local();其实这是有问题的，首先我其实是为了防止time这个变量错误，所以使用了new Date，但其实是不对的，new Date会导致时间被转为本地时间且不会加上本地时区的8个小时。new Date("2022-12-01 03:00:30"); //Thu Dec 01 2022 03:00:30 GMT+0800 (中...

3199 0 0

moment UTC 时间转换

css选择器优先级计算规则

木灵鱼儿 3年前 CSS

css选择器优先级计算规则

规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器：* {}选择符：+、>、~、空格、||逻辑组合伪类：:not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器：.foo {}属性选择器：[foo] {}伪类：:hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...

2621 0 0

css 优先级计算规则

对象的遍历

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

对象的遍历

for...in循环可以用来遍历对象的可枚举属性列表，但是如果遍历对象的值呢？以数组为例，我们最基础的方式就是for循环：var myArray = [1, 2, 3]; for (var i = 0; i < myArray.length; i++) { console.log(myArray[i]); } // 1 2 3事实上这种并不是真的遍历值，而是在遍历下标来获取到对应的值。ES5新增了一些数组的遍历方法，比如：forEach(..)、every(..) 和 some(..)；每种方法都可以接受一个回调函数并将其应用到数组每个元素上，，唯一的区别就是它们对于回...

2394 0 0

for...of 对象的遍历迭代器

属性描述符

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

属性描述符

简介在 ES5 之前，JavaScript 语言本身并没有提供可以直接检测属性特性的方法，比如判断属性是否是只读。但是从 ES5 开始，所有的属性都具备了属性描述符。var myObject = { a: 2 }; Object.getOwnPropertyDescriptor(myObject, "a"); // { // value: 2, // writable: true, // enumerable: true, // configurable: true // }输出的这个对象被称为属性描述符，我们可以通过Object.definePropert...

2404 0 0

属性描述符

搞明白防抖与节流

木灵鱼儿 3年前 JavaScript

搞明白防抖与节流

防抖防抖在日常项目开发的时候还是很重要的，用于防止函数的重复触发，节省性能开支。比如监听用户的input输入进行api查询，由于input事件每次改变输入的内容都会触发，但是一般来说，只有最后一次input才有效，所以会经常采用防抖的形式来触发。防抖：在一定时间内重复触发之后只会生效最后一次。如何写一个防抖呢，我们慢慢来< script > "use strict" const input = document.querySelector("input"); input.addEventListener("input&quo...

4215 1 0

javascript 防抖节流

实现一个基于策略模式的表单校验

木灵鱼儿 3年前前端功能

实现一个基于策略模式的表单校验

最近项目居然要求不能使用vue cli这种工程化极度成熟的开发方案，非常痛苦的继承了上一代的gulp打包。苦哈哈！这也就导致不能使用ts，babel的兼容处理更是极少极少的，写啥都是得想一下，特别是没有箭头函数，this的指向我都bind了不知道多少次了。这次的功能里有一个表单校验的需求，所以我想着封装一个小工具来提高书写代码的流畅度，加上之前就一直想写一个基于策略模式的实际实现，这次赶巧给碰上了。东西比较多就不直接贴代码了，我上传到github仓库了，有兴趣去看看。github：CustomValidator效果演示

2727 0 0

表单校验策略模式

this全面解析

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

this全面解析

this绑定的规则从执行上下文中我们可以知道，函数在运行时会生成函数执行上下文，在这个里面存在着this，而this绑定谁，则由规则去定义。一共有四条规则，我们按从小到大一一讲解。默认绑定规则当其它三条规则不满足时，则使用默认绑定规则，在非严格模式下，this会被指向全局对象，也就是window，但是再严格模式下，会被指向undefined。function a() { console.log(this); //window } a();function a() { "use strict"; console.log(this); //und...

2619 0 0

this 严格模式 this绑定规则

执行上下文

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

执行上下文

什么是执行上下文JavaScript引擎在执行代码阶段时，通常是调用函数的时候，就会先做一些准备工作，这个准备工作被称为执行上下文，简称EC，或者也可以叫做执行环境。执行上下文也是有不同的，有三个类型：全局执行上下文：最基础的执行上下文，一个程序也只会存在一个全局执行上下文，全局上下文会生成一个全局对象，这个对象就是window，并且会将该上下文的中this绑定到该全局对象上。函数执行上下文：当函数被调用时都是产生一个新的上下文对象，不管函数是否是重复调用Eval函数执行上下文：执行在 eval 函数内部的代码也会有它属于自己的执行上下文而this是由上下文中提供的，我们可以将上下文理解...

2642 0 0

上下文 this 执行上下文

木灵鱼儿

typecho主题开发：基于webpack5的多页面打包项目

MVC、MVP、MVVM

windows+alist搭建一个web版局域网共享站点

Event Loop事件队列和宏任务微任务

封装一个dialog弹窗组件

类型守卫：判断某个key是某个对象的合法key值

封装uni.request api为类似axios的用法

卷轴地图

尾调用优化

性能测试

生成器 Generator

语法

强制类型转换

函数

类型和值

屏蔽属性

解决vant的tab组件swipeable功能与内部scroll冲突的问题

moment utc时间转本地时间

css选择器优先级计算规则

对象的遍历

属性描述符

搞明白防抖与节流

实现一个基于策略模式的表单校验

this全面解析

执行上下文

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

typecho主题开发：基于webpack5的多页面打包项目

MVC、MVP、MVVM

windows+alist搭建一个web版局域网共享站点

Event Loop事件队列和宏任务微任务

封装一个dialog弹窗组件

类型守卫：判断某个key是某个对象的合法key值

封装uni.request api为类似axios的用法

卷轴地图

尾调用优化

性能测试

生成器 Generator

语法

强制类型转换

函数

类型和值

屏蔽属性

解决vant的tab组件swipeable功能与内部scroll冲突的问题

moment utc时间转本地时间

css选择器优先级计算规则

对象的遍历

属性描述符

搞明白防抖与节流

实现一个基于策略模式的表单校验

this全面解析

执行上下文

最近评论

博客文章RSS订阅

博客评论RSS订阅