sunshine940326-CSDN博客

原创【JS】类型检测

前言js 中的类型检测也是很重要的一部分，所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检测。其实这也是在读 Zepto 源码中学习到的，所以阅读源码对我们的提升还是很有帮助的。本文基于参考了前辈们的文章之后个人理解此文写的有不当的地方，请各位大佬指正。其实常规方法主要有四种 1. typeof 2. instanceof 3. Object.prototype

2017-09-12 14:26:35 670

传统盒模型布局方式我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。这个大家都比较熟悉，没有掌握的同学再去恶补一下基础文档流布局这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了浮动布局浮动方式布局就是使用 float 属性

2017-08-17 19:26:43 714

原创 CSS布局方式

传统盒模型布局方式我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。这个大家都比较熟悉，没有掌握的同学再去恶补一下基础文档流布局这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了浮动布局浮动方式布局就是使用 float 属性

2017-08-15 19:47:01 730

原创一个少女心满满的例子带你入门canvas

本文首发于我的个人博客：http://cherryblog.site/ github项目地址：https://github.com/sunshine940326/canvasStar 项目演示地址：https://sunshine940326.github.io/canvasStar/canvas 基本知识什么是 canvasgetContextcanvas 元素绘制图像co

2017-08-02 11:07:40 5959 3

原创 js:面向对象编程，带你认识封装、继承和多态

本文首发于我的个人网站：http://cherryblog.site周末的时候深入的了解了下javascript的面向对象编程思想，收获颇丰，感觉对面向对象编程有了那么一丢丢的了解了~很开森什么是面向对象编程先上一张图，可以对面向对象有一个大致的了解，然而什么是面向对象呢，用java中的一句经典语句来说就是：万事万物皆对象。面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完

2017-06-05 22:59:25 17732

原创前端开发规范：命名规范、html规范、css规范、js规范

本文首发于我的个人网站：http://cherryblog.site/ （背景更换了不知道大家有没有发现呢，嘻嘻）一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是

2017-05-30 15:13:41 12566 2

原创 html5canvas:教你实现知乎登录动态粒子背景

本文首发于我的个人博客：http://cherryblog.site/ github项目地址：https://github.com/sunshine940326/canvas-nest 首先上效果图：实现起来也是很简单的，按照我的步骤一步一步来就可以了~html代码首先要制作我们的页面，用到的是html5的新标签canvas；其实canvas就是我们需要用java

2017-05-25 22:36:46 11047 7

原创 html5拖放--15行js代码实现两个div内容互换

在写我们后台的管理程序中需要有一个拖放的功能，然后我们

2017-05-23 23:27:42 5152 2

原创 css：默认的checkbox、input、radio太丑了？手把手教你改变使用纯css3改写的带动画的默认样式

项目的github地址为： https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样

2017-05-10 23:01:09 16870 1

原创 hexo高阶教程：想让你的博客被更多的人在搜索引擎中搜到吗？

本文首发在我的个人博客：http://cherryblog.site/,欢迎大家前去参观，顺便求fork，么么哒~上一次在掘金上发表的hexo高阶教程：hexo高阶教程next主题优化之加入网易云音乐、网易云跟帖、动态背景、自定义主题、统计功能，收到了不少朋友的喜欢，手动比心♪(＾∀＾●)ﾉ，也有不少朋友私信我给我提改进的意见，本着生命就是要折腾的原则，我又做了如下的优化： seo优化多终端

2017-04-28 18:53:01 24152 26

原创 hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景

有强迫症的我要支持网易云跟帖，所以必须要更新一个NEXT主题，原来的主题版本有点旧，没有集成网易云跟帖，所以又来重新折腾了折腾~绑定域名绑定域名的思路如下：在万网购买自己喜欢的域名（.com的会贵一点，.site和.xyz的相对便宜一些，有的只需要几块钱一年就可以）解析DNS在hexo中添加CNAME文件购买域名之前没有买域名的时候我想使用网易云跟帖，发现在注册网易云跟帖的时候使用原来的域名

2017-04-09 21:02:51 22266 12

原创 react（二）：用实例认识react

昨天在认识了什么是react之后，今天开始用代码来写一些demo，跟着慕课网的视频一起写demo发现运行不出来，找其原因是视频太老了，react已经更新换代了，摔！！然后跟着阮一峰老师一起写12个demo，阮一峰老师的教程：React 入门实例教程，希望大家可以看一下老师写的demo github地址，求fork，求star，(～￣▽￣)～ HTML模板这是一个最简单的react模板<!DO

2017-03-05 14:46:56 2192

原创 react（一）：初识react

这里是看慕课网初学react做的一些总结[课程]React入门，什么是react这里只是读书笔记，因为刚开始接触react，也不能概括出什么是react，这里挖一个坑，以后再填。在这一个小时内对react的认识中，我有了对react的初步印象js库facebook开发的高度的组件化使用jsx将html和js结合单项传输数据虚拟dom只负责view层react并不是一个完整的mvc或

