文档章节

日常记录

宋宋宋同学
 宋宋宋同学
发布于 2017/08/22 16:01
字数 1634
阅读 3
收藏 0

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;

© 著作权归作者所有

宋宋宋同学
粉丝 0
博文 6
码字总数 2874
作品 0
成都
程序员
私信 提问

暂无文章

以太坊中文文档翻译-区块

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 区块(Blocks) 区块相关的 API,接口的参数说明请参考Etherscan API 约定, 文档中不单独...

Tiny熊
21分钟前
1
0
Linux 内核的一个问题

是virtio 驱动,但是没有启动 virtio-mmio virtio-mmio.0: Failed to enable 64-bit or 32-bit DMA. Trying to continue, but this might not work.....[ 1.047924] md: ... autorun......

MtrS
45分钟前
2
0
MySQL主从配置

17.1 MySQL主从介绍 17.2 准备工作 17.3 配置主 17.4 配置从 17.5 测试主从同步 一、 MySQL主从介绍

tobej
55分钟前
2
0
读书replay《博弈与社会》.1.20190526

前情 《美丽心灵》,一部讲数学家约翰·福布斯·纳什的电影,我第一次听到博弈理论就是在这部电影里。看过电影之后就一直想知道,博弈论究竟讲了什么。很久之后,20190417这天,我刷JD的购物...

wanxiangming
今天
2
0
iOS TableView层级结构剖析

首先上图 下面来分析一下tableView的层级结构 tableView的组成: 1.整个tableView有且仅有一个头部和尾部就是tableViewHeadView和tableViewFooterView2.tableView 可以有多个section,一个s...

HOrange
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部