charlene程程-CSDN博客

原创 webpack基本配置项总结

webpack是一个用于web项目的模板打包工具。在大部分的使用场景中，我们将它看作是一个web前端模块打包工具，它将资源的本身当做模块，这些模块可以被导入和操作，最后打包到指定的文件中下面详细讲解各个配置项的配置方法首先写一个简单的webpack.config.js文件module.exports = { entry:'./src/index.js', output:{

2017-09-15 16:24:33 3267 1

原创视频播放问题总结

最近一直在研究视频播放的问题，在研究过程中遇到很多问题，在这里总结一下遇到的问题和解决方法关于视频文件类型现在，视频文件可以大致分为两类：其一是影像文件，比如说常见的VCD便是一例。其二是流式视频文件，比如说在线实况转播，就是构架在流式视频技术之上的。流式视频(Streaming Video)采用一种“边传边播”的方法，即先从服务器上下载一部分视频文件，形成视频流缓冲区后实时播放，同时继续下载，

2017-09-12 17:03:25 1714

原创 React学习总结—生命周期

React组件的生命周期根据广义定义描述，可以将其分为挂载（Mounted）、更新（Update）和卸载（Unmounting）三个阶段，每个阶段React都封装了对应的hack函数，各阶段包含的hack函数如下图根据这个图，我们详细说明一下各hack函数执行顺序和作用Mounted阶段该阶段是组件的挂载阶段，组件主要通过render方法解析生成对应的DOM节点，并将其推入浏览器的

2017-08-28 19:51:26 599

JSX概述React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.create

2017-08-04 11:18:03 641

转载移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。在web端由于是固定的大小与left 、top，所以定位起来会比较准确、简单。但是在移动端就不一样了，各种手机的屏幕大小不一样，很难做到使用sprite图然后根据background-position来定位。所以普遍的做法都是使用单张图片，然后使用

2016-09-06 17:21:54 14634 1

原创移动端学习总结——性能优化

移动端性能主要影响因素移动端与PC端的性能影响因素的差异还是比较大的。其主要差别如下移动端的带宽速度较小。4G网络的出现提升了移动页面的加载速度，但是相对于PC端，带宽的限制也是需要考虑的因素之一。移动端的设备性能与PC端的差异巨大。移动端的CPU、内存等设备的性能相比于PC端还是有很大限制的页面本身的问题在了解移动端的性能优化之前，让我们先看一看PC端的性能优化PC的性能优化PC端的性

2016-08-31 13:20:42 3760

原创 ES6学习——变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构数组的解构赋值基本用法ES6中对变量赋值可以写成下面的样式。var [a,b,c] = [1,2,3];//等同于下列三句var a = 1;var b = 2;var c = 3;本质上，这种写法属于‘模式匹配’，只要等号两边的模式相同，左边的变量就会被赋予对应的值。let [foo,[[bar],baz]] = [

2016-08-27 11:33:33 1457

原创 JavaScript模块化相关知识

为什么需要模块化为方便文件管理、增加复用，我们需要细化JS文件，每个文件负责单一职能，称之为模块，明确每个文件的职能，当交互功能较复杂时，引用的文件也越加庞大，此时我们就需要模块化管理。模块化管理可以避免全局变量污染、函数命名冲突、文件依赖等问题如何模块化为了实现JavaScript的模块化开发，需要遵循一定的规范，目前通用的规范分为服务端（CommonJS）和客户端（AMD/CMD）。Comm

2016-08-24 12:06:50 616

原创数据结构学习笔记——线性表

线性表定义线性表是零个或多个数据元素的有限序列。线性表的数据对象集合为{a1,a2,……，an}。其中，除第一个元素a1外，每一个元素有且只有一个直接前驱元素，除了最后一个元素an外，每个元素有且只有一个直接后继元素。数据元素之间的关系是一对一的关系线性表的顺序存储结构线性表的顺序存储结构指的是用一段地址连续的存储单元依次存储线性表的数据元素。简单的说，线性表的顺序存储结构就是在内存中找到一块连

2016-08-20 14:49:16 598

转载 JavaScript内存泄漏的排查方法

本文转自JS内存泄漏排查方法——Chrome Profiles 概述Google Chrome浏览器提供了非常强大的JS调试工具，Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存（heap）快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用到的所有对象，以及这些对象所占用的内存大小、引用的层级关系等等。这些描述文件为内存泄漏的排查提供了非常有用的信

2016-08-19 18:11:50 8397

原创 JavaScript中的作用域链详解

题外话：最近面试一直被问到作用域链的问题，所以还是要深入透彻的学习一下这两个概念。作用域链在红宝书中对作用域链的描述有这么一段话：当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端始终是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即argume

2016-08-19 17:16:11 15311 1

原创总结Git常用命令以及常用操作

Git是一种分布式的版本控制系统，是现在开发者的必备技能。使用Git已经有一段时间了，在这里总结一下Git的常用命令以及常用操作先上图（盗图自Git远程操作详解） Git常用命令git init : 在当前目录新建一个Git代码库git clone：下载一个项目和它的整个代码历史git config: 设置文件git add：将工作区内容添加到暂存区(`git add .`表示将工作区所

2016-08-12 10:23:56 570

原创 JavaScript中的类型转换

数据类型JS中的类型一共有六种。包括五种基本类型：数值（Number）、字符串（String）、undefined、null和布尔型（Boolean），一种复杂数据类型（Object）（ES6中新增了Symbol类型，这里暂不考虑）。 JS的数据类型之间可以进行类型转换类型转换JavaScript中的取值类型非常灵活。比如当JavaScript期望使用一个布尔值的时候，我们可以提供任意类型的值，J

2016-08-10 12:34:21 633

原创 H5的新特性及部分API详解

h5新特性总览移除的元素**纯表现的元素：**basefont、big、center、font等 **对可用性产生负面影响的元素：**frame、frameset、noframes新增的API语义：能够让你更恰当地描述你的内容是什么。连通性：能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行（离线

2016-08-09 19:19:04 40862 4

转载 NodeJS中的错误处理

这篇文章会回答NodeJS初学者的若干问题：我写的函数里什么时候该抛出异常，什么时候该传给callback, 什么时候触发EventEmitter等等。我的函数对参数该做出怎样的假设？我应该检查更加具体的约束么？例如参数是否非空，是否大于零，是不是看起来像个IP地址，等等等。我该如何处理那些不符合预期的参数？我是应该抛出一个异常，还是把错误传递给一个callback。我该怎么在程序里区分不同

2016-08-06 17:23:50 5826

转载 CDN（内容分发网络）技术概述

前言网络缓存技术，其目的就是减少网络中冗余数据的重复传输，使之最小化，将广域传输转为本地或就近访问。互联网上传递的内容，大部分为重复的Web/FTP数据，Cache服务器及应用Caching技术的网络设备，可大大优化数据链路性能，消除数据峰值访问造成的结点设备阻塞。Cache服务器具有缓存功能，所以大部分网页对象（Web page object），如html, htm, php等页面文件，gif,t

2016-08-05 12:09:34 4662

原创 http与https知识点总结

HTTPHTTP是一种无状态的传输协议，它随着事件不断演变，目前已经演变到HTTP2.0版本HTTP 0.9HTTP0.9作为HTTP协议的第一个版本，是非常弱的，请求只有一行，比如GET www.csdn.com从如此简单的请求体，没有POST、没有HTTP头可以看出，那个时代的HTTP客户端只能接收一种类型：纯文本。并且，如果得不到所求的信息，也没有404、500等错误状态码信息。HTTP 1

2016-08-04 13:43:15 992

原创 js中连续触发事件的稀释方法（函数节流、函数防抖、标识变量）

在浏览器中操作DOM比非DOM交互需要更多的内存和CPU的事件，连续尝试进行过多的DOM相关操作可能UI导致浏览器挂起，有时甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了解决短时间内重复调用事件的这个问题，可以使用函数节流、函数防抖和设置

2016-07-31 19:15:52 9868 2

原创 HTTP缓存策略学习总结

所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务（假设有副本可用的情况下，未被销毁回收或者未被删除修改）。这些规则有的在协议中有定义（如HTTP1.0和HTTP1.1）,有的则是由缓存的管理员设置（如DBA、浏览器的用户、代理服务器管理员或者应用开发者）浏览器的缓存规则对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校

2016-07-30 14:09:30 2674

原创 css中的float知识点总结

看了张鑫旭大神的两篇关于float（CSS float浮动的深入研究、详解及拓展(一),CSS float浮动的深入研究、详解及拓展(二)）的文章，这里总结一下float的知识首先，浮动的根本目的是实现网页中的文字环绕效果。浮动的本质是包裹性和破坏性。包裹性体现在浮动是一个带有方位的display：inline-block属性。浮动的破坏性体现在通过浮动破坏了元素自身的高度。浮动元素对其他元素的影响

2016-07-21 17:27:31 2716

原创移动端各终端的适配问题研究--关于viewport

概念理解css像素与设备像素设备像素是我们直观看到的像素。这些像素为你所使用的各种设备都提供了正规的分辨率。来看一个栗子.test{ width:100px; height:100px; background-color:#2CDD53; //zoom:200%; } 给div设置一个的样式如上，当只设置宽高时，在普通的浏览器上显示的div宽高和设置

2016-07-19 23:00:43 1865

原创利用generator（thunk化函数/promise方法）处理回调地狱的问题

在Nodejs中是通过回调函数控制异步过程的，但是当多个事件之间相互依赖，或多个事件一起协作时，就会导致函数嵌套过深的情况。如下是一个在项目中显示文章详情页的的代码，我们看到这个函数嵌套了七八层。这样的嵌套很容易因为缺少括号发生错误。另外，当一个回调函数中出现错误，整个程序就会退出，并提示错误信息。 //查看文章详细信息app.get("/detail/:author/:title"

2016-07-19 14:01:15 1850

原创 socket基础知识及js中的Web Sockets

socket基本概念两个进程如果需要进行通讯最基本的前提是能够唯一的标示一个进程，在本地通讯中用PID来唯一标示一个进程，但PID只在本地唯一，网络中的两个进程PID冲突几率很大。我们知道IP层的ip地址可以唯一标示主机，而TCP层协议和端口号可以唯一标示主机的一个进程，这样我们可以利用ip地址+协议+端口号唯一标示网络中的一个进程。能够唯一标示网络中的进程后，他们就可以利用socket进行通信了。

2016-07-16 21:17:43 30490

原创 ES6中的Promise相关知识简述

Promise是抽象异步处理对象以及对其进行各种操作的组件。它把异步处理对象和处理规则进行规范化，并按照采用统一的接口来编写，而采用规定方法之外的写法都会出错。 ES6原生提供了Promise对象。我们来看一下Promise的用法首先创建一个promise对象，创建promise对象的流程如下 1 new Promise（fn）返回一个promise对象 2 在fn中指定异步等处理

2016-06-19 13:35:24 1379

原创 nodeJS中的事件--event

nodeJS中大部分模块，都继承自Event模块。Event模块是一个简单的事件监听器模式的实现，具有addListener/on，once,removeListenter、removeAllListener、emit等基本的额事件监听模式方法的实现。它与前端DOM树上的事件并不相同，因为它不存在冒泡，逐层捕获等属于DOM的事件行为，也没有preventDefault()、stopPropagati

2016-06-19 10:23:04 2060

原创 NodeJS中的异步I/O、事件驱动

nodejs的主要特点是单线程、异步I/O、事件驱动。让我们先大概了解一下这些名词的意思。单线程单线程是任务按照顺序执行的，并且每次只执行一个任务，只有前面的任务执行完成以后，后面的任务才执行。在JS引擎中负责解释和执行Javascript代码的线程只有一个，即主线程。但实际上还存在其他的线程。例如处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程等。这些线程可能存在与JS引擎

2016-06-19 09:25:51 8004 4

原创 AngularJS初识--指令相关知识总结

指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。指令的创建指令的创建方法有四种格式以元素的形式创建：<my-directive></mydirective>以属性形式创建： <div my-directive></div>以类的形式创建： <div class='my-dirctive'></div>以注释的形式创建： <!-- directive:mydirecti

2016-06-16 15:38:01 693

原创 AngularJS初识--作用域

作用域是构成AngularJS应用的核心基础，在整个框架中都被广泛使用。作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现个用户之前，视图中的模板和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。也就是说，作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立即更新$scope，也可以依赖$scope在其发生改变时立刻重新渲染视图scope通过c

2016-06-16 14:07:39 554

原创 angularJS初识--介绍基本功能及用法

angular是利用JavaScript编写的一个库，是为了克服html在构建应用上的不足。angularJS通过使用标识符的结构让浏览器能够使用新的语法，通过使用被称为指令的新属性来扩展HTML，通过内置的指令来为应用添加功能、并且运行自定义的指令。主要适用于构建CRUD的应用，不适合dom操作频繁的应用。angularJS的基本功能angularJS使得开发现代的单一页面应用程序变得更加容易

2016-06-15 17:08:13 1345

原创 jquery源码--isArraylike merge makeArray

isArraylikeisArraylike在jquery源码中用来判断参数是否为类数组或数组。之所以称为类数组，是因为它能够像数组一样遍历，也可以通过像数组中以中括号方式获取数组中的值一样获取类数组中的值。通常将类数组转换为数组，对其进行操作，转换方式如下var a = {'0':'a','1':'b',length:2} //类数组Array.prototype.slice.call(a

2016-06-13 15:45:10 844 1

原创 jquery源码解析--queue队列

queue队列是jquery库的内部实现的基础设施。队列主要是animate动画依赖的基础设施，整个jquery中队列仅供给动画用queue队列简介队列是一种特殊的线性表，是属于先进先出，而且只允许在表的前端进行删除操作（出队），在表的后端（队尾）进行插入操作（入队）queue的基本使用queue队列即是工具方法，也是实例方法，queue方法是将函数添加到队列中，dequeue方法是将函数从队列中取

2016-06-13 14:24:14 1064

原创 jquery源码分析—data缓存

data和attr、prop的作用类似都是给元素添加属性，但是data可以防止DOM元素与对象之间的互相引用，从而防止出现内存泄漏的现象。data的使用方法data可以作为工具方法和实例方法使用var obj = {}; $.data(obj,'name','hello');$.removeData(obj,'name');console.log($.data(obj))$('#div1')

2016-06-12 13:21:52 742

原创 jquery中的工具方法--Deferred和when

在jquery1.5版本以后，Deferred和promise就是jquery中非常常用的两个功能，并且在这个版本利用Deferred又完全重写了ajax模块。Deferred对象是有jquery.Deferred构造的，$.Deferred在jquery代码中，分别在promise方法、Dom ready、ajax模块、动画模块被使用Deferred的用法var defer = $.Deferre

2016-06-06 14:41:08 2902 2

原创 jquery中Callbacks对象的实现

jquery中的Callbacks方法为工具对象，它是一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数的队列。其实Callbacks的思想跟观察者模式的思想相似Callbacks的用法function aaa(m){ alert(m);}function bbb(n){ alert(n);}var cb = $.Callbacks();//实例化Callbac

2016-06-05 21:21:06 582

原创 nodejs中的fs模块

fs模块为nodejs的核心模块之一，主要处理文件的读写、复制、s删除、重命名等操作。当需要使用该模块时，需要先导入该文件var fs = require('fs');nodejs文件系统中的方法均有异步和同步两种版本，例如读取文件内容的函数有异步的fs.readFile()和同步的fs.readFileSync().fs中的读写操作文件模块中提供了基本的读写操作、buffer二进制操作和流操作。

2016-05-30 21:03:34 8796

原创使用jcrop实现裁切图片

jcrop为基于jquery库实现的图片裁切插件。当使用该插件使需要引入jquery和jcrop（包括js文件和css文件）。 //css文件的引入 <link rel="stylesheet" type="text/css" href="/Jcrop/css/jquery.Jcrop.min.css"> //js文件的引入 <script type="text/javascript" src

2016-05-30 18:08:24 3573

原创 node中的path模块

path为nodejs的核心模块之一，主要用来处理文件的路径。当使用时需要引入path模块var path = require("path");这里总结一下path的属性和方法path.normalize(src): 规范化路径，多个斜杠会被替换成一个；路径末尾的斜杠会被保留； Windows 系统上, 会使用反斜杠var src1 = 'c:/node//de/';console.log(p

2016-05-29 19:07:57 640

原创 jquery插件jcrop的初步认识与用法

最近在写项目的过程中，需要用到图像裁切上传，所以接触了插件jcrop。这个插件的裁切功能主要是获取裁切图片后的x坐标，y坐标与裁切图片的宽度和高度。该插件运行后，dom格式如下关于该插件的源码，以及源码中的中文注释部分已发布到github 源码解析这里说一下主要用法首先需要引入jquery库和jcrop插件<script type="text/javascript" src="src/

2016-05-25 13:26:40 1114

原创如何获取闭包中循环的i值

假设有这样的一个问题：ul中含有多个li标签，我们想对每个li绑定点击事件，并且打印出该li为第几个li元素一般写法是写一个for循环var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { lis[i].onclick = function(){ console

2016-05-20 13:10:45 2854

原创 js实现排序算法（冒泡、选择、插入、二分插入、快速、希尔）

插入排序从第一个元素开始，该元素可以认为已经被排序；取出下一个元素，在已经排序的元素序列中从后向前扫描；如果该元素（已排序）大于新元素，将该元素移到下一位置；重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；将新元素插入到该位置后；重复步骤2~5。/** * 插入排序算法 * @param {Array} ar

2016-05-12 20:11:01 12893 3

空空如也

空空如也