leehave

leehave 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

leehave 赞了文章 · 5月25日

你不知道的Virtual DOM(一):Virtual Dom介绍

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

目前最流行的两大前端框架,React和Vue,都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么,什么是Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?本系列文章会详细讲解Virtual DOM的创建过程,并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架,只讲最纯粹的Virtual DOM。敲单词太累了,下文Virtual DOM一律用VD表示。

这是VD系列文章的开篇,以下是本系列其它文章的传送门:
你不知道的Virtual DOM(一):Virtual Dom介绍
你不知道的Virtual DOM(二):Virtual Dom的更新
你不知道的Virtual DOM(三):Virtual Dom更新优化
你不知道的Virtual DOM(四):key的作用
你不知道的Virtual DOM(五):自定义组件
你不知道的Virtual DOM(六):事件处理&异步更新

二、VD是什么

本质上来说,VD只是一个简单的JS对象,并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别,但表达的意思是一致的。它们分别是标签名(tag)、属性(props)和子元素对象(children)。下面是一个典型的VD对象例子:

{
    tag: "div",
    props: {},
    children: [
        "Hello World", 
        {
            tag: "ul",
            props: {},
            children: [{
                tag: "li",
                props: {
                    id: 1,
                    class: "li-1"
                },
                children: ["第", 1]
            }]
        }
    ]
}

VD跟dom对象有一一对应的关系,上面的VD是由以下的HTML生成的

<div>
    Hello World
    <ul>
        <li id="1" class="li-1">
            第1
        </li>
    </ul>
</div>

一个dom对象,比如li,由tag(li), props({id: 1, class: "li-1"})children(["第", 1])三个属性来描述。

三、为什么需要VD

VD 最大的特点是将页面的状态抽象为 JS 对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。如 React 就借助 VD 实现了服务端渲染、浏览器渲染和移动端渲染等功能。

此外,在进行页面更新的时候,借助VD,DOM 元素的改变可以在内存中进行比较,再结合框架的事务机制将多次比较的结果合并后一次性更新到页面,从而有效地减少页面渲染的次数,提高渲染效率。我们先来看下页面的更新一般会经过几个阶段。
clipboard.png

从上面的例子中,可以看出页面的呈现会分以下3个阶段:

  • JS计算
  • 生成渲染树
  • 绘制页面

这个例子里面,JS计算用了691毫秒,生成渲染树578毫秒,绘制73毫秒。如果能有效的减少生成渲染树和绘制所花的时间,更新页面的效率也会随之提高。
通过VD的比较,我们可以将多个操作合并成一个批量的操作,从而减少dom重排的次数,进而缩短了生成渲染树和绘制所花的时间。至于如何基于VD更有效率的更新dom,是一个很有趣的话题,日后有机会将另写一篇文章介绍。

四、如何实现VD与真实DOM的映射

我们先从如何生成VD说起。借助JSX编译器,可以将文件中的HTML转化成函数的形式,然后再利用这个函数生成VD。看下面这个例子:

function render() {
    return (
        <div>
            Hello World
            <ul>
                <li id="1" class="li-1">
                    第1
                </li>
            </ul>
        </div>
    );
}

这个函数经过JSX编译后,会输出下面的内容:

function render() {
    return h(
        'div',
        null,
        'Hello World',
        h(
            'ul',
            null,
            h(
                'li',
                { id: '1', 'class': 'li-1' },
                '\u7B2C1'
            )
        )
    );
}

这里的h是一个函数,可以起任意的名字。这个名字通过babel进行配置:

// .babelrc文件
{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h"    // 这里可配置任意的名称
    }]
  ]
}

接下来,我们只需要定义h函数,就能构造出VD

function flatten(arr) {
    return [].concat.apply([], arr);
}

function h(tag, props, ...children) {
    return {
        tag, 
        props: props || {}, 
        children: flatten(children) || []
    };
}

h函数会传入三个或以上的参数,前两个参数一个是标签名,一个是属性对象,从第三个参数开始的其它参数都是children。children元素有可能是数组的形式,需要将数组解构一层。比如:

function render() {
    return (
        <ul>
            <li>0</li>
            {
                [1, 2, 3].map( i => (
                    <li>{i}</li>
                ))
            }
        </ul>
    );
}

// JSX编译后
function render() {
    return h(
        'ul',
        null,
        h(
            'li',
            null,
            '0'
        ),
        /*
         * 需要将下面这个数组解构出来再放到children数组中
         */
        [1, 2, 3].map(i => h(
            'li',
            null,
            i
        ))
    );
}

继续之前的例子。执行h函数后,最终会得到如下的VD对象:

{
    tag: "div",
    props: {},
    children: [
        "Hello World", 
        {
            tag: "ul",
            props: {},
            children: [{
                tag: "li",
                props: {
                    id: 1,
                    class: "li-1"
                },
                children: ["第", 1]
            }]
        }
    ]
}

下一步,通过遍历VD对象,生成真实的dom

// 创建dom元素
function createElement(vdom) {
    // 如果vdom是字符串或者数字类型,则创建文本节点,比如“Hello World”
    if (typeof vdom === 'string' || typeof vdom === 'number') {
        return doc.createTextNode(vdom);
    }

    const {tag, props, children} = vdom;

    // 1. 创建元素
    const element = doc.createElement(tag);

    // 2. 属性赋值
    setProps(element, props);

    // 3. 创建子元素
    // appendChild在执行的时候,会检查当前的this是不是dom对象,因此要bind一下
    children.map(createElement)
            .forEach(element.appendChild.bind(element));

    return element;
}

// 属性赋值
function setProps(element, props) {
    for (let key in props) {
        element.setAttribute(key, props[key]);
    }
}

createElement函数执行完后,dom元素就创建完并展示到页面上了(页面比较丑,不要介意...)。

clipboard.png

五、总结

本文介绍了VD的基本概念,并讲解了如何利用JSX编译HTML标签,然后生成VD,进而创建真实dom的过程。下一篇文章将会实现一个简单的VD Diff算法,找出2个VD的差异并将更新的元素映射到dom中去:你不知道的Virtual DOM(二):Virtual Dom的更新

P.S.: 想看完整代码见这里,如果有必要建一个仓库的话请留言给我:代码

查看原文

赞 396 收藏 304 评论 20

leehave 收藏了文章 · 5月7日

还可以这么玩?超实用 Typescript 内置类型与自定义类型

背景

大家用过 Typescript 都清楚,很多时候我们需要提前声明一个类型,再将类型赋予变量。

例如在业务中,我们需要渲染一个表格,往往需要定义:

interface Row {
  user: string
  email: string
  id: number
  vip: boolean
  // ...
}

const tableDatas: Row[] = []
// ...

有时候我们也需要表格对应的搜索表单,需要其中一两个搜索项,如果刚接触 typescript 的同学可能会立刻这样写:

interface SearchModel {
  user?: string
  id?: number 
}  
const model: SearchModel = {
  user: '',
  id: undefined 
}

这样写会出现一个问题,如果后面id 类型要改成 string,我们需要改 2 处地方,不小心的话可能就会忘了改另外一处。所以,有些人会这样写:

interface SearchModel {
  user?: Row['user']
  id?: Row['id']
} 

这固然是一个解决方法,但事实上,我们前面已经定义了 Row 类型,这其实是可以更优雅地复用的:

const model: Partial<Row> = {
  user: '',
  id: undefined 
}
// 或者需要明确指定 key 的,可以
const model2: Partial<Pick<Row, 'user'|'id'>>

这样一来,很多情况下,我们可以尽量少地写重复的类型,复用已有类型,让代码更加优雅容易维护。

上面使用到的 PartialPick 都是 typescript 内置的类型别名。下面给大家介绍一下 typescript 常用的内置类型,以及自行拓展的类型。

typescript 内置类型

Partial<T>

将类型 T 的所有属性标记为可选属性

type Partial<T> = {
    [P in keyof T]?: T[P];
};

使用场景:

// 账号属性
interface AccountInfo {
    name: string 
    email: string 
    age: number 
    vip: 0|1 // 1 是vip ,0 是非vip
}

// 当我们需要渲染一个账号表格时,我们需要定义
const accountList: AccountInfo[] = []

// 但当我们需要查询过滤账号信息,需要通过表单,
// 但明显我们可能并不一定需要用到所有属性进行搜索,此时可以定义
const model: Partial<AccountInfo> = {
  name: '',
  vip: undefind
}

Required<T>

与 Partial 相反,Required 将类型 T 的所有属性标记为必选属性

type Required<T> = {
    [P in keyof T]-?: T[P];
};

Readonly<T>

将所有属性标记为 readonly, 即不能修改

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Pick<T, K>

从 T 中过滤出属性 K

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

使用场景:

interface AccountInfo {
  name: string 
  email: string 
  age: number 
  vip?: 0|1 // 1 是vip ,0 是非vip
}

type CoreInfo = Pick<AccountInfo, 'name' | 'email'>
/* 
{ 
  name: string
  email: stirng
}
*/

Record<K, T>

标记对象的 key value类型

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

使用场景:

// 定义 学号(key)-账号信息(value) 的对象
const accountMap: Record<number, AccountInfo> = {
  10001: {
    name: 'xx',
    email: 'xxxxx',
    // ...
  }    
}
const user: Record<'name'|'email', string> = {
    name: '', 
    email: ''
}
// 复杂点的类型推断
function mapObject<K extends string | number, T, U>(obj: Record<K, T>, f: (x: T) => U): Record<K, U>

const names = { foo: "hello", bar: "world", baz: "bye" };
// 此处推断 K, T 值为 string , U 为 number
const lengths = mapObject(names, s => s.length);  // { foo: number, bar: number, baz: number }

Exclude<T, U>,Omit<T, K>

移除 T 中的 U 属性

type Exclude<T, U> = T extends U ? never : T;

使用场景:

// 'a' | 'd'
type A = Exclude<'a'|'b'|'c'|'d' ,'b'|'c'|'e' >  

乍一看好像这个没啥卵用,但是,我们通过一番操作,之后就可以得到 Pick 的反操作:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

type NonCoreInfo = Omit<AccountInfo, 'name' | 'email'>
/*
{
  age: number 
  vip: 0|1,
}
*/

Extract<T, U>

Exclude 的反操作,取 T,U两者的交集属性

type Extract<T, U> = T extends U ? T : never;

使用 demo:

// 'b'|'c'
type A = Extract<'a'|'b'|'c'|'d' ,'b'|'c'|'e' >  

这个看起来没啥用,实际上还真没啥卵用,应该是我才疏学浅,还没发掘到其用途。

NonNullable<T>

排除类型 T 的 null | undefined 属性

type NonNullable<T> = T extends null | undefined ? never : T;

使用 demo

type A = string | number | undefined 
type B = NonNullable<A> // string | number

function f2<T extends string | undefined>(x: T, y: NonNullable<T>) {
    let s1: string = x;  // Error, x 可能为 undefined
    let s2: string = y;  // Ok
}

Parameters<T>

获取一个函数的所有参数类型

// 此处使用 infer P 将参数定为待推断类型
// T 符合函数特征时,返回参数类型,否则返回 never
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

使用demo:

interface IFunc {
  (person: IPerson, count: number): boolean
}

type P = Parameters<IFunc> // [IPerson, number]

const person01: P[0] = {
  // ...
}

另一种使用场景是,快速获取未知函数的参数类型

import {somefun} from 'somelib'
// 从其他库导入的一个函数,获取其参数类型
type SomeFuncParams = Parameters<typeof somefun>

// 内置函数
// [any, number?, number?]
type FillParams = Parameters<typeof Array.prototype.fill>

ConstructorParameters<T>

类似于 Parameters<T>, ConstructorParameters 获取一个类的构造函数参数

type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

使用 demo:

// string | number | Date 
type DateConstrParams = ConstructorParameters<typeof Date>

ReturnType<T>

获取函数类型 T 的返回类型

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

使用方式和 Parameters<T> 类似,不再赘述

InstanceType<T>

获取一个类的返回类型

type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

使用方式和 ConstructorParameters<T> 类似,不再赘述


自定义常用类型

Weaken

使用 typescript 有时候需要重写一个库提供的 interface 的某个属性,但是重写 interface 有可能会导致冲突:

interface Test {
  name: string
  say(word: string): string
}

interface Test2  extends Test{
  name: Test['name'] | number
}
// error: Type 'string | number' is not assignable to type 'string'.

那么可以通过一些 type 来曲线救国实现我们的需求:

// 原理是,将 类型 T 的所有 K 属性置为 any,
// 然后自定义 K 属性的类型,
// 由于任何类型都可以赋予 any,所以不会产生冲突
type Weaken<T, K extends keyof T> = {
  [P in keyof T]: P extends K ? any : T[P];
};


interface Test2  extends Weaken<Test, 'name'>{
  name: Test['name'] | number
}
// ok

数组 转换 成 union

有时候需要

const ALL_SUITS = ['hearts', 'diamonds', 'spades', 'clubs'] as const; // TS 3.4
type SuitTuple = typeof ALL_SUITS; // readonly ['hearts', 'diamonds', 'spades', 'clubs']
type Suit = SuitTuple[number];  // union type : 'hearts' | 'diamonds' | 'spades' | 'clubs'

根据 enum 生成 union

  • enum 的 key 值 union

    enum Weekday {
      Mon = 1
      Tue = 2
      Wed = 3
    }
    type WeekdayName = keyof typeof Weekday // 'Mon' | 'Tue' | 'Wed'
  • enum 无法实现value-union , 但可以 object 的 value 值 union

    const lit = <V extends keyof any>(v: V) => v;
    const Weekday = {
      MONDAY: lit(1),
      TUESDAY: lit(2),
      WEDNESDAY: lit(3)
    }
    type Weekday = (typeof Weekday)[keyof typeof Weekday] // 1|2|3

PartialRecord

前面我们讲到了 Record 类型,我们会常用到

interface Model {
    name: string
    email: string
    id: number
    age: number
}

// 定义表单的校验规则
const validateRules: Record<keyof Model, Validator> = {
    name: {required: true, trigger: `blur`},
    id: {required: true, trigger: `blur`},
    email: {required: true, message: `...`},
    // error: Property age is missing in type...
}

这里出现了一个问题,validateRules 的 key 值必须和 Model 全部匹配,缺一不可,但实际上我们的表单可能只有其中的一两项,这时候我们就需要:

type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>

const validateRules: PartialRecord<keyof Model, Validator> = {
   name: {required: true, trigger: `blur`} 
}

这个例子组合使用了 typescript 内置的 类型别名 PartialPartial

Unpacked

解压抽离关键类型

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T;

type T0 = Unpacked<string>;  // string
type T1 = Unpacked<string[]>;  // string
type T2 = Unpacked<() => string>;  // string
type T3 = Unpacked<Promise<string>>;  // string
type T4 = Unpacked<Promise<string>[]>;  // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>;  // string

总结

事实上,基于已有的类型别名,还有新推出的 infer 待推断类型,可以探索出各种各样的复杂组合玩法,这里不再多说,大家可以慢慢探索。

感谢阅读!



本文首发于 github 博客
如文章对你有帮助,你的 star 是对我最大的支持


插播广告:
深圳 Shopee 长期内推
岗位:前端,后端(要转go),产品,UI,测试,安卓,IOS,运维 全都要。
薪酬福利:20K-50K😳,7点下班😏(划重点),免费水果😍,免费晚餐😊,15天年假👏,14天带薪病假。 点击查看详情
简历发邮箱:chenweiyu6909@gmail.com
或者加我微信:cwy13920,实时反馈面试进度哦。
查看原文

leehave 收藏了文章 · 5月3日

Javascript算法——希尔排序

常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序快速排序、堆排序、基数排序等。这里主要介绍希尔排序

一图胜千言:

图片描述

1. 算法介绍

1.1 算法描述

希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本。但希尔排序是非稳定排序算法。
希尔排序是基于插入排序的以下两点性质而提出改进方法的:

  • 插入排序在对几乎已经排好序的数据操作时,效率高,即可以达到线性排序的效率;
  • 但插入排序一般来说是低效的,因为插入排序每次只能将数据移动一位;

