文甜心-CSDN博客

原创 axios中对cookie的封装

function isStandardBrowserEnv() { if(typeof navigator !== 'undefined' && navigator.product === 'ReactNative'){ return false; } return ( typeof window !== 'undefined' &&

2017-09-29 16:07:56 2122

原创 axios用utils

有幸读了一下axios源码，一些utils的实现比较有趣// begin with <>:// or //function isAbsoluteUrl(url) { // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed // by any co

2017-09-29 14:13:32 1098

原创归并排序

归并排序是分治思想的一种实现。function mergeSort(arr){ if(arr.length <= 1) return arr; var mid = Math.floor(arr.length/2); var leftArr = arr.slice(0, mid); var rightArr = arr.slice(mid); return me

2017-09-22 23:36:55 257

原创 new模拟实现

function newFactory(){ var obj = new Object(); var args = arguments; fn = args.shift(); obj.__proto__ = fn.prototype; var result = fn.call(obj,args); return typeof result === 'o

2017-09-21 23:20:56 232

原创函数节流与防抖（参考lodash）

function debounce(fn, delay, immediate){var timeout, args, context, timestamp, result; var later = function(){ var last = Date.now() - timestamp; if(

2017-09-21 23:15:42 5607

原创深拷贝与浅拷贝实现（参考jquery）

var toString = [].toString, hasOwn = Object.prototype.hasOwnProperty;var types = { '[object Boolean]':'bool', '[object Number]' : 'number', '[object String]' : 'string', '[

2017-09-21 23:13:06 297

原创 jquery无new构造

var jquery = function(selector, context){ return new jquery.fn.init(selector, context);}jquery.fn = jquery.prototype = { init: function(selector, context){ this.dom = document.querySe

2017-09-21 23:10:10 342

原创策略模式实现（验证）

// 定义策略var strategy = { isNotEmpty: function(value, errorMsg){ if(value === ''){ return errorMsg; } },

2017-09-21 23:07:45 423

原创旋转数组中的最小数字

把一个递增排序数组的前几个元素移动至末尾，找出最小的数字。例如： [3,4,5,1,2]就是数组[1,2,3,4,5]的旋转。找出1。function Minnum(arr){ if(!Array.isArray(arr) || arr.length <= 1) { return arr; } var left = 0,

2017-08-08 23:39:11 181

原创背包问题

完全背包问题function getMaxGold(n,w,g,p){ var nextGold, results = []; for(var i = 0; i <= w; i++){ results[i] = (i < p[0]) ? 0 : g[0]; }

2017-07-31 23:45:46 179

原创 http缓存

什么是缓存缓存是指对存储资源的一份拷贝，下次请求资源的时候即可使用这一份拷贝。当web缓存发现请求的资源已经被存储，会拦截请求，返回该资源的拷贝，而不会去we服务器重新下载。为什么需要缓存 1、减少带宽 2、缓解服务器压力 3、提升网站的性能（*）：可以减少用户等待的时间，可以使得网站的性能上升，给用户更好的体验。HTTP1.0时代主要通过使用Pragma和Expires两个字段来

2017-07-30 23:11:27 212

原创最小支撑（生成）树的prim算法 java

package prim;import java.util.*;public class Prim { static int MAX = Integer.MAX_VALUE; public static void main(String[] args) { int[][] map = new int[][] {

2017-06-25 15:39:17 293

原创求数组子数组之和的最大值

方法：最简单的方法就是把所有子数组遍历一遍求和找最大值。显然有更好的方法。我们考虑长为N的一个数组arr的最后一个元素arr[N-1]与前N-1项的和最大连续子数组的关系，有三种情况： 1、等于arr[N-1] eg：[1,-3,5] 2、以arr[N-1]结尾 eg：[2,-1,5] 3、与arr[N-1]无关 eg：[5,-3,2]function maxChildArr(

2017-06-24 17:34:44 522

原创如何让height:100%起作用

首先要了解浏览器是如何计算高度和宽度的。 Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。但是高度的计算就完全不同了，事实上，浏览器根本就不计算内容的高度，除非内容超出了视口（出现滚动条），或者你给父级设定了高度。否则，浏览器就会让内容简单的往下堆砌，页面的高度根本就不会考虑。因为页面并没有缺省的高度值，所以

2017-06-21 18:34:06 297

原创 Canvas与SVG的比较

SVG是一种使用XML描述2D图形的语言基于XML，意味着SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一

2017-06-19 23:15:32 442

原创 DOM与HTML DOM的区别与联系

DOM分为三部分： 1、核心DOM：遍历DOM树、添加新节点、删除节点、修改节点 2、HTML DOM：以一种简便的方法访问DOM树 3、XML DOM：准用于操作XML文档核心DOM与HTML DOM的区别：核心DOM：对象：Document/Node/ElementNode/TextNode/AttributeNode/CommentNode/NodeList//核心DOM提供了统

2017-06-19 23:10:46 2335

原创 promise的实现原理

以node EventEmitter为核心实现基础版promise//利用node EventEmitter实现promise var Promise = function(){ EventEmitter.call(this);//显式调用构造函数 } util.inherits(Promise,EventEmitter);//利用node util工具函数i

2017-06-19 19:35:10 909

原创 js引擎的垃圾回收原理

js引擎所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾回收机制原理很简单：找出那些不再继续使用的变量，然后释放其占用的空间。为此垃圾收集器会按照固定的时间间隔（或者代码执行中预定的收集时间），周期性的执行这一操作。我们分析下函数中局部变量的正常生命周期。局部变量只在函数执行的过程中存在，在这个过程中。会为变量在栈或者堆内存中分配空间，然后在函数中使用，直到函数结束。此时局部

2017-06-17 15:19:43 506

原创 H5离线缓存

H5的离线缓存，主要有两个方面，一方面是在meta中设置manifest属性来告知浏览器进行缓存，另一方面就是使用localStorage。一、使用manifest1、介绍 manifest是一个后缀名为.manifest的文件，从文件中定义需要缓存的文件，支持manifest的浏览器，会按照manifest的规则，将文件保存到本地，在没有网络连接的情况下，也能访问页面。当我们

2017-06-16 20:18:21 612

原创 hash模式实现前端路由

function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){}; };

2017-06-15 20:27:49 505

原创 Webpack打包原理

开门见山。1、打包单一模块webpack.config.jsmodule.exports = { entry:"./chunk1.js", output: { path: __dirname + '/dist', filename: '[name].js' },};chunk1.jsvar chunk1=1;exports.chunk1=c

2017-06-15 20:05:08 1637

原创浏览器内核

一、各大主流浏览器的内核： 1、IE ： Trident内核（众所周知的低版本兼容性问题）。 2、FF ： Gecho内核，c++编写，开源，可开发程度很高。 3、Opera ： Presto内核，由opera software开发的浏览器排版引擎，在opear7~10中使用，特点是渲染速度的优化达到了极致，是公认的网页浏览速度最快的浏览器内核，然后代价是牺牲了网页的兼容性。本质上是

2017-06-15 18:27:11 224

原创 meta标签的作用

前端接触时间也不小了，但可能很多人对meta标签依然认识不足(只知道charset=utf-8?)。我们今天来好好分析一下meta标签的作用以及如何更好的利用meta标签做网页的SEO。第一方面 meta标签可以用作http-equiv相关信息的设置。相当于http头的作用 1. pragma：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cach

2017-06-15 15:08:09 353

原创 vue-router使用history的配置问题

vue使用history后，能够使得url更加漂亮，也就是不再有‘#’的问题，但同时我们会发现，如果页面直接访问，比如http://www.xxx.com/user/info的时候，显示无法get，并且刷新的时候，也会出现同样的问题。 vue-router官方资料说需要服务器端配置支持，在node中也就是需要一个connect-history-api-fallback的中间件。而后

2017-06-10 21:36:21 7557

原创 history实现前端路由

<!DOCTYPE html><html><head> <title></title></head><body><a href="/about">about</a><a href="/">home</a><a href="/test">test</a><a href="/about/test">about_test</a><script type="text/javascr

2017-06-10 18:13:47 878

原创 link引入样式与import的区别

link是XHTML的标签，除了能够链入样式外，还可以定义RSS等事务，import是css2.1定义的，只能用来加载css。link链入样式的时候是页面加载的同时开始加载，而import必须在页面加载完成后开始加载。link没有兼容问题，import属于css2.1，低版本浏览器不兼容（IE5 以上的才能识别）。这个问题已经可以忽略了。link支持使用js操作dom来改变样式，而import

2017-06-10 12:33:03 558

原创 box-sizing属性

content-box:让元素维持W3C的标准盒子模型。即宽高由border、padding、content的宽高决定。简单一点说就是我们定义一个元素的width或者height的时候，不包括元素的padding和borderborder-box：让元素维持IE传统盒子模型。定义一个元素的width或者height的时候，包括了元素的padding和border，改变border和padding

2017-06-10 12:21:10 227

原创 new 模拟

new的作用： 1、先生成一个空的obj 2、将obj.__proto__绑定到构造函数的prorotype 3、将构造函数的this绑定在obj上（执行） 4、如果有对象返回就返回该对象，并将obj丢弃，如果没有或者返回的不是一个对象，就将obj返回。function newFactory(){ var ob

2017-06-10 11:59:13 158

原创函数节流与防抖

同一个操作会连续触发某个行为时，为了防止因为频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃，我们需要做一定的限制。所谓函数节流，是指某连续操作，前后两次操作的时间间隔达到我们的设置，才去执行对应行为。函数防抖是函数节流的变种，如果我们希望，即使连续操作时间间隔没有达到我们的预期，也会在经过一定时间后，保证对应行为会执行一次。function throttle(method

2017-06-09 15:20:34 418

原创每次连接阿里云服务器浪费半小时，我就不信了。

filezilla连接阿里云服务器传输文件 ip：公网ip 用户名：root（坑爹）密码：大小写组合的那个（阿里云有一万个密码）端口：sftp-22

2017-06-07 19:07:55 381

原创 div模拟textarea

核心属性contenteditable=true！.text_box{ width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto;

2017-06-06 20:04:15 208

原创 extend的实现

拷贝有深浅之分。浅拷贝比较easyfunction extend2(target, ref){ var name, value; for(name in ref){ value = ref[name]; if(value !== undefined){

2017-06-06 19:36:47 327

原创 isPlainObject实现与分析

首先我们需要一个判断类型的神码。var toString = [].toString, hasOwn = Object.prototype.hasOwnProperty; var types = { '[object Boolean]':'bool', '[object Number]' : 'number',

2017-06-06 19:30:31 2466

原创 js中7个假值

JavaScript中有7个假值： false 0 -0 NaN null undefined “” 其他所有的值都是真值。由于数字和字符串可能是假值，因此，使用真值运算检查函数或者对象属性是否已定义不是绝对安全的。故而检测是否为undefined更为严格的是使用typeo

2017-05-07 13:22:20 843

原创 web安全

一、CSRF：Cross-site request forgery 跨站请求伪造简单理解就是攻击者盗用了我们的身份，并以我们的名义发送恶意请求。要完成一次CSRF攻击，需要完成以下两个步骤：登录受信任的网站A，并在本地生成cookie在不登出A的情况下，访问危险网站B危险网站B中有链接访问网站A这时当你点击这个链接的时候，就会携带你在A中生成的本地cookie访问网站A，如果攻击者添加了

2017-05-01 00:00:53 447

原创 CommonJS、AMD、CMD

CommonJS CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。规定：所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以

2017-04-29 15:07:22 417

原创 javascript语言精粹

第四章（前面三章没啥意思） 1、枚举for in 与 for 的区别，for in 会枚举原型上的属性，而且顺序时不确定的，而for顺序确定且不会发掘原型上的属性。 2、减少全局变量方法一，为应用只创建一个唯一的全局变量。即把全局性的资源都纳入一个命名空间中。 3、函数对象通过函数字面量来创建。var func = function () {};4、每个函数有两个附加参数this、ar

2017-04-21 17:47:04 664

原创常用polyfill代码

原生js创建XHR对象：function createXHR() { if (typeof XMLHttpRequest !== "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject !== "undefined") { /

2017-04-18 22:22:20 512

原创利用事件委托提升性能

作为一个入坑不久的前端，大部分的程序，都是在做交互，经常见到全篇大量都是EventUtil.addHandler(dom,method,function){},讲道理，着实看着心烦。心烦可以解决，看看片放松一下即可，关键性能瓶颈可不是看片能解决的。添加到页面中的事件处理程序会直接关系到页面的整体运行性能。原因很多，首先，函数时对象，会占用内存，内存中的对象越多，性能就越差。其次，必须事先指定所

2017-04-18 21:57:07 803 1

原创初识函数式编程

1、map（映射）与reduce（归约）array.map(callback,[ thisObject]);//callback参数（注意，callback需要return，否则数组每一项都会被映射为undefined）[].map(function(value, index, array) { // ...}); //我们用ES3实现 var map = Array.prototyp

2017-04-18 21:40:32 207

空空如也

空空如也