自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 浅谈webpack模块引用的五种方法

1、commonjs格式的require同步语法 const home = require('./Home'); … // 使用   2、commonjs格式的require.ensure异步语法 require.ensure([], require => {   con...

2017-05-24 19:19:48 1532 0

原创 浅谈React Router动态路由

1、Router组件 1)      history属性 用于监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。 history属性可以设置三种值: A.     browserHistory 浏览器的路由就不再通过Hash完成了,而显示正常的路径,背后调用...

2017-05-23 19:03:01 7187 1

原创 浅谈React Router入门

1、webpack的codesplitting webpack可以通过require.ensure接口实现按需加载。 require.ensure保证了模块的异步调用,当callback回调中调用了一个模块时,可以实现按需加载。 require.ensure([], function() { ...

2017-05-23 18:58:02 1215 0

原创 浅谈React官网学习笔记

1、JSX: JSX代码中出现的标签既不是一个字符串,也不是HTML。 JSX是JavaScript的一种语法扩展。建议在React使用JSX编写代码,以让其更直观。JSX像一种模板语言,但可以使用JavaScript的全部特性。 JSX用于产生React元素。 1)      内嵌JavaScr...

2017-05-23 18:54:52 776 0

原创 浅谈在React中使用Redux数据流(三)

1、react-redux项目结构 1) actions:存放Action,用户的行为 2) components:展示组件 3) containers:容器组件 4) reducers:Store里负责分发用户的行为,根据不同的行为作出不同的响应 5) index.html:母版文件,最终最顶层...

2017-05-20 15:34:58 957 1

原创 浅谈在React中使用Redux数据流(二)

1、react-redux安装 安装命令:npm install react-redux redux 安装两个包: redux自身是一个独立的工作流; react-redux是redux的react绑定,也就是说,利用react来实现了redux。   2、官网 英文:http://redux.j...

2017-05-20 09:49:44 750 0

原创 浅谈在React中使用Redux数据流(一)

Ctrl+G:跳转到第几行 Ctrl+Tab:切换窗口 Command+W:关闭当前打开文件 Command+Q:关闭sublime Command+D:选择相同的单词,重复可选择下一个相同的单词 Command+L:选择行,重复可选择下一行 Command+X:删除当前行 Command+F:查...

2017-05-19 19:08:09 4536 0

原创 浅谈Git工作流

1、常见的问题: 1)      为什么不能使用SVN的工作流来使用Git? 2)      Git的分支?团队多人如何协作?如何解决冲突?如何进行发布? 3)      master(发布)、develop(主开发)、hotfix(修复)如何避免不经过验证代码上线? 4)      如何在Git...

2017-05-19 18:24:10 406 0

原创 浅谈sublime常用快捷键

1、数据流是什么?为什么要用数据流? 1)数据流是行为与响应的抽象。 用户在页面上输入表单、按下按钮、拖拽等行为,页面会根据用户的行为给出一些响应,如刷新、跳转、局部刷新、Ajax局部刷新、数据更新等。以对象、方法来把它们抽象出来,这就是数据流。 2)使用数据流可以帮助我们明确行为以及行为对应的响...

2017-05-17 22:15:04 426 0

原创 浅谈Git常用命令

1、基本命令 1) 克隆代码库 git clone git clone 2) 更新代码库到最新版本 git pull 3) 查看工作区状态 git status 4) 提交代码到本地仓库 git add #提交文件到暂存区 git commit -m "注释说明" 5)...

2017-05-17 16:39:43 337 0

原创 浅谈Git(四)

1、分支管理: 1) 创建、切换、合并、删除分支 ① 查看所有分支,当前分支前会标一个*号:git branch ② 创建分支:git branch ③ 切换分支:git checkout ④ 创建+切换分支:git checkout -b ⑤ 合并某分支到当前分支:git me...

2017-05-17 16:15:04 292 0

原创 浅谈Git(三)

1、版本回退 每当文件修改到一定程度时,可以保存一个快照,在Git中被称为commit。一旦把文件改乱了,或误删了文件,可以从最近的一个commit恢复,然后继续工作,避免工作成果全部丢失。 查看提交历史,以便确定要回退到哪个版本: git log 加上--pretty=oneline参数可以简化...

2017-05-17 11:32:06 273 0

原创 浅谈Git(二)

1、创建版本库 版本库,又名仓库,英文名repository,可以简单地理解成一个目录,该目录里的所有文件都可以被Git管理,每个文件的修改、删除,Git都能跟踪,以便任何时刻都可以追踪历史,或在将来某个时刻可以还原。 创建版本库的方法: ① 创建一个空目录: mkdir myGit ...

2017-05-17 10:43:16 372 0

原创 浅谈Git(一)

1、集中式和分布式版本控制系统 1) 集中式版本控制系统 集中式版本控制系统的版本库是集中存放在中央服务器的,先从中央服务器取得最新版本,完成自己的工作后,再把自己的结果推送给中央服务器。 集中式版本控制系统最大的缺点是必须联网才能工作,在局域网内带宽够大,速度够快,若在互联网上,网速慢时,可能提...