希尔排序的基本思想是:先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,待整个序列中的记录基本有序时,再对全体记录进行依次直接插入排序。

图片描述

1.2 算法步骤

  • 选择一个增量序列 t1,t2,……,tk,其中 ti > tj, tk = 1;
  • 按增量序列个数 k,对序列进行 k 趟排序;
  • 每趟排序,根据对应的增量 ti,将待排序列分割成若干长度为 m 的子序列,分别对各子表进行直接插入排序。仅增量因子为 1 时,整个序列作为一个表来处理,表长度即为整个序列的长度。

1.3 算法实现

function shellSort(arr) {
    var len = arr.length,
        temp,
        gap = 1;
    while(gap < len/3) {          //动态定义间隔序列
        gap = gap*3+1;
    }
    for (gap; gap > 0; gap = Math.floor(gap/3)) {
        for (var i = gap; i < len; i++) {
            temp = arr[i];
            for (var j = i-gap; j >= 0 && arr[j] > temp; j -= gap) {
                arr[j+gap] = arr[j];
            }
            arr[j+gap] = temp;
        }
    }
    return arr;
}
查看原文

leehave 收藏了文章 · 4月30日

一分钟教你学会配置eslint,还在为风格单双引号,对象末位逗号要不要,引用各种报错而烦恼?(建议收藏!详细中文注释)

最全的eslint配置大全,我已经加了详细中文注释,只需要找到自己想要的配置就可以了,强烈建议收藏!

用法非常简单,找到.eslintrc.js下的rules添加对象即可,比如我要把规则原本单引号要变为双引号,那加上"quotes": [1, "double"]
  • 注意这个规则!!!!:如果违反了规则情况下,这里的数字:0表示不不处理,1表示警告,2表示错误并退出

举例:

  • "quotes": [0, "double"] // 0 违反错误不处理
  • "quotes": [1, "double"] // 1 违反错误警告
  • "quotes": [2, "double"] // 2 违反错误报错并阻止进程
{
"rules" : {
  // 定义对象的set存取器属性时,强制定义get
  "accessor-pairs": 2,
  // 指定数组的元素之间要以空格隔开(,后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格
  "array-bracket-spacing": [2, "never"],
  // 在块级作用域外访问块内定义的变量是否报错提示
  "block-scoped-var": 0,
  // if while function 后面的{必须与if在同一行,java风格。
  "brace-style": [2, "1tbs", { "allowSingleLine": true }],
  // 双峰驼命名格式
  "camelcase": 2,
  // 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,
  // always-multiline:多行模式必须带逗号,单行模式不能带逗号
  "comma-dangle": [2, "never"],
  // 控制逗号前后的空格
  "comma-spacing": [2, { "before": false, "after": true }],
  // 控制逗号在行尾出现还是在行首出现
  // http://eslint.org/docs/rules/comma-style
  "comma-style": [2, "last"],
  // 圈复杂度
  "complexity": [2,9],
  // 以方括号取对象属性时,[ 后面和 ] 前面是否需要空格, 可选参数 never, always
  "computed-property-spacing": [2,"never"],
  // 强制方法必须返回值,TypeScript强类型,不配置
  "consistent-return": 0,
  // 用于指统一在回调函数中指向this的变量名,箭头函数中的this已经可以指向外层调用者,应该没卵用了
  // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值,this也不能赋值给that以外的其他值
  "consistent-this": 0,
  // 强制在子类构造函数中用super()调用父类构造函数,TypeScrip的编译器也会提示
  "constructor-super": 0,
  // if else while for do后面的代码块是否需要{ }包围,参数:
  //    multi  只有块中有多行语句时才需要{ }包围
  //    multi-line  只有块中有多行语句时才需要{ }包围, 但是块中的执行语句只有一行时,
  //                   块中的语句只能跟和if语句在同一行。if (foo) foo++; else doSomething();
  //    multi-or-nest 只有块中有多行语句时才需要{ }包围, 如果块中的执行语句只有一行,执行语句可以零另起一行也可以跟在if语句后面
  //    [2, "multi", "consistent"] 保持前后语句的{ }一致
  //    default: [2, "all"] 全都需要{ }包围
  "curly": [2, "all"],
  // switch语句强制default分支,也可添加 // no default 注释取消此次警告
  "default-case": 2,
  // 强制object.key 中 . 的位置,参数:
  //      property,'.'号应与属性在同一行
  //      object, '.' 号应与对象名在同一行
  "dot-location": [2, "property"],
  // 强制使用.号取属性
  //    参数: allowKeywords:true 使用保留字做属性名时,只能使用.方式取属性
  //                          false 使用保留字做属性名时, 只能使用[]方式取属性 e.g [2, {"allowKeywords": false}]
  //           allowPattern:  当属性名匹配提供的正则表达式时,允许使用[]方式取值,否则只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
  "dot-notation": [2, {"allowKeywords": true}],
  // 文件末尾强制换行
  "eol-last": 2,
  // 使用 === 替代 ==
  "eqeqeq": [2, "allow-null"],
  // 方法表达式是否需要命名
  "func-names": 0,
  // 方法定义风格,参数:
  //    declaration: 强制使用方法声明的方式,function f(){} e.g [2, "declaration"]
  //    expression:强制使用方法表达式的方式,var f = function() {}  e.g [2, "expression"]
  //    allowArrowFunctions: declaration风格中允许箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }]
  "func-style": 0,
  "no-alert": 0,//禁止使用alert confirm prompt
  "no-array-constructor": 2,//禁止使用数组构造器
  "no-bitwise": 0,//禁止使用按位运算符
  "no-caller": 1,//禁止使用arguments.caller或arguments.callee
  "no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
  "no-class-assign": 2,//禁止给类赋值
  "no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
  "no-console": 2,//禁止使用console
  "no-const-assign": 2,//禁止修改const声明的变量
  "no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
  "no-continue": 0,//禁止使用continue
  "no-control-regex": 2,//禁止在正则表达式中使用控制字符
  "no-debugger": 2,//禁止使用debugger
  "no-delete-var": 2,//不能对var声明的变量使用delete操作符
  "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
  "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
  "no-dupe-args": 2,//函数参数不能重复
  "no-duplicate-case": 2,//switch中的case标签不能重复
  "no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
  "no-empty": 2,//块语句中的内容不能为空
  "no-empty-character-class": 2,//正则表达式中的[]内容不能为空
  "no-empty-label": 2,//禁止使用空label
  "no-eq-null": 2,//禁止对null使用==或!=运算符
  "no-eval": 1,//禁止使用eval
  "no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
  "no-extend-native": 2,//禁止扩展native对象
  "no-extra-bind": 2,//禁止不必要的函数绑定
  "no-extra-boolean-cast": 2,//禁止不必要的bool转换
  "no-extra-parens": 2,//禁止非必要的括号
  "no-extra-semi": 2,//禁止多余的冒号
  "no-fallthrough": 1,//禁止switch穿透
  "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
  "no-func-assign": 2,//禁止重复的函数声明
  "no-implicit-coercion": 1,//禁止隐式转换
  "no-implied-eval": 2,//禁止使用隐式eval
  "no-inline-comments": 0,//禁止行内备注
  "no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
  "no-invalid-regexp": 2,//禁止无效的正则表达式
  "no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
  "no-irregular-whitespace": 2,//不能有不规则的空格
  "no-iterator": 2,//禁止使用__iterator__ 属性
  "no-label-var": 2,//label名不能与var声明的变量名相同
  "no-labels": 2,//禁止标签声明
  "no-lone-blocks": 2,//禁止不必要的嵌套块
  "no-lonely-if": 2,//禁止else语句内只有if语句
  "no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
  "no-mixed-requires": [0, false],//声明时不能混用声明类型
  "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
  "linebreak-style": [0, "windows"],//换行风格
  "no-multi-spaces": 1,//不能用多余的空格
  "no-multi-str": 2,//字符串不能用\换行
  "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
  "no-native-reassign": 2,//不能重写native对象
  "no-negated-in-lhs": 2,//in 操作符的左边不能有!
  "no-nested-ternary": 0,//禁止使用嵌套的三目运算
  "no-new": 1,//禁止在使用new构造一个实例后不赋值
  "no-new-func": 1,//禁止使用new Function
  "no-new-object": 2,//禁止使用new Object()
  "no-new-require": 2,//禁止使用new require
  "no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
  "no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
  "no-octal": 2,//禁止使用八进制数字
  "no-octal-escape": 2,//禁止使用八进制转义序列
  "no-param-reassign": 2,//禁止给参数重新赋值
  "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
  "no-plusplus": 0,//禁止使用++,--
  "no-process-env": 0,//禁止使用process.env
  "no-process-exit": 0,//禁止使用process.exit()
  "no-proto": 2,//禁止使用__proto__属性
  "no-redeclare": 2,//禁止重复声明变量
  "no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
  "no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
  "no-return-assign": 1,//return 语句中不能有赋值表达式
  "no-script-url": 0,//禁止使用javascript:void(0)
  "no-self-compare": 2,//不能比较自身
  "no-sequences": 0,//禁止使用逗号运算符
  "no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
  "no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
  "no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
  "no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
  "no-sync": 0,//nodejs 禁止同步方法
  "no-ternary": 0,//禁止使用三目运算符
  "no-trailing-spaces": 1,//一行结束后面不要有空格
  "no-this-before-super": 0,//在调用super()之前不能使用this或super
  "no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
  "no-undef": 1,//不能有未定义的变量
  "no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
  "no-undefined": 2,//不能使用undefined
  "no-unexpected-multiline": 2,//避免多行表达式
  "no-underscore-dangle": 1,//标识符不能以_开头或结尾
  "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
  "no-unreachable": 2,//不能有无法执行的代码
  "no-unused-expressions": 2,//禁止无用的表达式
  "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
  "no-use-before-define": 2,//未定义前不能使用
  "no-useless-call": 2,//禁止不必要的call和apply
  "no-void": 2,//禁用void操作符
  "no-var": 0,//禁用var,用let和const代替
  "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
  "no-with": 2,//禁用with
  "array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
  "arrow-parens": 0,//箭头函数用小括号括起来
  "arrow-spacing": 0,//=>的前/后括号
  "accessor-pairs": 0,//在对象中使用getter/setter
  "block-scoped-var": 0,//块语句中使用var
  "brace-style": [1, "1tbs"],//大括号风格
  "callback-return": 1,//避免多次调用回调什么的
  "camelcase": 2,//强制驼峰法命名
  "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
  "comma-spacing": 0,//逗号前后的空格
  "comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
  "complexity": [0, 11],//循环复杂度
  "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
  "consistent-return": 0,//return 后面是否允许省略
  "consistent-this": [2, "that"],//this别名
  "constructor-super": 0,//非派生类不能调用super,派生类必须调用super
  "curly": [2, "all"],//必须使用 if(){} 中的{}
  "default-case": 2,//switch语句最后必须有default
  "dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
  "dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
  "eol-last": 0,//文件以单一的换行符结束
  "eqeqeq": 2,//必须使用全等
  "func-names": 0,//函数表达式必须有名字
  "func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
  "generator-star-spacing": 0,//生成器函数*的前后空格
  "guard-for-in": 0,//for in循环要用if语句过滤
  "handle-callback-err": 0,//nodejs 处理错误
  "id-length": 0,//变量名长度
  "indent": [2, 4],//缩进风格
  "init-declarations": 0,//声明时必须赋初值
  "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
  "lines-around-comment": 0,//行前/行后备注
  "max-depth": [0, 4],//嵌套块深度
  "max-len": [0, 80, 4],//字符串最大长度
  "max-nested-callbacks": [0, 2],//回调嵌套深度
  "max-params": [0, 3],//函数最多只能有3个参数
  "max-statements": [0, 10],//函数内最多有几个声明
  "new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
  "new-parens": 2,//new时必须加小括号
  "newline-after-var": 2,//变量声明后是否需要空一行
  "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
  "object-shorthand": 0,//强制对象字面量缩写语法
  "one-var": 1,//连续声明
  "operator-assignment": [0, "always"],//赋值运算符 += -=什么的
  "operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
  "padded-blocks": 0,//块语句内行首行尾是否要空行
  "prefer-const": 0,//首选const
  "prefer-spread": 0,//首选展开运算
  "prefer-reflect": 0,//首选Reflect的方法
  "quotes": [1, "single"],//引号类型 `` "" ''
  "quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
  "radix": 2,//parseInt必须指定第二个参数
  "id-match": 0,//命名检测
  "require-yield": 0,//生成器函数必须有yield
  "semi": [2, "always"],//语句强制分号结尾
  "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
  "sort-vars": 0,//变量声明时排序
  "space-after-keywords": [0, "always"],//关键字后面是否要空一格
  "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
  "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
  "space-in-parens": [0, "never"],//小括号里面要不要有空格
  "space-infix-ops": 0,//中缀操作符周围要不要有空格
  "space-return-throw-case": 2,//return throw case后面要不要加空格
  "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
  "spaced-comment": 0,//注释风格不要有空格什么的
  "strict": 2,//使用严格模式
  "use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
  "valid-jsdoc": 0,//jsdoc规则
  "valid-typeof": 2,//必须使用合法的typeof的值
  "vars-on-top": 2,//var必须放在作用域顶部
  "wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
  "wrap-regex": 0,//正则表达式字面量用小括号包起来
  "yoda": [2, "never"]//禁止尤达条件
  }
}

查看原文

leehave 收藏了文章 · 4月27日

Sequelize 中文文档 v4 - Associations - 关联

Associations - 关联

此系列文章的应用示例已发布于 GitHub: sequelize-docs-Zh-CN. 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star.

Sequelize Docs 中文文档目录

本部分描述 sequelize 中的各种关联类型。 当调用 User.hasOne(Project) 这样的方法时,我们说 User 模型(该函数被调用的模型)是 sourceProject 模型(模型被传递为参数)是 target

一对一关联

一对一关联是通过单个外键连接的两个模型之间的关联。

BelongsTo

BelongsTo 关联是在 source model 上存在一对一关系的外键的关联。

一个简单的例子是 Player 通过 player 的外键作为 Team 的一部分。

const Player = this.sequelize.define('player', {/* attributes */});
const Team  = this.sequelize.define('team', {/* attributes */});

Player.belongsTo(Team); // 将向 Team 添加一个 teamId 属性以保存 Team 的主键值

外键

默认情况下,将从目标模型名称和目标主键名称生成 belongsTo 关系的外键。

默认的样式是 camelCase,但是如果源模型配置为 underscored: true ,那么 foreignKey 将是snake_case

const User = this.sequelize.define('user', {/* attributes */})
const Company  = this.sequelize.define('company', {/* attributes */});

User.belongsTo(Company); // 将 companyId 添加到 user

const User = this.sequelize.define('user', {/* attributes */}, {underscored: true})
const Company  = this.sequelize.define('company', {
  uuid: {
    type: Sequelize.UUID,
    primaryKey: true
  }
});

User.belongsTo(Company); // 将 company_uuid 添加到 user

在已定义 as 的情况下,将使用它代替目标模型名称。

const User = this.sequelize.define('user', {/* attributes */})
const UserRole  = this.sequelize.define('userRole', {/* attributes */});

User.belongsTo(UserRole, {as: 'role'}); // 将 role 添加到 user 而不是 userRole

在所有情况下,默认外键可以用 foreignKey 选项覆盖。
当使用外键选项时,Sequelize 将按原样使用:

const User = this.sequelize.define('user', {/* attributes */})
const Company  = this.sequelize.define('company', {/* attributes */});

User.belongsTo(Company, {foreignKey: 'fk_company'}); // 将 fk_company 添加到 User

目标键

目标键是源模型上的外键列指向的目标模型上的列。 默认情况下,belongsTo 关系的目标键将是目标模型的主键。 要定义自定义列,请使用 targetKey 选项。

const User = this.sequelize.define('user', {/* attributes */})
const Company  = this.sequelize.define('company', {/* attributes */});

