兜兜88的博客

转载 CSS文档流

http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html文档流即在元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，在每行中按从左到右的顺序排放元素。脱离文档流式指元素打乱了这个排列，或者是从排版中拿走。包括：浮动 和 定位。positionabsolute  脱离文档流。

转载 Javascript闭包的几种写法及用途

一、什么是闭包和闭包的几种写法和用法 1、什么是闭包 闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：　　    1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。　　    2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。　　简单的说，Javascrip

转载 webpack多页应用架构 - webpack的进阶应用

如何打造一个自定义的bootstrap？前言一般我们用bootstrap呐，都是用的从官网或github下载下来build好了的版本，千人一脸呐多没意思。当然，官网也给我们提供了自定义的工具，如下图所示，但每次要改些什么就要重新在官网上打包一份，而且还是个国外的网站，甭提有多烦躁了。那么，有没有办法让我们随时随地都能根据业务的需要来自定义bootstrap呢？答案自然是肯定的，we

转载 webpack多页应用架构 - 整合第三方工具

教练我要写ES6！webpack怎么整合Babel？前言一直以来，我对ES6都不甚感兴趣，一是因为在生产环境中使用ES5已是处处碰壁，其次则是只当这ES6是语法糖不曾重视。只是最近学习react生态，用起babel来转换jsx之余，也不免碰到诸多用上ES6的教程、案例，因此便稍作学习。这一学习，便觉得这语法糖实在是甜，忍不住尝鲜，于是记录部分自觉对自己有用的方法在此。这是我数月

转载 webpack多页应用架构 - 实战webpack

怎么打包公共代码才能避免重复？前言与单页应用相比，多页应用存在多个入口（每个页面即一个入口），每一个入口（页面）都意味着一套完整的js代码（包括业务逻辑和加载的第三方库/框架等）。在文章《webpack配置常用部分有哪些？》中，我介绍了如何配置多页应用的入口(entry)，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。你也许会说："咱们以前写页面

转载 webpack多页应用架构专题系列-一套配置吃天下

http://array_huang.coding.me/webpack-book/一步一步解决架构痛点这系列文章讲什么？本系列文章主要介绍如何用webpack这一当前流行的构建工具来设计一个多页应用的架构。请注意，本文并非新手教程，着重点更多是在于提供解决问题的思路，而非手把手带你装逼。作者介绍本人供职于某互联网物流公司，专职前端，公司虽仍处于创业阶段，但产品线已经拉

转载 用Canvas打造高强度渲染SVG

前言         早就想写这篇博客。一个原因是其中某些内容在某度的面试中遇到，比如第二部分；二是一些需求在实际工程中遇到了。一、基本概念         Canvas：HTML5新增的DOM，提供了像素级图形编程接口。支持path，不支持鼠标响应，不能绘制矢量图，依赖分辨率，文本渲染能力弱，刷新能力强。适用于图像密集型编程，如游戏。         SVG：一种使用XML描述2

转载 CSS 筛选器详解

1.为什么要研究CSS筛选器？因为想在页面中控制一个元素的样式太困难太麻烦了。使用内联CSS基本上宣布了放弃界面的可维护性；使用js修改样式，写不好的话，维护性也等同于零。而CSS样式表是原生的维护性最好的外挂，好的样式表，可以控制整站样式。更关键的是，jQuery也使用CSS筛选器来抓取DOM引用。因此，CSS筛选器，是前端攻城尸必修课之一。2.什么是筛选器？筛选器，翻译成普通话，就是一

转载 CSS 盒子模型

前端页面布局设计，盒子模型是基础中的基础。盒子模型不复杂，一张图就能说明问题。1.盒子模型示意图可以看出，倒霉IE的width=cssWidth+padding+borderWidth，这就是为啥在IE下和firefox、chrome下尺寸经常不一致。2.既然如此怎么解决呢？方法一：padding设成0，border设成0，用margin调整边距。但这种方法有一定问题，

