由一次面试引出的问题及联想

2019-03-07 本文已影响0人小刘要学习

更新中...

隐藏一个元素有哪些实现方式

visibility: hidden
display:none

区别：
visibility: 仅设置其可见性，并不改变其占位。
display: none 设置其可见性，并隐藏其位置
gist: https://gist.github.com/popozy/50007484fb8ce717c285bad212f1ba36

ng-hide ng-show ng-if

区别：

By default, the 'ng-hide/ng-show' class will style the element with 'display:none!important'

The 'ng-if' removes or recreates a portion of the DOM tree base on an {expression}. If the expression assigned to 'ng-if' evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted in to the DOM.

{
  width: 0; 
  height: 0
}

{
  position: absolute;
  left: -9999px;
  top: -9999px;
}

$scope $rootScope的联系 $scope, $rootScope什么时候才能被使用

$scope继承与$ rootScope,可以在各个controller中使用$rootScope的上定义的变量值

$scope只能在各自对应的controller中生效

img的sprite

存在意义：雪碧图解决每个图标请求一次，大量的http请求消耗带宽，大量时间花费在https请求的建立上所导致的性能问题。
原理：将icon等放在一张图片上，通过css的样式，控制某个icon的显示。
css属性：
- background-image
- background-position
  
  background-position value

flex布局详细用法梳理

容器属性：

display: flex;

flex-direction: row | row-reverse | column | column-reverse;
default: row 主轴方向为横向自左向右

flex-wrap: nowrap | wrap | wrap-reverse;
default: nowrap 不换行

align-items: flex-start | flex-end | center | baseline | stretch;
default: stretch 交叉轴上的对齐方式：上对齐
baseline: 项目的第一行文字的基线对齐
stretch: 伸展对齐，如果高度没设置，则撑满父容器

justify-content: flex-start | flex-end | center | space-between | space-around;
default：flex-start 主轴上的对齐方式为左对齐
space-around: 两侧留白
baseline: 项目的第一行文字的基线对齐。

shorthand
flex-flow: flex-direction || flex-wrap

子元素属性

order: <integer>; 元素排名权重，值越小，越靠前
default: 0

flex-grow: <number>; /* default 0 */
当存在剩余空间时，剩余空间的均分比例。默认0为不分

flex-shrink: <number>; /* default 0 */
当空间不足时，多出部分的缩小比例。默认1为全部等比例缩小。

flex-basis: <length> | auto; /* default auto */
子元素在均分剩余空间之前的宽/高，默认auto为子元素原有尺寸

align-self: auto | flex-start | flex-end | center | baseline | stretch; /* auto */
子元素在交叉轴上设置的自身的对齐方式，默认auto为继承父元素的align-items，如果没有该属性，默认auto继承为stretch

shorthand
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Flex Practice

两个元素，右边元素定宽，左侧自适应

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .parent {
      display: flex;
      border: 1px solid #000;
      height: 100px;
    }
    .child1 {
      flex: 1
    }
    .child2 {
      width: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

ng-app能有几个同时启动

一般angular单个页面只能加载一个ng-app，一个页面会自动加载第一个ng-app，其它ng-app不会被加载。如果想加载多个ng-app就需要使用angular.bootstrap去加载后面的ng-app

angular.bootstrap(element, [modules], [config]);
其中第一个参数element:是绑定ng-app的dom元素；
modules：绑定的模块名字
config：附加的配置

null和undefined

null表示"没有对象"，即该处不应该有值。典型用法是：作为函数的参数，表示该函数的参数不是对象；或作为对象原型链的终点。

undefined表示被定义了，但是还没赋值。

Promise

是什么
- Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
- Promise对象通过构造时传入异步执行的代码，并通过对象的then api来处理异步执行结果。
- Promise对象存在三种状态，pending, fullfiled, rejected。
- 状态变化有两种,变化只能由异步操作的结果决定，即Promise构造函数时候传入的参数foo函数中的异步代码所决定。
  pending->fullfilled(这个状态被称为，resolved定型)
  pending->rejected(这个状态被称为，resolved定型）
怎么做
通过new创建一个Promise对象，其构造函数的入参是一个函数f，函数f的入参是两个函数resolve, reject的JavaScript内置函数。如下

const promise  = new Promise(function(resolve, reject) {
    //sync code
    if(succ) { resolve(value)}
    else if(failed) {reject(error)}
});

通过 resolve和rejected完成从pending到fulfilled和rejected的状态切换，通过value和error传出起结果。
那怎么接呢？用这个promise的对象的then api，入参是success的callback和failed的callback，两个callback的入参分别是上面的value和error值，这样就可以callback接住结果来处理异步代码结果了。如下

 promise.then(function(value) {
    // success logic
}, function(error) {
   // failed logic
})

需要注意有两点

promise在new的时候，就会直接执行其构造函数入参foo函数（内部的异步代码）

promise.then即使在异步代码resolve和reject之后才执行到，也会立刻得到执行结果。这要区别于eventlistener的事件监听方式，当事件监听注册代码在异步代码返回结果之后执行，那就监听不到异步代码的返回了。

箭头函数及this的指向

(param1, param2, ...) => {
  // function body
  // this 箭头函数外层
}

待补充原理：

this--系统学习上下文与上下文栈（变量对象、this与作用域链）在JavaScript执行过程中发生实际操作
ref: https://github.com/mqyqingfeng/Blog/issues/4
javascript的深浅拷贝与直接赋值
页面性能优化
ref: http://www.ha97.com/2710.html
requirejs和import的区别
const声明变量是否可以修改

const对于基本数据类型来讲（整型，浮点，字符串，布尔值，Symbol）都是无法修改的，因为其变量存储的栈地址无法被修改
const声明的引用类型，其栈地址无法被修改，即被const修饰的变量在初始化被assign之后无法再被重新赋值（修改栈内存的地址），但是其栈内存中存着的值指向的引用对象如Map等是可以被修改的。

http1 http2 https--回顾CA多级发放，对称加密与非对称加密
refs: https://github.com/popozy/Leo-DailyGossip/blob/master/networkSecurity/2.1%20Introduction%20to%20Cryptography.pdf
canvas svg css3动画
https://www.zhihu.com/question/19690014
javascript的事件监听与冒泡
继承实现方式

原型链继承
call方式继承
组合继承（原型链+call）
寄生式继承（组合继承优化，减少原型链继承时对父类属性方法的二次拷贝）

React源码（虚拟dom和diff算法）
angularjs工程结构与懒加载
css样式表

外部样式表：

<link rel="stylesheet" type="text/css" href="css/baseStyle.css">

内部样式表：

<style type="text/css">
    .parent {
      display: flex;
      border: 1px solid #000;
      height: 100px;
    }
    .child1 {
      flex: 1
    }
    .child2 {
      width: 100px;
      background-color: red;
    }
  </style>

内联样式表

<a href="http://www.baidu.com" style="text-decoration:none" target="_blank">
这是一个不带下划线的链接
</a>

由一次面试引出的问题及联想

容器属性：

子元素属性

Flex Practice

猜你喜欢

热点阅读