User.belongsTo(Company, {foreignKey: 'fk_companyname', targetKey: 'name'}); // 添加 fk_companyname 到 User

HasOne

HasOne 关联是在 target model 上存在一对一关系的外键的关联。

const User = sequelize.define('user', {/* ... */})
const Project = sequelize.define('project', {/* ... */})
 
// 单向关联
Project.hasOne(User)

/*
  在此示例中,hasOne 将向 User 模型添加一个 projectId 属性 ! 
  此外,Project.prototype 将根据传递给定义的第一个参数获取 getUser 和 setUser 的方法。 
  如果启用了 underscore 样式,则添加的属性将是 project_id 而不是 projectId。

  外键将放在 users 表上。

  你也可以定义外键,例如 如果您已经有一个现有的数据库并且想要处理它:
*/
 
Project.hasOne(User, { foreignKey: 'initiator_id' })
 
/*
  因为Sequelize将使用模型的名称(define的第一个参数)作为访问器方法,
  还可以将特殊选项传递给hasOne:
*/
 
Project.hasOne(User, { as: 'Initiator' })
// 现在你可以获得 Project#getInitiator 和 Project#setInitiator
 
// 或者让我们来定义一些自己的参考
const Person = sequelize.define('person', { /* ... */})
 
Person.hasOne(Person, {as: 'Father'})
// 这会将属性 FatherId 添加到 Person
 
// also possible:
Person.hasOne(Person, {as: 'Father', foreignKey: 'DadId'})
// 这将把属性 DadId 添加到 Person
 
// 在这两种情况下,你都可以:
Person#setFather
Person#getFather
 
// 如果你需要联结表两次,你可以联结同一张表
Team.hasOne(Game, {as: 'HomeTeam', foreignKey : 'homeTeamId'});
Team.hasOne(Game, {as: 'AwayTeam', foreignKey : 'awayTeamId'});

Game.belongsTo(Team);

即使它被称为 HasOne 关联,对于大多数1:1关系,您通常需要BelongsTo关联,因为 BelongsTo 将会在 hasOne 将添加到目标的源上添加 foreignKey。

HasOne 和 BelongsTo 之间的区别

在Sequelize 1:1关系中可以使用HasOne和BelongsTo进行设置。 它们适用于不同的场景。 让我们用一个例子来研究这个差异。

假设我们有两个表可以链接 PlayerTeam 。 让我们定义他们的模型。

const Player = this.sequelize.define('player', {/* attributes */})
const Team  = this.sequelize.define('team', {/* attributes */});

当我们连接 Sequelize 中的两个模型时,我们可以将它们称为一对 sourcetarget 模型。像这样

Player 作为 sourceTeam 作为 target

Player.belongsTo(Team);
//或
Player.hasOne(Team);

Team 作为 sourcePlayer 作为 target

Team.belongsTo(Player);
//Or
Team.hasOne(Player);

HasOne 和 BelongsTo 将关联键插入到不同的模型中。 HasOne 在 target 模型中插入关联键,而 BelongsTo 将关联键插入到 source 模型中。

下是一个示例,说明了 BelongsTo 和 HasOne 的用法。

const Player = this.sequelize.define('player', {/* attributes */})
const Coach  = this.sequelize.define('coach', {/* attributes */})
const Team  = this.sequelize.define('team', {/* attributes */});

假设我们的 Player 模型有关于其团队的信息为 teamId 列。 关于每个团队的 Coach 的信息作为 coachId 列存储在 Team 模型中。 这两种情况都需要不同种类的1:1关系,因为外键关系每次出现在不同的模型上。

当关于关联的信息存在于 source 模型中时,我们可以使用 belongsTo。 在这种情况下,Player 适用于 belongsTo,因为它具有 teamId 列。

Player.belongsTo(Team)  // `teamId` 将被添加到 Player / Source 模型中

当关于关联的信息存在于 target 模型中时,我们可以使用 hasOne。 在这种情况下, Coach 适用于 hasOne ,因为 Team 模型将其 Coach 的信息存储为 coachId 字段。

Coach.hasOne(Team)  // `coachId` 将被添加到 Team / Target 模型中

一对多关联

一对多关联将一个来源与多个目标连接起来。 而多个目标接到同一个特定的源。

const User = sequelize.define('user', {/* ... */})
const Project = sequelize.define('project', {/* ... */})
 
// 好。 现在,事情变得更加复杂(对用户来说并不真实可见)。
// 首先我们来定义一个 hasMany 关联
Project.hasMany(User, {as: 'Workers'})

这将添加属性 projectIdproject_id 到 User。 Project 的实例将获得访问器 getWorkerssetWorkers。 我们让它保持原样,让它成为单向关联。
但是我们想要更多! 让我们在下一节中以其他方式定义并创建一个多对多的关联:

有时您可能需要在不同的列上关联记录,您可以使用 sourceKey 选项:

const City = sequelize.define('city', { countryCode: Sequelize.STRING });
const Country = sequelize.define('country', { isoCode: Sequelize.STRING });

// 在这里,我们可以根据国家代码连接国家和城市
Country.hasMany(City, {foreignKey: 'countryCode', sourceKey: 'isoCode'});
City.belongsTo(Country, {foreignKey: 'countryCode', targetKey: 'isoCode'});

多对多关联

多对多关联用于将源与多个目标相连接。 此外,目标也可以连接到多个源。

Project.belongsToMany(User, {through: 'UserProject'});
User.belongsToMany(Project, {through: 'UserProject'});

这将创建一个名为 UserProject 的新模型,具有等效的外键projectIduserId。 属性是否为camelcase取决于由表(在这种情况下为UserProject)连接的两个模型。

定义 throughrequired。 Sequelize 以前会尝试自动生成名称,但并不总是导致最合乎逻辑的设置。

这将添加方法 getUsers, setUsers, addUser,addUsersProject, 还有 getProjects, setProjects, addProject, 和 addProjectsUser.

有时,您可能需要在关联中使用它们时重命名模型。 让我们通过使用别名(as)选项将 users 定义为 workers 而 projects 定义为t asks。 我们还将手动定义要使用的外键:

User.belongsToMany(Project, { as: 'Tasks', through: 'worker_tasks', foreignKey: 'userId' })
Project.belongsToMany(User, { as: 'Workers', through: 'worker_tasks', foreignKey: 'projectId' })

foreignKey 将允许你在 through 关系中设置 source model 键。

otherKey 将允许你在 through 关系中设置 target model 键。

User.belongsToMany(Project, { as: 'Tasks', through: 'worker_tasks', foreignKey: 'userId', otherKey: 'projectId'})

当然你也可以使用 belongsToMany 定义自我引用:

Person.belongsToMany(Person, { as: 'Children', through: 'PersonChildren' })
// 这将创建存储对象的 ID 的表 PersonChildren。

如果您想要连接表中的其他属性,则可以在定义关联之前为连接表定义一个模型,然后再说明它应该使用该模型进行连接,而不是创建一个新的关联:

const User = sequelize.define('user', {})
const Project = sequelize.define('project', {})
const UserProjects = sequelize.define('userProjects', {
    status: DataTypes.STRING
})
 
User.belongsToMany(Project, { through: UserProjects })
Project.belongsToMany(User, { through: UserProjects })

要向 user 添加一个新 project 并设置其状态,您可以将额外的 options.through 传递给 setter,其中包含连接表的属性

user.addProject(project, { through: { status: 'started' }})

默认情况下,上面的代码会将 projectId 和 userId 添加到 UserProjects 表中, 删除任何先前定义的主键属性 - 表将由两个表的键的组合唯一标识,并且没有其他主键列。 要在 UserProjects 模型上强添加一个主键,您可以手动添加它。

const UserProjects = sequelize.define('userProjects', {
  id: {
    type: Sequelize.INTEGER,
    primaryKey: true,
    autoIncrement: true
  },
  status: DataTypes.STRING
})

使用多对多你可以基于 through 关系查询并选择特定属性。 例如通过 through 使用findAll

User.findAll({
  include: [{
    model: Project,
    through: {
      attributes: ['createdAt', 'startedAt', 'finishedAt'],
      where: {completed: true}
    }
  }]
});

作用域

本节涉及关联作用域。 有关关联作用域与相关模型上的作用域的定义,请参阅 作用域

关联作用域允许您在关联上放置一个作用域(一套 getcreate 的默认属性)。作用域可以放在相关联的模型(关联的target)上,也可以通过表上的 n:m 关系。

1:m

假设我们有表评论,帖子和图像。 一个评论可以通过 commentable_idcommentable 关联到一个图像或一个帖子 - 我们说 Post 和 Image 是 Commentable

const Comment = this.sequelize.define('comment', {
  title: Sequelize.STRING,
  commentable: Sequelize.STRING,
  commentable_id: Sequelize.INTEGER
});

Comment.prototype.getItem = function(options) {
  return this['get' + this.get('commentable').substr(0, 1).toUpperCase() + this.get('commentable').substr(1)](options);
};

Post.hasMany(this.Comment, {
  foreignKey: 'commentable_id',
  constraints: false,
  scope: {
    commentable: 'post'
  }
});
Comment.belongsTo(this.Post, {
  foreignKey: 'commentable_id',
  constraints: false,
  as: 'post'
});

Image.hasMany(this.Comment, {
  foreignKey: 'commentable_id',
  constraints: false,
  scope: {
    commentable: 'image'
  }
});
Comment.belongsTo(this.Image, {
  foreignKey: 'commentable_id',
  constraints: false,
  as: 'image'
});

constraints: false, 禁用引用约束 - 由于 commentable_id 列引用了几个表,我们不能添加一个 REFERENCES 约束。 请注意,Image - > Comment 和 Post - > Comment 关系分别定义了一个作用域:commentable: 'image'commentable: 'post'。 使用关联功能时自动应用此作用域:

image.getComments()
SELECT * FROM comments WHERE commentable_id = 42 AND commentable = 'image';

image.createComment({
  title: 'Awesome!'
})
INSERT INTO comments (title, commentable_id, commentable) VALUES ('Awesome!', 42, 'image');

image.addComment(comment);
UPDATE comments SET commentable_id = 42, commentable = 'image'

Comment 上的 getItem 作用函数完成了图片 - 它只是将commentable字符串转换为getImagegetPost的一个调用,提供一个注释是属于一个帖子还是一个图像的抽象概念。您可以将普通选项对象作为参数传递给 getItem(options),以指定任何条件或包含的位置。

n:m

继续多态模型的思路,考虑一个 tag 表 - 一个 item 可以有多个 tag,一个 tag 可以与多个 item 相关。

为了简洁起见,该示例仅显示了 Post 模型,但实际上 Tag 与其他几个模型相关。

const ItemTag = sequelize.define('item_tag', {
  id : {
    type: DataTypes.INTEGER,
    primaryKey: true,
    autoIncrement: true
  },
  tag_id: {
    type: DataTypes.INTEGER,
    unique: 'item_tag_taggable'
  },
  taggable: {
    type: DataTypes.STRING,
    unique: 'item_tag_taggable'
  },
  taggable_id: {
    type: DataTypes.INTEGER,
    unique: 'item_tag_taggable',
    references: null
  }
});
const Tag = sequelize.define('tag', {
  name: DataTypes.STRING
});

Post.belongsToMany(Tag, {
  through: {
    model: ItemTag,
    unique: false,
    scope: {
      taggable: 'post'
    }
  },
  foreignKey: 'taggable_id',
  constraints: false
});
Tag.belongsToMany(Post, {
  through: {
    model: ItemTag,
    unique: false
  },
  foreignKey: 'tag_id',
  constraints: false
});

请注意,作用域列(taggable)现在在 through 模型(ItemTag)上。

我们还可以定义一个更具限制性的关联,例如,通过应用through 模型(ItemTag)和目标模型(Tag)的作用域来获取所有挂起的 tag。

Post.hasMany(Tag, {
  through: {
    model: ItemTag,
    unique: false,
    scope: {
      taggable: 'post'
    }
  },
  scope: {
    status: 'pending'
  },
  as: 'pendingTags',
  foreignKey: 'taggable_id',
  constraints: false
});

Post.getPendingTags();
SELECT `tag`.*  INNER JOIN `item_tags` AS `item_tag`
ON `tag`.`id` = `item_tag`.`tagId`
  AND `item_tag`.`taggable_id` = 42
  AND `item_tag`.`taggable` = 'post'
WHERE (`tag`.`status` = 'pending');

constraints: false 禁用 taggable_id 列上的引用约束。 因为列是多态的,我们不能说它是 REFERENCES 一个特定的表。

命名策略

默认情况下,Sequelize将使用模型名称(传递给sequelize.define的名称),以便在关联时使用模型名称。 例如,一个名为user的模型会将关联模型的实例中的get / set / add User函数和加入一个名为.user的属性,而一个名为User的模型会添加相同的功能,和一个名为.User的属性(注意大写U)。

正如我们已经看到的,你可以使用as来关联模型。 在单个关联(has one 和 belongs to),别名应该是单数,而对于许多关联(has many)它应该是复数。 Sequelize然后使用[inflection] [0]库将别名转换为其单数形式。 但是,这可能并不总是适用于不规则或非英语单词。 在这种情况下,您可以提供复数和单数形式的别名:

User.belongsToMany(Project, { as: { singular: 'task', plural: 'tasks' }})
// Notice that inflection has no problem singularizing tasks, this is just for illustrative purposes.

如果你知道模型将始终在关联中使用相同的别名,则可以在创建模型时提供它

const Project = sequelize.define('project', attributes, {
  name: {
    singular: 'task',
    plural: 'tasks',
  }
})
 
User.belongsToMany(Project);

这将为用户实例添加 add/set/get Tasks 方法。

记住,使用as来更改关联的名称也会改变外键的名称。 当使用as时,也可以指定外键是最安全的。

Invoice.belongsTo(Subscription)
Subscription.hasMany(Invoice)

不使用 as,这会按预期添加 subscriptionId。 但是,如果您要发送Invoice.belongsTo(Subscription, { as: 'TheSubscription' }),那么您将同时拥有 subscriptionIdtheSubscriptionId,因为 sequelize 不够聪明,无法确定调用是相同关系的两面。 foreignKey 修正了这个问题;

