2017-01-28

calc()

1	//执行数学操作 .foo { width: calc(100px + 50px); }

混合计算绝对单位，用一个百分比减掉一个像素值。

1	.foo { width: calc(100% - 50px); }

more >>

2017-01-22

0.5px

1、0.5px边框
iOS 8 和 OS X Yosemite 支持 0.5px 的边框.

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
  document.querySelector('html').classList.add('hairlines');
}
  document.body.removeChild(testElem);
}

div {
  border: 1px solid #bbb;
}
.hairlines div {
  border-width: 0.5px;
}

2、使用border-image实现

准备一张符合你要求的border-image：

1	.border-bottom-1px { border-width: 0 0 1px 0; -webkit-border-image: url(linenew.png) 0 0 2 0 stretch; border-image: url(linenew.png) 0 0 2 0 stretch; }

使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色

.border-image-1px {
  border-width: 1px 0;
  -webkit-border-image: url(linenew.png) 2 0 stretch;
  border-image: url(linenew.png) 2 0 stretch;
}

.border-image-1px {
  border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-image-1px {
    border-bottom: none;
    border-width: 0 0 1px 0;
    -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    border-image: url(../img/linenew.png) 0 0 2 0 stretch;
  }
}

3、使用background-image实现

background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
样式设置：

1	.background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }

4、多背景渐变实现
设置1px的渐变背景，50%有颜色，50%透明。

.background-gradient-1px {
  background:
    linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat
}
/* 或者 */
.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat
}

5、使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

1	.box-shadow-1px { box-shadow: inset 0px -1px 1px -1px #c8c7cc; }

6、viewport + rem 实现, flexible也采用这种方法

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：

在devicePixelRatio = 3 时，输出viewport：

7、伪类 + transform 实现
利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
// 合 JS 代码，判断是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}

2017-01-18

Workers

Web Workers能在后台进程中运行的方法.
Web Workers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O，但通常，后台进程（包括 Web Workers 进程）不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM，只能通过返回消息给创建者的回调函数进行处理。

主线程中创建 Worker 实例，并监听 onmessage 事件

1	function init(){ var worker = new Worker('compute.js'); worker.onmessage= function (event) { console.log(event.data) }; }

more >>

2017-01-15

curry化

curry实现
利用闭包访问上下文对象，把参数记忆起来
获取每层的参数
返回每层的闭包

more >>

2017-01-14

sass 目录建设

1	modules/ _color.scss _typography.scss partials/ _base.scss _navigation.scss vendor/ _ico-moon.scss main.scss

base/
	_reset.scss
_typography.scss
	_color.scss
components/
	_buttons.scss
	_navigation.scss
	_gallery.scss
layout/
	_header.scss
	_grid.scss
	_sidebar.scss
pages/
	_home.scss
	_about.scss
	_contact.scss
themes/
	_theme.scss
	_admin.scss
helpers/ (or utils/)
	_variables.scss
	_functions.scss
	_mixins.scss
vendors/
	_bootstrap.scss
main.scss

vendor/
	_bootstrap.scss
	_jquery-ui.scss
base/
	_functions.scss
	_mixins.scss
	_variables.scss
	_base.scss
layout/
	_grid.scss
	_header.scss
	_sidebar.scss
module/
	_navigations.scss
	_buttons.scss
	_forms.scss
state/
	_state.scss
hacks/
	_shame.scss
main.scss

2016-11-26

flex笔记

父：
display: flex;
flex-direction: row/column;
flex-wrap: nowrap/wrap; 是否换行
flex-flow: direction wrap; 简写

justify-content:
flex-start/flex-end/center/space-between/space-around 水平
align-items:
flex-start/flex-end/center/baseline/stretch 垂直
align-content:
flex-start/flex-end/center/baseline/stretch 每行的个性化，一行时无效

子:
align-self:
auto/flex-start/flex-end/center/baseline/stretch 相对父，在垂直方向个性化
flex-grow: 拉伸不接受负值 0
flex-shrink: 收缩不接受负值 1
flex-basis: 伸缩的基准值不接受负值
flex: grow shrink basis 简写

2016-11-22

xss

XSS攻击的全称是 Cross Site Scripting（跨站脚本攻击）

cookie、session等敏感数据遭到泄露
影响用户体验

基于反射的攻击,一般是服务器端根据用户的输入或者查询条件返回了带有恶意脚本的结果并在客户端执行。这种漏洞常见于各种搜索引擎之中。

比如当我们在搜索栏中输入对应的恶意脚本代码，服务器端进行处理，当未找到匹配内容时简单返回我们输入的查询字符串。那么，这时候如果网站前端或者服务器端没有对查询字符串做恰当的处理，只是简单返回并插入到页面中，那这段恶意脚本代码很可能被当做正常的script标签解释执行。后果很明显，我们泄露了自己账户的cookie。

more >>

2016-11-19

拖拽

我们常常会通过修改元素的top，left，translate来其的位置发生改变。

由于修改一个元素top/left值会引起页面重绘，而translate不会，因此从性能优化上来判断，我们会优先使用translate属性。

如何获取当前浏览器支持的transform兼容写法

[‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’]

// 获取当前浏览器支持的transform兼容写法
function getTransform() {
    var transform = '',
        divStyle = document.createElement('div').style,
        // 可能涉及到的几种兼容性写法，通过循环找出浏览器识别的那一个
        transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

        i = 0,
        len = transformArr.length;

    for(; i < len; i++)  {
        if(transformArr[i] in divStyle) {
            // 找到之后立即返回，结束函数
            return transform = transformArr[i];
        }
    }

    // 如果没有找到，就直接返回空字符串
    return transform;
}

当前浏览器并不支持transform，这个时候我们就需要使用left，top值来改变元素的位置。如果支持，就改变transform的值。

more >>

2016-10-27

移动端知识整理

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放

more >>

2016-10-08

尾递归优化

尾递归：

1	function f(a){ if(a == 1) return a return a + f(a-1) }

每次递归有一个变量a在内存中
应该每次更新这个a，而不是在内存中，扩展更多的a

more >>