2017-03-01 19:27:46 558

原创了解githubPages+hexo搭建博客的原理

之前用githubPages+hexo搭建了一个自己的博客：sunshine940326.github.io(就是你现在看到的博客)，当时还不知道怎么使用git和github，所以只是跟着网上的教程在一步一步操作，现在了解了git知道怎么使用之后才慢慢明白其中的原理。什么是github pages什么是github pages github是项目托管网站，列出了项目的源文件，所以github

2017-02-26 14:36:05 3876 3

原创用webstorm连接github

昨天重新捣鼓了下github，给自己立一个flag，每天都要写总结，记录这一天学习的内容说起来很惭愧，之前用webstorm都是把其当成编辑器使用，不知道可以导入工程的概念= =，表打我，因为我们公司好多项目都是在playcanvas下开展的，不能直接打开index.html浏览项目，每次都需要开启终端，开启python，然后我们同事说你用webstorm可以直接打开，然后我试了下，不行，就没有再继

2017-02-24 19:03:53 6051

原创 git日常问题

在2016年的时候，我建立了自己的github，当时只是跟风，觉得大家都在使用github，自己也要有一个，其次就是想有一个自己的博客，闺蜜之前自己搭载了一个gitpage+hexo的博客，容易上手，就想学一下，没想到过程坎坷= =。到现在也不是很怎么会使用github，但是已经稍有了解了什么是git：之前我使用过svn进行和队友合作开发项目，觉得svn是一个很好的工具，可以避免代码冲突，解决团队代

2017-02-23 22:21:42 436

原创 jquery页内锚点平滑跳转实现代码

html中设置锚点定位的几种常见方法在html中设置锚点定位我知道的有几种方法，使用id定位、使用name定位、使用js定位，这些方法大家可以参考下1、使用id定位： <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>111111

2017-02-16 18:19:34 3838

转载 PC端自适应布局

截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：天猫内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定

2017-02-15 14:03:33 52195

原创初学者如何写移动端响应式布局

一、百分比布局刚入前端坑的时候就是使用百分比布局，觉得百分比布局可以解决移动端的响应式布局问题，但是图样图森破，最常见的情况莫过于设计师说：“你没有按照我的设计稿来做呀”然后就是设计师在我旁边，我们一起开始调整位置….之后我学会了，基本上都是按照设计稿的位置来的（将设计稿缩放成chrom响应式中那么大，然后两个重叠开始比对位置= =），然后设计师再也没有说过位置不对了…但是身为一个程序员，这样做好丢

2017-01-06 16:38:31 13296

原创 sass预处理初入门

关于中文编译出错的问题，需要指定字符集。@charset "utf-8";//必须设置了这个才能编译有中文的注释$fontSize: 12px;body{ font-size:$fontSize;}/* 测试注释 */　$side : left;　　.rounded {　　　　border-#{$side}-radius: 5px;　　}注释的问题，sass有两种注释方

2017-01-05 19:26:42 545

原创图片预加载三大方法

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。方法一：用CSS和JavaScript实现预加载实现预加载图片有很多方法，包括使用CSS、J

2016-12-09 11:14:06 13095

转载让新手能快速掌握的移动端自适应布局

移动端布局，相信很多人都有自己的一套兼容的方式。这里我也聊聊自己的经验。一、百分比布局我最开始的是用百分比布局的，这样的做法的话是比较费时间的，有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间，而且对于设计稿的还原也不好。所以这里>也不怎么推荐。二、固定的设备宽度在做移动开发的时候很多人都会加上viewport的配置，那么固定设备宽度的布局就是根据这个来设置的，将viewport里

2016-11-28 19:18:02 807

转载宽高的整理

1.window和document的区别? document对象是窗口(window)对象的一部分 2.window.location和document.location之间的区别? window对象的location属性引用的时location对象，表示该窗口中当前显示文档的URL。 document的对象的location属性也是引用了location对象。 window.locati

2016-11-28 17:53:46 250

转载前端优化

加载优化加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点· 减少HTTP请求因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个 a) 合并CSS、JavaScript b) 合并小图片，使用雪碧图· 缓存使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都

2016-11-28 15:52:48 245

