更新中...
- 隱藏一個(gè)元素有哪些實(shí)現(xiàn)方式
- visibility: hidden
- display:none
區(qū)別：
visibility: 僅設(shè)置其可見性，并不改變其占位形病。
display: none 設(shè)置其可見性，并隱藏其位置
gist: https://gist.github.com/popozy/50007484fb8ce717c285bad212f1ba36
- ng-hide ng-show ng-if
區(qū)別：
- 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的聯(lián)系 $scope, $rootScope什么時(shí)候才能被使用
rootScope,可以在各個(gè)controller中使用$rootScope的上定義的變量值
- $scope只能在各自對(duì)應(yīng)的controller中生效
- img的sprite
- 存在意義：雪碧圖解決每個(gè)圖標(biāo)請(qǐng)求一次簿寂，大量的http請(qǐng)求消耗帶寬，大量時(shí)間花費(fèi)在https請(qǐng)求的建立上所導(dǎo)致的性能問題。
- 原理：將icon等放在一張圖片上袜匿，通過css的樣式，控制某個(gè)icon的顯示稚疹。
- css屬性：
- background-image
-
background-position
background-position value
- flex布局詳細(xì)用法梳理
容器屬性：
- display: flex;
- flex-direction: row | row-reverse | column | column-reverse;
default: row 主軸方向?yàn)闄M向自左向右- flex-wrap: nowrap | wrap | wrap-reverse;
default: nowrap 不換行- align-items: flex-start | flex-end | center | baseline | stretch;
default: stretch 交叉軸上的對(duì)齊方式：上對(duì)齊
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊
stretch: 伸展對(duì)齊居灯，如果高度沒設(shè)置，則撐滿父容器- justify-content: flex-start | flex-end | center | space-between | space-around;
default：flex-start 主軸上的對(duì)齊方式為左對(duì)齊
space-around: 兩側(cè)留白
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊内狗。- shorthand
flex-flow: flex-direction || flex-wrap
子元素屬性
- order: <integer>; 元素排名權(quán)重怪嫌，值越小，越靠前
default: 0- flex-grow: <number>; /* default 0 */
當(dāng)存在剩余空間時(shí)柳沙，剩余空間的均分比例岩灭。默認(rèn)0為不分- flex-shrink: <number>; /* default 0 */
當(dāng)空間不足時(shí)，多出部分的縮小比例赂鲤。默認(rèn)1為全部等比例縮小噪径。- flex-basis: <length> | auto; /* default auto */
子元素在均分剩余空間之前的寬/高，默認(rèn)auto為子元素原有尺寸- align-self: auto | flex-start | flex-end | center | baseline | stretch; /* auto */
子元素在交叉軸上設(shè)置的自身的對(duì)齊方式数初，默認(rèn)auto為繼承父元素的align-items找爱，如果沒有該屬性，默認(rèn)auto繼承為stretch- shorthand
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Flex Practice
兩個(gè)元素泡孩，右邊元素定寬车摄，左側(cè)自適應(yīng)
<!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能有幾個(gè)同時(shí)啟動(dòng)
一般angular單個(gè)頁(yè)面只能加載一個(gè)ng-app，一個(gè)頁(yè)面會(huì)自動(dòng)加載第一個(gè)ng-app仑鸥，其它ng-app不會(huì)被加載吮播。如果想加載多個(gè)ng-app就需要使用angular.bootstrap去加載后面的ng-app
angular.bootstrap(element, [modules], [config]);
其中第一個(gè)參數(shù)element:是綁定ng-app的dom元素；
modules：綁定的模塊名字
config：附加的配置
- null和undefined
null表示"沒有對(duì)象"锈候，即該處不應(yīng)該有值薄料。典型用法是： 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象泵琳；或 作為對(duì)象原型鏈的終點(diǎn)摄职。
undefined表示被定義了，但是還沒賦值获列。
- Promise
- 是什么
- Promise 是異步編程的一種解決方案谷市，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)击孩，ES6 將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)迫悠，統(tǒng)一了用法，原生提供了Promise對(duì)象巩梢。
- Promise對(duì)象通過構(gòu)造時(shí)傳入異步執(zhí)行的代碼创泄，并通過對(duì)象的then api來處理異步執(zhí)行結(jié)果艺玲。
- Promise對(duì)象存在三種狀態(tài)，pending, fullfiled, rejected鞠抑。
- 狀態(tài)變化有兩種,變化只能由異步操作的結(jié)果決定饭聚，即Promise構(gòu)造函數(shù)時(shí)候傳入的參數(shù)foo函數(shù)中的異步代碼所決定。
pending->fullfilled(這個(gè)狀態(tài)被稱為搁拙，resolved定型)
pending->rejected(這個(gè)狀態(tài)被稱為秒梳，resolved定型）
- 怎么做
通過new創(chuàng)建一個(gè)Promise對(duì)象，其構(gòu)造函數(shù)的入?yún)⑹且粋€(gè)函數(shù)f箕速，函數(shù)f的入?yún)⑹莾蓚€(gè)函數(shù)resolve, reject的JavaScript內(nèi)置函數(shù)酪碘。如下
const promise = new Promise(function(resolve, reject) {
//sync code
if(succ) { resolve(value)}
else if(failed) {reject(error)}
});
通過 resolve和rejected完成從pending到fulfilled和rejected的狀態(tài)切換，通過value和error傳出起結(jié)果盐茎。
那怎么接呢兴垦？用這個(gè)promise的對(duì)象的then api，入?yún)⑹莝uccess的callback和failed的callback庭呜，兩個(gè)callback的入?yún)⒎謩e是上面的value和error值滑进，這樣就可以callback接住結(jié)果來處理異步代碼結(jié)果了。如下
promise.then(function(value) {
// success logic
}, function(error) {
// failed logic
})
需要注意有兩點(diǎn)
- promise在new的時(shí)候募谎，就會(huì)直接執(zhí)行其構(gòu)造函數(shù)入?yún)oo函數(shù)（內(nèi)部的異步代碼）
- promise.then即使在異步代碼resolve和reject之后才執(zhí)行到扶关，也會(huì)立刻得到執(zhí)行結(jié)果。這要區(qū)別于eventlistener的事件監(jiān)聽方式数冬，當(dāng)事件監(jiān)聽注冊(cè)代碼在異步代碼返回結(jié)果之后執(zhí)行节槐，那就監(jiān)聽不到異步代碼的返回了。
- 箭頭函數(shù)及this的指向
(param1, param2, ...) => {
// function body
// this 箭頭函數(shù)外層
}
待補(bǔ)充原理：
- this--系統(tǒng)學(xué)習(xí)上下文與上下文棧（變量對(duì)象拐纱、this與作用域鏈）在JavaScript執(zhí)行過程中發(fā)生實(shí)際操作
ref: https://github.com/mqyqingfeng/Blog/issues/4 - javascript的深淺拷貝與直接賦值
- 頁(yè)面性能優(yōu)化
ref: http://www.ha97.com/2710.html - requirejs和import的區(qū)別
- const聲明變量是否可以修改
- const對(duì)于基本數(shù)據(jù)類型來講（整型铜异，浮點(diǎn)，字符串秸架，布爾值揍庄，Symbol）都是無(wú)法修改的，因?yàn)槠渥兞看鎯?chǔ)的棧地址無(wú)法被修改
- const聲明的引用類型东抹，其棧地址無(wú)法被修改蚂子，即被const修飾的變量在初始化被assign之后無(wú)法再被重新賦值（修改棧內(nèi)存的地址），但是其棧內(nèi)存中存著的值指向的引用對(duì)象如Map等是可以被修改的缭黔。
- http1 http2 https--回顧C(jī)A多級(jí)發(fā)放食茎，對(duì)稱加密與非對(duì)稱加密
refs: https://github.com/popozy/Leo-DailyGossip/blob/master/networkSecurity/2.1%20Introduction%20to%20Cryptography.pdf - canvas svg css3動(dòng)畫
https://www.zhihu.com/question/19690014 - javascript的事件監(jiān)聽與冒泡
- 繼承實(shí)現(xiàn)方式
- 原型鏈繼承
- call方式繼承
- 組合繼承（原型鏈+call）
- 寄生式繼承（組合繼承優(yōu)化，減少原型鏈繼承時(shí)對(duì)父類屬性方法的二次拷貝）
- React源碼（虛擬dom和diff算法）
- angularjs工程結(jié)構(gòu)與懶加載
- css樣式表
- 外部樣式表：
<link rel="stylesheet" type="text/css" href="css/baseStyle.css">
- 內(nèi)部樣式表：
<style type="text/css">
.parent {
display: flex;
border: 1px solid #000;
height: 100px;
}
.child1 {
flex: 1
}
.child2 {
width: 100px;
background-color: red;
}
</style>
- 內(nèi)聯(lián)樣式表
<a style="text-decoration:none" target="_blank">
這是一個(gè)不帶下劃線的鏈接
</a>
