木灵鱼儿

木灵鱼儿 6年前 javascript高性能

数据存取

JavaScript中，不同存储位置，他的读取速度是不一样的，就好像一个距离你只有一米的饮料和一个距离你十米的饮料，当然是一米的你拿起来喝的速度最快。js中有四种基本的数据存取位置：1.字面量字面量只代表自身，不存储在特定的位置，js的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式、及特殊的null和undefined值。你可以这么理解，if(true)语句中的true布尔值就是字面量，他就是一个值，不需要命名什么的就可以用的那种。2.本地变量使用var定义的数据存储单元，被作用域影响读取快慢。3.数组元素存储在JavaScript数组中的，以数字作为索引。4.对象成员存储...

3881 0 0

数据存取

加载和执行

木灵鱼儿 6年前 javascript高性能

加载和执行

js的加载会阻塞页面的加载和渲染，那么常用的方式就是将script元素放置在body元素里面最底下的位置，但是这样还是会有阻塞，但是不会阻塞下载，阻塞的是渲染，也就是说，js运行长时间的话，页面也会长时间显示空白，哪怕所有的资源都已经下载完毕了。延迟脚本为此便有了无阻塞的模式，那么最简单的就是给script添加defer和async属性了，但是这两个属性当初也只有ie支持，其他的浏览器并不支持，但是目前为止，如果都是新版本的浏览器，这两个属性已经全面支持了。defer表示当前的js文件不需要修改dom，所以他会在dom加载完运行，async则是异步加载，谁先加载谁先运行，但是如果js文件...

4064 0 0

js无阻塞加载

js深度克隆

木灵鱼儿 6年前 JavaScript

js深度克隆

深度克隆主要用于引用类型，因为大部分的引用类型如果某一个实例进行了修改，那么其他同一个引用的实例对象也会发生改变。经过我小段时间的研究，以我目前的了解的来说，方法是没办法完全克隆的，你最多拿到独立属性，原型是共享的，这个没办法克隆，所以有点无解的样子，感觉这个深度克隆也只是表面意义上的克隆。因为不是很懂啊，所以暂时先丢出写的方法吧，等待以后有机会更深入了解再详细说明，主要是我百度到的都是es6标准的一个方法，有些属性我并不了解，不知道他们的实际意义是什么。所以，很无奈啊！function say() { console.log('hi'); } functio...

3241 0 0

js深度克隆

js阻塞和css阻塞

木灵鱼儿 6年前 JavaScript

js阻塞和css阻塞

js阻塞js阻塞其实浏览器的一个很好的机制，浏览器必须在js文件或者代码运行完毕后才会继续其他的工作，比如一个js文件被script元素引用，该元素在head标签中。那么当浏览器加载到head时，会先加载并运行这个js文件，此时，这个script后面的内容都不会做任何处理，只有加载运行完浏览器才会接着加载后面的内容并解析渲染。为什么会这样？原因是因为浏览他并不知道你的js文件做什么，如果他对dom里面的内容做了操作，改变了dom树，那么如果dom树已经完成加载了，js改变后那不是又要重绘一次，那么用户打开网页，页面会先加载完然后闪烁或者发生其他的改变，这对于浏览器来说并不是一个好的方式，...

3421 0 0

js阻塞 css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

木灵鱼儿 6年前 JavaScript

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

JavaScript里面继承是怎样实现的？最简单的就是通过原型链继承，然后衍生出几种方法：构造函数继承、组合继承、原型式继承、寄生继承、寄生组合式继承。function Box() { this.name = "鱼儿", this.age = 666 } Box.prototype.run = function(){ return this.name; } function Pox() { this.run = function() { alert(this.name + this.age); } } Pox.prototype = ne...

4256 0 0

原型构造函数 prototype

加载动画小心得

木灵鱼儿 6年前 JavaScript

加载动画小心得

网页加载动画的原理其实就是当页面加载时他显示的就是加载动画，这个动画浮动于最上层将下面的内容全部遮盖住，而当dom已经加载完毕，触发onload事件，此时再将动画层进行移除处理。那么这样写会导致一个问题，就是你打开任何页面，都会先触发动画层，然后再显示内容，这样就会影响体验，我们之所以加一个动画层，就是为了在用户第一次打开页面的时候，不会卡在空白啊，或者加载资源中而导致页面布局不完整，但是当第一次onload事件完成后，其实浏览器本地已经将大部分的资源进行了缓存，包括css、font文件、img文件，所以，我们只需要第一次加载的时候显示动画层即可。如何判断是第一次加载常用的方法有创建co...

3483 0 0

加载动画

百叶窗动效

