筱葭-CSDN博客

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

1、commonjs格式的require同步语法const home = require('./Home');… // 使用 2、commonjs格式的require.ensure异步语法require.ensure([], require => { consthome = require('./Home'); … //使用});Home.js会被打包成一个

2017-05-24 19:19:48 2891

原创浅谈React Router动态路由

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

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

原创浅谈React Router入门

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

2017-05-23 18:58:02 1642

原创浅谈React官网学习笔记

1、JSX：JSX代码中出现的标签既不是一个字符串，也不是HTML。JSX是JavaScript的一种语法扩展。建议在React使用JSX编写代码，以让其更直观。JSX像一种模板语言，但可以使用JavaScript的全部特性。JSX用于产生React元素。1) 内嵌JavaScript表达式：在JSX中可以内嵌任何有效的 JavaScript表达式，只需要将该表达式

2017-05-23 18:54:52 1009

原创浅谈在React中使用Redux数据流（三）

1、react-redux项目结构1) actions：存放Action，用户的行为2) components：展示组件3) containers：容器组件4) reducers：Store里负责分发用户的行为，根据不同的行为作出不同的响应5) index.html：母版文件，最终最顶层的组件需要渲染到一个DOM节点上，这需要一个HTML模板来实现，这个模板放在index.ht

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

原创浅谈在React中使用Redux数据流（二）

1、react-redux安装安装命令：npm install react-redux redux安装两个包：redux自身是一个独立的工作流；react-redux是redux的react绑定，也就是说，利用react来实现了redux。 2、官网英文：http://redux.js.org/中文：http://cn.redux.js.org/ 3、rea

2017-05-20 09:49:44 908

原创浅谈在React中使用Redux数据流（一）

Ctrl+G：跳转到第几行Ctrl+Tab：切换窗口Command+W：关闭当前打开文件Command+Q：关闭sublimeCommand+D：选择相同的单词，重复可选择下一个相同的单词Command+L：选择行，重复可选择下一行Command+X：删除当前行Command+F：查找Command+Shirt+F：查找并替换Command+R：查找函数名C

2017-05-19 19:08:09 5678

原创浅谈Git工作流

1、常见的问题：1) 为什么不能使用SVN的工作流来使用Git?2) Git的分支？团队多人如何协作？如何解决冲突？如何进行发布？3) master（发布）、develop（主开发）、hotfix（修复）如何避免不经过验证代码上线？4) 如何在Github上与他人协作？star-fork-pull request的流程是怎样的？ 2、

2017-05-19 18:24:10 576

原创浅谈sublime常用快捷键

1、数据流是什么？为什么要用数据流？1）数据流是行为与响应的抽象。用户在页面上输入表单、按下按钮、拖拽等行为，页面会根据用户的行为给出一些响应，如刷新、跳转、局部刷新、Ajax局部刷新、数据更新等。以对象、方法来把它们抽象出来，这就是数据流。2）使用数据流可以帮助我们明确行为以及行为对应的响应。这与React的目标——状态图预测是密不可分的。 2、React与数据流的关系

2017-05-17 22:15:04 592

原创浅谈Git常用命令

1、基本命令1) 克隆代码库git clone git clone 2) 更新代码库到最新版本git pull3) 查看工作区状态git status4) 提交代码到本地仓库git add #提交文件到暂存区git commit -m "注释说明"5) 推送到远程仓库git push #开始推送git push origin master #

2017-05-17 16:39:43 467

原创浅谈Git（四）

1、分支管理：1) 创建、切换、合并、删除分支①　查看所有分支，当前分支前会标一个*号：git branch②　创建分支：git branch ③　切换分支：git checkout ④　创建+切换分支：git checkout -b ⑤　合并某分支到当前分支：git merge ⑥　删除分支：git branch -d eg：①　创建dev分支，然后切换到de

2017-05-17 16:15:04 416

原创浅谈Git（三）

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

