更新中...
- 隐藏一个元素有哪些实现方式
- 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什么时候才能被使用
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>
网友评论