原创 jQuery animate(）的坑

jQuery有一个动画队列，用以维护对于此节点的动画操作，你的代码的意思是：每次focus的时候，都给节点元素绑定一个blur事件处理函数，而之前的方法并没有消失掉，还在队列里，所以多次focus之后，队列里的事件处理函数就有很多了，因为执行的函数多了，所以你的代码运行速度就慢了。在jQuery中，通过animate()可以实现元素的动画显示，但在显示的过程中，必须要考虑各种客观因素和限制性条件

2016-10-20 13:59:31 990

转载 css伪元素（二）

首先要明白一种思想：结构和样式分离。结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用—— :before 和 :after中的content: “”; ——就算没有——:before 和 :after中的content: “”;- —–HTML文档也不会受到影响，HTML文档

2016-09-22 10:58:52 321

转载理解伪元素 :Before 和 :After

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。　　你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章　　事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-letter

2016-09-22 10:25:57 320

原创使用gitpage和hexo开发你自己的博客更新

进入程序员这个坑之后就开始自己在网上扒资料，然而资料太多，情况太复杂，主要是看见别人的博客，感觉好高大上，并且感觉在茫茫的互联网有自己的小天地感觉也是极好的。不是为了给别人看，而是为了记录自己的成长，记录自己的每一个脚印。Gitpage+hexo想要实现拥有一个独立的私有博客，我们需要两个东西，一个是可供浏览器访问的静态网页存储空间，这个我们选择gitPage，一个是一个静态网页生成工具，Octo

2016-09-22 10:16:01 2427 1

转载 svg的用法

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图，但SVG有很多的用法你可能还不知道。观看演示SVG有什么优势？文件体积小，能够被大量的压缩图片可无限放大而不失真(矢量图的基本特征

2016-09-21 18:40:29 3601

原创 section和div的区别

在做移动web的时候，参考的案例用的是section而不是div，就好奇，section是什么鬼？section是属于听说过但是一直都没有用过的一个元素，所以百度查了一下section和div的区别，收获如下：作者：贺师俊链接：http://www.zhihu.com/question/20227599/answer/14582155 来源：知乎著作权归作者所有，转载请联

2016-09-21 11:30:16 66877 1

原创使用rem来开发你的移动端网站

what is rem ？css3中的计量元素大小的单位，类似px、pt、em。一种相对根元素font-size的计算方式。1rem = ’s font-size px (你懂就好)使用场景：每个元素的宽高、文字大小、行距、补白等一切可以使用长度单位的地方。使用范例: html{font-size:37.5px;}/*根元素的基础font-size被设置为37.5px，则1rem=37.

2016-09-21 10:02:13 1547

转载浅谈CSS在前端优化中一些值得注意的关键点

当谈到Web的“高性能”时，很多人想到的是页面加载时间，但其实性能不仅仅是指加载时间，还包括浏览器性能、网络性能、开发效率。在Web前端开发中，性能是一个非常重要的需要考虑的点。本文将介绍一些开发原则和性能准则，这些都是提高Web前端性能的基础。1. 开发原则1.1 编写符合当代浏览器性能的代码如果想提高前端性能，就必须理解浏览器的工作原理，哪怕是个大概，这样才能知道性能瓶颈在哪里以及如何优化。

2016-09-20 11:49:38 895

原创利用Gitpage+hexo开发自己的博客

进入程序员这个坑之后就开始自己在网上扒资料，然而资料太多，情况太复杂，主要是看见别人的博客，感觉好高大上，并且感觉在茫茫的互联网有自己的小天地感觉也是极好的。不是为了给别人看，而是为了记录自己的成长，记录自己的每一个脚印。Gitpage+hexo想要实现拥有一个独立的私有博客，我们需要两个东西，一个是可供浏览器访问的静态网页存储空间，这个我们选择gitPage，一个是一个静态网页生成工具，Octo

2016-09-16 01:25:25 6087

转载欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2016-09-05 16:45:11 349

转载使用Github Page和Hexo快速构建个人博客，以及插件安装及主题优化总结

前言自从学习使用github后，了解到可以使用github page搭建个人博客，就一直梦想着自己有一天能够也能够搭建拥有自己的博客，记得高中时候还经常看一些美文之类的书，喜欢一些唯美的语句，甚至还曾经梦想着能做个作家，好吧，扯远了，经过这两天的摸索，终于成功构建了自己的博客！下面介绍一下搭建过程。第一次发文，有错误之处还希望大神们批评指正。搭建前提：既然你能找到这篇博文相信你至少对github有一

2016-09-05 11:14:43 915

原创怎么用chrom调试javascript

1 将写好的Javascript代码用chrome打开。 2 在页面，单击右键，并且选择“审查元素”。 3 弹出窗体，如图所示：然后，点击“Resources”标签，如图所示：然后点击“enable resource tracking”,导入源文件，并且选择“Script”标签，如下：添加断点的方法就是在所在的代码行的数字上双击即可！！debug控制方式：1 首先是刷新调试的网页，即

2016-09-03 17:19:31 429

原创 css样式的优先级

一般情况下：[1位重要标志位] > [4位特殊性标志] > 声明先后顺序!important > [ id > class > tag ] 使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。先来看下!important 这个诡异的东西。<style type="text/css"

2016-08-18 17:01:08 317

原创 js中this的指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(this); //Window}a();按照我们上面说的this最终指向的是调用

2016-08-17 17:00:26 428 1

空空如也

空空如也