博客园 - Kasmine
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=44701
2017-09-07T01:32:57Z
Kasmine
https://www.cnblogs.com/kasmine/
feed.cnblogs.com
https://www.cnblogs.com/kasmine/p/6535162.html
React的diff算法(译文) - Kasmine
前言 此篇文章主要是因为在看Virtual DOM(虚拟DOM)的时候看到的主要讲的是实现Virtual Dom 的diff算法,原文地址:https://calendar.perfplanet.com/2013/diff/ 译文 React是一个Facebok开发的用于构建用户界面的JavaScr
2017-03-11T07:57:00Z
2017-03-11T07:57:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 此篇文章主要是因为在看Virtual DOM(虚拟DOM)的时候看到的主要讲的是实现Virtual Dom 的diff算法,原文地址:https://calendar.perfplanet.com/2013/diff/ 译文 React是一个Facebok开发的用于构建用户界面的JavaScr <a href="https://www.cnblogs.com/kasmine/p/6535162.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6533318.html
实现一个弹窗的封装 - Kasmine
前言 这是阿里春招实习在线编程的一道题目: 用js实现,弹窗弹出时需要有半透明的蒙层,位置需要根据弹窗的大小实现左右、垂直居中,对话框需要有标题栏(标题栏有关闭功能)、内容栏、操作按钮栏,不能直接使用第三方UI库。 回答完这道题目之后,我想说总结一下自己封装的这个弹窗插件,只是简单的完成了部分功能,
2017-03-10T14:08:00Z
2017-03-10T14:08:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 这是阿里春招实习在线编程的一道题目: 用js实现,弹窗弹出时需要有半透明的蒙层,位置需要根据弹窗的大小实现左右、垂直居中,对话框需要有标题栏(标题栏有关闭功能)、内容栏、操作按钮栏,不能直接使用第三方UI库。 回答完这道题目之后,我想说总结一下自己封装的这个弹窗插件,只是简单的完成了部分功能, <a href="https://www.cnblogs.com/kasmine/p/6533318.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6507022.html
HTML5 相关扩展 - Kasmine
一、与类相关的扩展 class属性的应用极其广泛,与class的相关的操作也越来越简化,HTML5增加了 getElementsByClassName来查找元素,通过也增加了classList属性,方便我们对class进行操作,下面总结了一个ClassUtil : 注意:支持classList属性的
2017-03-05T13:57:00Z
2017-03-05T13:57:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】一、与类相关的扩展 class属性的应用极其广泛,与class的相关的操作也越来越简化,HTML5增加了 getElementsByClassName来查找元素,通过也增加了classList属性,方便我们对class进行操作,下面总结了一个ClassUtil : 注意:支持classList属性的 <a href="https://www.cnblogs.com/kasmine/p/6507022.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6502377.html
实现一个交互式的图片对比控件 - Kasmine
问题缘由 有时候,我们要实现展示两种图片的对比效果,通常是之前和之后的效果比较。在这种情况下,我们想到的可以是使两种图片并排放置,通过比较来观察区别,但是为了对比更加强烈,我们通常会使用的是,将两种图片放置在同一位置,比如 美图秀秀 等等工具,就是通过原图和处理的后的效果图,通过一个按钮,进行比较,
2017-03-04T11:22:00Z
2017-03-04T11:22:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】问题缘由 有时候,我们要实现展示两种图片的对比效果,通常是之前和之后的效果比较。在这种情况下,我们想到的可以是使两种图片并排放置,通过比较来观察区别,但是为了对比更加强烈,我们通常会使用的是,将两种图片放置在同一位置,比如 美图秀秀 等等工具,就是通过原图和处理的后的效果图,通过一个按钮,进行比较, <a href="https://www.cnblogs.com/kasmine/p/6502377.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6501311.html
CSS技巧 (1) · 结构和布局 - Kasmine
前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效。 这一篇主要讲 关于 自适应内部元素 的内容 自适应内部元素 问题缘由:我们都知道元素可以自动适应内容的高度,但是如何实现宽度也如此呢,换句话说
2017-03-04T06:25:00Z
2017-03-04T06:25:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效。 这一篇主要讲 关于 自适应内部元素 的内容 自适应内部元素 问题缘由:我们都知道元素可以自动适应内容的高度,但是如何实现宽度也如此呢,换句话说 <a href="https://www.cnblogs.com/kasmine/p/6501311.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6499287.html
纯 CSS 实现幻灯片播放 - Kasmine
介绍: 今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面。于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 :target ,更多内容可查看 MDN 原理介绍: :target伪类可以指定当前锚点目标元素的样式 一
2017-03-03T18:19:00Z
2017-03-03T18:19:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】介绍: 今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面。于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 :target ,更多内容可查看 MDN 原理介绍: :target伪类可以指定当前锚点目标元素的样式 一 <a href="https://www.cnblogs.com/kasmine/p/6499287.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6498577.html
CSS技巧 (2) · 多列等高布局 - Kasmine
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两列背景色等高。 方法一:使用flex布局 缺点: IE9及IE9以下版本不支持flex属性 优点:实现
2017-03-03T13:54:00Z
2017-03-03T13:54:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两列背景色等高。 方法一:使用flex布局 缺点: IE9及IE9以下版本不支持flex属性 优点:实现 <a href="https://www.cnblogs.com/kasmine/p/6498577.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6498141.html
CSS技巧 (3) - Kasmine
关于CSS技巧的一些题目 题目列表 所有答案点击题目链接 1、 "下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式:" 2、 "类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 从条纹边框的实现谈盒子模型:" 技巧: + 利用linea gradient 渐变 缺点:IE9及以
2017-03-03T12:25:00Z
2017-03-03T12:25:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】关于CSS技巧的一些题目 题目列表 所有答案点击题目链接 1、 "下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式:" 2、 "类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 从条纹边框的实现谈盒子模型:" 技巧: + 利用linea gradient 渐变 缺点:IE9及以 <a href="https://www.cnblogs.com/kasmine/p/6498141.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6440838.html
模拟实现JSON.stringiry 的格式化输出 - Kasmine
如输入: 字符打印结果: 具体实现:
2017-02-24T18:59:00Z
2017-02-24T18:59:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】如输入: 字符打印结果: 具体实现: <a href="https://www.cnblogs.com/kasmine/p/6440838.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6416472.html
JavaScript实现各种排序算法 - Kasmine
前言:本文主要是用JavaScript实现数据结构中的各种排序算法,例如:插入排序、希尔排序、合并排序等。 冒泡排序 时间复杂度: 最差 O(n2) ; 最优 O(n) 插入排序 插入排序的基本原理如下图:从前向后构建有序序列,对于未排序序列,在已排序的序列中从后向前扫描插入位置,对于第p个元素,需
2017-02-24T14:26:00Z
2017-02-24T14:26:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言:本文主要是用JavaScript实现数据结构中的各种排序算法,例如:插入排序、希尔排序、合并排序等。 冒泡排序 时间复杂度: 最差 O(n2) ; 最优 O(n) 插入排序 插入排序的基本原理如下图:从前向后构建有序序列,对于未排序序列,在已排序的序列中从后向前扫描插入位置,对于第p个元素,需 <a href="https://www.cnblogs.com/kasmine/p/6416472.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6440571.html
跨浏览器 跨域资源共享 解决方案 - Kasmine
前言 通过XHR实现ajax通信的一个主要限制是 跨域安全策略。XHR对象只能访问与包含他的页面位于同一个域的资源。当发起一个资源请求的时候,请求头会带有一个 Origin头部,响应头会带有一个Access-Origin-Allow-Origin,如下: 如果这个头部和Origin头部不相符合的时候
2017-02-24T14:24:00Z
2017-02-24T14:24:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 通过XHR实现ajax通信的一个主要限制是 跨域安全策略。XHR对象只能访问与包含他的页面位于同一个域的资源。当发起一个资源请求的时候,请求头会带有一个 Origin头部,响应头会带有一个Access-Origin-Allow-Origin,如下: 如果这个头部和Origin头部不相符合的时候 <a href="https://www.cnblogs.com/kasmine/p/6440571.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6436455.html
前端自动化构建 之 省时的浏览器同步测试工具 - Kasmine
前言 最近用html编写自己的简历,每次修改简历内容或者样式的时候,都要刷新一下浏览器才能看到效果,甚是麻烦。刚好昨天总结了gulp,grunt等前端自动化构建工具,我想着,要不也利用前端自动化构建工具,实现浏览器的实时自动刷新,这样子每次我修改内容和样式的时候,可以及时看到变化。 Browsers
2017-02-24T11:15:00Z
2017-02-24T11:15:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 最近用html编写自己的简历,每次修改简历内容或者样式的时候,都要刷新一下浏览器才能看到效果,甚是麻烦。刚好昨天总结了gulp,grunt等前端自动化构建工具,我想着,要不也利用前端自动化构建工具,实现浏览器的实时自动刷新,这样子每次我修改内容和样式的时候,可以及时看到变化。 Browsers <a href="https://www.cnblogs.com/kasmine/p/6436455.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6436131.html
浅谈前端自动化构建 - Kasmine
前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。 我们首先来
2017-02-23T15:35:00Z
2017-02-23T15:35:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。 我们首先来 <a href="https://www.cnblogs.com/kasmine/p/6436131.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6429030.html
基于hash和pushState的网页前端路由实现 - Kasmine
客户端路由 对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。客户端路由最常见的有以下两种实现方案:* 基于Hash* 基于History API vue-router 默认 hash 模式 —— 使用 URL 的
2017-02-22T07:02:00Z
2017-02-22T07:02:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】客户端路由 对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。客户端路由最常见的有以下两种实现方案:* 基于Hash* 基于History API vue-router 默认 hash 模式 —— 使用 URL 的 <a href="https://www.cnblogs.com/kasmine/p/6429030.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6428970.html
JavaScript 类型 检测 - Kasmine
前言 ECMAScript中有5种数据类型,分别为Number,Boolean,Null,Undifined和String,以及一种复杂的数据类型Object(由名值对组成,是这门语言所有对象的基础类型).后来 ES6又添加了一种新的数据类型 Symbol(只存在于ES6). 复杂的数据类型Obje
2017-02-22T06:53:00Z
2017-02-22T06:53:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 ECMAScript中有5种数据类型,分别为Number,Boolean,Null,Undifined和String,以及一种复杂的数据类型Object(由名值对组成,是这门语言所有对象的基础类型).后来 ES6又添加了一种新的数据类型 Symbol(只存在于ES6). 复杂的数据类型Obje <a href="https://www.cnblogs.com/kasmine/p/6428970.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6415904.html
实现一个3D图片轮播插件 —— 更新版 - Kasmine
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的 jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用。 基于jquery.gallery.js 添加了 自适应图片数量,以及添加了 swipe-indicat
2017-02-21T06:34:00Z
2017-02-21T06:34:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的 jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用。 基于jquery.gallery.js 添加了 自适应图片数量,以及添加了 swipe-indicat <a href="https://www.cnblogs.com/kasmine/p/6415904.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6420135.html
正则表达式 之 回溯引用:前后一致匹配 - Kasmine
前言 正则表达式的用途很多,特别是在查找替换,文本处理,爬虫项目中应用更是很多: 复杂的字符串搜寻、替换工作,无法用简单的方式(类似借助标准库函数)达成。 能够帮助你进行各种字符串验证。 不止应用于编程语言中:JavaScript、JAVA、Perl、PHP、C#... 也应用于许多操作系统的主流指
2017-02-20T08:28:00Z
2017-02-20T08:28:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 正则表达式的用途很多,特别是在查找替换,文本处理,爬虫项目中应用更是很多: 复杂的字符串搜寻、替换工作,无法用简单的方式(类似借助标准库函数)达成。 能够帮助你进行各种字符串验证。 不止应用于编程语言中:JavaScript、JAVA、Perl、PHP、C#... 也应用于许多操作系统的主流指 <a href="https://www.cnblogs.com/kasmine/p/6420135.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6417838.html
使用JavaScript·求数组的最大值和最小值 - Kasmine
前言 在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法。 前言 在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢
2017-02-19T15:31:00Z
2017-02-19T15:31:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法。 前言 在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢 <a href="https://www.cnblogs.com/kasmine/p/6417838.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6412948.html
利用CSS制作图形效果 - Kasmine
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素。任何类型的CSS,只要它至少在一个浏览器中支持。 一. 实现一个心形 效果 原理:这个心形主要是由两部分交叠组成
2017-02-18T05:16:00Z
2017-02-18T05:16:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素。任何类型的CSS,只要它至少在一个浏览器中支持。 一. 实现一个心形 效果 原理:这个心形主要是由两部分交叠组成 <a href="https://www.cnblogs.com/kasmine/p/6412948.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/kasmine/p/6411666.html
CSS技巧(1)· CSS渐变 linear-gradient - Kasmine
前言: 不论在网页设计中,还是传统的媒介中,各种尺寸,颜色,角度的图案在视觉中无处不在,要想在网页中实现复杂的图案,其过程往往不够理想,过去,我们可以创建一个单独的位图文件,然后每次需要做调整的时候,都要用图片编辑器处理它,我们也可以使用SVG代替位图,但是这样子还是存在一个独立的文件,会影响网页加
2017-02-17T16:20:00Z
2017-02-17T16:20:00Z
Kasmine
https://www.cnblogs.com/kasmine/
【摘要】前言: 不论在网页设计中,还是传统的媒介中,各种尺寸,颜色,角度的图案在视觉中无处不在,要想在网页中实现复杂的图案,其过程往往不够理想,过去,我们可以创建一个单独的位图文件,然后每次需要做调整的时候,都要用图片编辑器处理它,我们也可以使用SVG代替位图,但是这样子还是存在一个独立的文件,会影响网页加 <a href="https://www.cnblogs.com/kasmine/p/6411666.html" target="_blank">阅读全文</a>