Invoice.belongsTo(Subscription, , { as: 'TheSubscription', foreignKey: 'subscription_id' })
Subscription.hasMany(Invoice, { foreignKey: 'subscription_id' )

关联对象

因为 Sequelize 做了很多神奇的事,所以你必须在设置关联后调用 Sequelize.sync。 这样做将允许您进行以下操作:

Project.belongsToMany(Task)
Task.belongsToMany(Project)
 
Project.create()...
Task.create()...
Task.create()...
 
// 保存它们.. 然后:
project.setTasks([task1, task2]).then(() => {
  // 已保存!
})
 
// 好的,现在它们已经保存了...我怎么才能得到他们?
project.getTasks().then(associatedTasks => {
  // associatedTasks 是一个 tasks 的数组
})
 
// 您还可以将过滤器传递给getter方法。
// 它们与你能传递给常规查找器方法的选项相同。
project.getTasks({ where: 'id > 10' }).then(tasks => {
  // id大于10的任务
})
 
// 你也可以仅检索关联对象的某些字段。
project.getTasks({attributes: ['title']}).then(tasks => {
  // 使用属性“title”和“id”检索任务
})

要删除创建的关联,您可以调用set方法而不使用特定的ID:

// 删除与 task1 的关联
project.setTasks([task2]).then(associatedTasks => {
  // 你将只得到 task2
})
 
// 删除全部
project.setTasks([]).then(associatedTasks => {
  // 你将得到空数组
})
 
// 或更直接地删除
project.removeTask(task1).then(() => {
  // 什么都没有
})
 
// 然后再次添加它们
project.addTask(task1).then(function() {
  // 它们又回来了
})

反之亦然你当然也可以这样做:

// project与task1和task2相关联
task2.setProject(null).then(function() {
  // 什么都没有
})

对于 hasOne/belongsTo 与其基本相同:

Task.hasOne(User, {as: "Author"})
Task#setAuthor(anAuthor)

可以通过两种方式添加与自定义连接表的关系的关联(继续前一章中定义的关联):

// 在创建关联之前,通过向对象添加具有连接表模型名称的属性
project.UserProjects = {
  status: 'active'
}
u.addProject(project)
 
// 或者在添加关联时提供第二个options.through参数,其中包含应该在连接表中的数据
u.addProject(project, { through: { status: 'active' }})
 
 
// 关联多个对象时,可以组合上述两个选项。 在这种情况下第二个参数
// 如果没有提供使用的数据将被视为默认对象
project1.UserProjects = {
    status: 'inactive'
}
 
u.setProjects([project1, project2], { through: { status: 'active' }})
// 上述代码将对项目1记录无效,并且在连接表中对项目2进行active

当获取具有自定义连接表的关联的数据时,连接表中的数据将作为DAO实例返回:

u.getProjects().then(projects => {
  const project = projects[0]
 
  if (project.UserProjects.status === 'active') {
    // .. 做点什么
 
    // 由于这是一个真正的DAO实例,您可以在完成操作之后直接保存它
    return project.UserProjects.save()
  }
})

如果您仅需要连接表中的某些属性,则可以提供具有所需属性的数组:

// 这将仅从 Projects 表中选择 name,仅从 UserProjects 表中选择status
user.getProjects({ attributes: ['name'], joinTableAttributes: ['status']})

检查关联

您还可以检查对象是否已经与另一个对象相关联(仅 n:m)。 这是你怎么做的

// 检查对象是否是关联对象之一:
Project.create({ /* */ }).then(project => {
  return User.create({ /* */ }).then(user => {
    return project.hasUser(user).then(result => {
      // 结果是 false
      return project.addUser(user).then(() => {
        return project.hasUser(user).then(result => {
          // 结果是 true
        })
      })
    })
  })
})
 
// 检查所有关联的对象是否如预期的那样:
// 我们假设我们已经有一个项目和两个用户
project.setUsers([user1, user2]).then(() => {
  return project.hasUsers([user1]);
}).then(result => {
  // 结果是 false
  return project.hasUsers([user1, user2]);
}).then(result => {
  // 结果是 true
})

外键

当您在sequelize模型中创建关联时,将自动创建具有约束的外键引用。 设置如下:

const Task = this.sequelize.define('task', { title: Sequelize.STRING })
const User = this.sequelize.define('user', { username: Sequelize.STRING })
 
User.hasMany(Task)
Task.belongsTo(User)

将生成以下SQL:

CREATE TABLE IF NOT EXISTS `User` (
  `id` INTEGER PRIMARY KEY,
  `username` VARCHAR(255)
);

CREATE TABLE IF NOT EXISTS `Task` (
  `id` INTEGER PRIMARY KEY,
  `title` VARCHAR(255),
  `user_id` INTEGER REFERENCES `User` (`id`) ON DELETE SET NULL ON UPDATE CASCADE
);

在task和user的关系之 中在task上注入user_id外键,并将其标记为User表的引用。默认情况下,如果引用的用户被删除,user_id将被设置为NULL,如果更新了用户标识的id,则会被更新。通过将onUpdateonDelete选项传递给关联调用,可以覆盖这些选项。验证选项为RESTRICT, CASCADE, NO ACTION, SET DEFAULT, SET NULL

对于1:1和1:m关联,默认选项为SET NULL用于删除, CASCADE用于更新。对于n:m,两者的默认值为CASCADE。这意味着,如果从n:m关联的一侧删除或更新行,引用该行的连接表中的所有行也将被删除或更新。

在表之间添加约束意味着在使用sequelize.sync时,必须以特定顺序在数据库中创建表。如果Task引用了User,则必须先创建User表,然后才能创建Task表。这有时可能导致循环引用,其中后遗症找不到要同步的顺序。想象一下文件和版本的场景。一个文档可以有多个版本,为方便起见,一个文档可以引用它的当前版本。

const Document = this.sequelize.define('document', {
  author: Sequelize.STRING
})
const Version = this.sequelize.define('version', {
  timestamp: Sequelize.DATE
})

Document.hasMany(Version) // 这将 document_id 添加到版本
Document.belongsTo(Version, { as: 'Current', foreignKey: 'current_version_id'}) // 这将current_version_id添加到文档

但是,上面的代码将导致以下错误: Cyclic dependency found. 'Document' is dependent of itself. Dependency Chain: Document -> Version => Document.
为了减轻这一点,我们可以将 constraints: false 传递给其中一个关联:

Document.hasMany(Version)
Document.belongsTo(Version, { as: 'Current', foreignKey: 'current_version_id', constraints: false})

这将允许我们正确地同步表:

CREATE TABLE IF NOT EXISTS `Document` (
  `id` INTEGER PRIMARY KEY,
  `author` VARCHAR(255),
  `current_version_id` INTEGER
);
CREATE TABLE IF NOT EXISTS `Version` (
  `id` INTEGER PRIMARY KEY,
  `timestamp` DATETIME,
  `document_id` INTEGER REFERENCES `Document` (`id`) ON DELETE SET NULL ON UPDATE CASCADE
);

强制执行外键引用而不受约束

有时,您可能需要引用另一个表,而不添加任何约束或关联。 在这种情况下,您可以手动将引用属性添加到模式定义,并标记它们之间的关系。

// 在我们调用 Trainer.hasMany(series) 之后 Series 有一个 外参考键 trainer_id=Trainer.id 
const Series = sequelize.define('series', {
  title:        DataTypes.STRING,
  sub_title:    DataTypes.STRING,
  description:  DataTypes.TEXT,
 
  // 用 `Trainer` 设置外键关系(hasMany) 
  trainer_id: {
    type: DataTypes.INTEGER,
    references: {
      model: "trainers",
      key: "id"
    }
  }
})
 
const Trainer = sequelize.define('trainer', {
  first_name: DataTypes.STRING,
  last_name:  DataTypes.STRING
});
 
// 在我们调用 Series.hasOne(Video) 之后 Video 有一个 外参考键 series_id=Series.id
const Video = sequelize.define('video', {
  title:        DataTypes.STRING,
  sequence:     DataTypes.INTEGER,
  description:  DataTypes.TEXT,
 
  // 用 `Series` 设置关系(hasOne) 
  series_id: {
    type: DataTypes.INTEGER,
    references: {
      model: Series, // 可以是表示表名称的字符串,也可以是对模型的引用
      key:   "id"
    }
  }
});
 
Series.hasOne(Video);
Trainer.hasMany(Series);

用关联创建

如果所有元素都是新的,则可以在一个步骤中创建具有嵌套关联的实例。

创建一个 "BelongsTo", "Has Many" 或 "HasOne" 关联的元素

考虑以下模型:

const Product = this.sequelize.define('product', {
  title: Sequelize.STRING
});
const User = this.sequelize.define('user', {
  first_name: Sequelize.STRING,
  last_name: Sequelize.STRING
});
const Address = this.sequelize.define('address', {
  type: Sequelize.STRING,
  line_1: Sequelize.STRING,
  line_2: Sequelize.STRING,
  city: Sequelize.STRING,
  state: Sequelize.STRING,
  zip: Sequelize.STRING,
});

Product.User = Product.belongsTo(User);
User.Addresses = User.hasMany(Address);
// 也能用于 `hasOne`

可以通过以下方式在一个步骤中创建一个新的Product, User和一个或多个Address:

return Product.create({
  title: 'Chair',
  user: {
    first_name: 'Mick',
    last_name: 'Broadstone',
    addresses: [{
      type: 'home',
      line_1: '100 Main St.',
      city: 'Austin',
      state: 'TX',
      zip: '78704'
    }]
  }
}, {
  include: [{
    association: Product.User,
    include: [ User.Addresses ]
  }]
});

这里,我们的用户模型称为user,带小写u - 这意味着对象中的属性也应该是user。 如果给sequelize.define指定的名称为User,对象中的键也应为User。 对于addresses也是同样的,除了它是一个 hasMany 关联的复数。

用别名创建一个 “BelongsTo” 关联的元素

可以将前面的示例扩展为支持关联别名。

const Creator = Product.belongsTo(User, {as: 'creator'});

return Product.create({
  title: 'Chair',
  creator: {
    first_name: 'Matt',
    last_name: 'Hansen'
  }
}, {
  include: [ Creator ]
});

创建 “HasMany” 或 “BelongsToMany” 关联的元素

我们来介绍将产品与许多标签相关联的功能。 设置模型可能如下所示:

const Tag = this.sequelize.define('tag', {
  name: Sequelize.STRING
});

Product.hasMany(Tag);
// Also works for `belongsToMany`.

现在,我们可以通过以下方式创建具有多个标签的产品:

Product.create({
  id: 1,
  title: 'Chair',
  tags: [
    { name: 'Alpha'},
    { name: 'Beta'}
  ]
}, {
  include: [ Tag ]
})

然后,我们可以修改此示例以支持别名:

const Categories = Product.hasMany(Tag, {as: 'categories'});

Product.create({
  id: 1,
  title: 'Chair',
  categories: [
    {id: 1, name: 'Alpha'},
    {id: 2, name: 'Beta'}
  ]
}, {
  include: [{
    model: Categories,
    as: 'categories'
  }]
})

如果这篇文章对您有帮助, 感谢 下方点赞 或 Star GitHub: sequelize-docs-Zh-CN 支持, 谢谢.


查看原文

leehave 赞了文章 · 4月23日

🔥17行代码, 学会UI组件库都在用的"el.contains(node)"

干什么用的?

el.contains(node)用来判断一个元素是否在另一个元素内.
一般组价库中的"下拉"和"气泡对话框"用这个特性来实现"点击组件外部关闭组件"功能.
demo

17行实现clickOutside(点击元素外部触发)

本文并不是要讲如何实现一个"气泡"组件, 而是实现一个组件中的通用功能:点击元素外部触发, 希望帮助大家能举一反三.

源码 :
https://github.com/any86/6h/b...

最终目标

// 开始监听
const cancel = clickOutside(el, e=>{
    // 点击el外部触发
});
// 取消监听
cancel();

原理

  1. 监听documenttouchendclick事件.
  2. 在事件回调中判断event.target(当前触发事件的元素)是否在"目标元素"内

代码详解请看代码注释.

实现代码

代码基于ts实现, 🤖不过只要会js就能看懂.

const eventNames = ['click', 'touchend'];
export default function (el: Node, callback: (ev:Event) => void) {
    let isTouch = false;
    function handler(ev: Event): void {
        // touchend
        if (eventNames[1] === ev.type) isTouch = true;
        // 禁止移动端touchend触发后还触发click
        if (eventNames[0] === ev.type && isTouch) return;
        // 判断点击元素是否在el外
        // 由于ev.target的类型是EventTarget,
        // 而contains方法标注的参数类型是Node, 
        // 实际上EventTarget也是dom元素,
        // 所以此处使用需要类型断言, 标注为Node类型
        if (!el.contains(ev.target as Node)) callback(ev);
    }

    eventNames.forEach(name => {
        document.addEventListener(name, handler);
    });

    return () => {
        eventNames.forEach(name => {
            document.removeEventListener(name, handler);
        });
    }
}

扩展

说个"锦上添花"的功能, 其实我们可以借助new Event()模拟实现原生事件click-outside, 这样我们可以在🤖vue中这么用:

<div @click-outside="onCall"></div>

此处的逻辑也很简单, 不展开讲解, 如有需要请看我之前发的文章: https://juejin.im/post/5e5f32...

计划(6h仓库)

工作中只要发现可复用的"短代码", 尽量保证代体积在1kb以内, 我都会用typescript封装成函数方便大家学习, 现已增加了2例:

@6h/be-full
任意元素全屏显示, 支持PC/移动端, 不到1kb.

@6h/click-outside
点击指点元素外部触发回调, 支持手机/桌面端.

🔥typescript系列课程

基础教程从这里开始

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

第五课, 命名空间(namespace)是什么

特别篇, 在vue3🔥源码中学会typescript🦕 - "is"

第六课, 什么是声明文件(declare)? 🦕 - 全局声明篇

新手前端学🔥typescript - 实战篇, 实现浏览器全屏(59行)

🔥往期热门文章

🔥常用正则大全2020

🚆新手前端不要慌! 给你✊10根救命稻草🍃

真.1px边框, 🚀 支持任意数量边和圆角, 1 个万金油的方法

🚀揭秘vue/react组件库中🤚5个"作者不造的轮子"

vue / react的UI库都在用的几个DOM API🚀

微博

刚玩微博, 咱们可以互相关注, 嘿嘿
weibo.png

微信群

感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的100人限制, 超过100人后必须由群成员拉入)

查看原文

赞 9 收藏 2 评论 0

leehave 收藏了文章 · 4月20日

基于NODEJS的SSO登录方案

一、前言

注册、登录是服务端常做的功能,主要涉及用户信息表单提交、会员信息保存、登录状态维护,前端除了表单提交外也没有什么可参与的,能发挥的作用很少。

如果通过nodejs介入开发,则可参与更多,这也是为什么建议大家学习下nodejs,通过服务端语言来增强自己的技术栈,技术研发是一个综合类的能力,相比较Java,单纯依靠前端是难以支撑技术的体量,这也是前端人员发展后期所面临的尴尬,若以前端为主体,知晓服务端、数据库、运维、测试等技术栈,则能支撑更宽更深的技术体量。

前段时间为公司项目提供了sso解决方案,这里分享下。

二、误区

登录重点在于会员状态的维护、保持,初级者有两个误区

  • 使用数据库保持登录状态

即收到用户登录信息后,将状态维护在数据库,这样是可行的,但效率是非常低,因为后续每次涉及到用户权限的页面、数据获取都需要先验证状态,通过数据库操作耗时

  • 单纯使用session

这算不上一个误区,也是教程常用的方式,不过session通常是保存在当前服务的缓存里的,单台服务可行,但多台服务器集群时,session无法共享

基于上面两种情况,我们需要一个可被多台服务器快速访问的独立服务 -- redis。memcache也可达到,不过相比之下,redis功能、稳定性都更好。

登录实现

前后端分离时我采用了下图的架构,可参考 全栈技术栈

全栈架构图

前后端分离架构中登录流程

分离架构中流程如下

前后端分享时的登录流程

用户在client输入username + password,提交到Node服务,Node对数据做规则有效性验证,错误则返回,通过则发给java到DB做信息验证,会员信息有效,由java端生成sessionId,通过http-header-cookie,由nodejs保存到客户端的cookie里,同时由java将sessionId保存到独立的缓存服务器redis里,以sessionId为key,可以多保存一些不适合保存在客户端的信息,如权限。

当客户端请求用户数据时,http会自动带上cookie,nodejs检查是否有sessionId,如无,或在redis里不存在,则返回错误或redirect到login.html,若有,则继续请求java,通常任何一个涉及到用户信息的请求,无论是renderView,还是fetchData,都需要验证,所以需要频繁的获取验证,此时redis的缓存读取效率更高。

用户退出时,由nodejs清空cookie,及redis里的sessionId,即可。

SSO实现

浏览器出于安全考虑,实现了同源策略,对于跨站请求可以使用jsonp或设置http的Access-Control-Allow-Origin实现跨域。

同源策略对cookie的访问限制,造成不同域无法相互访问(二级域名可以访问主域)。所以若A/B两个不同域名的站点,使用同一套会员体系,也无法同时登录(如baidu.com / hao123.com),而实际项目中我们需要处理这样的问题,即会员A站登录后,打开B站也要保持该会员的登录状态,我的实现见下图

SSO实现

A/B两站,分别有客户端和服务端,单站登录的客户端与服务端的通信见前图,此处不在描述,涉及跨站的流程大致如下

会员在A站登录,A站服务端生成sessionId外,再额外生成一个ticket,设置3s时效,以请求返回值的形式返回给客户端,如下,同时,将ticket以{ticket: sid}形式保存在redis里

