随笔档案「2016年1月27日」：定义换页时表现 ... - 迷茫小飞侠

定义换页时表现

摘要： widows = minimum number of lines in a paragraph split on the new page.orphans = minimum number of lines in a paragraph split on the old page. 换页的时候，当文阅读全文

posted @ 2016-01-27 17:47 迷茫小飞侠阅读(109) 评论(0) 推荐(0)

判断一个对象是否为空

摘要： zepto的源码 $.isEmptyObject = function(obj) { var name for (name in obj) return false return true } for (name in obj) return false 只有当对象里面有属性的时候才会return 阅读全文

posted @ 2016-01-27 17:46 迷茫小飞侠阅读(142) 评论(0) 推荐(0)

内存管理内存泄漏

摘要：垃圾回收机制是周期性的，按照特定的周期循环，或者按照预先定义的时间执行最流行的回收机制是mark-and-sweep 当一个变量进入当前上下文，那么会被标示为在上下文中，内存不会被释放，当他离开会被标示为不在上下文，当垃圾回收机制运行的时候，它会首先记录内存里的所有变量，然后将那些在上下文中和被在阅读全文

posted @ 2016-01-27 17:45 迷茫小飞侠阅读(158) 评论(0) 推荐(0)

arguments对象

摘要：改变函数arguments也会改变对应的参数，arguments会自动映射到对应的参数上但是改变参数并不会同步改变arguments 它们并不公用内存在strict模式，不能对arguments付值，也不能覆盖arguments的值 arguments都是通过值来传递，不可能传入引用阅读全文

posted @ 2016-01-27 17:44 迷茫小飞侠阅读(154) 评论(0) 推荐(0)

String类型

摘要： String字符串的length属性返回的是该字符串里面16位字符的数量，如果字符串包含double-byte的字符，那么返回的数量可能不对字符串一旦创建就修改不了 var lang = “Java”; lang = lang + “Script”; 第二行没有修改，而是新建一个字符串，把那两个放阅读全文

posted @ 2016-01-27 17:42 迷茫小飞侠阅读(178) 评论(0) 推荐(0)

对象实例

摘要：每个对象都含有以下属性方法 - ➤ constructor — The function that was used to create the object. - ➤ hasOwnProperty(propertyName) — Indicates if the given property ex 阅读全文

posted @ 2016-01-27 17:42 迷茫小飞侠阅读(147) 评论(0) 推荐(0)

定制滚动条样式 webkit

摘要： ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ 阅读全文

posted @ 2016-01-27 17:41 迷茫小飞侠阅读(157) 评论(0) 推荐(0)

instanceof 原理

