日常记录

Object.defineProperty(),修改对象属性的get,set

document.querySelector 选择器方法选择元素节点

RegExp.$1 每当产生一个带括号的成功匹配时,$1-$9的值就被修改，$1就是第一个匹配括号里的值

nodeType节点类型

Object.keys(),js原生提供的Object对象,方法会返回一个由一个给定对象的自身可枚举属性组成的数组 

和for...in的区别,for-in 循环还会枚举其原型链上的属性

Object.defineProperty(obj, prop, descriptor)
obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
可以给这个对象的这个属性设置一些特性,可读可写,是否可以被遍历
给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。

Object.create(prototype):返回一个以传入对象为原型的新对象

Location hash 属性 hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

可以用ASIC码对字符串进行替换，例如CHAR(10),CHAR(13)

通过16进制来拼接字符串，在前台通过把16进制转为字符，进行split

文档碎片，遍历过程中会有多次的dom操作，为提高性能我们会将el节点转化为fragment文档碎片进行解析操作

解析操作完成，将其添加回真实dom节点中

$el = el.nodeType==1?el:document.querySelector(el);

function nodeFragment ($el) {
    let fragment = document.createDocumentFragment();
    let child;

    while (child = el.firstChild) {
      fragment.appendChild(child);
    }
    return fragment;
}

$el.appendChild($fragment)

 

js for循环是同步任务，setTimeout是异步任务，在JavaScript线程中，因为本身JavaScript是单线程，这个特点决定了其正常的脚本执行顺序是按照文档流的形式来进行的，即从上往下，从左往右的这样方向。每次脚本正常执行时，但凡遇到异步任务的时候，都会将其set到一个task queue（任务队列）中去。然后在执行完同步任务之后，再来执行队列任务中的异步任务。 

 

判断一张表的数据在另一张表中是否存在，不需要使用join(浪费效率，需要做一次全表查询)，可以使用EXISTS
例:

SELECT a.* 
FROM a
LEFT JOIN b ON a.Id = b.Id
WHERE b.Name = XX

优化为

SELECT a.*
FROM a
EXISTS (
  SELECT 1 FROM b WHERE b.Name = XX AND a.Id = b.Id    
) 

 

盒子模型(flex)

可以替代传统的布局

外层元素成为容器，设置display:flex

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器有6个属性

flex-drection设置主轴的方向(row从左往右，row-reverse从右往左，column从上往下，column-revese从下往上)

flex-wrap如果一根轴线排不下，以什么方式来排列(wrap换行)

justify-content主轴的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-item交叉轴的对齐方式

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 align-content多根轴线的对齐方式

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

容器里面的子元素成为项目

flex:项目的放大比例 项目的缩小比例 占主轴的空间（可以用于百分比布局）

align-self:align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 

 

js bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

例：

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

在上述代码里，bind() 创建了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。

注意：多次 bind() 是无效的。只会执行第一次。内部就是call,apply的实现。

apply、call、bind比较

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。

也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

 

当元素设置了  absolute  后，默认就不是100%的宽度了，而是内容多宽就是多宽

如果希望absolute 以后的元素依然和父容器一样是的100% 宽度

有两个方法：

1.直接设置 width:100%

2.设置left:0px   right:0px;

转载于:https://my.oschina.net/u/3372979/blog/1518716