#返回值
{
   code: 0,
   message: 'signin success',
   data: {ticket:'ffqwoij1230340lklfdf123fklk'
}

A站客户端收到返回后,请求B站的链接,如

B.com/api/auth.gif?ticket=ffqwoij1230340lklfdf123fklk

B站服务端收到该请求后,获取该ticket,到redis内验证该ticket存在,且取到sessionid,再将sessionid,通过http-header-cookie输出到B站客户端的cookie里,即为B添加的会员状态的标识。同时删除redis里的ticket。

A/B站都使用了同一个sid,且保存在同一个redis里,所以任何一方因退出而清空redis.sessionid的操作,都会引起其它站点的退出。

注意以下几点:

  • A站收到ticket后,马上发出B站的请求做登录验证,间隔时间很短,3S通常是够了,设置时效性,也更安全

  • ticket的生成需要加入请求的客户端信息,以便数据被拦截后在其它环境非法登录,如IP等信息

  • 发向B站的请求,通常有图片、iframe两种形式,后者过重,图片形式较轻。

思考该方案时参考了百度的实现,也只是参考了其发图片请求这一点,其内部的机制并不了解,加上自己的思考实现这一套方案,且用于公司的项目上。

若需要两个以上的域名登录,处理相同。

百度登录

参见百度的实现,可以看到其发出了多个crossdomain请求,每个都是向不同的域发出的请求,如hao123.com、anquanbao.com等

查看原文

leehave 收藏了文章 · 3月18日

104道 CSS 面试题,助你查漏补缺

CSS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记,分享这份总结给大家,对大家对 CSS 的可以来一次全方位的检漏和排查,感谢原作者 CavsZhouyou 的付出,原文链接放在文章最下方,如果出现错误,希望大家共同指出!

1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

相关知识点:

(1)有两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box)
(2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

IE盒模型和W3C标准盒模型的区别:

(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding
(2)IE盒模型:属性width,height包含content、border和padding,指的是content
+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。

回答:

盒模型都是由四个部分组成的,分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content,而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说,我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

详细的资料可以参考:
《CSS 盒模型详解》

2.CSS 选择符有哪些?

(1)id选择器(#myid)
(2)类选择器(.myclassname)
(3)标签选择器(div,h1,p)
(4)后代选择器(h1p)
(5)相邻后代选择器(子)选择器(ul>li)
(6)兄弟选择器(li~a)
(7)相邻兄弟选择器(li+a)
(8)属性选择器(a[rel="external"])
(9)伪类选择器(a:hover,li:nth-child)
(10)伪元素选择器(::before、::after)
(11)通配符选择器(*)

3.::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用。

相关知识点:

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角,::after生成的内容会在::before生成的内容之上。

回答:

在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。

4.伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句
话中的第一个字母,或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的
元素时,我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::be
fore来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号(::)而不是一个冒号(:)。这是CSS3的一部分,并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行
特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细资料可以参考:
《总结伪类与伪元素》

5.CSS 中哪些属性可以继承?

相关资料:

每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。

当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值(这里的意思应
该是在该属性本身的定义中的默认值)。

当元素的一个非继承属性(在Mozillacode里有时称之为resetproperty)没有指定值时,则取属性的初始值initialv
alue(该值在该属性的概述里被指定)。

有继承性的属性:

(1)字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

(2)文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

(3)表格布局属性
caption-sideborder-collapseempty-cells

(4)列表属性
list-style-type、list-style-image、list-style-position、list-style

(5)光标属性
cursor

(6)元素可见性
visibility

(7)还有一些不常用的;speak,page,设置嵌套引用的引号类型quotes等属性


注意:当一个属性不是继承属性时,可以使用inherit关键字指定一个属性应从父元素继承它的值,inherit关键字用于显式地
指定继承性,可用于任何继承性/非继承性属性。

回答:

每一个属性在定义中都给出了这个属性是否具有继承性,一个具有继承性的属性会在没有指定值的时候,会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有,字体相关的属性,font-size和font-weight等。文本相关的属性,color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候,我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

详细的资料可以参考:
《继承属性》
《CSS 有哪些属性可以继承?》

6.CSS 优先级算法如何计算?

相关知识点:

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级,如下:

(1)标签内选择符x,0,0,0
(2)ID选择符0,x,0,0
(3)class选择符/属性选择符/伪类选择符    0,0,x,0
(4)元素和伪元素选择符0,0,0,x

计算方法:

(1)每个等级的初始值为0
(2)每个等级的叠加为选择器出现的次数相加
(3)不可进位,比如0,99,99,99
(4)依次表示为:0,0,0,0
(5)每个等级计数之间没关联
(6)等级判断从左向右,如果某一位数值相同,则判断下一位数值
(7)如果两个优先级相同,则最后出现的优先级高,!important也适用
(8)通配符选择器的特殊性值为:0,0,0,0
(9)继承样式优先级最低,通配符样式优先级高于继承样式
(10)!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

计算实例:

(1)#demoa{color:orange;}/*特殊性值:0,1,0,1*/
(2)div#demoa{color:red;}/*特殊性值:0,1,0,2*/


注意:
(1)样式应用时,css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性。

(2)特殊性值越大的声明优先级越高。

(3)相同特殊性值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)

回答:

判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!important。一条声明如果加上了权重,
那么它的优先级就是最高的,前提是它之后不再出现相同权重的声明。如果权重相同,我们则需要去比较匹配规则的特殊性。

一条匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级,
第一个等级是行内样式,为1000,第二个等级是id选择器,为0100,第三个等级是类选择器、伪类选择器和属性选择器,为0010,
第四个等级是元素选择器和伪元素选择器,为0001。规则中每出现一个选择器,就将它的特殊性进行叠加,这个叠加只限于对应的等
级的叠加,不会产生进位。选择器特殊性值的比较是从左向右排序的,也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候,那么就会根据它们引
入的顺序,后出现的规则的优先级最高。

对于组合声明的特殊性值计算可以参考:
《CSS 优先级计算及应用》
《CSS 优先级计算规则》

7.关于伪类 LVHA 的解释?

a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;

当链接未访问过时:

(1)当鼠标滑过a链接时,满足:link和:hover两种状态,要改变a标签的颜色,就必须将:hover伪类在:link伪
类后面声明;
(2)当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时,情况基本同上,只不过需要将:link换成:visited。

这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,
也就不存在覆盖的问题。

8.CSS3 新增伪类有那些?

(1)elem:nth-child(n)选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数
值,也可以接受函数。

(2)elem:nth-last-child(n)作用同上,不过是从后开始查找。

(3)elem:last-child选中最后一个子元素。

(4)elem:only-child如果elem是父元素下唯一的子元素,则选中之。

(5)elem:nth-of-type(n)选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。

(6)elem:first-of-type选中父元素下第一个elem类型元素。

(7)elem:last-of-type选中父元素下最后一个elem类型元素。

(8)elem:only-of-type如果父元素下的子元素只有一个elem类型元素,则选中该元素。

(9)elem:empty选中不包含子元素和内容的elem类型元素。

(10)elem:target选择当前活动的elem元素。

(11):not(elem)选择非elem元素的每个元素。

(12):enabled    控制表单控件的禁用状态。

(13):disabled        控制表单控件的禁用状态。

(14):checked单选框或复选框被选中。

详细的资料可以参考:
《CSS3 新特性总结(伪类)》
《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》

9.如何居中 div?

-水平居中:给 div 设置一个宽度,然后添加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

-水平居中,利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

-让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外边距为自身宽高的一半*/
background-color:pink;/*方便看效果*/
}

-水平垂直居中二

/*未知容器的宽高,利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

-水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答:

一般常见的几种居中的方法有:

对于宽高固定的元素

(1)我们可以利用margin:0auto来实现元素的水平居中。

(2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水
平和垂直方向上的居中。

(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素
的中心点到页面的中心。

(4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素
的中心点到页面的中心。

(5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐,然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。

10.display 有哪些值?说明他们的作用。

block    块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none    元素不显示,并从文档流中移除。
inline    行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block默认宽度为内容宽度,可以设置宽高,同行显示。
list-item    像块类型元素一样显示,并添加样式列表标记。
table    此元素会作为块级表格来显示。
inherit    规定应该从父元素继承display属性的值。

详细资料可以参考:
《CSSdisplay 属性》

11.position 的值 relative 和 absolute 定位原点是?

相关知识点:

absolute
生成绝对定位的元素,相对于值不为static的第一个父元素的paddingbox进行定位,也可以理解为离自己这一级元素最近的
一级position设置为absolute或者relative的父元素的paddingbox的左上角为原点的。

fixed(老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。

relative
生成相对定位的元素,相对于其元素本身所在正常位置进行定位。

static
默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right,z-index声明)。

inherit
规定从父元素继承position属性的值。

回答:

relative定位的元素,是相对于元素本身的正常位置来进行定位的。

absolute定位的元素,是相对于它的第一个position值不为static的祖先元素的paddingbox来进行定位的。这句话
我们可以这样来理解,我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素,然后相对于这个祖先元
素的paddingbox来定位,也就是说在计算定位距离的时候,padding的值也要算进去。

12.CSS3 有哪些新特性?(根据项目回答)

新增各种CSS选择器    (:not(.input):所有class不是“input”的节点)
圆角        (border-radius:8px)
多列布局    (multi-columnlayout)
阴影和反射    (Shadow\Reflect)
文字特效        (text-shadow)
文字渲染        (Text-decoration)
线性渐变        (gradient)
旋转            (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

13.请解释一下 CSS3 的 Flexbox(弹性盒布局模型),以及适用场景?

相关知识点:

Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、cl
ear和vertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flexcontainer),简称"容器"。它的所有子元素自动成为容器成员,称为Flex
项目(flexitem),简称"项目"。

容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),项目默认沿主轴排列。


以下6个属性设置在容器上。

flex-direction属性决定主轴的方向(即项目的排列方向)。

flex-wrap属性定义,如果一条轴线排不下,如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。


以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认
值为auto,即项目的本来大小。

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为01auto。

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

回答:

flex布局是CSS3新增的一种布局方式,我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器,它的所有子元素都会成为它的项目。

一个容器默认有两条轴,一个是水平的主轴,一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目,我们可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。

详细资料可以参考:
《Flex 布局教程:语法篇》
《Flex 布局教程:实例篇》

14.用纯 CSS 创建一个三角形的原理是什么?

采用的是相邻边框连接处的均分原理。
  将元素的宽高设为0,只设置
  border
  ,把任意三条边隐藏掉(颜色设为
  transparent),剩下的就是一个三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

15.一个满屏品字布局如何设计?

简单的方式:
    上面的div宽100%,
    下面的两个div分别宽50%,
    然后用float或者inline使其不换行即可

16.CSS 多列等高如何实现?

(1)利用padding-bottom|margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow:
hidden),这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则
父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

(2)利用table-cell所有单元格高度都相等的特性,来实现多列等高。

(3)利用flex布局中项目align-items属性默认为stretch,如果项目未设置高度或设为auto,将占满整个容器的高度
的特性,来实现多列等高。

详细资料可以参考:
《前端应该掌握的 CSS 实现多列等高布局》
《CSS:多列等高布局》

17.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧?

(1)png24位的图片在iE6浏览器上出现背景
解决方案:做成PNG8,也可以引用一段脚本处理。

(2)浏览器默认的margin和padding不同
解决方案:加一个全局的*{margin:0;padding:0;}来统一。

(3)IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或
margin-right,margin值会加倍。

#box{float:left;width:10px;margin:00010px;}

这种情况之下IE会产生20px的距离
解决方案:在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

(4)渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用"\9"这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用"+"将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

(5)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义
属性;Firefox下,只能使用getAttribute()获取自定义属性
解决方法:统一通过getAttribute()获取自定义属性。

(6)IE下,event对象有x、y属性,但是没有pageX、pageY属性;Firefox下,event对象有
pageX、pageY属性,但是没有x、y属性。
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

(7)Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法:

1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是,在chrome
更新到27版本之后就不可以用了。

2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收缩的是整个span的大小,这时候,必须要将span转换成块元素,可以使用display:block/inline-block/...;

(8)超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了
解决方法:改变CSS属性的排列顺序L-V-H-A

(9)怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。

18.li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

浏览器会把inline元素间的空白字符(空格、换行、Tab等)渲染成一个空格。而为了美观。我们通常是一个<li>放在一行,
这导致<li>换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。

解决办法:

(1)为<li>设置float:left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。

(2)将所有<li>写在同一行。不足:代码不美观。

(3)将<ul>内的字符尺寸直接设为0,即font-size:0。不足:<ul>中的其他字符尺寸也被设为0,需要额外重新设定其他
字符尺寸,且在Safari浏览器依然会出现空白间隔。

(4)消除<ul>的字符间隔letter-spacing:-8px,不足:这也设置了<li>内的字符间隔,因此需要将<li>内的字符
间隔设为默认letter-spacing:normal。

详细资料可以参考:
《li 与 li 之间有看不见的空白间隔是什么原因引起的?》

19.为什么要初始化 CSS 样式?

-因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

-当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法:*{padding:0;margin:0;}(强烈不建议)

淘宝的样式初始化代码:
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

20.什么是包含块,对于包含块的理解?

包含块(containingblock)就是元素用来计算和定位的一个框。

(1)根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。

(2)对于其他元素,如果该元素的position是relative或者static,则“包含块”由其最近的块容器祖先盒的contentbox
边界形成。

(3)如果元素position:fixed,则“包含块”是“初始包含块”。

(4)如果元素position:absolute,则“包含块”由最近的position不为static的祖先元素建立,具体方式如下:

如果该祖先元素是纯inline元素,则规则略复杂:
•假设给内联元素的前后各生成一个宽度为0的内联盒子(inlinebox),则这两个内联盒子的paddingbox外面的包
围盒就是内联元素的“包含块”;
•如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是CSS2.1规范并没有明确定义,浏览器自行发挥
否则,“包含块”由该祖先的paddingbox边界形成。

如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。

21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?

(1)对于一般的元素,它的表现跟visibility:hidden;是一样的。元素是不可见的,但此时仍占用页面空间。

(2)但例外的是,如果这个元素是table相关的元素,例如table行,tablegroup,table列,tablecolumngroup,它的
表现却跟display:none一样,也就是说,它们占用的空间也会释放。

在不同浏览器下的区别:

在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。

在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位
置。

详细资料可以参考:
《CSS 里的 visibility 属性有个鲜为人知的属性值:collapse》

22.width:auto 和 width:100%的区别

一般而言

width:100%会使元素box的宽度等于父元素的contentbox的宽度。

width:auto会使元素撑满整个父元素,margin、border、padding、content区域会自动分配水平空间。

23.绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的。

非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。

24.简单介绍使用图片 base64 编码的优点和缺点。

base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的
url属性。

使用base64的优点是:

(1)减少一个图片的HTTP请求

使用base64的缺点是:

(1)根据base64的编码原理,编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中,不仅会造成文件体
积的增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。

(2)使用base64无法直接缓存,要缓存只能缓存包含base64的文件,比如HTML或者CSS,这相比域直接缓存图片的效果要
差很多。

(3)兼容性的问题,ie8以前的浏览器不支持。

一般一些网站的小图标可以使用base64图片来引入。

详细资料可以参考:
《玩转图片 base64 编码》
《前端开发中,使用 base64 图片的弊端是什么?》
《小 tip:base64:URL 背景图片与 web 页面性能优化》

25.'display'、'position'和'float'的相互关系?

(1)首先我们判断display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现。

(2)然后判断position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被
设置为table或者block,具体转换需要看初始转换值。

(3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display
的值则按上面的规则转换。注意,如果position的值为relative并且float属性的值存在,则relative相对
于浮动后的最终位置定位。

(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,
则保持指定的display属性值不变。

总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在
的时候,浮动不起作用,'display'的值也需要调整;其次,元素的'float'特性的值不是"none"的时候或者它是根元素
的时候,调整'display'的值;最后,非根元素,并且非浮动元素,并且非绝对定位的元素,'display'特性值同设置值。

详细资料可以参考:
《position 跟 display、margincollapse、overflow、float 这些特性相互叠加后会怎么样?》

26.margin 重叠问题的理解。

相关知识点:

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合
并”。

产生折叠的必备条件:margin必须是邻接的!

而根据w3c规范,两个margin是邻接的必须满足以下条件:

•必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
•没有线盒,没有空隙,没有padding和border将他们分隔开
•都属于垂直方向上相邻的外边距,可以是下面任意一种情况
•元素的margin-top与其第一个常规文档流的子元素的margin-top
•元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
•height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
•高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top
和margin-bottom


margin合并的3种场景:

(1)相邻兄弟元素margin合并。

解决办法:
•设置块状格式化上下文元素(BFC)

(2)父级和第一个/最后一个子元素的margin合并。

解决办法:

对于margin-top合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-top值;
•父元素设置padding-top值;
•父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-bottom值;
•父元素设置padding-bottom值;
•父元素和最后一个子元素之间添加内联元素进行分隔;
•父元素设置height、min-height或max-height。

(3)空块级元素的margin合并。

解决办法:
•设置垂直方向的border;
•设置垂直方向的padding;
•里面添加内联元素(直接Space键空格是没用的);
•设置height或者min-height。

回答:

margin重叠指的是在垂直方向上,两个相邻元素的margin发生重叠的情况。

一般来说可以分为四种情形:

第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC
来解决。

第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的,所以我们可以通过这
一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们,当然我们也可以将父元素设置为BFC
来解决。

第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相
邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们,也可以为
父元素设置一个高度,max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。

第四种情况,是没有内容的元素,自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、pa
dding或者高度来解决这个问题。

27.对 BFC 规范(块级格式化上下文:blockformattingcontext)的理解?

相关知识点:

块格式化上下文(BlockFormattingContext,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒
子的区域,也是浮动元素与其他元素的交互限定区域。

通俗来讲

•BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

创建BFC

(1)根元素或包含根元素的元素
(2)浮动元素float=left|right或inherit(≠none)
(3)绝对定位元素position=absolute或fixed
(4)display=inline-block|flex|inline-flex|table-cell或table-caption
(5)overflow=hidden|auto或scroll(≠visible)

回答:

BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。

一般来说根元素是一个BFC区域,浮动和绝对定位的元素也会形成BFC,display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

详细资料可以参考:
《深入理解 BFC 和 MarginCollapse》
《前端面试题-BFC(块格式化上下文)》

28.IFC 是什么?

IFC指的是行级格式化上下文,它有这样的一些布局规则:

(1)行级上下文内部的盒子会在水平方向,一个接一个地放置。
(2)当一行不够的时候会自动切换到下一行。
(3)行级上下文的高度由内部最高的内联盒子的高度决定。

详细资料可以参考:

《BFC 和 IFC 的理解(布局)》

29.请解释一下为什么需要清除浮动?清除浮动的方式

浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,
不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框
的高度小于浮动框的时候,此时就会出现“高度塌陷”。

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。

清除浮动的方式

(1)使用clear属性清除浮动。参考28。

(2)使用BFC块级格式化上下文来清除浮动。参考26。

因为BFC元素不会影响外部元素的特点,所以BFC元素也可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元
素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。

30.使用 clear 属性清除浮动的原理?

使用clear属性清除浮动,其语法如下:

clear:none|left|right|both

如果单看字面意思,clear:left应该是“清除左浮动”,clear:right应该是“清除右浮动”的意思,实际上,这种解释是有问
题的,因为浮动一直还在,并没有清除。

官方对clear属性的解释是:“元素盒子的边不能和前面的浮动元素相邻。”,我们对元素设置clear属性是为了避免浮动元素
对该元素的影响,而不是清除掉浮动。

还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻,注意这里“前面的”3个字,也就是clear属
性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left,要么是right,不可能同时存在,同时由于clear
属性对“后面的”浮动元素不闻不问,因此,当clear:left有效的时候,clear:right必定无效,也就是此时clear:left
等同于设置clear:both;同样地,clear:right如果有效也是等同于设置clear:both。由此可见,clear:left和cle
ar:right这两个声明就没有任何使用的价值,至少在CSS世界中是如此,直接使用clear:both吧。

一般使用伪元素的方式清除浮动

.clear::after{
content:'';
display:table;//也可以是'block',或者是'list-item'
clear:both;
}

clear属性只有块级元素才有效的,而::after等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置disp
lay属性值的原因。

31.zoom:1 的清除浮动原理?

清除浮动,触发hasLayout;
zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距(margin)
的重叠,浮动清除,触发ie的haslayout属性等。

来龙去脉大概如下:
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发
生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属性是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标
准化,出现在CSS3.0规范草案中。

目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?可以通过css3里面的动画属性scale进行缩放。

32.移动端的布局用过媒体查询吗?

假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些
媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法

当媒体查询为真时,相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假,标签上带有媒体查询的样式表仍将被
下载(只不过不会被应用)。

包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改
内容便可以使样式应用于某些特定的设备范围。

详细资料可以参考:
《CSS3@media 查询》
《响应式布局和自适应布局详解》

33.使用 CSS 预处理器吗?喜欢哪个?

SASS(SASS、LESS没有本质区别,只因为团队前端都是用的SASS)

34.CSS 优化、提高性能的方法有哪些?

加载性能:

(1)css压缩:将写好的css进行打包压缩,可以减少很多的体积。
(2)css单一样式:当需要下边距和左边距的时候,很多时候选择:margin:top0bottom0;但margin-bottom:bot
tom;margin-left:left;执行的效率更高。
(3)减少使用@import,而建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。

选择器性能:

(1)关键选择器(keyselector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到
左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

(2)如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹
配它们了)。

(3)避免使用通配规则,如*{}计算次数惊人!只对需要用到的元素进行选择。

(4)尽量少的去对标签进行选择,而是用class。

(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过
三层,更多的使用类来关联每一个标签元素。

(6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

渲染性能:

(1)慎重使用高性能属性:浮动、定位。

(2)尽量减少页面重排、重绘。

(3)去除空规则:{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

(4)属性值为0时,不加单位。

(5)属性值为浮动小数0.**,可以省略小数点之前的0。

(6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。

(7)不使用@import前缀,它会影响css的加载速度。

(8)选择器优化嵌套,尽量避免层级过深。

(9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清
楚,再使用。

(10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。

(11)不滥用web字体。对于中文网站来说WebFonts可能很陌生,国外却很流行。webfonts通常体积庞大,而且一些浏
览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性、健壮性:

(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。
(2)样式与内容分离:将css代码定义到外部css中。

详细资料可以参考:
《CSS 优化、提高性能的方法有哪些?》
《CSS 优化,提高性能的方法》

35.浏览器是怎样解析 CSS 选择器的?

样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作,样式系统就会持续左移,直
到和规则匹配,或者是因为不匹配而放弃该规则。

试想一下,如果采用从左至右的方式读取CSS规则,那么大多数规则读到最后(最右)才会发现是不匹配的,这样做会费时耗能,
最后有很多都是无用的;而如果采取从右向左的方式,那么只要发现最右边选择器不匹配,就可以直接舍弃了,避免了许多无效匹配。

详细资料可以参考:
《探究 CSS 解析原理》

36.在网页中应该使用奇数还是偶数的字体?为什么呢?

(1)偶数字号相对更容易和web设计的其他部分构成比例关系。比如:当我用了14px的正文字号,我可能会在一些地方用14
×0.5=7px的margin,在另一些地方用14×1.5=21px的标题字号。
(2)浏览器缘故,低版本的浏览器ie6会把奇数字体强制转化为偶数,即13px渲染为14px。
(3)系统差别,早期的Windows里,中易宋体点阵只有12和14、15、16px,唯独缺少13px。

详细资料可以参考:
《谈谈网页中使用奇数字体和偶数字体》
《现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体?》

37.margin 和 padding 分别适合什么场景使用?

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段距离。

何时应当使用margin:
•需要在border外侧添加空白时。
•空白处不需要背景(色)时。
•上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。

何时应当时用padding:
•需要在border内测添加空白时。
•空白处需要背景(色)时。
•上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。

38.抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]

我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来,通用的做成样式模块儿共享,业务相关的,放
进业务相关的库里面做成对应功能的模块儿。

详细资料可以参考:
《CSS 规范-分类方法》

39.简单说一下 css3 的 all 属性。

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction
这两个CSS属性。支持三个CSS通用属性值,initial,inherit,unset。

initial是初始值的意思,也就是该元素元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始
值。

inherit是继承的意思,也就是该元素除了unicode-bidi和direction以外的CSS属性都继承父元素的属性值。

unset是取消设置的意思,也就是当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color,则
使用继承值;如果是没有继承特性的CSS属性,如background-color,则使用初始值。

详细资料可以参考:
《简单了解 CSS3 的 all 属性》

40.为什么不建议使用统配符初始化 css 样式。

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单,但是是通配符,需要把所有的标签都遍历一遍,当网站较大时,
样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一
套初始化样式。

出于性能的考虑,并不是所有标签都会有padding和margin,因此对常见的具有默认padding和margin的元素初始化即
可,并不需使用通配符*来初始化。

41.absolute 的 containingblock(包含块)计算方式跟正常流有什么不同?

(1)内联元素也可以作为“包含块”所在的元素;

(2)“包含块”所在的元素不是父块级元素,而是最近的position不为static的祖先元素或根元素;

(3)边界是paddingbox而不是contentbox。

42.对于 hasLayout 的理解?

hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中,一个元素要么自己对自身的内容进
行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可
能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完
成这些工作。

详细资料可以参考:
《CSS 基础篇--CSS 中 IE 浏览器的 hasLayout,IE 低版本的 bug 根源》
《CSS 魔法堂:hasLayout 原来是这样的!》

43.元素竖向的百分比设定是相对于容器的高度吗?

如果是height的话,是相对于包含块的高度。

如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

44.全屏滚动的原理是什么?用到了 CSS 的哪些属性?(待深入实践)

原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,容器及容
器内的页面取当前可视区高度,同时容器的父级元素overflow属性值设为hidden,通过更改容器可视区的位置来实现全
屏滚动效果。主要是响应鼠标事件,页面通过CSS的动画效果,进行移动。

overflow:hidden;transition:all1000msease;

详细资料可以参考:
《js 实现网页全屏切换(平滑过渡),鼠标滚动切换》
《用 ES6 写全屏滚动插件》

45.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?(待深入了解)

响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏
幕尺寸做处理。页面头部必须有meta声明的viewport。

详细资料可以参考:
《响应式布局原理》
《响应式布局的实现方法和原理》

46.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)

视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

详细资料可以参考:
《如何实现视差滚动效果的网页?》

47.如何修改 chrome 记住密码后自动填充表单的黄色背景?

chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的in
put表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

{
background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

对chrome默认定义的background-color,background-image,color使用important是不能提高其优先级的,但是
其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景,处理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhiteinset;
border:1pxsolid#CCC!important;
}

详细资料可以参考:
《去掉 chrome 记住密码后的默认填充样式》
《修改谷歌浏览器 chrome 记住密码后自动填充表单的黄色背景》

48.怎么让 Chrome 支持小于 12px 的文字?

在谷歌下css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px。

解决办法:

(1)可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决,只要加了-webkit-text-size
-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器
已经不再支持-webkit-text-size-adjust样式,所以要使用时候慎用。

(2)还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收缩的是整个元素的大小,这时候,如果是内联元素,必须要将内联元素转换成块元素,可以使用display:block/
inline-block/...;

(3)使用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。

详细资料可以参考:
《谷歌浏览器不支持 CSS 设置小于 12px 的文字怎么办?》

49.让页面里的字体变清晰,变细用 CSS 怎么做?

webkit内核的私有属性:-webkit-font-smoothing,用于字体抗锯齿,使用后字体看起来会更清晰舒服。

在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS,其他操作系统设
置后无效。

详细资料可以参考:
《让字体变的更清晰 CSS 中-webkit-font-smoothing》

50.font-style 属性中 italic 和 oblique 的区别?

italic和oblique这两个关键字都表示“斜体”的意思。

它们的区别在于,italic是使用当前字体的斜体字体,而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体,
则退而求其次,解析为oblique,也就是单纯形状倾斜。

51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?

设备像素指的是物理像素,一般手机的分辨率指的就是设备像素,一个设备的设备像素是不可变的。

css像素和设备独立像素是等价的,不管在何种分辨率的设备上,css像素的大小应该是一致的,css像素是一个相对单位,它是相
对于设备像素的,一个css像素的大小取决于页面缩放程度和dpr的大小。

dpr指的是设备像素和设备独立像素的比值,一般的pc屏幕,dpr=1。在iphone4时,苹果推出了retina屏幕,它的dpr
为2。屏幕的缩放会改变dpr的值。

ppi指的是每英寸的物理像素的密度,ppi越大,屏幕的分辨率越大。

详细资料可以参考:
《什么是物理像素、虚拟像素、逻辑像素、设备像素,什么又是 PPI,DPI,DPR 和 DIP》
《前端工程师需要明白的「像素」》
《CSS 像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》
《前端开发中像素的概念》

52.layoutviewport、visualviewport 和 idealviewport 的区别?

相关知识点:

如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定
默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
ppk把这个浏览器默认的viewport叫做layoutviewport。

layoutviewport的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表浏览器可视区域的大小,ppk把
这个viewport叫做visualviewport。

idealviewport是最适合移动设备的viewport,idealviewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元
素的宽度设为idealviewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。i
dealviewport的意义在于,无论在何种分辨率的屏幕下,那些针对idealviewport而设计的网站,不需要用户手动缩放,也
不需要出现横向滚动条,都可以完美的呈现给用户。

回答:

移动端一共需要理解三个viewport的概念的理解。

第一个视口是布局视口,在移动端显示网页时,由于移动端的屏幕尺寸比较小,如果网页使用移动端的屏幕尺寸进行布局的话,那么整
个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念,使用这个视口来对页面进行布局展
示,一般layoutviewport的大小为980px,因此页面布局不会有太大的变化,我们可以通过拖动和缩放来查看到这个页面。

第二个视口指的是视觉视口,visualviewport指的是移动设备上我们可见的区域的视口大小,一般为屏幕的分辨率的大小。visu
alviewport和layoutviewport的关系,就像是我们通过窗户看外面的风景,视觉视口就是窗户,而外面的风景就是布局视口
中的网页内容。

第三个视口是理想视口,由于layoutviewport一般比visualviewport要大,所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了idealviewport的概念,idealviewport下用户不用缩放和滚动条就能够查看到整个页面,并且页面在
不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小,让它等于设备的宽度,这个
宽度可以理解为是设备独立像素,因此根据idealviewport设计的页面,在不同分辨率的屏幕下,显示应该相同。

详细资料可以参考:
《移动前端开发之 viewport 的深入理解》
《说说移动前端中 viewport(视口)》
《移动端适配知识你到底知多少》

53.position:fixed;在 android 下无效怎么处理?

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时,因为layoutviewport的宽度大于移动端屏幕
的宽度,所以页面会出现滚动条左右移动,fixed的元素是相对layoutviewport来固定位置的,而不是移动端屏幕来固定位置的
,所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果,我们需要改变的是viewport的大小为idealviewport,可以如下设置:

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms=16.7ms

55.如何让去除 inline-block 元素间间距?

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考:
《去除 inline-block 元素间间距的 N 种方法》

56.overflow:scroll 时不能平滑滚动的问题怎么处理?

以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性,所以滑动很流
畅。

详细资料可以参考:
《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》

57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。

(1)外层div使用position:relative;高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

(2)使用flex布局,设置主轴为竖轴,第二个div的flex-grow为1。

详细资料可以参考:
《有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度(三种方案)》

58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?

相关知识点:

(1)BMP,是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常
具有较大的文件大小。

(2)GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,GIF格式还具
有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。

(3)JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来
存储照片,与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,
又会导致图片文件较GIF更大。

(4)PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的
情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8
还支持透明度的调节,而GIF并不支持。现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。

(5)PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格
式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

(6)SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图
片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企
业Logo、Icon等。

(7)WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,
如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。

•在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;
•在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小25%~34%;
•WebP图片格式支持图片透明度,一个无损压缩的WebP图片,如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式,兼容性不太好。

回答:

我了解到的一共有七种常见的图片的格式。

(1)第一种是BMP格式,它是无损压缩的,支持索引色和直接色的点阵图。由于它基本上没有进行压缩,因此它的文件体积一般比
较大。

(2)第二种是GIF格式,它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法,因此文件的体积很小。并且GIF还
支持动画和透明度。但因为它使用的是索引色,所以它适用于一些对颜色要求不高且需要文件体积小的场景。

(3)第三种是JPEG格式,它是有损压缩的使用直接色的点阵图。由于使用了直接色,色彩较为丰富,一般适用于来存储照片。但
由于使用的是直接色,可能文件的体积相对于GIF格式来说更大。

(4)第四种是PNG-8格式,它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式,它也支持透明度的调整,并
且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况,我们都可以使用PNG-8格式代替GIF格式。

(5)第五种是PNG-24格式,它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法,所以它的体积比BMP
格式的文件要小得多,但是相对于其他的几种格式,还是要大一些。

(6)第六种格式是svg格式,它是矢量图,它记录的图片的绘制方式,因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般
适合于用来制作一些网站logo或者图标之类的图片。

(7)第七种格式是webp格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是,在相
同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减小,
这样会提高用户的体验。这是谷歌开发的一种新的图片格式,目前在兼容性上还不是太好。

详细资料可以参考:
《图片格式那么多,哪种更适合你?》

59.浏览器如何判断是否支持 webp 格式图片

(1)宽高判断法。通过创建image对象,将其src属性设置为webp格式的图片,然后在onload事件中获取图片的宽高,如
果能够获取,则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数,那么就说明浏览器不支持webp格
式的图片。

(2)canvas判断方法。我们可以动态的创建一个canvas对象,通过canvas的toDataURL将设置为webp格式,然后判断
返回值中是否含有image/webp字段,如果包含则说明支持WebP,反之则不支持。

详细资料可以参考:
《判断浏览器是否支持 WebP 图片》
《toDataURL()》

60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)

网站向服务器请求的时候,会自动带上cookie这样增加表头信息量,使请求变慢。

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,所以不如隔离开
,静态资源放CDN。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请
求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer,也减少了WebServer对cookie的处理分析环节,提高了webserver的
http请求的解析速度。

详细资料可以参考:
《CDN 是什么?使用 CDN 有什么优势?》

61.style 标签写在 body 后与 body 前有什么区别?

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式
表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可
能会出现FOUC现象(即样式失效导致的页面闪烁问题)

62.什么是 CSS 预处理器/后处理器?

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成
文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然
后再编译成正常的CSS文件。

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或lesscsssprite,增强了css代码的复用性,还有层级、mixin、
变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

CSS后处理器是对CSS进行处理,并最终生成CSS的预处理器,它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了,最典型的例子是CSS压缩工具(如clean-css),只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer,
以CanIUse上的浏览器支持数据为基础,自动处理兼容性问题。

后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏
览器私有前缀,实现跨浏览器兼容性的问题。

详细资料可以参考:
《CSS 预处理器和后处理器》

63.阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的background-image,background-repeat,background
-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求,从而很好的提高页面的性能;CSSSprites
能减少图片的字节。

优点:

减少HTTP请求数,极大地提高页面加载速度
增加图片信息重复度,提高压缩比,减少图片大小
更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

缺点:

图片合并麻烦
维护麻烦,修改一个图片可能需要重新布局整个图片,样式

64.使用 rem 布局的优缺点?

优点:
在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了,兼容性也非常的好。

缺点:
(1)在奇葩的dpr设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。
(2)使用iframe引用也会出现问题。
(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问
题。

详细资料可以参考:
《css3 的字体大小单位 rem 到底好在哪?》
《VW:是时候放弃 REM 布局了》
《为什么设计稿是 750px》
《使用 Flexible 实现手淘 H5 页面的终端适配》

65.几种常见的 CSS 布局

详细的资料可以参考:
《几种常见的 CSS 布局》

66.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考:
《怎么画一条 0.5px 的边(更新)》

67.transition 和 animation 的区别

transition关注的是CSSproperty的变化,property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性,可以使用关键帧的概念,应该说可以实现更自由的动画效果。

详细资料可以参考:
《CSSanimation 与 CSStransition 有何区别?》
《CSS3Transition 和 Animation 区别及比较》
《CSS 动画简介》
《CSS 动画:animation、transition、transform、translate》

68.什么是首选最小宽度?

“首选最小宽度”,指的是元素最适合的最小宽度。

东亚文字(如中文)最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短
横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样,每一个字符都用最小宽度单元,可以试试使用CSS中的word-break:break-all。

69.为什么 height:100%会无效?

对于普通文档流中的元素,百分比高度值要想起作用,其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto,因为解释成了auto,
所以无法参与计算。

使用绝对定位的元素会有计算值,即使祖先元素的height计算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?

(1)max-width会覆盖width,即使width是行类样式或者设置了!important。

(2)min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

(1)内容区域(contentarea)。内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子
(characterbox);但是有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因此,对于这些
元素,内容区域可以看成元素自身。

(2)内联盒子(inlinebox)。“内联盒子”不会让内容成块显示,而是排成一行,这里的“内联盒子”实际指的就是元素的“外在盒
子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

(3)行框盒子(linebox),每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包含块(containingbox),由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点?

“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵
一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。

73.什么是替换元素?

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此,<img>、<object>、<video>、<iframe>或者表
单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性以外,还有以下一些特性。

(1)内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要
类似appearance属性,或者浏览器自身暴露的一些样式接口,

(2)有自己的尺寸。在Web中,很多替换元素在没有明确尺寸设定的情况下,其默认的尺寸(不包括边框)是300像素×150像
素,如<video>、<iframe>或者<canvas>等,也有少部分替换元素为0像素,如<img>图片,而表单元素的替换元素
的尺寸则和浏览器有关,没有明显的规律。

(3)在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性,对于替换元素和非替换元素,ve
rtical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline,很简单的属性值,基线之意,
被定义为字符x的下边缘,而替换元素的基线却被硬生生定义成了元素的下边缘。

(4)所有的替换元素都是内联水平元素,也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是,替换元素默认
的display值却是不一样的,有的是inline,有的是inline-block。

74.替换元素的计算规则?

替换元素的尺寸从内而外分为3类:固有尺寸、HTML尺寸和CSS尺寸。

(1)固有尺寸指的是替换内容原本的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着自己的宽度和高度的。

(2)HTML尺寸只能通过HTML原生属性改变,这些HTML原生属性包括<img>的width和height属性、<input>的s
ize属性、<textarea>的cols和rows属性等。

(3)CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸,对应盒尺寸中的contentbox。

这3层结构的计算规则具体如下

(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。

(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。

(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。

(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。

(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。

(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

75.content 与替换元素的关系?

content属性生成的对象称为“匿名替换元素”。

(1)我们使用content生成的文本是无法选中、无法复制的,好像设置了userselect:none声明一般,但是普通元素的文本
却可以被轻松选中。同时,content生成的文本无法被屏幕阅读设备读取,也无法被搜索引擎抓取,因此,千万不要自以为是
地把重要的文本信息使用content属性生成,因为这对可访问性和SEO都很不友好。

(2)content生成的内容不能左右:empty伪类。

(3)content动态生成值无法获取。

76.margin:auto 的填充规则?

margin的'auto'可不是摆设,是具有强烈的计算意味的关键字,用来计算元素对应方向应该获得的剩余间距大小。但是触发mar
gin:auto计算有一个前提条件,就是width或height为auto时,元素是具有对应方向的自动填充特性的。

(1)如果一侧定值,一侧auto,则auto为剩余空间大小。
(2)如果两侧均是auto,则平分剩余空间。

77.margin 无效的情形

(1)display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素,垂直margin有效,并且没有ma
rgin合并的问题。

(2)表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

(3)绝对定位元素非定位方位的margin值“无效”。

(4)定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性?

(1)border-width却不支持百分比。

(2)border-style的默认值是none,有一部分人可能会误以为是solid。这也是单纯设置border-width或border-col
or没有边框显示的原因。

(3)border-style:double的表现规则:双线宽度永远相等,中间间隔±1。

(4)border-color默认颜色就是color色值。

(5)默认background背景图片是相对于paddingbox定位的。

79.什么是基线和 x-height?

字母x的下边缘(线)就是我们的基线。

x-height指的就是小写字母x的高度,术语描述就是基线和等分线(meanline)(也称作中线,midline)之间的距离。在C
SS世界中,middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

ex是CSS中的一个相对单位,指的是小写字母x的高度,没错,就是指x-height。ex的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的,而基线就是x的底部,而1ex就是一个x的高度。

80.line-height 的特殊性?

(1)对于非替换元素的纯内联元素,其可视高度完全由line-height决定。对于文本这样的纯内联元素,line-height就是高
度计算的基石,用专业说法就是指定了用来计算行框盒子高度的基础高度。

(2)内联元素的高度由固定高度和不固定高度组成,这个不固定的部分就是这里的“行距”。换句话说,line-height之所以起作
用,就是通过改变“行距”来实现的。在CSS中,“行距”分散在当前文字的上方和下方,也就是即使是第一行文字,其上方也是
有“行距”的,只不过这个“行距”的高度仅仅是完整“行距”高度的一半,因此,也被称为“半行距”。

(3)行距=line-height-font-size。

(4)border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距,则向下取整;如果是文字下
边距,则向上取整。

(5)对于纯文本元素,line-height直接决定了最终的高度。但是,如果同时有替换元素,则line-height只能决定最小高度。

(6)对于块级元素,line-height对其本身是没有任何作用的,我们平时改变line-height,块级元素的高度跟着变化实际上是
通过改变块级元素里面内联级别元素占据的高度实现的。

(7)line-height的默认值是normal,还支持数值、百分比值以及长度值。为数值类型时,其最终的计算值是和当前font-si
ze相乘后的值。为百分比值时,其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

(8)如果使用数值作为line-height的属性值,那么所有的子元素继承的都是这个值;但是,如果使用百分比值或者长度值作为
属性值,那么所有的子元素继承的是最终的计算值。

(9)无论内联元素line-height如何设置,最终父级元素的高度都是由数值大的那个line-height决定的。

(10)只要有“内联盒子”在,就一定会有“行框盒子”,就是每一行内联元素外面包裹的一层看不见的盒子。然后,重点来了,在每个
“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

81.vertical-align 的特殊性?

(1)vertical-align的默认值是baseline,即基线对齐,而基线的定义是字母x的下边缘。因此,内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素,往往使用元素本身的下边缘作为基线。:一个inline-block元素,如果里面
没有内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘;否则其基线就是元素里面最后一行
内联元素的基线。

(2)vertical-align:top就是垂直上边缘对齐,如果是内联元素,则和这一行位置最高的内联元素的顶部对齐;如果display
计算值是table-cell的元素,我们不妨脑补成<td>元素,则和<tr>元素上边缘对齐。

(3)vertical-align:middle是中间对齐,对于内联元素,元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素,单元格填充盒子相对于外面的表格行居中对齐。

(4)vertical-align支持数值属性,根据数值的不同,相对于基线往上或往下偏移,如果是负值,往下偏移,如果是正值,往上
偏移。

(5)vertical-align属性的百分比值则是相对于line-height的计算值计算的。

(6)vertical-align起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display值为table-cell的元
素。

(7)table-cell元素设置vertical-align垂直对齐的是子元素,但是其作用的并不是子元素,而是table-cell元素自身。

82.overflow 的特殊性?

(1)一个设置了overflow:hidden声明的元素,假设同时存在border属性和padding属性,则当子元素内容超出容器宽度
高度限制的时候,剪裁的边界是borderbox的内边缘,而非paddingbox的内边缘。

(2)HTML中有两个标签是默认可以产生滚动条的,一个是根元素<html>,另一个是文本域<textarea>。

(3)滚动条会占用容器的可用宽度或高度。

(4)元素设置了overflow:hidden声明,里面内容高度溢出的时候,滚动依然存在,仅仅滚动条不存在!

83.无依赖绝对定位是什么?

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84.absolute 与 overflow 的关系?

(1)如果overflow不是定位元素,同时绝对定位元素和overflow容器之间也没有定位元素,则overflow无法对absolute
元素进行剪裁。

(2)如果overflow的属性值不是hidden而是auto或者scroll,即使绝对定位元素高宽比overflow元素高宽还要大,也
都不会出现滚动条。

(3)overflow元素自身transform的时候,Chrome和Opera浏览器下的overflow剪裁是无效的。

85.clip 裁剪是什么?

所谓“可访问性隐藏”,指的是虽然内容肉眼看不见,但是其他辅助设备却能够进行识别和访问的隐藏。

clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是,它具有更强的普遍适应性,任何元素、任何场景都可以无障碍使用。

86.relative 的特殊性?

(1)相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的,而不是自身。注意,虽然定位位移是相对自身,但是百分比值的计算值不是。

(2)top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的,都是相对高度计算的。同时,如果包含块的高度是auto,那么计算值是0,偏移无效,也就是说,如果父元素没有设定高度或者不是“格式化高度”,那么relative类似top:20%的代码等同于top:0。

(3)当相对定位元素同时应用对立方向定位值的时候,也就是top/bottom和left/right同时使用的时候,只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的,默认的文档流是自上而下、从左往右,因此top/bottom同时使用的时候,bottom失效;left/right同时使用的时候,right失效。

87.什么是层叠上下文?

层叠上下文,英文称作stackingcontext,是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元
素在z轴上就“高人一等”。

层叠上下文元素有如下特性:

(1)层叠上下文的层叠水平要比普通元素高(原因后面会说明)。
(2)层叠上下文可以阻断元素的混合模式。
(3)层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
(4)每个层叠上下文和兄弟元素独立,也就是说,当进行层叠变化或渲染的时候,只需要考虑后代元素。
(5)每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。


层叠上下文的创建:

(1)页面根元素天生具有层叠上下文,称为根层叠上下文。根层叠上下文指的是页面根元素,可以看成是<html>元素。因此,页面中所有的元素一定处于至少一个“层叠结界”中。

(2)对于position值为relative/absolute以及Firefox/IE浏览器(不包括Chrome浏览器)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。Chrome等WebKit内核浏览器下,position:fixed元素天然层叠上下文元素,无须z-index为数值。根据我的测试,目前IE和Firefox仍是老套路。

(3)其他一些CSS3属性,比如元素的opacity值不是1。

88.什么是层叠水平?

层叠水平,英文称作stackinglevel,决定了同一个层叠上下文中元素在z轴上的显示顺序。

显而易见,所有的元素都有层叠水平,包括层叠上下文元素,也包括普通元素。然而,对普通元素的层叠水平探讨只局限在当前层叠上
下文元素中。

89.元素的层叠顺序?

层叠顺序,英文称作 stackingorder,表示元素发生层叠时有着特定的垂直显示顺序。

层叠顺序

90.层叠准则?

(1)谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。

(2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

91.font-weight 的特殊性?

如果使用数值作为font-weight属性值,必须是100~900的整百数。因为这里的数值仅仅是外表长得像数值,实际上是一个具有特定含义的关键字,并且这里的数值关键字和字母关键字之间是有对应关系的。

92.text-indent 的特殊性?

(1)text-indent仅对第一行内联盒子内容有效。

(2)非替换元素以外的display计算值为inline的内联元素设置text-indent值无效,如果计算值inline-block/inli
ne-table则会生效。

(3)<input>标签按钮text-indent值无效。

(4)<button>标签按钮text-indent值有效。

(5)text-indent的百分比值是相对于当前元素的“包含块”计算的,而不是当前元素。

93.letter-spacing 与字符间距?

letter-spacing可以用来控制字符之间的间距,这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

(1)继承性。
(2)默认值是normal而不是0。虽然说正常情况下,normal的计算值就是0,但两者还是有差别的,在有些场景下,letter-spacing会调整normal的计算值以实现更好的版面布局。
(3)支持负值,且值足够大的时候,会让字符形成重叠,甚至反向排列。
(4)和text-indent属性一样,无论值多大或多小,第一行一定会保留至少一个字符。
(5)支持小数值,即使0.1px也是支持的。
(6)暂不支持百分比值。

94.word-spacing 与单词间距?

letter-spacing作用于所有字符,但word-spacing仅作用于空格字符。换句话说,word-spacing的作用就是增加空格的间隙
宽度。

95.white-space 与换行和空格的控制?

white-space属性声明了如何处理元素内的空白字符,这类空白字符包括Space(空格)键、Enter(回车)键、Tab(制表符)
键产生的空白。因此,white-space可以决定图文内容是否在一行显示(回车空格是否生效),是否显示大段连续空白(空格是否
生效)等。

其属性值包括下面这些。
•normal:合并空白字符和换行符。
•pre:空白字符不合并,并且内容只在有换行符的地方换行。
•nowrap:该值和normal一样会合并空白字符,但不允许文本环绕。
•pre-wrap:空白字符不合并,并且内容只在有换行符的地方换行,同时允许文本环绕。
•pre-line:合并空白字符,但只在有换行符的地方换行,允许文本环绕。

96.隐藏元素的 background-image 到底加不加载?

相关知识点:

根据测试,一个元素如果display计算值为none,在IE浏览器下(IE8~IE11,更高版本不确定)依然会发送图片请求,Fire
fox浏览器不会,至于Chrome和Safari浏览器则似乎更加智能一点:如果隐藏元素同时又设置了background-image,则图片
依然会去加载;如果是父元素的display计算值为none,则背景图不会请求,此时浏览器或许放心地认为这个背景图暂时是不会使
用的。

如果不是background-image,而是<img>元素,则设置display:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素,则background-image也不会加载。hover情况下的background-image,在触
发时加载。

回答:

-(1)元素的背景图片

-元素本身设置 display:none,会请求图片 -父级元素设置 display:none,不会请求图片 -样式没有元素使用,不会请求
-:hover 样式下,触发时请求

-(2)img 标签图片任何情况下都会请求图片

详细资料可以参考:
《CSS 控制前端图片 HTTP 请求的各种情况示例》

97.如何实现单行/多行文本溢出的省略(...)?

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料可以参考:
《【CSS/JS】如何实现单行/多行文本溢出的省略》
《CSS 多行文本溢出省略显示》

98.常见的元素隐藏方式?

-(1)使用 display:none;隐藏元素,渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。

-(2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间,但是不会响应绑定的监听事件。

-(3)使用 opacity:0;将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。

-(4)通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。

-(5)通过 z-index 负值,来使其他元素遮盖住该元素,以此来实现隐藏。

-(6)通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

-(7)通过 transform:scale(0,0)来将元素缩放为 0,以此来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

详细资料可以参考:
《CSS 隐藏元素的八种方法》

99.css 实现上下固定中间自适应布局?

利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料可以参考:
《css 实现上下固定中间自适应布局》

100.css 两栏布局的实现?

相关资料:

/*两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。*/
/*以左边宽度固定为200px为例*/

/*(1)利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*(2)第二种是利用flex布局,将左边元素的放大和缩小比例设置为0,基础大小设置为200px。将右边的元素的放大比例设置为1,缩小比例设置为1,基础大小设置为auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为absolute定位,并且宽度设置为
200px。将右边元素的margin-left的值设置为200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为200px,右边元素设置为绝对定位,左边定位为200px,其余方向定位为0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《两栏布局 demo 展示》

回答:

两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。

以左边宽度固定为 200px 为例

-(1)利用浮动,将左边元素宽度设置为 200px,并且设置向左浮动。将右边元素的 margin-left 设置为 200px,宽度设置为 auto(默认为 auto,撑满整个父元素)。

-(2)第二种是利用 flex 布局,将左边元素的放大和缩小比例设置为 0,基础大小设置为 200px。将右边的元素的放大比例设置为 1,缩小比例设置为 1,基础大小设置为 auto。

-(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为 absolute 定位,并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

-(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为 200px,右边元素设置为绝对定位,左边定位为 200px,其余方向定位为 0。

101.css 三栏布局的实现?

相关资料:

/*三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。*/

/*(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。*/
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*(4)双飞翼布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元
素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。*/

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三栏布局 demo 展示》

回答:

三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。

(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。

(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto。

(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。

(4)圣杯布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度,而双飞翼布局则不存在这个问题。

(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。

102.实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展示》

103.实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展示》

104.一个自适应矩形,水平垂直居中,且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

推荐

笔者再次墙裂推荐收藏这篇原文,转载于 CavsZhouyou - 🐜 前端面试复习笔记,这个仓库是原作者校招时的前端复习笔记,主要总结一些比较重要的知识点和前端面试问题,希望对大家有所帮助。

最后如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的最大动力😁

查看原文

leehave 收藏了文章 · 3月13日

React Fiber 原理介绍

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

在 React Fiber 架构面世一年多后,最近 React 又发布了最新版 16.8.0,又一激动人心的特性:React Hooks 正式上线,让我升级 React 的意愿越来越强烈了。在升级之前,不妨回到原点,了解下人才济济的 React 团队为什么要大费周章,重写 React 架构,而 Fiber 又是个什么概念。

二、React 15 的问题

在页面元素很多,且需要频繁刷新的场景下,React 15 会出现掉帧的现象。请看以下例子:
https://claudiopro.github.io/...

clipboard.png

其根本原因,是大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下,JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中,他们之间是互斥的关系。如果 JS 运算持续占用主线程,页面就没法得到及时的更新。当我们调用setState更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI。整个过程是一气呵成,不能被打断的。如果页面元素很多,整个过程占用的时机就可能超过 16 毫秒,就容易出现掉帧的现象。

针对这一问题,React 团队从框架层面对 web 页面的运行机制做了优化,得到很好的效果。

clipboard.png

三、解题思路

解决主线程长时间被 JS 运算占用这一问题的基本思路,是将运算切割为多个步骤,分批完成。也就是说在完成一部分任务之后,将控制权交回给浏览器,让浏览器有时间进行页面的渲染。等浏览器忙完之后,再继续之前未完成的任务。

旧版 React 通过递归的方式进行渲染,使用的是 JS 引擎自身的函数调用栈,它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈,它以链表的形式遍历组件树,可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器的requestIdleCallback这一 API。官方的解释是这样的:

window.requestIdleCallback()会在浏览器空闲时期依次调用函数,这就可以让开发者在主事件循环中执行后台或低优先级的任务,而且不会对像动画和用户交互这些延迟触发但关键的事件产生影响。函数一般会按先进先调用的顺序执行,除非函数在浏览器调用它之前就到了它的超时时间。

有了解题思路后,我们再来看看 React 具体是怎么做的。

四、React 的答卷

React 框架内部的运作可以分为 3 层:

  • Virtual DOM 层,描述页面长什么样。
  • Reconciler 层,负责调用组件生命周期方法,进行 Diff 运算等。
  • Renderer 层,根据不同的平台,渲染出相应的页面,比较常见的是 ReactDOM 和 ReactNative。

这次改动最大的当属 Reconciler 层了,React 团队也给它起了个新的名字,叫Fiber Reconciler。这就引入另一个关键词:Fiber。

Fiber 其实指的是一种数据结构,它可以用一个纯 JS 对象来表示:

const fiber = {
    stateNode,    // 节点实例
    child,        // 子节点
    sibling,      // 兄弟节点
    return,       // 父节点
}

为了加以区分,以前的 Reconciler 被命名为Stack Reconciler。Stack Reconciler 运作的过程是不能被打断的,必须一条道走到黑:

clipboard.png

而 Fiber Reconciler 每执行一段时间,都会将控制权交回给浏览器,可以分段执行:

clipboard.png

为了达到这种效果,就需要有一个调度器 (Scheduler) 来进行任务分配。任务的优先级有六种:

  • synchronous,与之前的Stack Reconciler操作一样,同步执行
  • task,在next tick之前执行
  • animation,下一帧之前执行
  • high,在不久的将来立即执行
  • low,稍微延迟执行也没关系
  • offscreen,下一次render时或scroll时才执行

优先级高的任务(如键盘输入)可以打断优先级低的任务(如Diff)的执行,从而更快的生效。

Fiber Reconciler 在执行过程中,会分为 2 个阶段。

clipboard.png

  • 阶段一,生成 Fiber 树,得出需要更新的节点信息。这一步是一个渐进的过程,可以被打断。
  • 阶段二,将需要更新的节点一次过批量更新,这个过程不能被打断。

阶段一可被打断的特性,让优先级更高的任务先执行,从框架层面大大降低了页面掉帧的概率。

五、Fiber 树

Fiber Reconciler 在阶段一进行 Diff 计算的时候,会生成一棵 Fiber 树。这棵树是在 Virtual DOM 树的基础上增加额外的信息来生成的,它本质来说是一个链表。

clipboard.png

Fiber 树在首次渲染的时候会一次过生成。在后续需要 Diff 的时候,会根据已有树和最新 Virtual DOM 的信息,生成一棵新的树。这颗新树每生成一个新的节点,都会将控制权交回给主线程,去检查有没有优先级更高的任务需要执行。如果没有,则继续构建树的过程:

clipboard.png

如果过程中有优先级更高的任务需要进行,则 Fiber Reconciler 会丢弃正在生成的树,在空闲的时候再重新执行一遍。

在构造 Fiber 树的过程中,Fiber Reconciler 会将需要更新的节点信息保存在Effect List当中,在阶段二执行的时候,会批量更新相应的节点。

六、总结

本文从 React 15 存在的问题出发,介绍 React Fiber 解决问题的思路,并介绍了 Fiber Reconciler 的工作流程。从Stack ReconcilerFiber Reconciler,源码层面其实就是干了一件递归改循环的事情,日后有机会的话,我再结合源码作进一步的介绍。

查看原文

leehave 收藏了文章 · 3月7日

详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景

clientLeft、clientHeight、clientWidth、clientHeight

clientWidthclientHeight 元素内部宽度和高度, clientLeftclientTop 获取元素内边距边框到边框的距离.

大概如下图所示:

图片描述

clientWidth

属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。

如上图所示, 计算方式为, 分为如下两种:

  • 存在垂直滚动条

    content width + padding - scollbarWidth

  • 不存在滚动条

    content width + padding

clientHeight

属性表示元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

如上图所示, 计算方式为如下两种:

  • 存在水平滚动条

    content height + padding - scollbarWidth

  • 不存在滚动条

    content height + padding

clientLeft

表示一个元素的左边框的宽度.

计算方式为如下两种情况:

  • 如果文字方向从右往左(默认从左往右,通过设置 direction: rtl;)进行排列,且存在垂直滚动条的情况下

    border width + scollbar width

  • 默认情况下

    border width

注意:

如果当前元素是行内元素(inline)时, clientLeft将返回 0;

clientTop

表示一个元素的上边框的宽度.

把基本的情况介绍完了看看具体实例,代码如下:


<style>
    .box {
        width: 200px;
        height: 200px;
        overflow: hiddle;
        margin: 10px;
        padding: 10px;
        border: 5px solid black;
        background-color: #ccc;
        direction: rtl;
    }
</style>
<div class="box" id="box">
</div>

<script>
    var ele = document.querySelector("#box");
    var clientWidth = ele.clientWidth;
    var clientHeight = ele.clientHeight;
    var clientLeft = ele.clientLeft;
    var clientTop = ele.clientTop;

    console.log(clientWidth, clientHeight, clientLeft, clientTop);
    // 220 , 220, 5, 5
</script>

这是不存在水平和垂直,以及文字按照默认情况下排列.

下面我将对上面实例进行如下修改:

  • 给元素 .box 添加 overflow:scroll 让它显示滚动条, 再来看看每个值:

    <style>
        .box {
            ...
            overflow: scroll;
        }
    </style>

   <script>
        console.log(clientWidth, clientHeight, clientLeft, clientTop);
        // 203, 203, 5, 5
   </script>

如下图所示:

图片描述

从输出答应结果来看, clientWidth 、clientHeight 变小了,也就是说不包含其滚动条.

  • 改变容器文字输出方向,看看 clientLeft 值会不会像之前说的会加上滚动条的width ?

    <style>
        .box {
            ...
            overflow: scroll;
            direction: rtl;
        }
    </style>

   <script>
        console.log(clientWidth, clientHeight, clientLeft, clientTop);
        // 203, 203, 22, 5
   </script>

如下图所示:

图片描述

从打印结果来看, 改变文字方向(rtl)并且存在处置滚动条情况下:clientLeft = scrollbarWidth + borderLeftWidth

使用场景

计算滚动条宽度

默认情况下(没有滚动条情况下) 
clientWidth = content width + paddingLeftWidth + paddingRightWidth;
对上面示例来说 clientWidth = 200 + 10 + 10;

有滚动条情况下:
clientWidth = (content width + paddingLeftWidth + paddingRightWidth) - scrollbarWidth

可以推断出滚动条计算方式:
scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth;

clientWidth 已知, 从上面公式来看只要知道内容区域大小和左右padding值即可


    var ele = document.querySelector("#box");
    var computedStyle = window.getComputedStyle(ele);
    var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滚动条)
    var ceil = function(v){
        return Math.ceil(parseFloat(v))
    }
    var maxClientWidth = offsetWidth
        - ceil(computedStyle.borderLeftWidth)
        - ceil(computedStyle.borderRightWidth);  // ClientWidth 最大值(理想情况下, 也就是不存在滚动条)

    var scrollbarWidth = maxClientWidth          // 滚动条大小
        - ceil(ele.clientWidth);

    console.log(scrollbarWidth); // 17

这样就计算出滚动条的 width, 高度同理可得.

上面因为使用 getComputedStyle 只能兼容到 IE9+、Chrome、Firefox、Safari 等 , 需要兼容IE8以及以下版本,可以作下兼容处理:


    // 这里如果IE8以下则需要改为 getElementById
    var selector = function (selectorName) {
        if (!selectorName && !(typeof selectorName === "string")) { return {} };
        var prefix = /^#/;
        if (document.querySelector) {
            selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;
            return document.querySelector(selectorName);
        } else if(document.getElementById) {
            selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;
            return document.getElementById(selectorName);
        }
    }

    var selector = selector("box");  
    var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);
    var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滚动条)
    var ceil = function (v) {
        return Math.ceil(parseFloat(v))
    }
    var maxClientWidth = offsetWidth
        - ceil(computedStyle.borderLeftWidth)
        - ceil(computedStyle.borderRightWidth);  // ClientWidth 最大值(理想情况下, 也就是不存在滚动条)

    var scrollbarWidth = maxClientWidth          // 滚动条大小
        - ceil(ele.clientWidth);

    console.log(scrollbarWidth); // 17

元素内部实际可用区域

可用区域其实就是内容可以排放的空间, 其可见区域宽度其实就是 clientWidth - paddingLeftWidth - paddingRightWidth 的值. 

比求滚动条宽度相对简单点, 只需要知道左右内边距的大小即可.


     var selector = function (selectorName) {
        if (!selectorName && !(typeof selectorName === "string")) { return {} };
        var prefix = /^#/;
        if (document.querySelector) {
            selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;
            return document.querySelector(selectorName);
        } else if(document.getElementById) {
            selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;
            return document.getElementById(selectorName);
        }
    }

    var selector = selector("box");  
    var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);
    var ceil = function (v) {
        return Math.ceil(parseFloat(v))
    }
    console.log(ele.clientWidth - ceil(computedStyle.paddingLeft) - ceil(computedStyle.paddingRight));

上面计算方式没有什么固定,仅供参考. 更好计算方式也可以推荐下. ~ 比如通过 getBoundingClientRect() 等.

如果有什么错误问题地方,请大家指出 谢谢~

查看原文

认证与成就

  • 获得 0 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-21
个人主页被 58 人浏览