2017-05-17 11:32:06 395

原创浅谈Git（二）

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

2017-05-17 10:43:16 502

原创浅谈Git（一）

1、集中式和分布式版本控制系统1) 集中式版本控制系统集中式版本控制系统的版本库是集中存放在中央服务器的，先从中央服务器取得最新版本，完成自己的工作后，再把自己的结果推送给中央服务器。集中式版本控制系统最大的缺点是必须联网才能工作，在局域网内带宽够大，速度够快，若在互联网上，网速慢时，可能提交一个大文件需要较长时间。此外，若中央服务器出了问题，所有人都没法工作。CVS及SVN都是集

2017-05-17 10:09:08 706

原创 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) x：删除当前字符6) X：删除前一个字符7) d$：删除到行末8)

2017-05-17 09:30:05 956

原创浅谈慕课网React入门课程笔记（四）

本文介绍如何监听、响应React组件上的相关事件。绑定事件的传统方法是使用addEventListener。React的事件绑定预处理的不同在于：React向组件上绑定事件是通过on驼峰式命名的方式来绑定相应的事件的。这与原生JS中通过HTML属性在HTML标签上绑定事件是不一样的，除了写法不一样外，还有一个区别是，这里并不是真实的DOM节点，只是一个React Element。事件的

2017-05-12 22:22:19 588

原创浅谈慕课网React入门课程笔记（三）

本文介绍React Components从创建到消失的生命周期状态和属性在生命周期是如何流转的。 1、React Components在浏览器中存在的生命周期中的三个状态1) Mounting：一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。当能在浏览器上看到从无到有的时候，mounting已经结束了。mounting结束

2017-05-12 21:39:06 763

原创浅谈慕课网React入门课程笔记（二）

React JSX，即JavaScript和XML，是facebook为React框架开发的一套语法糖。语法糖，又称糖衣语法，是指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用，主要的目的是增加程序的可读性，从而减少程序代码出错的机会。JSX就是JS的一种语法糖，类似的还有CoffeeScript以及微软的TypeScript，最终它们都被解释为JS才能被浏览

2017-05-12 20:33:23 766

原创浅谈慕课网React入门课程笔记（一）

React——颠覆式前端UI开发框架传统方式将来自于服务器或用户输入的交互数据动态反映到复杂界面上时，代码量变得越来越大，越来越难以维护。基于此，先是谷歌推出自己的前端开发框架Angular，将对DOM的直接操作释放，通过relative来实现复杂的DOM修改。但Angular存在一些问题，如：其整体作为一个MVVM框架显得过重，不适用于对性能要求比较高的站点，如移动端的Web站点；其UI

2017-05-12 19:22:51 961

原创浅谈Canvas的状态绘图

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

2017-05-12 17:32:42 839

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

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

2017-05-12 17:17:20 4591

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

1、CSS中元素的分类方式主要有两种：1) 替换元素和不可替换元素①　替换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。eg1：浏览器根据标签的src属性的值来读取图片信息并显示。eg2：浏览器根据标签的type属性来决定显示输入框的类型。、、、等都是替换元素。可替换元素往往没有实际的内容，即是一个空元素。②　不可替换元素大多数元素是不可替换元素，其

2017-05-12 16:42:47 1503

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

1、offsetWidth和offsetHeight描述元素外尺寸，元素内容+内边距+边框，不包括外边距和滚动条。2、clientWidth和clientHeight描述元素内尺寸，元素内容+内边距，不包括边框（IE下实际包括）、外边距、滚动条。3、scrollWidth和scrollHeight元素内容+内边距+溢出尺寸，当内容没有溢出时，scrollWidth和scroll

2017-05-12 16:14:35 576

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

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

2017-05-10 21:46:22 6064 3

原创浅谈MVC、MVP和MVVM架构