2017-05-17 10:09:08 477 0

原创 vim和Linux命令行常用快捷键

1、Linux命令行快捷键 1) Ctrl+l清屏 2) Ctrl+a回到命令行头部 3) Ctrl+e回到命令行尾部 2、vim常用快捷键 1) dd:删除光标所在行 2) ndd:从当前行开始删除n行 3) dw:从当前光标开始删除一个单词 4) ndw:从当前光标开始删除n个单词 5) ...

2017-05-17 09:30:05 707 0

原创 浅谈慕课网React入门课程笔记(四)

本文介绍如何监听、响应React组件上的相关事件。 绑定事件的传统方法是使用addEventListener。 React的事件绑定预处理的不同在于:React向组件上绑定事件是通过on驼峰式命名的方式来绑定相应的事件的。这与原生JS中通过HTML属性在HTML标签上绑定事件是不一样的,除了写法不...

2017-05-12 22:22:19 454 0

原创 浅谈慕课网React入门课程笔记(三)

本文介绍React Components从创建到消失的生命周期状态和属性在生命周期是如何流转的。   1、React Components在浏览器中存在的生命周期中的三个状态 1) Mounting:一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结...

2017-05-12 21:39:06 553 0

原创 浅谈慕课网React入门课程笔记(二)

React JSX,即JavaScript和XML,是facebook为React框架开发的一套语法糖。 语法糖,又称糖衣语法,是指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用,主要的目的是增加程序的可读性,从而减少程序代码出错的机会。JSX就是JS的一种语法糖...

2017-05-12 20:33:23 601 0

原创 浅谈慕课网React入门课程笔记(一)

React——颠覆式前端UI开发框架 传统方式将来自于服务器或用户输入的交互数据动态反映到复杂界面上时,代码量变得越来越大,越来越难以维护。 基于此,先是谷歌推出自己的前端开发框架Angular,将对DOM的直接操作释放,通过relative来实现复杂的DOM修改。但Angular存在一些问题,如...

2017-05-12 19:22:51 742 0

原创 浅谈Canvas的状态绘图

Canvas是基于状态的绘图。 beginPath核心的作用是:将不同的绘制形态进行隔离,每次执行此方法,表示重新绘制一个路径,与之前绘制的路径可以分开进行样式设置和管理,如颜色、线宽等。 var canvas = document.getElementsByTagName("canva...

2017-05-12 17:32:42 526 0

原创 浅谈为什么border-radius设置成50%~100%都能画圆

CSS绘制一个圆,我们很容易想到把border-radius设置成50%,但是,事实上,把border-radius设置成50%~100%都能画圆。 W3C对于重合曲线有这样的规范:如果两个相邻的角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。 如果border-r...

2017-05-12 17:17:20 2770 0

原创 浅谈为何img、input等内联元素可以设置宽高

1、CSS中元素的分类方式主要有两种: 1) 替换元素和不可替换元素 ① 替换元素 浏览器根据元素的标签和属性,来决定元素的具体显示内容。 eg1:浏览器根据标签的src属性的值来读取图片信息并显示。 eg2:浏览器根据标签的type属性来决定显示输入框的类型。 、、、等都是替换元素。 可替换元素...

2017-05-12 16:42:47 1044 0

原创 浅谈JavaScript元素的尺寸和位置相关属性

1、offsetWidth和offsetHeight 描述元素外尺寸,元素内容+内边距+边框,不包括外边距和滚动条。 2、clientWidth和clientHeight 描述元素内尺寸,元素内容+内边距,不包括边框(IE下实际包括)、外边距、滚动条。 3、scrollWidth和scro...

2017-05-12 16:14:35 446 0

原创 浅谈Vue的生命周期模型

浅谈Vue的生命周期模型 Vue实例从创建到销毁的过程,就是生命周期。 Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些JavaSc...

2017-05-10 21:46:22 5292 2

原创 浅谈MVC、MVP和MVVM架构

1、MVC架构 MVC(Model-View-Controller)是最常见的软件架构之一,应用十分广泛。 1) 软件可以分成三个部分: ① 视图(View):用户界面。 ② 控制器(Controller):业务逻辑。 ③ 模型(Model):数据保存。 2) 三个部分之间的通信方式: ① 用户通...

2017-05-10 20:28:18 841 0

原创 浅谈Vue的单向绑定和双向绑定

