自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 vue for webapp 中的总结&&填坑

GitHub:https://github.com/liu9183/vue-for-sellApp

2017-04-26 15:18:47 4220

原创 js观察者模式

定义:观察者模式又叫做发布/订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,被观察者(主题)和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主题,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。实现: /* * 被观察者

2017-09-29 19:31:34 362 1

原创 图片预加载插件开发小记

面向对象组件开发前端进阶不可或缺的一步,复用思想也是前端模块化的重要推动力图片预加载在大批量图片加载的同时保证用户体验方面作用明显,浅显尝试,以此为记插件封装(preLoad.js)(function($) { function PreLoad(imgs, options) { this.imgs = imgs; this.opts = $.extend({}, Pre

2017-08-16 15:35:28 500

原创 ES6箭头函数中的this绑定问题

关于this指向问题的讨论一直是学习js不可忽视的重要部分,那些一个又一个围绕this挖的笔试坑,仿佛永远也填不完var obj={ fn:function(){ console.log(this); }}obj.fn();//object以上这段代码是再浅显不过的this指向问题,也就是谁调用的函数,函数体中的this就指向谁再看下面这段var obj={ fn:fun

2017-06-13 16:15:40 18863 8

转载 javascript到底是不是单线程?

JavaScript官方给出的答案是肯定的,它是单线程那为什么还会有ajax异步发送和回调请求呢,而且serTimeout看起来也像是多线程的结果啊?看这段代码function foo(){ console.log(1); setTimeout(function(){ console.log(2) },5) } for(var i=0;i<

2017-05-26 16:27:01 517

原创 node.js Express框架学习笔记

简介

2017-05-24 15:43:24 811

原创 解析url的查询部分,生成对应的JSON对象

我们知道在于服务器交互过程中,get和post是最重要的两种方式,在get方式下,我们通常会见到一大串网址信息,而这些信息是什么呢,有时候我们需要拿到它并进行分析好了,我百度主页输入CSDN,搜索结果呈现给我们后,网址栏出现如下一串东西https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=csdn&rsv_p

2017-05-21 20:59:53 1565

原创 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等本次我才用jQuery实现一个尽可能高效的拖拽效果,代码中有细节上的解释,就不多说了,代码很简洁                                                *{

2017-05-21 16:10:49 16352 2

原创 js修炼——手写全屏滚动插件

全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维。如下效果:

2017-05-17 14:22:13 760

原创 手写jQuery框架

功能的实现只是机械地调用,框架的编写才是代码的升华

2017-05-16 15:10:52 1236

原创 tcp三次握手及其必要性

TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,如下图所示。主机A为客户机,主机B为服务器确认号:其数值等于发送方的发送序号 +1(即接收方期望接收的下一个序列号)。说明:(1)第一次握手:建立连接时,客户端A发送SYN包(SYN=j)到服务器B,并进入SYN_SEND状态,等待服务器B确认。(2)第二次握手:服务器B收到SY

2017-05-15 14:36:12 10896 7

原创 js修炼——函数

很多技术从业者对技术水平的评价是代码的实现能力,形而上一点,我认为技术工作和足球运动(本人巴萨球迷,最爱内马尔)是一样的,最重要的是思想意识,古往今来,各行各业的大师讲究的是内功深厚,说的有些玄学的味了,总之,我薄如白纸,我需要修炼。1.声明还是表达式我们经常会看到函数定义的两种情况 function clc(num){//函数声明,定义未执行 return

2017-05-13 15:31:10 454

原创 web storage

介绍在html4及以前,在客户端存储用户数据(包括个人信息,浏览痕迹等),依赖的是cookie,而cookie有其天生的劣势,导致有些情况不能满足需求或者影响用户体验。cookie的劣势体现在以下方面:1.cookie的大小限制在4KB,不适合大量数据存储2.浏览器还限制站点可以在用户计算机上存储的cookie的数量3.cookie是随HTTP事务一起被发送的,因此会浪费一

2017-05-12 21:59:56 398

原创 学习jQuery插件开发

前端开发免不了使用形形色色的插件,读过用过还是不够深刻,一直想拿出时间专门理一理开发插件的大体思路,终于落实了规则就像是文化,各行各业中都有约定俗称的办事套路,jQuery插件开发也是这样,来看最基本的结构;(function($){ //分号是为了跟其他开发者合并代码时不至于出现语法错误,加上是好习惯 $.fn.plugin=function(options){

2017-05-08 14:54:38 705

原创 js常用的继承方式

1.原型链继承不考虑函数参数的情况下,我这样写 function Animal(){ this.family=['father','mother']; this.age=12; } function Cat(){} Cat.prototype=new A

2017-05-06 14:08:33 280

原创 js正则表达式

在了解正则表达式之前,我们有必要了解一下传统js操作字符串的方法,包括search(),substring(),charAt()以及split()等等,具体使用方法可查阅参考文档,而传统方法针对某些特定要求对字符串进行处理时比较繁琐,下面看一个例子:要求将字符串:ds,4r dh6y 77 r8 jds 339t中的数字取出,传统方法操作如下:

2017-05-06 12:07:34 261

原创 flex弹性布局

前段时间在刷网页的时候偶然看到一个面试题,大体是这么说的,定义一个父元素和子元素,其宽高都不确定(也就是是动态变化的),如何实现子元素在父元素中上下左右居中。好家伙,我琢磨了一下,不给宽高是个坑啊,简单的html+css很难实现,我随即想到了js,js可以通过clientWidth和clientHeight获取元素宽高啊,我随手写了一段代码: .parent{

2017-04-01 17:50:09 1358

原创 webpack处理css

在神奇的babel中我们提到了babel-loder的使用,那么webpack声称可以处理任何类型的文件,css该怎么处理呢,好,我们来走一遍首先介绍下style-loader和css-loader,因为处理css文件之前必须要安装这两个模块,至于这俩是从哪冒出来的,请看点击打开链接,这里详细介绍了各种loader的使用场景。npm install css-loader style-l

2017-03-29 14:57:39 5872

原创 神奇的babel

2015年,ECMA推出es6,在es5的基础上添加了各种人性化开发的新特性,详见es2015让人头疼的是当下主流浏览器的JS引擎并不识别es6语法,所以我们需要将es6的语法翻译成es5的形式再提交给js引擎执行。那有没有好的工具来实现两种标准之间的转换呢,有,babel。好,既然用到babel,那么第一步肯定要在项目中安装babel。安装的方法可参照点击打开链接npm

2017-03-28 17:36:42 571

原创 amd模块定义模式

谈及前端模块化,自然会想到AMD(异步模块定义)和CMD(通用模块定义),这里我着重谈一下AMD的相关内容AMD的整体目标是提供模块化的JavaScript解决方案,以便开发人员使用。关于AMD有两个关键概念是值得我们注意的,它们是用于模块定义的define方法和用于处理依赖加载的require方法。使用以下方式,define用于定义已命名或未命名模块。define( module_

2017-03-27 12:45:25 3672 1

原创 进阶webpack

在初识webpack 中提到了webpack的基本配置和使用,接下来将进一步学习webpack在项目中的使用。一.webpack生成简单的HTML页面前面提到将需要打包的js文件打包成bundle.js后,需要在index.html中引入此时如果我们将bundle.js换成a.js呢,也就是改变打包后输出文件的名称,那么只有一个办法,那就是到index.html中手动修改scrip

2017-03-24 16:33:52 236

原创 初识webpack

第一次接触webpack,记录最简单的使用规范,加强记忆以备后用。搭建webpack项目大致分为如下几步:首先在本地建立一个工程,本次我在D盘建立webpackDemo。进入工程目录后使用npm init命令进行初始化,生成package.json文件第三步在工程目录下安装webpack,使用命令npm install webpack --save-dev等待安

2017-03-23 12:13:31 295

转载 理解html语义化

1、什么是HTML语义化?  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;有利于SEO:和搜索引擎建立良好沟通

2017-02-28 18:38:55 385 2

原创 归并排序

归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用,归并排序将两个已排序的表合并成一个表。归并排序的操作核心是递归分割而后逐步合并,看下图假设待排数组为{14,12,15,13,11,16}1.分割的过程是要将数组逐层分成单个数字(单个数字构成的数组一定是有序的)2.合并前首先要新建一个数组,用来存放合并并

2017-02-28 12:25:04 232

转载 js创建对象的三种基本方式

1.使用内置对象JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String、Object、Function等; 2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。var str = new String("实例初始化String");var str1 = "直接赋值的

2017-02-24 16:10:05 687

原创 浏览器缓存机制——http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步:◆判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则

2017-02-23 16:11:36 448

原创 JS浅拷贝和深拷贝详解

简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存,采用深拷贝的情况下,释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误!在js中,对于非基本类型数据(普通对象或数组),浅拷贝只是拷贝了内存地址,子类属性指向父类属性的内存地址,而子类修改后父类也会被修改看程序

2017-02-21 19:19:58 1691

原创 ab服务器暴力测试

说道web服务器性能指标,不得不提Apache下的ab.exe,向服务器短时间大批量发送请求是检验服务器性能的绝佳方式ab.exe存在于Apache安装目录下的bin文件夹中,本人用的是wampserver,ab.exe的路径是E:\wampserver\wamp\bin\apache\apache2.4.9\bin方便起见,可以将此路径配置到环境变量中,方便命令行读取首先介绍一下测试

2017-02-20 20:36:41 480

原创 学会使用requireJS

学习requireJS的中文网站——RequireJS中文网百科:requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系。RequireJS的目标是鼓励代码的模块化,它使用了不同于传统标签的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。总结百科上的

2017-02-20 11:42:33 409

原创 我认识的ES6

ES6——ECMAScript6,由ECMA组织制定标准,是ECMAScript的最新版本。最常用的ES6特性let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments1.let,const这两个的用途与var类似,都是用来

2017-02-19 15:25:58 302

原创 函数声明与函数表达式以及立即执行函数的讨论

函数声明的定义:function fn(){……},使用function关键字声明一个函数,再指定一个函数名,叫函数声明。函数表达式:var fn=function(){……},使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。匿名函数:function(){……},使用function关键字声明一个函数,

2017-02-18 12:17:37 2237

转载 url组成部分详解

就以下面这个URL为例,介绍下普通URL的各部分组成http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name从上面的URL可以看出,一个完整的URL包括以下几部分:1.协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,

2017-02-15 13:48:07 18058

原创 AJAX

ajax是什么?参考百科给出的解释:AJAX即“Asynchronous JavascriptAnd XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网

2017-01-06 14:35:55 263

原创 用JSONP解决ajax跨域问题

JSONP:JSON With Padding要点:1.script标签2.用script标签加载资源是没有跨域问题的概要:在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函数里面利用这个参数做一些事情。然后在需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会执行我们前面定义好的函数,并且把我们想拿到的数据当做这个函数

2017-01-05 16:03:31 287

转载 Javascript插件开发导读

为什么要做javascript插件开发?     这个应该是一个必然。因为需要跨时间、空间不同开发人员的协作,代码的重用。具体也就不多说了。     js开发小白一般怎么开发程序?我记得我刚入行是这么写的:    Js代码  var a = 1;  var b = 2;    function add(aaa, bbb

2016-12-29 21:33:56 299

原创 JavaScript事件机制

一、事件处理1.事件绑定 事件绑定是一个比较通俗也比较常用的概念,为某元素添加鼠标点击事件就是最常见的事件绑定 2.事件监听(1)普通的事件指定方法(单事件监听)<body> <div id="e"> test </div></body><script type="text/javascript"> window.o

2016-12-29 20:52:57 240

转载 cookie和session的区别详解

二者的定义:当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来。当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie里的内容来判断使用者,送出特定的网页内容给你。 Cookie 的使用很普遍,许多有提供个人化服务的网站,都是利用 Cooki

2016-12-20 16:31:25 158

转载 Apache和Tomcat的区别与联系

Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML、PHP、JSP、Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置。    Apache是web服务器(静态解析,如HTML),tomcat是java应用服务器(动态解析,如JSP、PHP)  Tomcat只是一个servlet(jsp也翻译成servlet)容器,可以认为是

2016-12-10 16:09:50 216

原创 A*带你踏上快车道

A*(A-Star)算法是一种静态路网中求解最短路最有效的直接搜索方法,也是许多其他问题的常用启发式算法。公式表示为: f(n)=g(n)+h(n),其中 f(n) 是从初始节点经由节点n到目标节点的代价估计,g(n) 是在节点空间中从初始节点到节点n的实际代价,h(n) 是从节点n到目标节点的最佳路径的估计代价。帮助理解A*算法的文章:A*算法原理

2016-11-28 12:01:00 362

原创 js闭包

学习js,闭包一直是反复讨论的问题,这里,我就根据自己的所见及理解,讨论与闭包有关的东西function f(){ var a=2; function m(){ console.log(a) } m(); } f();js中经常出现这

2016-11-23 15:34:10 324 1

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