1、MVC架构MVC（Model-View-Controller）是最常见的软件架构之一，应用十分广泛。1) 软件可以分成三个部分：①　视图（View）：用户界面。②　控制器（Controller）：业务逻辑。③　模型（Model）：数据保存。2) 三个部分之间的通信方式：①　用户通过View 传送指令到 Controller或用户直接传送指令到 Controller。

2017-05-10 20:28:18 1119

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

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

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

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

1、原因一：http请求次数太多解决：减少http请求次数①　图片地图：把多张图片整合到一张图片中，以位置定位超链接。②　CSS Sprites合并图片，通过指定CSS的backgroud-image和backgroud-position来显示元素。③　合并JS脚本和CSS样式表。④　使用外部JS和CSS文件。 2、原因二：接收数据时间过长，如下载资源过大解决：对H

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

原创浅谈HTTP的Content-Type

HTTP Header里的Content-Type一般有3种：①　application/x-www-form-urlencoded：标准的编码格式，数据被编码为名称/值对。②　multipart/form-data：数据被编码为一条消息，每个控件对应消息中的一个部分。③　text/plain：数据以纯文本形式(text/json/xml/html)进行编码，不含任何控件或格式字符

2017-05-09 11:24:15 738

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

水平垂直居中的实现方式有多种，请见：http://blog.csdn.net/zhouziyu2011/article/details/53514416在支持 CSS3 属性的现代浏览器当中，可以利用CSS3的translate属性实现水平垂直居中。尤其是当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-heig

2017-05-08 22:03:56 11270

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

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

2017-05-08 16:52:21 5841

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

1、let和const的相同点：①　只在声明所在的块级作用域内有效。②　不提升，同时存在暂时性死区，只能在声明的位置后面使用。③　不可重复声明。2、let和const的不同点：①　let声明的变量可以改变，值和类型都可以改变；const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。const i ; // 报错，一旦声明，就必须立即初

2017-05-07 19:41:27 14084

原创浅谈前端性能优化（九）——DNS解析优化

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

2017-05-07 18:39:00 4993

原创浅谈前端性能优化（八）——cookie优化

cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递。除了key-value外，cookie还有max-age，path，domain和httponly属性。httponly属性标识一个客户端JavaScript能否操作该cookie；max-age属性表示缓存时间，单位为秒；domain设置可以访问该Cookie的域名；path设置该domain下可以访问该Coo

2017-05-07 18:08:47 2017

原创浅谈前端性能优化（七）——图像优化

1、常用的图像类型1) gif: 适用于动画效果。2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、pn

2017-05-07 17:29:57 964

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

有关CDN的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/60962103 1、CDNCDN是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容，在优化性能时，会根据距离的远近来选择。CDN将网站的资源发布到离用户最近的网络边缘，用户可以就近取得资源内容。CDN通常部署静态内容：JavaScri

2017-05-07 16:37:14 3037

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

1、图片地图图片地图允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。1) 优点：把多张图片整合到一张图片中，虽然文件的总体大小不变，但可以减少HTTP请求数。2) 使用条件：只有在图片的所有组成部分在页面中是紧挨在一起时才能使用，如导航栏。3) 缺点：确定图片的坐标比较繁琐且易出错，同时使用图片地图导航也不具有可读性，因此不推荐使用图片地图。

2017-05-07 16:00:18 5986

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

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

2017-05-07 15:19:03 2180

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

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

2017-05-07 14:54:35 1453

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

1、前端性能优化的一点：对js、css、图片等进行压缩，尽可能减小文件的大小，减少文件下载的时间，从而减少网页响应的时间。 2、前端性能优化的另一点：对HTTP传输进行压缩，即在js，css、图片等资源已经压缩的基础上（其实，文件的压缩与否均可，文件的压缩跟HTTP传输过程的压缩没关系），在HTTP传输过程中的再次压缩。 3、HTTP1.1的Accept-Encoding和

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

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

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

2017-05-07 11:57:05 16764

空空如也

空空如也