Yinode Blog

Wubba lubba dub dub

修复 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

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

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

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

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

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

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

移动端强制横屏方案

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

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

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

一些Web最佳实践的探索

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

ECMAScript6 入门

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

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

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

Javascript 设计模式

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

Javascript 高阶函数

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

JavaScript数据结构 二叉树

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

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> // 但是轮播必然牵

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

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

利用gh-pages展示自己的DEMO

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

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

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

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

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

改写Node.js中的回调为Promise

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

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

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

节流与防抖函数

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