摘要：运行流程 function instance_of(L, R) { //L 表示左表达式，R 表示右表达式 var O = R.prototype; // 取 R 的显式原型（后面的对象只取显式原型prototype） L = L.__proto__; // 取 L 的隐式原型(判断的对象取__pr 阅读全文

posted @ 2016-01-27 17:41 迷茫小飞侠阅读(202) 评论(0) 推荐(0)

<template> 标签

摘要： <template> 元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可以在后续进行动态实例化。（它们是用来放置一大团 HTML 的地方，就是那些你不想让浏览器弄乱的标记...不管它是出于什么理由。）特性检阅读全文

posted @ 2016-01-27 17:40 迷茫小飞侠阅读(1987) 评论(0) 推荐(0)

动画优化

摘要：在页面做动画效果主要方式 1 CSS 2D/3D transforms and translate() （做动画的三个属性：transition，animation/keyframe） 2 position:absolute and top/left 使用top/left来做动画的时候，所有CSS样阅读全文

posted @ 2016-01-27 17:39 迷茫小飞侠阅读(308) 评论(0) 推荐(0)

选择器

摘要：空格：$('parent childchild')表示获取parent下的所有的childchild节点，所有的子孙。大于号：$('parent>child')表示获取parent下的所有child的儿子，第一代。加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节阅读全文

posted @ 2016-01-27 17:39 迷茫小飞侠阅读(102) 评论(0) 推荐(0)

shadow dom 隔离代码封装

摘要： Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。 Shadow DOM 解决了 DOM 树的封装问题。有了 Shadow DOM，元素就可以和一个新类型的节点关联。这个新类型的节点称为 shadow root。与阅读全文

posted @ 2016-01-27 17:39 迷茫小飞侠阅读(689) 评论(0) 推荐(0)

display:none，float小秘密

摘要：一个元素不管是块元素还是行内元素在添加了 display:none 之后，就变成了不可见的块元素，可以给他添加长度和高度在float之后内联元素也会隐性成为 inline-block 元素阅读全文

posted @ 2016-01-27 17:04 迷茫小飞侠阅读(263) 评论(0) 推荐(0)

调试内存泄露

摘要：打开调试面板操作会导致内从泄露的行为 Perform an action in your page that makes a leak Take a new heap snaphot Repeat steps 2 and 3 three times Select the latest heap s 阅读全文

posted @ 2016-01-27 17:03 迷茫小飞侠阅读(248) 评论(0) 推荐(0)

backface-visibility 3D修复

摘要： backface-visibility 是作用于 3D transform 时候默认是 backface-visibility: hidden; 当一个元素3D变换的时候，会立即看到背面的内容，有时候会影响效果设为 backface-visibility: hidden 就不会在3D动画效果时看阅读全文

posted @ 2016-01-27 17:03 迷茫小飞侠阅读(363) 评论(0) 推荐(0)

Chrome DevTools 开发者工具技巧调试

摘要： https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks 1、console面板多行输入 Shift + Enter 可以换行，而不是执行代码 2、Ctrl + Shift + C 可以直接进入审查元素的模式阅读全文

posted @ 2016-01-27 17:01 迷茫小飞侠阅读(427) 评论(0) 推荐(0)

display：table 表格布局

摘要： table 布局最大的特点 1、同行等高 2、宽度自动调节那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是dis 阅读全文

posted @ 2016-01-27 16:46 迷茫小飞侠阅读(2740) 评论(0) 推荐(0)

display: run-in

摘要： If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of t 阅读全文

posted @ 2016-01-27 16:46 迷茫小飞侠阅读(529) 评论(0) 推荐(0)

连续字符换行溢出点点点多行省略

摘要：让连续的英文数字字符换行显示 word-break: break-all; 让单行文字超出的时候使用点点点表示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（移动开发浏览器支持良好） WebKit可以让多行文字点点点（阅读全文

posted @ 2016-01-27 16:44 迷茫小飞侠阅读(494) 评论(0) 推荐(0)

Number 类型

摘要： Javascript使用IEEE -754格式存储整型和浮点型(有些语言称为双精度) 因为这种存储格式，所以javascript中有正的0和负的0 整型也可以存储八进制和十六制八进制第一个数为0，后面跟着的数如果大于八，会自动转化为十进制 078 将会被解释为78 在strict mode里面八进阅读全文

posted @ 2016-01-27 16:43 迷茫小飞侠阅读(227) 评论(0) 推荐(0)

Boolean 相关

摘要： Boolean(something) 会把里面的变量转化为布尔型当我们用if(something）判断的时候，相当于调用了这个函数转化规则如下 DATA TYPE VALUES CONVERTED TO TRUE VALUES CONVERTED TO FALSE Boolean true fa 阅读全文

posted @ 2016-01-27 16:42 迷茫小飞侠阅读(114) 评论(0) 推荐(0)

Browsing contexts 浏览器上下文

摘要：浏览上下文就是document object 呈现给用户的所在的环境每一个标签或者窗口都包含一个浏览器上下文，包括iframe frames 每一个browsing context都有一个对应的WindowProxy对象每一个浏览上下文有一个session history，在这上面列出了已经被呈阅读全文

posted @ 2016-01-27 16:26 迷茫小飞侠阅读(1185) 评论(0) 推荐(0)

return flase 作用

摘要：调用return false的时候，他实际上做了三件事 event.preventDefault(); 禁止默认行为 event.stopPropagation(); 阻止冒泡停止回调函数执行并立即返回。阅读全文

posted @ 2016-01-27 16:24 迷茫小飞侠阅读(237) 评论(0) 推荐(0)

JS外链

摘要： <script type=”text/javascript” src=”example.js”></script> 外链的javascript都有一个.js的后缀，但是这并不是必须的，浏览器不会去检查后缀它的意义是让后台的脚本可以动态的生成js代码但是注意虽然服务器会通过文件拓展名来决定用那种m 阅读全文

posted @ 2016-01-27 16:15 迷茫小飞侠阅读(1156) 评论(0) 推荐(0)

json

摘要： Json是javasscript的子集，但它是独立的，能够被各种现代编程语言用于交换数据，是一种数据格式 string字符串只能用双引号包裹，单引号会出现错误。 JSON对象和数组： { “name”: “Nicholas”, “age”: 29, “school”: { “name”: “Merr 阅读全文

posted @ 2016-01-27 16:06 迷茫小飞侠阅读(175) 评论(0) 推荐(0)

javascript 备忘

摘要： javascript虽然还没有类的概念，他仍然有两种数据类型，原始基本类型和引用类型原始类型的数据保存为简单值，交互时可以直接访问变量里的数值本身，五种基本类型引用类型保存为对象，javascript不允许直接访问内存位置，所以不能直接访问到对象的内存位置，因此操作对象时是对该对象的引用进行操作阅读全文

posted @ 2016-01-27 15:00 迷茫小飞侠阅读(107) 评论(0) 推荐(0)

:after伪类+content内容生成

摘要： :after伪类+content 清除浮动的影响浮动元素会让此div的高度塌陷。如下例子： .box{padding:10px; background:gray;} .l{float:left;} <div class="box fix"> <img class="l" src="http://i 阅读全文

posted @ 2016-01-27 14:59 迷茫小飞侠阅读(458) 评论(0) 推荐(0)

无JavaScript实现选项卡轮转切换效果

摘要： CSS:.box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; height:100px; line-height:100px; background:#ddd; font-... 阅读全文

posted @ 2016-01-27 14:36 迷茫小飞侠阅读(116) 评论(0) 推荐(0)

margin负值的相关应用

摘要： 1.页面上实现css sprite背景定位效果其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的，而差别就在于background-position会自动让区域外的图片部分不显示，所以我们要做的很简单，就是给ma... 阅读全文

posted @ 2016-01-27 14:32 迷茫小飞侠阅读(150) 评论(0) 推荐(0)

absolute元素 text-align属性

摘要： text-align属性的元素可以有效作用于inline/inline-block水平的子元素，但是，text-align属性对应用了position:absloute/fixed声明的元素无效！没有应用left/top等属性值的absolute元素就是个不占据空间的普通元素，如果是block水平的... 阅读全文

posted @ 2016-01-27 14:31 迷茫小飞侠阅读(332) 评论(0) 推荐(0)

绝对定位元素的水平垂直居中

摘要：方法一:.element {width: 600px; height: 400px;position: absolute; left: 50%; top: 50%;margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ }这种... 阅读全文

posted @ 2016-01-27 14:30 迷茫小飞侠阅读(134) 评论(0) 推荐(0)

flex 布局

摘要： Flex Layout 的目的是为了提供一种高效的方式去为一个容器里面元素布局，对齐，分配空间，即使他们的大小尺寸是未知的，或者是动态变化的父容器有能力修改里面子元素的宽度和高度从而更好的分配空间。更重要的是flexbox布局方向可以灵活变化，比较适合小范围的布局，grid比较适合大范围的布局要想f... 阅读全文

posted @ 2016-01-27 14:29 迷茫小飞侠阅读(266) 评论(0) 推荐(0)

网页头部 lang的声明

摘要： 1. 简体中文页面：html lang=zh-cmn-Hans2. 繁体中文页面：html lang=zh-cmn-Hant3. 英语页面：html lang=en4. 《回来》的音频，以国语演唱：audio lang=zh-cmn5. 《海阔天空》的音频，以粤语演唱：audio lang=yue6... 阅读全文

posted @ 2016-01-27 14:24 迷茫小飞侠阅读(208) 评论(0) 推荐(0)

两栏自适应布局

摘要：第一种方法，采用左列 left 浮动，右列不浮动，采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外，当浏览器框缩小到一定程度时，右侧会掉下来。#left{width:100px;height:100px;border:2pxsolid#333;float:l... 阅读全文

posted @ 2016-01-27 14:22 迷茫小飞侠阅读(140) 评论(0) 推荐(0)

三栏宽度自适应布局

摘要： 1 绝对定位实现2 margin负值实现 3 浮动法http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%B... 阅读全文

posted @ 2016-01-27 14:21 迷茫小飞侠阅读(183) 评论(0) 推荐(0)

font-size:100% 原因

摘要： The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the ... 阅读全文

posted @ 2016-01-27 14:18 迷茫小飞侠阅读(312) 评论(0) 推荐(0)

http 状态

摘要：用户如果向您的服务器发出了某项请求要求显示您网站上的某个网页（例如，当用户通过浏览器访问您的网页或在 Googlebot 抓取该网页时），那么，您的服务器会返回 HTTP 状态代码以响应该请求。此状态代码提供该请求状态的相关信息，并向 Googlebot 提供有关您网站和请求的网页的信息。您还可以阅读全文

posted @ 2016-01-27 14:16 迷茫小飞侠阅读(240) 评论(0) 推荐(0)

私有成员 ECMAScript6 weakmap

摘要：把变量放到构造函数里进行私有化，每一个实例都会有一个getName方法，这是低效率的。function Person(name) { this.getName = function() { return name; };}改进，把私有成员数据存到实例上去（把实例保存起来，分... 阅读全文

posted @ 2016-01-27 14:15 迷茫小飞侠阅读(209) 评论(0) 推荐(0)

eval

摘要： eval 运行代码时会生成作用域可计算某个字符串，并执行其中的的 JavaScript 代码。var a = "test" , b = "a";eval(b);会输出test当运行eval(src)的时候，是在调用eval方法的scope里面执行src代码，那么如果需要src运行到全局scope... 阅读全文

posted @ 2016-01-27 14:12 迷茫小飞侠阅读(171) 评论(0) 推荐(0)

scrollWidth,clientWidth,offsetWiddth,innerWinth 元素定位

摘要： getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。通用的获得元素相对于viewPort的函数,一直向上遍历父元素（因为有些浏览器不支持g... 阅读全文

posted @ 2016-01-27 14:08 迷茫小飞侠阅读(138) 评论(0) 推荐(0)

document.compatMode

摘要： document.compatMode 获得文档模式，IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别两种模式：当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；当docum... 阅读全文

posted @ 2016-01-27 14:07 迷茫小飞侠阅读(130) 评论(0) 推荐(0)

位运算符

摘要：位运算符是在数字底层（即表示数字的 32 个数位）进行操作的。位运算 NOT 由否定号（~）表示：位运算 NOT 是三步的处理过程：把运算数转换成 32 位数字把二进制数转换成它的二进制反码把二进制数转换成浮点数位运算 AND 由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对... 阅读全文

posted @ 2016-01-27 13:52 迷茫小飞侠阅读(283) 评论(0) 推荐(0)

null transform hack 强制使用硬件加速

摘要： -webkit-transform: translateZ(0);-webkit-transform: translate3d(0,0,0);作用：1、切换到硬件合成模式，通常所有事情都CPU完成，硬件影像合成模式会将指定元素传给GPU 处理2、创建一个新的图层，带有自己的backing surfa... 阅读全文

posted @ 2016-01-27 13:47 迷茫小飞侠阅读(353) 评论(0) 推荐(0)

高效动画

摘要：现代浏览器在完成以下四种属性的动画时，消耗成本较低： position（位置）， scale（比例缩放）, rotation（旋转）和 opacity（透明度）。如果你对其他的属性设置动画，你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps。浏览器处理的步骤，自上而下执行因此为了达到... 阅读全文

posted @ 2016-01-27 13:45 迷茫小飞侠阅读(170) 评论(0) 推荐(0)

异步编程的4种方法

摘要： Javascript语言的执行环境是"单线程"（single thread）一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的... 阅读全文

posted @ 2016-01-27 13:42 迷茫小飞侠阅读(3473) 评论(0) 推荐(0)

touchmove Bug 工作遇到

摘要： touchmove在安卓浏览器上只会触发一次，需要preventDefault()touchmove events in Android web browsers have a really serious bug. If you don't include the following code, ... 阅读全文

posted @ 2016-01-27 13:34 迷茫小飞侠阅读(373) 评论(0) 推荐(0)

集合类型

摘要： Array 只允许数字索引，所以当要使用非数字索引时，得用 objectECMAScript 6 引入了新的集合类型1、Sets 不能含有重复值得有序列表var items = new Set();items.add(5);items.add("5");console.log(items.siz... 阅读全文

posted @ 2016-01-27 13:33 迷茫小飞侠阅读(154) 评论(0) 推荐(0)

提取URL的搜索字符串中的参数

摘要： function urlArgs(){var args = {};var query = location.search.substring(1);if(query){ if(query.indexOf('=') == -1){ alert('参数形式错误'); return fa... 阅读全文

posted @ 2016-01-27 13:31 迷茫小飞侠阅读(189) 评论(0) 推荐(0)

本地对象、内置对象、宿主对象

摘要： ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、Refer... 阅读全文

posted @ 2016-01-27 13:29 迷茫小飞侠阅读(168) 评论(0) 推荐(0)

声明函数执行上下文匿名函数

摘要：方法一：var foo = function () {//code}方法二：function foo () {//code}方法一：foo在进入函数执行上下文开始执行代码的时候，foo是undefined的，执行完var foo = function () { }这句，foo才会得到赋值；方法二：在... 阅读全文

posted @ 2016-01-27 13:28 迷茫小飞侠阅读(321) 评论(0) 推荐(0)

完善tab页面定位

摘要：当我们用锚点定位到页面某个元素时，接下来按tab的话是想进入到目前元素（id="content"）的下一个连接Skip to Content 但是chrome 和 ie 有问题，按tab是选中 skip to Content之后的那个连接，修复方法就是在定位之后选中 content，通过修改 ... 阅读全文

posted @ 2016-01-27 11:54 迷茫小飞侠阅读(750) 评论(0) 推荐(0)

取得 iframe 容器的 URL

摘要：检测所在窗口是否为最外层的窗口,若不是则跳脱包含它的框架if( window !== window.top ) { window.top.location = location;}top 对象指向最外层，浏览器窗口本身，self 总是等于window当Iframe page和 containing ... 阅读全文

posted @ 2016-01-27 11:51 迷茫小飞侠阅读(1127) 评论(0) 推荐(0)

可点击的icon按钮无障碍 ARIA 可访问性

摘要：最简单： <input type="image" src="email.png" width="14" height="14" alt="Email"> 使用 css sprites的话： <style> .email-btn { width: 14px; height: 14px; backgro 阅读全文

posted @ 2016-01-27 11:51 迷茫小飞侠阅读(419) 评论(0) 推荐(0)

setImmediate()

摘要：在循环事件任务完成后马上运行指定代码以前使用 setTimeout(fn, 0);Since browsers clamp their timers to 4ms, it really doesn’t matter if you say 0, 1, 2, 3, or 4计时器间隔至少为 4毫秒，所... 阅读全文

posted @ 2016-01-27 10:46 迷茫小飞侠阅读(2675) 评论(0) 推荐(0)

seajs源码

摘要： /*** Sea.js 3.0.0 | seajs.org/LICENSE.md 中文注释由李祥威添加，为个人对细节的理解，官方解释很详细的地方就不说了难免有错漏，联系我： [email protected]*/(function(global, undefined) {//... 阅读全文

posted @ 2016-01-27 10:34 迷茫小飞侠阅读(202) 评论(0) 推荐(0)

zepto源码

摘要： /** * * ┏┓ ┏┓ * ┏┛┻━━━┛┻┓ * ┃ ┃ * ┃ ━ ┃ * ┃　┳┛　┗┳　┃ * ┃ ┃ * ┃ ┻ ┃ * ┃ ┃ * ┗━┓ ┏━┛Code is far away fro... 阅读全文

posted @ 2016-01-27 10:32 迷茫小飞侠阅读(750) 评论(0) 推荐(1)

对象作为 handleEvent

摘要： elem.addEventListener("click", obj, false); //用对象作为处理函数var obj = { handleEvent: function(event) { ....... }}会自动运行 handleEvent 这个方法阅读全文

posted @ 2016-01-27 10:27 迷茫小飞侠阅读(155) 评论(0) 推荐(0)

Module模式

摘要：匿名函数闭包(function () { // ... all vars and functions are in this scope only // still maintains access to all globals}()); 注意在匿名函数外面的括号。这是由于在JavaS... 阅读全文

posted @ 2016-01-27 10:26 迷茫小飞侠阅读(178) 评论(0) 推荐(0)

arrow functions 箭头函数

摘要： ES6里新增加的，与普通方法不同的地方1、this 的对象在定义函数的时候确定了，而不是在使用的时候才决定2、不可以使用 new ，也就不能当构造函数3、this 的值一旦确定无法修改在 ES5 下，定制sort比较函数：var result = values.sort(function(a, b)... 阅读全文

posted @ 2016-01-27 10:23 迷茫小飞侠阅读(155) 评论(0) 推荐(0)

导航