木灵鱼儿 6年前 JavaScript

百叶窗动效

因为没啥太大的想法，然后也不是很成功，就先上个预览图吧，以后有机会再来预览图：

3214 0 0

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

木灵鱼儿 6年前 JavaScript

高仿Skeleton Screen 骨架屏 V2

经过多次修正，差不多就是这样了，再加强就比如针对性的做适配，总体来说，要想简单点还是目前自己用的这个简单些。效果图：源码：蓝奏云密码:b077

3445 0 0

骨架屏

高仿Skeleton Screen 骨架屏

木灵鱼儿 6年前 JavaScript

高仿Skeleton Screen 骨架屏

现在给网站做了一个load的加载效果，但是目前流行的应该是Skeleton Screen 骨架屏，这个原本是在苹果端app里制作的，然后有人自己移植到web端，常见h5架构页面，如饿了么、知乎、facebook、酷安，都有应用，那么我就很好奇了，到底是怎么做的，于是百度了一下。了解Skeleton Screen 骨架屏解释有下：简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载,渲染完成之后，在保留页面布局样式的前提...

9552 0 9

预加载 Skeleton Screen 骨架屏

VMware虚拟机安装centos7创建本地web服务

木灵鱼儿 6年前教程

VMware虚拟机安装centos7创建本地web服务

为什么要使用虚拟机创建web服务呢？因为群晖web太垃圾了，原生是无法安装面板的，更别提什么修改阿帕奇的配置文件了，伪静态测试也不要想了，重点是，这次更新软件后，之前建立的博客程序全都挂了，拜托，要不要这么坑。为此我只能选择放弃群晖转用虚拟机！虚拟机我走了多少弯路无脑下一步安装系统完毕后，没有网络，于是各种百度，因为不懂ssh命令啥的，最多会和cd进入路径啥的，于是耗费2小时终于明白怎么回事后，敲他大爷，外网能访问，主机和虚拟机不能ping？？？百度搜索后，看了三页的教程，80%是转载，而且剩下的20%也是牛鬼蛇神，每种都不一样，甚至好几个命令都是错的？？？写完都不管的吗？经历了n种教程...

5780 0 2

VMware虚拟机 centos7 web服务

H-Viewer e绅士新规则

木灵鱼儿 6年前教程

H-Viewer e绅士新规则