转载 CSS position详解

1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。2.接下来，要说明的是，可以设置块的大小。3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。    A.static：这个值表示默认，让浏览器按照没有p

转载 CSS display & float详解

一、display属性　　display属性的作用是规定元素以什么方式渲染。常用的值如下：　　　　none：不被渲染　　　　block：以块级元素渲染　　　　inline：以内联元素渲染　　　　inline-block：以行内块渲染　　　　inherit：继承父级容器的渲染方式1．元素渲染类型　　浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：di

转载 JS面试题

http://blog.csdn.net/lbxx1984/article/details/481332551.难度★★★★[javascript] view plain copy function func1() {      var n = 0;      add = function () {          n++;      }

转载 JS模块化编程

1. 背景　　JS的强大已经不用解释了，从Web RIA到Node服务器，到处都是JS的身影。然而由于出身的缘故，JS本身在大规模应用上存在着很多问题，比如模块化编程。本文以浏览器端模块化编程为内容，重点介绍AMD规范和CMD规范。在服务器端，NodeJS遵守的Common规范我们这里暂不讨论。　　对于计算机语言，模块化编程是必不可少的，对架构设计、代码复用起到至关重要的作用，工程中引入别

转载 JavaScript学习树状图

转载 《JavaScript高级程序设计 第三版》学习笔记 （十三）高级函数

1.安全的原生类型检验　　js的原生类型，可以用typeof判断，但有时会失效。比如typeof array返回的不是Array，而是Object；再比如老版本IE，会将function识别为Object。另外一个判断类型的是instanceof，它能够在对象的原型链中查找构造函数，但这种方法对于原生类型的判断也会出问题，因为某些原生构造函数用户是可以覆盖的，比如Array和JSON。请看下面

转载 《JavaScript高级程序设计 第三版》学习笔记 （十二）Ajax详解

一、JSON1.使用XML在服务器和浏览器之间进行数据交换太浪费带宽，因而出现了新的数据结构JSON。JSON是包含了简单值、对象、数组的严格的JS子集，不支持变量、函数或对象实例。很多语言也有各自的JSON解析器和序列化器。2.不能将JSON写成简单的js字面量，否则只能在js中使用，而其他语言会解析不了。JSON要求严格的地方主要有：字符串值必须用双引号；对象属性必须用双引号；同一个对

转载 《JavaScript高级程序设计 第三版》学习笔记 （十一）事件详解

一、事件流1.事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。最早使用事件冒泡的是IE，现在绝大多数浏览器都使用冒泡。IE9、Firefox、Chrome、Safari都将事件冒泡到window。2.事件捕获：事件捕获是由不太具体的节点先接收事件，而最具体的节点最后接收事件。顺序与事件冒泡刚好相反。IE9、Safari、C

转载 《JavaScript高级程序设计 第三版》学习笔记 （十）DOM详解

一、节点1.节点层次（1）节点是浏览器中的基础类型，所有DOM对象都是特殊的节点，继承自node，可以使用节点自带的方法。（2）可以通过somenode.childNodes[0];somenode.childNodes.item(0);somenode.firstChild;somenode.lastChild迭代当前节点的子节点。（3）可以通过somenode.parentNo

转载 《JavaScript高级程序设计 第三版》学习笔记 （九）BOM详解

一、window对象1.作为Global（1）window有双重身份，一是js访问浏览器的一个接口，二是ECMAScript的Global对象。（2）window作为Global，在全局作用域声明的变量、函数都是window对象的属性和方法。定义全局变量和定义window属性是有区别的：定义的window属性，可以用delete删掉，这和其他对象一致；定义的全局变量则不能。还有一个区别

转载 《JavaScript高级程序设计 第三版》学习笔记 （八）块作用域及私有成员

