Yinode Blog

断裂，就一直断裂

修复 iOS Web Input 输入框失去焦点无法还原页面滚动位置

推荐注册到 Vue 全局 Mixin 里并在 updated 生命周期中重新运行 const fixInputPaddingMixin = { mounted() { this._fixInput(); }, updated() { this._fixInput(); }, methods: { _fixInput() { let inputs = document.querySelectorAll('input'); if (inputs.length >= 1) { for (let item of inputs) { item.addEventListener( 'focus', () => { item.scrollTop = document.body.scrollTop; }, false, ); item.addEventListener( 'blur', () => { document.body.scrollTop

Posted by Yinode Thursday, June 13, 2019

前端实现真正的遮罩穿透效果

后续更新: 事实上大家如果有这个需求可以先去看看 css 里的 clip-path，是个更好的选择！最近在工作中要去做一个类似于一些软件游戏里面的引导的

Posted by Yinode Sunday, April 14, 2019

虚拟滚动的实现(适合大量的列表数据)

假设我们拥有10w条数据，需要在Web上进行展现，但是如果我们进行实际的渲染就会发现，整个初次渲染的成本的非常之高，用户的体验是非常差的。所

Posted by Yinode Monday, April 8, 2019

从JS的阻塞角度谈谈浏览器渲染原理

前言这样，在解析包含的javascript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打

Posted by Yinode Wednesday, January 30, 2019

移动端强制横屏方案

最近工作中要开发一个横屏应用，无论用户是否开启手机旋转功能，进行强制横屏。这里面也收获了一些经验，在这里和大家分享一下。首先说明我的方案只

Posted by Yinode Friday, January 25, 2019

DOM中的各种XY定位属性以及元素宽高属性

我们都用过不少JS中的定位属性，比如scrollTop,clientX等等，但是其实单纯从命名上，我们是很难区分各种属性的含义的，我平时也经

Posted by Yinode Monday, January 21, 2019

一些Web最佳实践的探索

最近用 Django 整了一个匿名的论坛，包含主题回复点赞，板块，用户等系统，麻雀虽小，但是基本功能还是全的的。但是不对接多可惜啊。正好这半年多的前端开发

Posted by Yinode Tuesday, December 18, 2018

ECMAScript6 入门

最近尝试了解一些函数式编程(Function program)的东西，但是很多的语法都用到了ES6，所以先开始学习一下ES6吧。特别是prom

Posted by Yinode Friday, November 24, 2017

gulp+webpack+babel+css压缩模块实现自动构建工具

第一步环境搭建流程以下均按照流程创建工程目录 C:. ├─.idea ├─app //开发目录 │ ├─.idea │ ├─css │ ├─doc │ ├─img │ ├─

Posted by Yinode Friday, November 24, 2017

Javascript 设计模式

模式可以认为是前人对于编程问题的解决方案，而所有的设计模式的主题都是分离多变的部分和恒定的部分。单例模式单例模式值得就是只有一个实例的模式。

Posted by Yinode Friday, November 24, 2017

Javascript 高阶函数

最近在看一些关于设计模式的书。对高阶函数的应用方面做一些记录 AOP AOP意为面向切面编程，主要思想就是把那些跟业务逻辑无关的部分抽离出来，比如日

Posted by Yinode Friday, November 24, 2017

JavaScript数据结构二叉树

JavaScript 二叉树最近在学习一些数据结构方面的知识，稍作记录。二叉树的创建首先二叉树是一种树形的结构，那么他的特点就是每个构建树的节点最多只有两个子节

Posted by Yinode Friday, November 24, 2017

Vue.js slot 初探

假设你拥有父组件A,子轮播图组件B，你想在用A中使用B，假设你使用slot对其进行模板的传递 <div class="slider-wrapper"> <slider> <div v-for="item of slider"> <a href=""><img :src="item.pic" alt=""></a> </div> // slot </slider> </div> // 但是轮播必然牵

Posted by Yinode Friday, November 24, 2017

利用 require.js 实现组件化开发

最近使用require尝试开发了一个弹窗组件，所以把一些组件化的思想和过程记录下来。使用的库 jQuery require jQueryUI 实现的功能三种流行的弹窗带有宽高位置设置可

Posted by Yinode Friday, November 24, 2017

利用gh-pages展示自己的DEMO

之前一直都是用的git-demo-preview来展示预览自己做的DEMO和工程，但是有很多不足会加载很多无关的JS 访问速度不够理想所以最近

Posted by Yinode Friday, November 24, 2017

利用require组件化开发侧边栏和轮播图

最近学习require趁热打铁写了两个非常常见的组件，一个是侧边栏的插件，一个是轮播图或者叫他选项卡。不得不说组件化开发非常的清晰，便于管理

Posted by Yinode Friday, November 24, 2017

对DOM样式操作浏览器前缀做抽象包装

我们在做一些DOM操作的时候，常常利用到修改样式来进行一个动画，但是这种用到的样式属性往往是有前缀的。而在CSS中其实是有自动prefix的

Posted by Yinode Friday, November 24, 2017

改写Node.js中的回调为Promise

传统的回调首先让我们看一下在NODE中传统的异步读取文件 let fs = require("fs") fs.readFile("./justtest.html","utf-8",(err,data)=>{ console.log(data); }) //普通的回调方式处理异步我们可以看到，读取文件之后的回调被添加到了参

Posted by Yinode Friday, November 24, 2017

组件化开发WebAPP(gulp+webpack+bebal+es6)

介绍实现了那些功能构建工具最近glup玩的比较多，所以自己实现了一个自动构建的环境他的主要目的是从app目录的那些开发文件部署到server

Posted by Yinode Friday, November 24, 2017

节流与防抖函数

记录一下最近接触到的算法节流与防抖这两个函数都用于限制函数的执行。 debounce 函数防抖就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后

Posted by Yinode Friday, November 24, 2017