前端小bai-CSDN博客

原创 JavaScript之发布-订阅模式

现实生活中的发布-订阅模式不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常广泛。我们先看一下现实中的例子。小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出。开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。于是小明记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时

2017-08-13 13:11:50 1624

原创 JavaScript之兼容性事件的绑定和解除

以点击事件为例,看一下事件的绑定。绑定事件1.句柄方式div.onclick = function (e) { console.log('click');}事件可以持续监听，并不是执行完一次就失效，因此这个事件监听部分并不属于js引擎，因为js引擎是单线程的，事件监听属于内核的其他模块部分。句柄方式的兼容性很好，但是一个元素的一种事件只能绑定一个函数。2.ele.addEventL

2017-07-31 00:43:47 642

原创 JavaScript之策略模式

策略模式：定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换举个栗子假设我们要实现一个计算个人奖金数额的函数： var calcBonus = function (level, salary) { if (level === 'A') { return salary * 4; }

2017-07-19 01:29:44 401

原创 JavaScript之单例模式

单例模式定义：保证一个类只能有一个实例，并提供一个访问它的全局方法。试想一下，当我们单击登陆按钮的时候，页面会出现一个登陆框，这个登陆框是唯一的，无论单击多少次按钮都只有一个窗口，这个登陆窗口就是单例模式。惰性单例模式：惰性单例模式是指只有在需要的时候才会创建对象实例。instance实例对象总是在我们调用Single.getInstance时候才会被创建。 var Single =

2017-07-16 21:18:58 363

原创 React组件生命周期

所谓组件的生命周期就是一个组件装载，更新，卸载的过程。装载：组件第一次的加载，在这里完成组件的加载和初始化。更新：在组件运行和交互阶段完成的组件的更新。卸载：组件的消亡阶段，在这里完成一些组件的清理工作。react组件周期图装载（Mounting）getInitialState: 在组建创建加载之前调用，用来初始化组件的state(在es6语法中，初始化state用this.state = {

2017-07-11 09:57:42 137

最近在学习react，其创建组件的方式有两种，一种是基于es6语法，一种是通过React.createClass方法来创建的，由于两种方法有一些地方不同，所以导致起初写代码是有点蒙，再次总结一下两种的不同，同时本人更加推崇使用es6语法来书写。创建组件／／React.createClass形式import React from 'react'; const App = React.createCl

2017-07-09 23:59:02 391

原创 JavaScript之克隆与数组

数组数组的声明1、字面量方式 var arr = [];2、数组构造函数 var arr = new Array(1,2,3,4);console.log(arr); // 1,2,3,4注：如果在构造函数里只写一个数值，如new Array(5);这时这一个值就代表数组的长度。数组的读写不可溢出读，但是可以溢出写。var arr = [1,2];console.log(arr[3])

2017-05-07 19:00:51 331

原创 JavaScript之闭包

闭包不同作用域之间不能够相互访问，但是我们如果在一个函数内部在定义一个函数，并且这个内部函数与外部函数的变量有关联，那么就可以通过返回这个内部函数，然后来返回外部函数里面的变量，所以闭包其实就是函数内部和函数外部的一个联系。 function a () { var demo1 = 123; add = function () {

2017-05-06 23:22:37 97

原创 JavaScript之函数与作用域

函数部分1、函数声明var demo = function ()｛｝　函数表达式function demo () {} 函数声明var demo = function () {} 命名函数表达式以上就是三种函数声明的方式。2、argument和return每一个函数里面都有一个类数组属性argument，这个属性里面存的就是实参,arguments[0]就可以查看我们传递的第一个实参了

2017-05-06 22:42:11 364

原创 JavaScript之继承、this问题和对象枚举

继承1、原型链式的继承这种继承有一个缺点就是它会继承过多没有用的属性，造成大量浪费.2、借用构造函数但是这种方式有两个缺点：严格说，这种方式不属于继承，也访问不了原型的原型每次构造一个对象都要走两个构造函数，效率很低3、共享原型 Son.prototype = Foo.prototype;但是这种方法也有弊端，那就是如果向单独改变子类原型上的属性时，就会两个一起都改变了。4、圣杯模式

2017-05-04 12:18:35 412

原创 JavaScript之原型

原型1、定义原型是JavaScript中的一个重要的概念，原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象定义中提到，通过该构造函数产生的对象，可以继承该原型的属性和方法： Person.prototype.name = 'zhangsan'; Perso

2017-05-03 22:34:17 90

原创 JavaScript之对象、构造函数、包装类

创建对象的方法对象字面量构造函数Object.create（）对象字面量：var obj = {};//对象中的属性之间用逗号分隔构造函数：系统自带的构造函数var obj = new Object();//系统自带的构造函数有很多，如Number(),String(),Boolean(),Array()自定义的构造函数其中自定义的构造函数也是正常的函数，为了区分他和正常的函数，

2017-05-03 18:25:33 891

原创 JavaScript之预编译

JavaScript运行三部曲：语法分析预编译解释执行预编译前奏：1、imply global（暗示全局变量）如果任何变量未经声明就赋值使用,此变量就会成为全局对象window所有,并成为window对象的一个属性2、一切声明的全局变量，都是window的属性eg、var a = 123 ===> window.a = 123预编译四部曲创建AO(Activation Object)对象

2017-04-29 16:43:12 552

原创 JavaScript之类型转换

在说类型转换之前，先说两个个小的知识点1、在JavaScript中所有的数据都可以转换成true或者false。这里有六个值是默认为false的。undefinednull0false”NaN2、操作符typeof可以检测数据的类型，其返回值一共有六种：boolean, object, string, number, undefined, function数组和null类型的都属于ob

2017-04-27 14:41:12 360

原创 HTML4(二)

上一篇介绍了html是什么和一些简单的html标签，最后简单的介绍了一下通常作为容器使用的span和div标签。div中其实还有一些问题，比如我现在为div标签加一些样式和文字；<html> <head> <meta charset="utf-8"> <title>前端真好玩</title> </head> <body> <di

2017-04-27 11:54:57 362

原创 HTML4(一)

HTML全名：HyperText markup language.中文名叫超文本标记语言。html是由一对一对的标签组成，每一对标签都有他特定的功能，而每一对标签又分头标签的尾标签<html></html>例如上边就是一对最简单的标签,又称为html的根标签，就是以后写代码只能在这里面书写，不能写到外面！在<html></html>标签里面有两个必须有的结构化标签 <head></head>和<

2017-04-27 11:54:35 374

原创 CSS2.0盒模型与层模型

盒子模型一个元素由四个部分组成margin,border,padding,content,分别是外边距，边框，内边距，内容区，content不是由属性构成的，而是由width和height构成的。margin：它设置这个元素距离外面靠近它的其他元素或浏览器的距离，这是一个复合属性由margin-top, margin-right, margin-bottom, margin-left组成，

2017-04-27 11:53:57 419

原创 css2.0选择器及文字样式

什么是CSS？css全称为cascading style sheet层叠样式表，他的主要作用就是为html标签添加各种各样的样式。引入方式1.行间样式：直接在html标签里面写style标签=========================================== 2.页面级css：在head标签中添加一个style标签<style type="text/css"></style>

2017-04-27 11:53:22 203

原创 JavaScript简介与基本语法

JavaScript要知道的是JavaScript与Java并没有一点的关系，只不过是名字有点相似而已，这是两种不同的编程语言。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能Ja

2017-04-26 23:11:41 819

原创 margin塌陷问题与合并问题

margin塌陷问题与合并问题margin塌陷问题和合并问题都只对垂直方向有效margin塌陷问题这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题。mar

2017-04-25 21:01:31 3850

原创高性能JavaScript 重绘与重排

本篇介绍一下JavaScript DOM可能是最耗时间的重绘和重排问题。浏览器下载完页面中的所有组件——HTML标记，JavaScript，CSS，图片之后会解析并生成两个内部数据结构：DOM树、渲染树。重排：当DOM元素的变化影响了元素的几何属性（宽、高等）——比如改变边框宽度或给段落增加文字，导致行数增加，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性也会受到影响。浏览器会重新构造

2017-04-20 21:18:51 1433

原创 canvas实现刮刮卡

效果图canvas上下文对象的globalCompositeOperation属性：刮刮卡功能主要是使用这个值的设置来实现的，之前介绍过globalCompositeOperation属性共有11种值，详细介绍可以访问HTML 5 Canvas 参考手册这里简单的对11种值做一下截图：他这里写的源对象可以理解为后加上去的图形，就是在原有图形上后添加的图形。刮刮卡功能的实现就是使用ctx.glob

2017-04-19 22:04:24 920

原创 canvas实现高斯模糊

对于模糊图片这个效果的实现，其实css3中的filter属性也能够实现，但是这个属性的兼容性不是很好，所以我们通常不用这种方法实现，而使用canvas配合JS实现。高斯模糊就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。局部模糊效果图gauss.js代码function gaussBlur(imgD

2017-04-19 14:32:14 9280 1

原创 HTML5-canvas

什么是canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JS)来完成. <canvas> 标签只是图形容器，必须使用脚本来绘制图形浏览器支持情况如何使用canvas？添加canvas标签获得canavs元素（可以理解为画布）获得canvas上下⽂文对象（可以理解为画笔） <canvas width="500" height="500" id="canv

2017-04-19 10:12:49 564

Sunshineanl的博客