一、模仿块级作用域1.js不像C和java一样有块级作用域。　　在C和Java中，一对大括号{}决定一个作用域，比如for循环。在js中，变量可以在函数任何一处定义，并且忽略重复定义。变量初始化之前使用，值永远是undefined。这些内容在以前已经提到了。[javascript] view plain copy //小实验  function coun

转载 《JavaScript高级程序设计 第三版》学习笔记 （七） 内存泄漏详解

一、内存泄漏1.所谓内存泄漏，是指浏览器的垃圾回收机制无法正常回收没用的DOM对象，根本原因是DOM对象的引用数大于0。2.在IE9之前的版本，IE浏览器的DOM对象和JS对象使用了不同的垃圾回收机制。这是内存泄漏的根源。3.浏览器回收DOM对象，都是查看DOM对象的引用次数是否为0。而有些时候，某个DOM对象的引用次数永远都不会变为0，哪怕是页面已经关闭了。想让内存发生泄漏，做法就是

转载 《JavaScript高级程序设计 第三版》学习笔记 （六） 函数与闭包详解

一、函数声明1.函数的声明语法：function funcName(){}。js执行前会把函数声明载入，因此可以在调用之后声明函数，不必向c语言一样先声明，再调用，然后写实现。这个学名叫“函数声明提升”。2.函数的表达式语法：var funcName=function(){}。这种方式其实是先创建一个匿名函数，然后把函数的地址传给变量。所以在调用funcName之前，必须先写好函数，不能像

转载 《JavaScript高级程序设计 第三版》学习笔记 （五） 继承详解

面向对象语言有两种继承方式：接口继承（只继承方法名）；实现继承（继承实际的方法）。但在ECMAScript中，函数名没多大含义，只是函数体的引用而已，因此，ECMAScript无法实现接口继承，只支持实现继承。实现继承，主要是依靠原型链来完成的。一、原型链1.原型链的基本思想是：利用原型让一个引用类型继承另一个引用类型的属性和方法。2.构造函数、原型、实例之间的关系（1）每个构

转载 《JavaScript高级程序设计 第三版》学习笔记 （四） 对象创建详解

一、对象1.ECMAScript把对象定义为“一组没有特定顺序的值，这些值可以是基本值、对象或函数。”我们可以把js的对象想象成散列表，每个值对应这一个key。每个对象都是基于引用类型创建的，可以是前面提到的原声引用类型，也可以是自定义引用类型。2.一个对象（实例），是它内部所有函数值（方法）的执行环境。3.对象的属性，包括两种，数据属性和访问器属性。 (1）数据属性，包括一个数据

转载 《JavaScript高级程序设计 第三版》学习笔记 （三）引用类型详解

一、引用类型1.ECMAScript从技术上讲是一门面向对象语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构。js中的对象，是某个特定引用类型的实例。新对象通过new操作符构造出来。构造函数本身也是一个普通函数，加new和不加new的运行结果完全不同。ECMAScript有很多原生的引用类型。2.Object类型（1）Object的属性，可以用点语法访问，也可以用方括号语法

转载 《JavaScript高级程序设计 第三版》学习笔记 （二）执行环境与作用域链

一、值和引用1.基础类型值：js中五个基础类型unsigned、null、number、boolean、string，这些类型的变量名代表值；把这些变量当作参数传递给函数，解析器会复制一份形参给函数当局部变量用（注意，字符串也是传的值，和其他语言出入比较大）。2.引用类型值：js的其他类型object、function、array、date(array和date都是object)等，这些类

转载 《JavaScript高级程序设计 第三版》学习笔记 （一）数据类型详解

目录(?)[-]一基本概念二脚本加载三语法四数据类型一、基本概念1.ECMAScript（1）这是一个标准，虽然是伴随js而生的，但不意味着这就是js。这是用来规定语法、类型、关键字之类信息的。（2）ActionScript也使用这个标准。js核心就是把符合这个标准的语句解析执行。2.DOM（document）（1