1、单向绑定 单向数据绑定的实现思路: ① 所有数据只有一份 ② 一旦数据变化,就去更新页面(只有data-->DOM,没有DOM-->data) ③ 若用户在页面上做了更新,就手动收集(双向绑定是自动收集),合并到原有的数据中。 {{message...

2017-05-10 19:41:31 19225 3

原创 浅谈打开网页速度慢的原因和解决方法

1、原因一:http请求次数太多 解决:减少http请求次数 ① 图片地图:把多张图片整合到一张图片中,以位置定位超链接。 ② CSS Sprites合并图片,通过指定CSS的backgroud-image和backgroud-position来显示元素。 ③ 合并JS脚本和CSS样式表。...

2017-05-09 13:53:47 7437 1

原创 浅谈HTTP的Content-Type

HTTP Header里的Content-Type一般有3种: ① application/x-www-form-urlencoded:标准的编码格式,数据被编码为名称/值对。 ② multipart/form-data: 数据被编码为一条消息,每个控件对应消息中的一个部分。 ③ text/pla...

2017-05-09 11:24:15 573 0

原创 浅谈translate属性与相对定位、绝对定位的区别

水平垂直居中的实现方式有多种,请见:http://blog.csdn.net/zhouziyu2011/article/details/53514416 在支持 CSS3 属性的现代浏览器当中,可以利用CSS3的translate属性实现水平垂直居中。 尤其是当子元素的width和height...

2017-05-08 22:03:56 6596 0

原创 浅谈React的diff算法和key属性

React快速的致胜法宝是虚拟DOM及其高效的diff算法。 可以无需担心性能问题而“随时”刷新整个页面,虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作。虽然在实际开发中,基本无需关心虚拟DOM是如何运作的,但理解其运行机制不仅能帮助更好地理解React组件的生命周期,还会对进一步...

2017-05-08 16:52:21 5126 0

原创 浅谈ES6的let和const的异同点

1、let和const的相同点: ① 只在声明所在的块级作用域内有效。 ② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。 ③ 不可重复声明。 2、let和const的不同点: ① let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,...

2017-05-07 19:41:27 6504 0

原创 浅谈前端性能优化(九)——DNS解析优化

1、DNS缓存 DNS查询过程大约消耗20毫秒,在DNS查询过程中,浏览器什么都不会做,保持空白。如果DNS查询很多,网页性能会受到很大影响,因此需要用到DNS缓存。  不同浏览器的缓存机制不同: IE对DNS记录默认的缓存时间为30分钟,Firefox对DNS记录默认的缓存时间为1分钟,Ch...

2017-05-07 18:39:00 3512 0

原创 浅谈前端性能优化(八)——cookie优化

cookie存储在客户端,伴随着HTTP请求在浏览器和服务器之间传递。除了key-value外,cookie还有max-age,path,domain和httponly属性。 httponly属性标识一个客户端JavaScript能否操作该cookie; max-age属性表示缓存时间,单位为...

2017-05-07 18:08:47 1432 0

原创 浅谈前端性能优化(七)——图像优化

1、常用的图像类型 1) gif: 适用于动画效果。 2) jpg: 使用有损压缩,将图片的每个像素分解成8*8的栅格,然后对每个栅格的数据进行压缩处理,通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别,从0到100,数字越小,图片质量越差。 3) png:使用无损压缩,将图片出现的...

2017-05-07 17:29:57 723 0

原创 浅谈前端性能优化(六)——CDN内容分发网络

有关CDN的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/60962103   1、CDN CDN是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容,在优化性能时,会根据距离的远近来选择。 CDN将网站的...

2017-05-07 16:37:14 2357 0

原创 浅谈前端性能优化(五)——减少HTTP请求数

1、图片地图 图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置。 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数。 2) 使用条件: 只有在图片的所有组成部分在页面中是紧挨在一起时才能使用,如导航栏。 3) 缺点: 确定图片...

2017-05-07 16:00:18 4767 0

原创 浅谈前端性能优化(四)——将script放在底部

CSS文件放置在head中和放在body底部,对CSS本身的下载时间不会有影响,但对页面的呈现有非常大的影响,与用户体验密切相关。   script的两个属性——async和defer: ① 没有defer或async,浏览器会立即加载并执行指定的JS脚本,不等待后续文档元素,读到JS脚本就加载并...

2017-05-07 15:19:03 1448 0

原创 浅谈前端性能优化(三)——将CSS文件放在顶部

CSS文件放置在head中和放在body底部,对CSS本身的下载时间不会有影响,但对页面的呈现有非常大的影响,与用户体验密切相关。   CSS文件放在顶部的原理: 浏览器为了避免样式变化导致页面重绘or重排,会阻塞内容呈现,等待所有CSS文件下载完后才一次性渲染页面。因此,若CSS文件放在底部,由...

2017-05-07 14:54:35 919 0

原创 浅谈前端性能优化(二)——对HTTP传输进行压缩

1、前端性能优化的一点: 对js、css、图片等进行压缩,尽可能减小文件的大小,减少文件下载的时间,从而减少网页响应的时间。   2、前端性能优化的另一点: 对HTTP传输进行压缩,即在js,css、图片等资源已经压缩的基础上(其实,文件的压缩与否均可,文件的压缩跟HTTP传输过程的压缩没关系),...

2017-05-07 14:27:14 2824 1

原创 浅谈前端性能优化(一)——Expires和Cache-Control

前端性能优化中,减少HTTP请求可以提高页面的响应速度。 浏览器在第一次访问页面时向服务器请求资源,并缓存起来,下次再访问时会判断在缓存中是否已有该资源且有没有更新过,如果已有该资源且未更新过,则直接从浏览器缓存中读取。原理:通过HTTP 请求头中的 If-Modified-Since(If-No...

2017-05-07 11:57:05 12196 0

提示
确定要删除当前文章?
取消 删除