1.清除盒模型的浮動方式
way 1: 最后追加元素,
設置 clear:both;
way 2: 偽元素清除
div::after{
clear:both,
content:'',
height:0;
line-height:0;
display:block;
visiablity:hidden;
}
div{
zoom:1; // ie下生效設置或者檢索縮放比例
}
way 3: 父元素增加overflow:hidden;
2.谷歌瀏覽器在標準模式下不支持小于12px的文字娩脾,如何讓它支持小于12px的文字
使用 -webkit-text-size-adjust:none;? 對谷歌的27.0一下版本有效贱呐,27.0以上無效,只支持英文,對英文無效砰琢,新的版本已經(jīng)禁止了修改該屬性胡桨,可以使用transform:scale(0.8) 來進行調整,當然容器也會隨著縮小烫堤,要注意重新調整位置荣赶。
3.火狐下文本無法撐開整個容器高度凤价,如何解決?css hack
div{
height:auto!important;
height:200px;
min-height:200px;
}
4.CSS3新增的選擇器有哪些拔创?
子元素選擇器利诺,相鄰兄弟選擇器,通用兄弟選擇器剩燥,群組選擇器
子元素:? ? 父 > 子
相鄰兄弟:? 元素 + 兄弟
通用兄弟: 元素 ~ 兄弟
群組:? 元素1慢逾,元素2,,,, ,
css3屬性選擇器:
Element[attribute]? ? Element[attribute=”value”]? 可以用通配符? ^ 開頭 $ 結尾 ~ 包含屬性? * 屬性值包含
Element[attribute^=”value”]
css3偽類選擇器:
行為偽類:
:hover? :active(點擊) :focus(input光標選中)
錨點偽類:
:link? :visited
狀態(tài)偽類:
:enabled :disabled? :checked :unchecked
偽元素:
::before? ? 和content配合使用
::after 和content配合使用 多用于清除浮動
::selection? 選中文本的背景色? ie9支持
E:first-child 獲取第一個
E:last-child? 獲取最后一個
E:nth-child(n) 獲取e類型的第幾個后代? 從1開始計數(shù)
E:nth-child(an + b)? 這里的n 代表 從 0 開始灭红,依次遞增的自然數(shù)
E:nth-child(even)
E:nth-child(odd)
:not 否定選擇器
Element::first-line 根據(jù)“first-line”偽元素中的樣式對Element元素的第一行文本進行格式化
Element::first-letter? 用于向文本的首字母設置特殊樣式
Element:nth-last-child(N)? ? 匹配屬于其元素的第N個子元素的每個元素侣滩,不論元素的類型,從最后一個子元素開始計數(shù)
Element:nth-of-last-type(N)? ? 匹配屬于父元素的特定類型的第N個子元素的每個元素变擒,從最后一個子元素開始計數(shù)? 帶著type都是要和選擇器元素的類型相同君珠,child則是直接返回所有子元素
Element:empty? 沒有子節(jié)點的元素
Element:only-child
Element:last-of-type 匹配屬于父元素的特定類型的最后一個子元素的每個元素
Element:first-of-type? 匹配屬于其父元素的特定類型的首個子元素的每個元素
html5新增標簽
aricle:頁面上構建完整并且獨立的內容 如小說,文章娇斑,報道類
aside:用來裝載非正文類的內容 如 廣告 側邊欄
section:標簽定義文檔中的節(jié) 例如小說中的一章
header:頁面頭部?
footer:頁腳
nav:標簽定義顯示導航鏈接
hgroup:標簽用于網(wǎng)頁或區(qū)段
figure>figcaption
<figure>:標簽包含獨立的媒體內容策添,如圖像 圖表 照片等等
<figcaption>標簽定義figure元素的標題(caption)
details>summary
<details>標簽用于描述文檔或文檔某個部分的細節(jié),而這個細節(jié)并不需要文檔加載時就展示悠菜,而是可以折疊舰攒。
屬性:open定義details是否可見
<summary>默認顯示的details元素的標題
datalist>option
輸入框提示列表 ? ?input的list屬性值為datalist的id
progress :進度條 ?屬性:max:進度完成 value:定義當前進度值
mark:標記需要突出顯示的文本
keygen:表單的密鑰對生成器
權重:
行內樣式(1000)>ID選擇器(100)>類,屬性選擇器和偽類選擇器(10)>元素和偽元素(1)>*(0)
background-origin(指定背景圖片從哪里開始顯示)
box-sizing(控制盒模型的組成模式)
content-box:? 使用此值時, 盒模型的組成模式是, 元素寬度 = content + padding + border;
border-box:? ? 使用此值時, 盒模型的組成模式是, 元素寬度 = content(即使設置了padding和border, 元素的整體寬高不變
5.CSS3動畫animate
關鍵幀(@keyframes)
animation: dropdown 8s linear infinite;
.c:hover{animation: 2s change 3 forwards;}? forwards為保持在結束狀態(tài)
不需要觸發(fā) 可以循環(huán)播放
transition? 0.4s linear background 1s
6.ES6實現(xiàn)數(shù)組去重
1. newarray = [... new Set(oldarray)]
2 .newarray = Array.from(new Set(oldarray))
3 .? function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
7.Vue中v-if和v-show的區(qū)別
v-if 直接添加或者刪除整個dom元素
v-show dom渲染出來了? 但是設置了display:none
8.Vue阻止事件冒泡
事件后增加? .stop? 阻止冒泡
.prevent 阻止默認事件
.native? 原生事件綁定到組件
如果原生組件在其他元素的包裹下悔醋,使用摩窃。native方法可能會失效,這是可以使用 this.$listener,v-on="$listeners" 將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素,和計算屬性配合使用芬骄。
Vue.component('base-input', {
? inheritAttrs: false,
? props: ['label', 'value'],
? computed: {
inputListeners: function () {
? var vm = this
? // `Object.assign` 將所有的對象合并為一個新對象
? return Object.assign({},
// 我們從父級添加所有的監(jiān)聽器
this.$listeners,
// 然后我們添加自定義監(jiān)聽器猾愿,
// 或覆寫一些監(jiān)聽器的行為
{
? // 這里確保組件配合 `v-model` 的工作
? input: function (event) {
vm.$emit('input', event.target.value)
? }
}
? )
}
? },
? template: `
<label>
? {{ label }}
? <input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
? >
</label>
? })
9.Vue的生命周期
beforCreate?
create
beforeMounted
mounted
beforeUpdate
update
beforeDestroy
destroy
10.Vue的watch是怎么運作的
Vue的數(shù)據(jù)雙向綁定有3大核心:Observer,Dep,Watcher
12.實現(xiàn)水平垂直居中
way 1:
對于行級元素或者行級塊元素:display:table-cell和vertical-align、text-align账阻,使父元素內的所有行內元素水平垂直居中(內部div設置display:inline-block即可)蒂秘。這在子元素不確定寬高和數(shù)量時,
對table-cell元素設置百分比(如100%)的寬高值時無效的淘太,但是可以將父元素設置display:table姻僧,再將父元素設置百分比寬高,子元素table-cell會自動撐滿父元素蒲牧。這就可以做相對于整個頁面的水平垂直居中
way2:
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;? ? /* 外邊距為自身寬高的一半 */
? }
? way3:
? div {
position: absolute; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
way4:
? .container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
}?
13.cookie撇贺、localStore和sessionStore的區(qū)別
共同點:都是保存在瀏覽器端馆里、且同源的
區(qū)別:
1刨秆、cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務器間來回傳遞骂远,而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務器挎扰,僅在本地保存翠订。cookie數(shù)據(jù)還有路徑(path)的概念巢音,可以限制cookie只屬于某個路徑下
2、存儲大小限制也不同尽超,cookie數(shù)據(jù)不能超過4K官撼,同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)橙弱,如會話標識歧寺。sessionStorage和localStorage雖然也有存儲大小的限制燥狰,但比cookie大得多棘脐,可以達到5M或更大
3、數(shù)據(jù)有效期不同龙致,sessionStorage:僅在當前瀏覽器窗口關閉之前有效蛀缝;localStorage:始終有效,窗口或瀏覽器關閉也一直保存目代,因此用作持久數(shù)據(jù)屈梁;cookie:只在設置的cookie過期時間之前有效,即使窗口關閉或瀏覽器關閉
4榛了、作用域不同在讶,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面霜大;localstorage在所有同源窗口中都是共享的构哺;cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知機制战坤,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者
6曙强、web Storage的api接口使用更方便
14.get和post的區(qū)別
對于GET方式的請求,瀏覽器會把http header和data一并發(fā)送出去途茫,服務器響應200(返回數(shù)據(jù))碟嘴; ff瀏覽器發(fā)送一個包? 不管是post還是get
網(wǎng)絡差的時候可以判斷數(shù)據(jù)是否完整。
而對于POST囊卜,瀏覽器先發(fā)送header娜扇,服務器響應100 continue,瀏覽器再發(fā)送data栅组,服務器響應200 ok(返回數(shù)據(jù))雀瓢。
get參數(shù)通過url傳遞,post放在request body中笑窜。
get請求在url中傳遞的參數(shù)是有長度限制的致燥,而post沒有。
get比post更不安全排截,因為參數(shù)直接暴露在url中嫌蚤,所以不能用來傳遞敏感信息辐益。
get請求只能進行url編碼,而post支持多種編碼方式脱吱。
get會主動cache,請求參數(shù)會被完成的保留到瀏覽記錄里智政,而post不會。
15.瀏覽器渲染頁面的過程
HTML解析出DOM Tree
CSS解析出Style Rules
將二者關聯(lián)生成Render Tree
Layout 根據(jù)Render Tree計算每個節(jié)點的信息
Painting 根據(jù)計算好的信息繪制整個頁面
Repaint ——屏幕的一部分要重畫箱蝠,比如某個CSS的背景色變了续捂。但是元素的幾何尺寸沒有變。
Reflow 元件的幾何尺寸變了宦搬,我們需要重新驗證并計算Render Tree牙瓢。是Render Tree的一部分或全部發(fā)生了變化。這就是Reflow间校,或是Layout矾克。
發(fā)起請求;
解析HTML憔足;
解析樣式胁附;
執(zhí)行JavaScript;
布局滓彰;
繪制
頁面優(yōu)化:
HTML文檔結構層次盡量少控妻,最好不深于六層;
腳本盡量后放揭绑,放在前即可弓候;
少量首屏樣式內聯(lián)放在標簽內;
樣式結構層次盡量簡單洗做;
在腳本中盡量減少DOM操作弓叛,盡量緩存訪問DOM的樣式信息,避免過度觸發(fā)回流诚纸;
減少通過JavaScript代碼修改元素樣式撰筷,盡量使用修改class名方式操作樣式或動畫;
動畫盡量使用在絕對定位或固定定位的元素上畦徘;
隱藏在屏幕外毕籽,或在頁面滾動時,盡量停止動畫井辆;
盡量緩存DOM查找关筒,查找器盡量簡潔;
涉及多域名的網(wǎng)站杯缺,可以開啟域名預解析
16.CSS怎么渲染的
? 瀏覽器CSS匹配不是從左到右進行查找蒸播,而是從右到左進行查找。
? css樣式規(guī)則渲染是先就近渲染,然后才依據(jù)選擇符權重進行渲染袍榆。
? :important > 內聯(lián) > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 >通配符 > 繼承
瀏覽器下載的順序是從上到下胀屿,渲染的順序也是從上到下,下載和渲染是同時進行的包雀。
在渲染到頁面的某一部分時宿崭,其上面的所有部分都已經(jīng)下載完成(并不是說所有相關聯(lián)的元素都已經(jīng)下載完)。
如果遇到語義解釋性的標簽嵌入文件(JS腳本才写,CSS樣式)葡兑,那么此時IE的下載過程會啟用單獨連接進行下載。
并且在下載后進行解析赞草,解析過程中讹堤,停止頁面所有往下元素的下載。
樣式表在下載完成后房资,將和以前下載的所有樣式表一起進行解析蜕劝,解析完成后,將對此前所有元素(含以前已經(jīng)渲染的)重新進行渲染轰异。
JS、CSS中如有重定義暑始,后定義函數(shù)將覆蓋前定義函數(shù)搭独。
? 渲染效率與下面三點有關:
css選擇器的查詢定位效率
瀏覽器的渲染模式和算法
要進行渲染內容的大小
17.怎么理解原型鏈
object.prototype
18.transition和keyframes的區(qū)別
1:transition需要一個事件來觸發(fā),比如hover廊镜,所以沒法在網(wǎng)頁加載時自動發(fā)生
2: transition是一次性的牙肝,不能重復發(fā)生,除非一再觸發(fā)嗤朴。
3: transition只能定義開始狀態(tài)和結束狀態(tài)配椭,不能定義中間狀態(tài),也就是說只有兩個狀態(tài)雹姊。
4:一條transition規(guī)則股缸,只能定義一個屬性的變化,不能涉及多個屬性吱雏。
keyframes 可以定義中間狀態(tài)敦姻,還可以設定是否循環(huán)調用,不需要事件觸發(fā)歧杏。
19. 實現(xiàn)一個方法镰惦,返回一個boolean值,判斷輸入是否為回文犬绒。
str = str.replace(/W/g, '').toLowerCase();? ? ? //將非a-Z0-9-的字符替換為空旺入,轉為小寫字符
return (str == str.split('').reverse().join(''));? //字符串分割 反轉 重新連接 如果等于原先則為true
20.js中的數(shù)據(jù)類型
基本:string 、 number 凯力、 symbol 茵瘾、boolean 急膀、undefined
復雜類型:Object 、 array龄捡、 function
1. undefined:未定義的變量卓嫂,或未賦值的變量,或不存在的變量屬于undefined聘殖;
2. NaN:非數(shù)字類型晨雳,但是NaN屬于number,可用isNaN();來判斷是否屬于非數(shù)字奸腺。NaN不和任何值相等餐禁,包括NaN本身。NaN兩個N大寫突照,中間的a小寫帮非。
3. boolean:布爾值,我們常說的真假讹蘑,真為1末盔,假為0。只有這兩個值座慰。
4. null:空陨舱,屬于object,但是判斷null == undefined時返回true版仔。判斷null === undefined時為false游盲;
21.反轉字符串
1. 使用 Array的reverse()方法
char[] c = original.spilt('');
Array.Reverse(c);
2. 逆序遍歷
3. public static String strReverseWithRecursive(String string){
? ? ? ? if(string==null||string.length()==0)return string;
? ? ? ? int length = string.length();
? ? ? ? if(length==1){
? ? ? ? ? ? return string;
? ? ? ? }else{
? ? ? ? ? ? return? strReverseWithRecursive(string.substring(1))+string.charAt(0);
? ? ? ? }
? ? }
22.用CSS實現(xiàn)三角形
div{
width:0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #000;
border-bottom:0px;
}
23.不使用border,畫個1px的線蛮粮,在標準模式和怪異模式下展示一樣
<divstyle="width:100%;height:1px;background-color:black"></div>
<? hr size="1" > 不太兼容
24.說一下CSS Reset的作用和好處
css? reset的作用就是重置這些默認樣式益缎,使樣式表現(xiàn)一致;
為了讓頁面獲得瀏覽器跨瀏覽器的兼容性然想,需要用重置文件css代碼覆蓋瀏覽器默認的樣式來統(tǒng)一樣式莺奔。
25.什么是BFC,作用是什么又沾?
1. BFC 塊級格式上下文弊仪,浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions)杖刷,
以及overflow值不為“visiable”的塊級盒子励饵,都會為他們的內容創(chuàng)建新的BFC(塊級格式上下文)。
2. 生成BFC元素的子元素會一個接一個的放置滑燃。垂直方向上他們的起點是一個包含塊的頂部役听,兩個相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素外邊距會折疊。
特點:? 內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定典予。(完整的說法是:屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊甜滨,與方向無關。)
每個元素的左外邊距與包含塊的左邊界相接觸(從左向右)瘤袖,即使浮動元素也是如此衣摩。(這說明BFC中子元素不會超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)
BFC的區(qū)域不會與float的元素區(qū)域重疊
計算BFC的高度時捂敌,浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器艾扮,容器里面的子元素不會影響到外面元素,反之亦然
看到以上的幾條約束占婉,讓我想起學習css時的幾條規(guī)則
Block元素會擴展到與父元素同寬泡嘴,所以block元素會垂直排列
垂直方向上的兩個相鄰DIV的margin會重疊,而水平方向不會(此規(guī)則并不完全正確)
浮動元素會盡量接近往左上方(或右上方)
為父元素設置overflow:hidden或浮動父元素逆济,則會包含浮動元素
3.產(chǎn)生條件
1).float的值不是none酌予。
2)、position的值不是static或者relative奖慌。
3)抛虫、display的值是inline-block、table-cell升薯、flex莱褒、table-caption或者inline-flex
4)、overflow的值不是visible,
4. 作用
1).阻止垂直外邊距(margin-top涎劈、margin-bottom)折疊
2).包含浮動元素
與浮動元素相鄰的已生成BFC的元素不能與浮動元素相互覆蓋,可以實現(xiàn)左右固定寬度? 中間自適應。? 左右模塊設置浮動阅茶,中間元素設置overflow:hidden
總結一句話:就是垂直方向上的margin會重合
27.Restful的規(guī)范理解
? ? RESTful是一種架構的規(guī)范與約束蛛枚、原則,符合這種規(guī)范的架構就是RESTful架構脸哀。
28.怎么解決瀏覽器的跨域
1. jsonp? 為啥script請求不存在跨域:因為script? link? 和 img? 等請求不受同源策略限制蹦浦,ajax異步請求則受同源策略限制。
2. 后端進行處理? 過濾器中指定可跨域? Access-control-allow-origin
3. document.domain? Cookie是服務器寫入瀏覽器的一段信息撞蜂,只有同源的網(wǎng)頁才能共享盲镶,但是,兩個網(wǎng)頁一級域名相同蝌诡,只是二級域名不同溉贿,瀏覽器允許通過設置document.domain共Cookie。
4. 瀏覽器窗口有window.name屬性浦旱。這個屬性的最大特點是宇色,無論是否同源,只要在同一個窗口里,前一個網(wǎng)頁設置這個屬性宣蠕,后一個網(wǎng)頁就可以讀取它例隆。
29.實現(xiàn)一個方法,傳入一個參數(shù)抢蚀,判斷這個參數(shù)是不是整數(shù)镀层,用運算表達式實現(xiàn)
1. X^0 === X;
2. Math.round(x) === x;? 或者可以使用ceil和floor判斷
3. (typeof x === 'number') && (x % 1 === 0);? ?
注意:? 使用parseInt的時候,存在局限性 當數(shù)值比較大的時候皿曲,數(shù)據(jù)在進行parseInt的時候會轉化為String唱逢,這時會出現(xiàn)科學計數(shù)法即指數(shù)形式,1e+21 這時解析到1以后就不解析了 直接返回1了谷饿。結果錯誤 使用parseInt的時候惶我,存在局限性 當數(shù)值比較大的時候,數(shù)據(jù)在進行parseInt的時候會轉化為String博投,這時會出現(xiàn)科學計數(shù)法即指數(shù)形式绸贡,1e+21 這時解析到1以后就不解析了 直接返回1了。結果錯誤
實現(xiàn)一個方法毅哗,返回一個boolean值听怕,判斷輸入是否為回文。
str = str.replace(/W/g, '').toLowerCase();? ? ? //將非a-Z0-9-的字符替換為空虑绵,轉為小寫字符
return (str == str.split('').reverse().join(''));? //字符串分割 反轉 重新連接 如果等于原先則為true
30.正則
不以 尿瞭。。 開頭? ? ^(?!ab)[a-z]+$? ? 不以ab開頭的字符串
不以 翅睛。声搁。 結尾 ? ^[a-z]+(?<!bc)$? ? 不以bc結尾的字符串
31. 頁面的防抖和節(jié)流
防抖:使用延時處理,基本是使用setTimeOut進行處理捕发。
? ? function debouce(func,delay,immediate){
? ? ? var timer = null;
? ? ? return function(){
? ? ? ? var context = this;
? ? ? ? var args = arguments;
? ? ? ? if(timer) clearTimeout(time);
? ? ? ? if(immediate){
? ? ? ? ? ? //根據(jù)距離上次觸發(fā)操作的時間是否到達delay來決定是否要現(xiàn)在執(zhí)行函數(shù)
? ? ? ? ? ? var doNow = !timer;
? ? ? ? ? ? //每一次都重新設置timer疏旨,就是要保證每一次執(zhí)行的至少delay秒后才可以執(zhí)行
? ? ? ? ? ? timer = setTimeout(function(){
? ? ? ? ? ? ? ? timer = null;
? ? ? ? ? ? },delay);
? ? ? ? ? ? //立即執(zhí)行
? ? ? ? ? ? if(doNow){
? ? ? ? ? ? ? ? func.apply(context,args);
? ? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? ? timer = setTimeout(function(){
? ? ? ? ? ? ? ? func.apply(context,args);
? ? ? ? ? ? },delay);
? ? ? ? }
? ? }
}
節(jié)流流:節(jié)流函數(shù)允許一個函數(shù)在規(guī)定的時間內只執(zhí)行一次。
節(jié)流和防抖動最大的區(qū)別就是扎酷,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁檐涝,都會保證在規(guī)定時間內一定會執(zhí)行一次真正的事件處理函數(shù)。
節(jié)流時間戳實現(xiàn):
var throttle = function(func,delay){
? ? var prev = Date.now();
? ? return function(){
? ? ? ? var context = this;
? ? ? ? var args = arguments;
? ? ? ? var now = Date.now();
? ? ? ? if(now-prev>=delay){
? ? ? ? ? ? func.apply(context,args);
? ? ? ? ? ? prev = Date.now();
? ? ? ? }
? ? }
}
節(jié)流定時器實現(xiàn):
// 簡單的節(jié)流函數(shù)
function throttle(func, wait, mustRun) {
var timeout,startTime = new Date();
return function() {
var context = this,args = arguments,curTime = new Date();
clearTimeout(timeout);
// 如果達到了規(guī)定的觸發(fā)時間間隔法挨,觸發(fā) handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 沒達到觸發(fā)間隔谁榜,重新設定定時器
}else{
timeout = setTimeout(func, wait);
}
};
};
32.深度克隆
1.function copyObject(Target,Origin){
var Target = Target||{};
for (const key in Origin) {
//判斷是否是自己的屬性
if (Origin.hasOwnProperty(key)) {
if( Origin[key]!== null &&? typeof(Origin[key]) == "Object"){
if(Object.prototype.toString.call(Origin[key]) == "[Object Array]"){? //call方法表示調用?
Target[key] = [];
}else{
Target[key] = {};
}
copyObject(Target[key],Origin[key]);
}else{
Target[key] = Origin[key];
}
}
}
}
2. 使用object.assign參數(shù)為true時為深拷貝
? 判斷一個對象是array的方法:
? 1. arr instance Array ;
? 2. arr.constructor === Array ? ? 1 2 存在漏洞
? 3. Object.prototype.toString? ? 最嚴謹
33 . transform屬性
功能:該屬性允許我們對元素進行旋轉、縮放凡纳、移動或傾斜窃植。
屬性? translate(x,y)? 按照x y 軸移動距離
? scale(x,y)? ? ? 按照 水平 垂直距離縮放?
? rotate(angle)? ? 按照角度旋轉? 參數(shù)為角度? 360度 為? 2*Math.pi
? skew(x-angle,y-angle)? 按照角度傾斜? ?
? matrix(n,n,n,n,n,n)? 矩陣轉換
34.vuex中mutation需要在methods中調用,值可以在computed中獲取
store中只有mutation是的時候? 不存在action的時候? ?
methods中調用
this.$store.commit(mutation下定義的名稱);?
獲取的時候?
this.$store.state.獲取對象的名稱
存在action的時候? action中執(zhí)行?
? increment(context){
context.commit(mutation中定義的函數(shù));
? },
methods中使用?
this.$store.dispatch(actions下定義的名稱);
獲取的時候?
this.$store.state.獲取對象的名稱
35.css預處理語言
saaa? 變量? $mainColor: #0982c1;? ? 引用? ? color: $publicColor;
less? 變量 @mainColor: #0982c1;? ? 引用? ? color: @publicColor;
stylus Stylus對變量名沒有任何限定惫企,你可以是$開始撕瞧,也可以是任意字符陵叽,
而且與變量值之間可以用冒號、空格隔開丛版,需要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量巩掺,但其對應的值并不會賦予該變量,換句話說页畦,在 Stylus 的變量名不要用 @ 開頭胖替。
預處理優(yōu)點:
1.層級關系更明確
2 section {
? margin: 10px;
? nav {
height: 25px;
a {
? color: #0982C1;
? &:hover {
text-decoration: underline;
? }
}
? }
}
36.axios跨域處理:原理為服務器代理
1. 修改config下的index.js 中的
proxyTable: {
? '/api': {
target: 'https://api.douban.com',// 請換成你的地址
changeOrigin: true,
pathRewrite: {
? '^/api': ''
}
? }
}
2 .增加main.js中的Vue.prototype.HOST = '/api'
請求時 路徑就變?yōu)? this.HOST + 后邊地址+參數(shù)
38.created中使用axios加載數(shù)據(jù)? 值放在data中的時候 then方法中使用箭頭函數(shù)?
then的內部不能使用Vue的實例化的this, 因為在內部 this 沒有被綁定。
解決:聲明self? self.users= res.data;或者使用 ES6 的 箭頭函數(shù)arrow function豫缨,箭頭方法可以和父方法共享變量独令。
created() {? ? ? ?
axios.post('http://jsonplaceholder.typicode.com/users'').then((res) => {? ? ? ? ? ?
this.users= res.data;? ? ?
})? ?
},
39.標準模式:瀏覽器按W3C標準解析執(zhí)行代碼。
? 怪異模式:兼容老頁面好芭。使用瀏覽器自己的方式解析執(zhí)行代碼燃箭,因為不同瀏覽器解析執(zhí)行的方式不一樣
① 不存在doctype或形式不正確會導致怪異模式;
② 有過渡/框架dtd沒有URI會導致頁面以怪異模式呈現(xiàn)舍败;
③ IE中招狸,如果doctype聲明在xml之后,會導致怪異模式邻薯。
40.浮動的原理
float 屬性定義元素在哪個方向浮動裙戏。以往這個屬性總應用于圖像,使文本圍繞在圖像周圍厕诡,不過在 CSS 中累榜,任何元素都可以浮動。浮動元素會生成一個塊級框灵嫌,自動增加display:block屬性壹罚,而不論它本身是何種元素
float設置的浮動元素對塊級元素不可見,會覆蓋掉浮動元素寿羞,對文本元素和bfc元素可見渔嚷。
41. Javascript 中函數(shù)聲明和函數(shù)表達式是存在區(qū)別的,函數(shù)聲明在JS解析時進行函數(shù)提升稠曼,因此在同一個作用域內,
不管函數(shù)聲明在哪里定義客年,該函數(shù)都可以進行調用霞幅。而函數(shù)表達式的值是在JS運行時確定,并且在表達式賦值完成后量瓜,該函數(shù)才能調用
42. #main-navigation {? }? ? ? /* ID(最快) */
body.home #page-wrap {? }? /* ID */
.main-navigation {? }? ? ? /* Class */
ul li a.current {? }? ? ? /* Class *
ul {? }? ? ? ? ? ? ? ? ? ? /* Tag */
ul li a {? }? ? ? ? ? ? ? ? /* Tag */
* {? }? ? ? ? ? ? ? ? ? ? /* Universal(慢) */
#content [title='home']? ? /* Universal */
43. property是DOM中的屬性司恳,是JavaScript里的對象;
attribute是HTML標簽上的特性绍傲,它的值只能夠是字符串
property會從attribute中獲取同步扔傅,然而attribute不會從property中獲取同步
attribute(特性)耍共,是我們賦予某個事物的特質或對象。
property(屬性)猎塞,是早已存在的不需要外界賦予的特質试读。
44. 自調用函數(shù)執(zhí)行之后,如果沒有return 返回值或者聲明變量接受返回值荠耽,都會立即消失钩骇,?
output為一個輸出文本的函數(shù),執(zhí)行
output(typeof (function (){output('hello world')})());
執(zhí)行結果為? hello world? undefined
首先執(zhí)行 自執(zhí)行函數(shù)? 函數(shù)打印? hello world?
然后執(zhí)行 typeof 空? 輸出 undefined
45. noscript? 標簽用來定義在腳本未被執(zhí)行時的替代內容
此標簽可被用于可識別 script標簽但無法支持其中的腳本的瀏覽器铝量。
46 .js引擎
1. 創(chuàng)建一個全局對象(Global Object) 倘屹, 這個對象全局只存在一份,它的屬性在任何地方都可以訪問慢叨,它的存在伴隨著應用程序的整個生命周期? 將 window? math date string等? 取得時候直接用即可放在全局對象上
2. JS引擎需要構建一個執(zhí)行環(huán)境棧 也要創(chuàng)建一個全局執(zhí)行環(huán)境EC 纽匙,并將這個全局執(zhí)行環(huán)境EC壓入執(zhí)行環(huán)境棧中。執(zhí)行環(huán)境棧的作用是為了保證程序能夠按照正確的順序被執(zhí)行拍谐。
3. JS引擎還要創(chuàng)建一個與EC關聯(lián)的全局變量對象vo? 并把VO指向全局對象烛缔,VO中不僅包含了全局對象的原有屬性,還包括在全局定義的變量x 和函數(shù) A赠尾,與此同時力穗,在定義函數(shù)A的時候,
還為 A 添加了一個內部屬性scope气嫁,并將scope指向了VO当窗。每個函數(shù)在定義的時候,都會創(chuàng)建一個與之關聯(lián)的scope屬性寸宵,scope總是指向定義函數(shù)時所在的環(huán)境崖面。此時的ECStack結構如下:
4. S引擎會創(chuàng)建函數(shù)A的執(zhí)行環(huán)境EC,然后EC推入執(zhí)行環(huán)境棧的頂部并獲取執(zhí)行權梯影。此時執(zhí)行環(huán)境棧中有兩個執(zhí)行環(huán)境巫员,分別是全局執(zhí)行環(huán)境和函數(shù)A執(zhí)行環(huán)境,A的執(zhí)行環(huán)境在棧頂甲棍,全局執(zhí)行環(huán)境在棧的底部简识。然后,創(chuàng)建函數(shù)A的作用域鏈(Scope Chain) 感猛,在javascript中七扰,每個執(zhí)行環(huán)境都有自己的作用域鏈,用于標識符解析陪白,當執(zhí)行環(huán)境被創(chuàng)建時颈走,它的作用域鏈就初始化為當前運行函數(shù)的scope所包含的對象。
47.JS的執(zhí)行機制是:
js解析過程分為兩個階段:預編譯期(預處理)與執(zhí)行期咱士。
首先判斷JS是同步還是異步立由,同步就進入主進程轧钓,異步就進入event table
異步任務在event table中注冊函數(shù),當滿足觸發(fā)條件后锐膜,被推入event queue?
同步任務進入主線程后一直執(zhí)行毕箍,直到主線程空閑時,才會去event queue中查看是否有可執(zhí)行的異步任務枣耀,如果有就推入主進程中
執(zhí)行一個宏任務霉晕,過程中如果遇到微任務,就將其放到微任務的“事件隊列”里
當前宏任務執(zhí)行完成后捞奕,會查看微任務的“事件隊列”牺堰,并將里面全部的微任務依次執(zhí)行完
重復以上2步驟,結合event loop(1) event loop(2)颅围,就是更為準確的JS執(zhí)行機制
48 . match是string的方法
regex中方法
1. test(); 是否匹配?
2. exec(); 匹配的結果
3. complie(); 在執(zhí)行腳本中編譯整則表達式
49. 異步async
1. async 函數(shù)中可能會有 await 表達式伟葫,這會使 async 函數(shù)暫停執(zhí)行,等待表達式中的 Promise 解析完成后繼續(xù)執(zhí)行 async 函數(shù)并返回解決結果院促。
2. async 函數(shù)返回一個 Promise 對象筏养,當函數(shù)執(zhí)行的時候,一旦遇到 await 就會先返回常拓,等到觸發(fā)的異步操作完成渐溶,再接著執(zhí)行函數(shù)體內后面的語句。
51.? boolean 轉為false的6個值? ? undefined 弄抬、null 茎辐、 '' 、NaN 掂恕、 0 拖陆、 false 。
false == '0'? true
false === '0' false
52. 預編譯(函數(shù)執(zhí)行前)※
1. 創(chuàng)建AO對象(Active Object)
2. 查找函數(shù)形參及函數(shù)內變量聲明懊亡,形參名及變量名作為AO對象的屬性依啰,值為undefined
3. 實參形參相統(tǒng)一,實參值賦給形參
4. 查找函數(shù)聲明店枣,函數(shù)名作為AO對象的屬性速警,值為函數(shù)引用
預編譯(腳本代碼塊script執(zhí)行前)
1. 查找全局變量聲明(包括隱式全局變量聲明,省略var聲明)鸯两,變量名作全局對象的屬性坏瞄,值為undefined
3. 查找函數(shù)聲明,函數(shù)名作為全局對象的屬性甩卓,值為函數(shù)引用】
注意: 預編譯階段發(fā)生變量聲明和函數(shù)聲明,沒有初始化行為(賦值)蕉斜,匿名函數(shù)不參與預編譯只有在解釋執(zhí)行階段才會進行變量初始化
53. 閉包? :函數(shù)執(zhí)行返回值為次函數(shù)聲明的內部函數(shù)? 會產(chǎn)生閉包? 閉包會產(chǎn)生內存泄漏逾柿,settimeout的第一個參數(shù)不是函數(shù)的時候缀棍,也容易產(chǎn)生內存泄漏。
54. cookie怎么存儲 存儲在哪里
cookie使用 set存儲? get獲取? ?
cookie存儲在瀏覽器端机错,每次請求會攜帶cookie
是客戶端用來存儲數(shù)據(jù)的一種選項爬范,它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發(fā)送弱匪。
缺點:一是增加了網(wǎng)絡流量青瀑,二是數(shù)據(jù)容量有限,最多只能存儲4kb的數(shù)據(jù)萧诫,瀏覽器之間各有不同斥难,三是不安全。
55. promise.all().then()? race()?
.then 執(zhí)行回調函數(shù)
Promise.all() // 所有的都有完成帘饶,相當于 且
?Promise.race() // 完成一個即可哑诊,相當于 或 不管成功與否,也可以返回失敗
**就先發(fā)這么多吧及刻,后邊的一百多道我再總結總結**