采用之前大佬在github上分享的规则，我修复了tga标签和预览图的bug，目前使用海阔以，特此分享！规则：{"categories":[ { "cid":1, "title":"首页", "url":"https://exhentai.org/?page\u003d{page:0}" },{ "cid":2, "title":...

4.2w 0 9

H-Viewer json e绅士新规则

new 操作符具体做了什么

木灵鱼儿 6年前 JavaScript

new 操作符具体做了什么

new操作符一般肯定会说创建一个对象，但是实际上其实可以细分为四个步骤。创建一个空对象链接原型改变this指向将这个对象隐式return出来就已new一个构造函数来举例子：你new出来的这个构造函数他本身有对应的属性，也有prototype，你var me = new 构造函数，那么me自然会拥有构造函数的所有。那么这个如何拥有，就是new操作符所做的事情。 var me = new 构造函数(); //等同于如下 var me = function() { var obj = {}; obj._proto_ = 构造函数.prototype; ...

3360 0 0

new操作符做了什么

调用html5shiv框架解决ie8以下浏览器不支持html元素的问题

木灵鱼儿 6年前 JavaScript

调用html5shiv框架解决ie8以下浏览器不支持html元素的问题

IE浏览器旧版本并不支持html5的语义标签，当我们使用html5架构的时候，旧版本的ie兼容就是一大痛点，好在我们有js，js里面的创建元素，可以创建自定义的元素，也就是说，ie不支持原生的语义标签的问题。目前常用的就是html5shiv框架，这个框架在github上开源，目前我们就只讲如何调用这个脚本。下载脚本官网地址：github下载完解压，我们找到dist目录下，里面提供了四个脚本文件，一般来说只要使用名为html5shiv.js的文件即可，我们将这个文件提取出来，然后丢入自己博客的js文件夹中，如果是主题，就丢入主题对应的js文件。js脚本调用为了防止冲突我们需要针对性的调用...

3667 0 0

旧版ie兼容html5 html5shiv框架条件注释

获取图片颜色平均值 canvas初级使用

木灵鱼儿 6年前 JavaScript

获取图片颜色平均值 canvas初级使用

昨天看到群里一个人的主题，首页的轮播很有意思，然后他的轮播底色是根据文章图片颜色来自动变动的，我当时就觉得蛮有意思的，但是我没怎么接触过canvas这个东西，html5的时候匆匆带过，然后js的时候也没有讲，索性就自己百度看看教程了，找了好久，大部分都是转载的同一篇文章，然后大佬的那个js算法我实在看不懂，搞不懂为什么要for循环的时候i要乘以图片的宽度，然后再乘以4，在加123这些，后面慢慢搞懂了*4和+123这些意思，但是还是不太懂为啥要乘以图片宽度，嘛，这些暂时不管了，先看看我的想法吧！获取颜色平均值理论阶段首先通过canvas获取到图片的每个像素点的rgba值，然后for循环的时...

6835 0 1

canvas 获取图片颜色平均值

css动画之jojo波纹（波纹动效）

木灵鱼儿 6年前 CSS

css动画之jojo波纹（波纹动效）

先看看仿制的原作动画效果我们首先做一个分析，他首先它的本质就是一个圆圈在渐变放大然后缩小的过程，然后通过三个圆圈达到波动的效果，那么我们就可以通过动画annimation来制作。首先可以明确一点就是，他们的动画是一样的，只是触发的时间不同，那么就很简单了，动画提供延时功能，我们只需要控制三个动画的延迟即可。HTML部分：<div class="pos"> <div id="box"> <a href="#" class="img_pox"> ...

4536 0 0

动画波纹效果

Lazy_F 使用文档

木灵鱼儿 6年前 Typecho 主题

Lazy_F 使用文档

站点logo因为更新了登录弹窗，所以站点header的logo要做两个版本的素材，一个是大屏使用的，一个小屏使用的，分别为：images文件夹中的：logo.png == 大屏使用的，分辨率200*50logo_min.png == 小屏使用的，分辨率120*30创建独立页面独立页面就是主题的nav菜单的组成部分，依次有分类、归档、友链、关于四个独立的部分组成。打开博客后台，启用Lazy_F主题后，管理 — 独立页面 — 新增输入分类 — 右侧自定义模板选择categories — 标题下面的链接自定为categories.html — 页面顺序填1 — 分类创建完成。其他的三个页面是也...

5270 0 0

Lazy_F 使用文档

Typecho 邮件回复提醒教程

木灵鱼儿 6年前教程

Typecho 邮件回复提醒教程

插件下载蓝奏云教程QQ邮箱教程SMTP地址：smtp.qq.comSMTP端口：465SMTP用户：你的邮箱地址，如果你开通了域名邮箱，填域名邮箱地址SMTP密码：设置 —— 账户 —— 授权码服务器需要验证和ssl加密勾选其他默认即可，如果要测试的话，勾选自己回复自己的评论时，发邮件通知。(同时针对博主和访客)

1.3w 0 11

邮件回复提醒

极路由4增强版hc5962 刷breed 备份固件 mac地址备份刷潘多拉固件教程

木灵鱼儿 6年前教程

极路由4增强版hc5962 刷breed 备份固件 mac地址备份刷潘多拉固件教程

首先我们需要准备好刷固件需要工具和文件：刷机工具putty ssh工具（x64位的，32位自行百度下载）蓝奏云密码:f4mrWinSCP 蓝奏云密码:g9v7无线路由器查看工具WirelessMon 蓝奏云密码:e580刷机文件：不死breed 蓝奏云密码:157e潘多拉固件（2019-02）蓝奏云密码:ebfu刷机步骤首先我们要获取root的权限，为此我们要先去路由器的插件市场安装开发者模式，具体步骤如下：打开云插件页面——路由器信息——高级设置——开发者模式——申请——提示登录小极账号就登录，然后绑定手机获取验证码，再登录微信关注微信公众号绑定小极账号完成验证——...

1.2w 0 0

潘多拉极路由4增强版 hc5962

极路由4增强版hc5962 刷breed 备份固件 mac地址备份刷潘多拉固件教程

Ajax 表单序列化

木灵鱼儿 6年前 JavaScript

Ajax 表单序列化

什么是表单序列化呢？将所有表单的提交通过一个标准化的方法去获取并且提交出去，那就是序列化，也就是说不同的表单，如注册啊，登录啊，修改资料啊，这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求：不能发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type是reset、submit、file、button以及字段集；多选选择框中的每个选中的值单独一个条目；对于select元素，如果有value值，就指定value作为发送的字段，如果没有，就指定text值；已经将ajax的代码作为单独的一个文件保存，而调用则使用ajax()的方法，之前也做了一个表单提交的方法，在所有条件...

9779 0 2

对象文件 data

JS预加载4

木灵鱼儿 6年前 JavaScript

JS预加载4

图片的预加载已经差不多了，目前我们再稍微修改两处就可以了。首先是添加页脚： 5/12 添加也很简单添加一个em元素，然后通过js动态替换内容即可。html部分：<div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+</spa...

3348 0 0

图片预加载

JS预加载3

木灵鱼儿 6年前 JavaScript

JS预加载3

这次我们来做上一张和下一张按钮，HTML部分直接贴出来，反正就是strong元素只是做个显示展示，不做操作，然后在他的顶部覆盖一层span元素，这个元素做操作层。效果图：html代码：div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...

3160 0 0

预加载上一张下一张

JS 预加载2

木灵鱼儿 6年前 JavaScript

JS 预加载2

单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：div----dl----dt----img//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我...

3406 0 0

预加载上一张下一张图片

高斯gs87-D双模樱桃红轴

木灵鱼儿 6年前教程

高斯gs87-D双模樱桃红轴

闲鱼收了一把高斯的双模87，这款的官方销售价格比ikbc的dc系列便宜一百，这里我就稍微分析一下两者的一些不同。首先上点图增加一下感受键帽分析键盘使用的是双色注塑pbt而且是闭口的字符，工艺上就强过淘宝39元左右的单色pbt，但是很可惜，高斯采用黑色的材质注塑，于是这套pbt很遗憾的不能透光了，但是因为是黑色的材质，一眼看上去非常清晰舒服。并且，原装的键帽菊花向来都很松弛，这样更换键帽，清理都相当方便，所以我本人是非常倾向于原装键帽，哪怕是购买的80多一套的pbt，个人感觉手感上也没有这套原装的好。而和ikbc的dc-87比，ikbc使用的虽然也是pbt，但是字符使用的镭雕工艺，这种工艺...

3990 0 0

樱桃红轴蓝牙机械键盘

Pivision 目前只支持日本节点访问

木灵鱼儿 6年前教程

Pivision 目前只支持日本节点访问

这几天想要去p站下点图片来看看，但是基本我挂了vpn还是无法登录，于是我百般搜寻，终于在手机乐园看到一条回复，说关闭了除日本以外所有节点访问，于是问群友白嫖了一个免费vpn使用，于是正常使用了，如果你还在为无法登录而苦恼，可以试试使用日本节点访问软件。

4381 0 0

Pivision

JS 预加载1

木灵鱼儿 6年前 JavaScript

JS 预加载1

预加载其实和延迟加载差不多，一样是使用一个自定义的html属性保存好正确的大图地址，然后当鼠标点击后将正确的大图地址替换给弹出的显示元素上。html部分：//这是弹窗显示部分 <div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...

3286 0 0

预加载

木灵鱼儿

数据存取

加载和执行

js深度克隆

js阻塞和css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

加载动画小心得

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

高仿Skeleton Screen 骨架屏

VMware虚拟机安装centos7创建本地web服务

H-Viewer e绅士新规则

new 操作符具体做了什么

调用html5shiv框架解决ie8以下浏览器不支持html元素的问题

获取图片颜色平均值 canvas初级使用

css动画之jojo波纹（波纹动效）

Lazy_F 使用文档

Typecho 邮件回复提醒教程

极路由4增强版hc5962 刷breed 备份固件 mac地址备份刷潘多拉固件教程

Ajax 表单序列化

JS预加载4

JS预加载3

JS 预加载2

高斯gs87-D双模樱桃红轴

Pivision 目前只支持日本节点访问

JS 预加载1

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

数据存取

加载和执行

js深度克隆

js阻塞和css阻塞

JavaScript里面继承是怎样实现的？如何避免原型链上的对象被共享？

加载动画小心得

百叶窗动效

高仿Skeleton Screen 骨架屏 V2

高仿Skeleton Screen 骨架屏

VMware虚拟机安装centos7创建本地web服务

H-Viewer e绅士新规则

new 操作符具体做了什么

调用html5shiv框架解决ie8以下浏览器不支持html元素的问题

获取图片颜色平均值 canvas初级使用

css动画之jojo波纹（波纹动效）

Lazy_F 使用文档

Typecho 邮件回复提醒教程

极路由4增强版hc5962 刷breed 备份固件 mac地址备份 刷潘多拉固件教程

Ajax 表单序列化

JS预加载4

JS预加载3

JS 预加载2

高斯gs87-D双模 樱桃红轴

Pivision 目前只支持日本节点访问

JS 预加载1

最近评论

博客文章RSS订阅

博客评论RSS订阅

极路由4增强版hc5962 刷breed 备份固件 mac地址备份刷潘多拉固件教程

高斯gs87-D双模樱桃红轴