黛梨-CSDN博客

原创 js拼接字符串与变量

使用eval（）方法可将拼接后的字符串与变量转变为变量var field_test = '我是小白鼠一号'; var field_test = '我是小白鼠二号'; // 然后在JS里尝试将前面的语言简写当成变量，拼接后面的字符串 var lang = 'field'; var test1 = lang + '_test'; var test2 = eval(lang + '_test...

2018-11-19 15:34:29 22373

原创 jQuery防止重复绑定事件

jQuery一个对象的事件可以重复绑定多次，当事件触发的时候会引起代码多遍执行。例如：function reg_button_click(){ $("#button).click(function(){ alert("button click"); });}$(document).ready(function(){ reg_button_click(); reg...

2018-10-17 15:45:19 4969

原创 jQuery性能优化

前言，最近在写jquery的时候，出现一下性能相关问题，在此特作总结，以待日后多加注意。1.关于变量的定义这里不仅仅是jquery，即便是javascript都是一样的，一定要使用var（let/const）关键字来定义变量，不能定义成如下：$abc = $('#abc'); //这是个全局的定义，一旦在别处出现相同名字的引用就会报错，还不一定能找到错误来源如果有多个变量需要定义的时...

2018-10-16 17:58:43 939

原创 less语法详解

1.less的定义less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。2.特征更清晰和更可读的代码可以以有组织的方式编写。我们...

2018-08-21 10:57:21 11961 4

原创热模块替换实现与原理

1.作用用于在开发过程中，实时预览修改后的页面，无需重新加载整个页面。其主要通过一下几种方式来加快开发速度：保留在完全重新加载页面时丢失的应用程序状态。只更新变更内容，以节省宝贵的开发时间。调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。2.更新流程核心概念： entry：入口文件 module：模块，webpack里一切皆模块...

2018-08-15 11:35:22 3789 1

原创 Git常见命令总结

1.新建代码库：$ git init 在当前目录新建一个Git代码库$ git init [project-name] 新建一个目录，将其初始化为Git代码库$ git clone [url] 下载一个项目和它的整个代码历史2.增删文件：$ git add [file1] [file2] 添加指定文件到暂存区$ git add [dir] 添加指定目录到暂存区，包...

2018-08-15 10:30:37 166

原创 vue实现二级联动选择器

使用vue实现二级联动的下拉列表选择器，代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue

2018-03-29 17:14:41 8702

原创 HTTP解析

http详解标签（空格分隔）：网络安全1.什么是http？ http是一个客户端和服务器端请求和响应的标准TCP，其实它是建立在TCP之上的。当我们打开百度页面的时候是这样的：https://www.baidu.com/这里是https，多了个s，其实就是SSL，TLS，是用来加密的，所以http的技术基石如下：**http协议：**http协议是超文本传输协议，适用于服务器传输到客户端浏览

2017-10-30 20:45:48 832

原创缓存之cookie

1.cookies首先，cookie的设定也在http响应头中，名字是set-cookie。设置一个cookie的目的就是为了标识这个用户，就是说需要为每一个用户设置一个cookie。想象一下缓存的场景，你是否会缓存一个包含了Set-Cookie的 HTTP 响应，在缓存时间内，每个人都会得到相同的 cookie 和同样的用户 session？你肯定不想这样。另外，用户 session 状态的改

2017-10-30 18:15:46 1289

原创 CDN缓存小结

1.为什么使用CDN？首先，cdn可以理解为一个普通缓存，如代理缓存或者说边缘缓存，即便不关心用户的具体地理位置，也应该考虑使用cdn的代理缓存来提高用户体验。简单而言，代理缓存会缓存你网站的一些页面，通过缓存来传输静态内容非常的快。一个简单的例子：假设你有一个带有开始页面的博客，这里面列出了所有近期的博客列表。完成这一过程，PHP 脚本要从数据库中获取到最近的文章实体，并且将它们转换成 H

2017-10-30 16:56:30 24757

转载 JS异步原理(事件,队列)

原文出处：https://segmentfault.com/a/1190000010913949调用栈JS执行时会形成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,如果当前正在运行的函数中调用另外一个函数,则该函数相关内容也会被推入栈顶.该函数执行完毕,则会被弹出调用栈.变量也随之弹出,由于复杂类型值存放于堆中,因此弹出的只是指针,他们的值依然在堆中,由GC决定回收.尾调用:指

2017-10-17 21:14:51 2500

电脑上访问一个网页，整个过程是怎么样的（url：www.sina.com）：其中DNS、HTTP、TCP、OSPF、IP、ARP具体实现。1.若DNS缓存中没有相关数据，则IE浏览器先向DNS服务器发出DNS请求：2.这一过程的目的是获取www.sina.com这个域名所对应的IP地址；3.IE浏览器向本机DNS模块发出DNS请求，DNS模块生成相关的DNS报文；4.DNS模块将生成的DNS报文传递

2017-10-07 15:18:43 8765

原创平方等式问题

笔试题：平方等式题目描述：公式如：f(13) = 1^2+3^2 = 10;f(23) = 2^2+3^2 = 13; 现要求找出满足范围a–b之间所有，K*f(n) = n的数，输出一共有多少个满足条件的数以及其数本身，其中k为手动输入。 function lib(k,a,b){ var sum = 0; var key = []; for(var i

2017-09-23 17:26:10 532

原创 js——统计字符串中每种字符出现的次数,出现次数最多的是？出现？次

方法一：使用hash var str="helloworld"; for(var i=0,hash={};i<str.length;i++){ if(hash[str[i]]){ hash[str[i]]++ }else{ hash[str[i]]=1; } } console.dir(hash);方法二：使用正则var str="hel

2017-09-19 11:30:47 2680

原创 js实现食堂里的长桌问题

题目描述：食堂有一排面向墙的座位，独自来吃饭的同学都喜欢坐在这里，且来的人都喜欢独处，不会挨着其他人坐，现在长桌上已经有了一部分人在吃饭，但是又来了一部分的人用餐，不知来的人都能够找到左右的座位呢？输入：包括两个数据，一个字符串table表示桌子的长度，（其由“0”，和“1”组成，每个字符代表一个座位，“1” 表示该座位有人，“0”表示没人），table长度<10000，一个正整数k

2017-09-19 11:12:07 555

原创 js实现输出杨辉三角中关键字的行数

题目描述：输入杨辉三角的行数和一个关键字，找到该关键字第一次出现在第几行。function Combination(m,n){ if(n == 0) return 1; //每行第一个数为1 else if(m == n) return 1; //最后一个数为1 //其余都是相加而来 else return Combination(m-1,n-

2017-09-18 21:40:38 1236 1

原创 react性能优化

写在前面的话：要想解决问题，首先得找到问题的根源，所以，说起性能分析，还是要从其生命周期和渲染机制说起。1.渲染机制react的组件渲染分为初始化渲染和更新渲染，在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染。但是当我们要更新某个子组件的时候，是从根组件传递下来应用在子组件上的数据发生改变。我们只是希望调用关键路径上组件的render就好了。但是， react的默认做

2017-08-28 15:45:40 1608

原创 BFC

1.基础概念首先清楚什么是块级元素：块级元素是那种源文档被格式化为可视块了的元素，然后使这个元素变成块级元素的display属性取值：‘block’，‘list-item’，‘table’然后，什么是block-level box：块级block-level box是这种参与了块级排版上下文的一种盒子，每个块级元素都生成了一个包含后代盒子和生成的内容的主要块级盒，并且这个参与了任何

2017-08-06 15:32:45 420

原创 js深度克隆和浅度克隆

“使用JavaScript深度克隆一个对象。” 这是一个出现概率很高的面试题，下面就来总结下，二者的区别以及其代码。科普一下： js一般有两种不同数据类型的值：基本类型（包括undefined,Null,boolean,String,Number），按值传递；引用类型（包括数组，对象），按址传递，引用类型在值传递的时候是内存中的地址。1.概念浅度克隆：基本类型为值传递，对象仍为引用传递。

2017-07-29 17:39:43 2483

转载 webpack基础入门

写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了

2017-07-24 21:02:36 641

原创通用事件侦听器函数代码

Event = { //页面加载完成后 readyEvent: function(fn) { if (fn == null) { fn = document; } var oldonload = window.onload; if (typeof window.onload != 'function') {

2017-07-17 20:29:20 452

原创使用localStorage进行本地存储代码

localStorage的使用方法见：http://blog.csdn.net/pedrojuliet/article/details/62889501<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

2017-07-17 16:32:44 1217

原创 React-组件生命周期

每个生物都有它自己的生命周期，从出生到少年，成年再到死亡，同理，组件也是有它特定的生命周期，React用不同的方法来描述它的整个生命周期。现在，要稍微修改一下组件的代码，当组件加载完毕1秒后，使liked的值自动加1.......componentDidMount(){ setTimeout(()=<{ this.likedCallback(); },1000);

2017-06-25 12:20:22 762

原创 Module模块

ES6的Class只是面向对象编程的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有实际的解决模块化的问题。 module功能就是为了解决这个问题而提出的。1.export命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件，如果希望外部能够读取模块内部的某个变量，就必

2017-06-22 20:14:47 1137

原创 Sass、LESS 和 Stylus区别总结

CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是 CSS 预处理器CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更

2017-06-07 10:44:08 40192 5

转载 SQL注入

1.什么是SQL注入（SQL Injection）所谓SQL注入式攻击，就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的SQL命令。在某些表单中，用户输入的内容直接用来构造（或者影响）动态SQL命令，或作为存储过程的输入参数，这类表单特别容易受到SQL注入式攻击。2.SQL注入攻击实例比如在一个登录界面，要求输入用户名和密码：可以这样输入实现免帐号登录：用户

2017-05-31 19:33:11 594

转载 props与state的区别

一、背景在学习React的过程中，频繁的跟props和state打交道，对于初学者来说，不知道什么情况下来使用它们有时候不知道在什么情况下来使用它们。二、区别props和state之间是紧密相关的。父组件的state常常转变子组件的props成下面我们通过一个父子组件从上至下来分析它们。假如我们有个父组件，可以在父组件的state里定义子组件的数据比如：this.setState({ childDa

2017-05-22 17:52:00 1779

原创 Set和Map数据结构

1.set基本用法： set是ES6提供的一种新的数据结构，有点像数组，但是他的成员都是唯一的，没有重复的值。其次，set本身就是一个构造函数，是用来生成set数据结构的。如下：var s= new Set();[2,3,4,5,5,3,4,2].map(x=>s.add(x))for(i of s){ console.log(i);}//2,3,4,5以上代码的意思是通过ad

2017-05-17 15:41:31 591

原创变量的解构赋值

结构赋值是ES6中新引进的概念，只要眸中数据结构具有Iterator接口，都可以采用数组形式的解构赋值。1.数组的解构赋值基本用法： ES6允许按照一定得到模式，从数组和对象中提取值，对变量进行赋值，这被称作解构，在这之前，为变量赋值只能通过直接指定值，如下：var a=0;var b=3;var c=2;但是，ES6允许这样写：var [a,b,c] = [0,3,2]; 上面的代码表示，

2017-05-10 17:07:19 820

原创 call，apply与bind方法的区别

对于记性不是很好的本来来说，这三个方法的区别总是记不住，于是就总结篇博客，加深印象。在说他们的不同之前，先了解了解他们的相似之处：都是用来改变函数的this对象的指向的。第一个参数都是this要指向的对象。都可以利用后续参数传参。好了现在来总结不同之处：1.call通过call方法，将其执行环境添加到第一个参数的执行环境中，简单来说，this就会指向第一个参数那个对象。var a = {

2017-04-24 21:28:34 642

原创常见小问题区别总结

1.link和@import的区别HTML代码如下：<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />HTML代码如下：<style type='text/css' media='screen'>@import url('CSS文件 ');</style>虽然，两者都是外部引用C

2017-04-10 13:41:24 488

原创常见浏览器兼容性问题与解决方案总结

无论在写什么项目，只要牵扯到浏览器总会出现大大小小的一系列兼容性问题，下面就总结下时常遇到的浏览器兼容问题，以及其解决的办法。1.问题之一：不同浏览器标签默认的外补丁和内补丁是不同，就此问题也会遇到兼容性问题，如下：问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。相信碰到此类问题的人很多吧，那我就告诉你解决办法吧：解决方案：在CSS里设置 *{

2017-04-10 12:42:43 4878 1

原创 display所有值及其作用

display有很多的值，每个值都有其独特的作用以及特性，这也是面试中常被问到，或者比较容易考到的细琐知识点。1.display的值none inline block list-item inline-blocktableinline-tabletable-captiontable-cell table-row table-row-group table-column ta

2017-04-04 13:47:06 2611

原创 HTML5新特性

首先：Html5在html基础上新增了 27 个元素，废弃了 16 个元素，且根据现有的标准规范，把 HTML5 的元素按优先级可以定义为结构性属性、级块性元素、行内语义性元素和交互性元素这 4 大类。1.咱们先看看结构性元素。结构性属性主要是负责web上下文结构的定义的。如下元素：section：在 web 页面应用中，该元素也可以用于区域的章节描述。header：页面主体上的头部， he

2017-04-04 13:23:30 460

原创 websocekt原理及实现过程

1.websocket协议：可以将 WebSocket看成是一种类似TCP/IP的socket技术；此socket在Web应用中实现，并获得了和TCP/IP通信一样灵活方便的全双向通信功能。WebSocket协议由RFC 6455定义。协议分为两个部分：握手阶段和数据通信阶段。WebSocket为应用层协议，其定义在TCP/IP协议栈之上。WebSocket连接服务器的URI以”ws”或者

2017-03-27 19:29:38 4623

原创 html5构建基本画图程序

<!DOCTYPE html><html><head><title>h5构建基本的画图程序</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta

2017-03-20 10:00:20 2088

原创 html5文件上传

作为H5的一部分，web存储得到了很好的支持，但不是存取数据的唯一方式，为了实现与存储相关的不同任务，也出现了其他几种不同的标准，其中一个就是File API，从技术角度讲他并不是h5的规范内容，但是现在的浏览器却是有着较好的支持，当然IE除外。1.用input读取文本文件<!DOCTYPE html><html><head><title>h5文件上传</title><meta name="

2017-03-18 17:19:49 3627

原创 sessionStorage与localStorage

web应用中的数据可以保存在两个地方，一个是web客户端（用户计算机），一个就是web服务器。在h5之前，本地存储就只有cookie一种，但如今web存储分为两种，分别对应两个javascript对象。1.sessionstorage与localStorage区别：a.本地存储：对应localStorage对象，用来长期保存网站的数据，并且站内的页面都可以访问该数据，如果用户想要删除数据的话，浏览

2017-03-17 17:30:35 553

原创进程与线程

首先，先弄明白何谓线程与进程：1.先说说概念吧。线程的上级，作业：用户在一次解决问题或事务处理中，系统所要做的所有工作的集合就叫做作业，它是由一系列有序的步骤构成的。当然，一个作业是可以会有很多个不同的进程的，它包括用户程序，所需要的数据集合控制命令等。进程：程序在处理数据集的一次运行过程，它是操作系统资源分配的基本单位。线程：是线程执行的一个实体，是被操作系统独立调度和执行的基本单位。一个

2017-03-14 20:06:46 290

原创 TCP/IP三次握手及四次挥手

三次握手：首先上个图：然后再来描述下这个过程罢！a.首先，客户端向服务器发送SYN请求（序列号X,Y为随机数），请求连接。 b.然后，服务器收到请求，向客户端发送SYN（X=X+1）,ACK响应表明自己收到请求，并且同意连接。 c.最后，客户端收到服务器端的响应后，发送ACK建立连接。连接好后，客户端与服务器便可以开始通信了。好的，以上是官方连接语言，觉得自己记不住就记下面这个：默认：A

2017-03-11 15:22:07 243

空空如也

空空如也