因

現在市場上各種跨平臺開發方案百家爭鳴各有千秋，個人認為最成熟的還是hybird方案，簡單的說就是寫H5各種嵌入，當然作為前端工程師最希望的也就是公司采用hybird方案當作技術路線。

所謂的hybird方案很多時候單獨指h5嵌入app頁面，本專輯講的卻比這個要廣泛很多，作者想寫一個基礎框架嵌入所有移動端app，包括app殼子、微信公眾號、微信小程序、支付寶頁面、支付寶小程序等，而且是一套代碼可以同時嵌入各種app，這樣最大程度上節約開發成本，當然我們的框架也會注意到開發質量，如前面文章提到的移動端頁面切換動畫也是為了提升用戶體驗。

大hybird方案必須要處理的是判斷當前程序運行在什么環境中，故有此篇判斷瀏覽器類型的合集。

微信瀏覽器

微信公眾號或微信內直接打開鏈接

var ua=navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
  // 在微信中打開
}

微信小程序

// html 引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// js中如下判斷
var ua=navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
  wx.miniProgram.getEnv((res)=>{
    if (res.miniprogram) {
      // 在微信小程序中打開
    }
  })
}

支付瀏覽器

支付寶瀏覽器中

var ua=navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
  // 在支付寶中打開
}

支付寶小程序中

// html 引入
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// js中如下判斷
var ua=navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
  my.getEnv((res)=>{
    if (res.miniprogram) {
      // 在支付寶小程序中打開
    }
  })
}

app殼子

在app殼子中往往使用往ua里面添加唯一標識符來做標識。

var ua=navigator.userAgent.toLowerCase();
if (ua.match(/myapp/i)=="myapp") {
  // 在自家app殼子里面
}

其他的沒有標識的app，最后的倔強

可以使用路徑上新增參數的方式去識別，當識別到參數就在session保存起來，這樣作用周期就是某一次打開，防止了數據污染。

完整版js

我習慣命名browser-env.js

// 自家app殼子的ua標識
const SELF_APP_UA_KEY='myapp'

const browserEnv={
  enum: {
    BROWSER: 0,         // 瀏覽器訪問，

    SELFAPP: 10,        // 自己家app

    WX: 20,             // 微信瀏覽器
    WX_MINIPROGRAM: 21, // 微信小程序

    ALI: 30,            // 支付寶瀏覽器
    ALI_MINIPROGRAM: 31,// 支付寶小程序

    // ... 更多擴展
  },
  webType: 0,
  initWebType: function (type) {
    // 設置值，并且讓其不可改變，防止開發隨意篡改。
    Object.defineProperty( this, "webType", {
      value: type,
      writable: false,
      configurable: false
    });
  },
  // 識別瀏覽器類型
  identifyBrowser() {
    // ua和枚舉的淺層映射放這里，ua能匹配的都這么處理
    let codeKey={
      'micromessenger': this.enum.WX,
      'alipay': this.enum.ALI
    }
    // 添加自家app映射
    codeKey[SELF_APP_UA_KEY]=this.enum.SELFAPP;

    // 獲取ua
    let ua=navigator.userAgent.toLowerCase();
    let type=this.enum.BROWSER
    for (let key in codeKey) {
      let mk=`/${key}/i`;
      if (ua.match(mk)==key) {
        type=codeKey[key]
      }
    }

    // ua 匹配不出來的，繼續匹配  // 延遲引入JSSDK往后處理，不講究可以直接寫入html
    if (type==this.enum.WX) {
      wx.miniProgram.getEnv((res)=>{
        if (res.miniprogram) {
          type=this.enum.WX_MINIPROGRAM
        }
      })
    } else if (type==this.enum.ALI) {
      my.getEnv((res)=>{
        if (res.miniprogram) {
          type=this.enum.ALI_MINIPROGRAM
        }
      })
    }

    this.initWebType(type)
  },
  install(Vue) {
    this.identifyBrowser()

    Vue.config.globalProperties.$browserEnv=browserEnv;
  },
}

export default browserEnv;

老規矩，全局引入

import browserEnv from '@/utils/browser-env.js'
app.use(browserEnv)

使用，個人覺得使用枚舉更加清晰吧，一頓寫數字其實也挺好

if (this.$browserEnv.webType==this.$browserEnv.enum.WX) {
  // 在微信中
}

原創不易，轉載請注明出處，歡迎留言提議。

言

看了一下各種面試題，選擇題是必有的

所以我整理了一些經典的前端面試選擇題，希望能對大家日后找工作有所幫助！

HTML/CSS

1、在 css 選擇器當中，優先級排序正確的是（）

A、id選擇器>標簽選擇器>類選擇器

B、標簽選擇器>類選擇器>id選擇器

C、類選擇器>標簽選擇器>id選擇器

D、id選擇器>類選擇器>標簽選擇器

解析：

選D

4個等級的定義如下：

第一等：代表內聯樣式，如: style=””，權值為1000

第二等：代表ID選擇器，如：#content，權值為100

第三等：代表類，偽類和屬性選擇器，如.content，權值為10

第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1

2、下列定義的 css 中，哪個權重是最低的？（ ）

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

解析：

選C

權重越大，優先級越高

CSS選擇器優先級是指“基礎選擇器”的優先級：

ID > CLASS > ELEMENT > *

3、關于HTML語義化，以下哪個說法是正確的？（ ）

A、語義化的HTML有利于機器的閱讀，如PDA手持設備、搜索引擎爬蟲；但不利于人的閱讀

B、Table 屬于過時的標簽，遇到數據列表時，需盡量使用 div 來模擬表格

C、語義化是HTML5帶來的新概念，此前版本的HTML無法做到語義化

D、header、article、address都屬于語義化明確的標簽

解析：

選D

1、什么是HTML語義化？

根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、為什么要語義化？

為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構

用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；

有利于SEO ：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：

爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化

4、CSS 樣式，下面哪一個元素能夠達到最大寬度，且前后各有一個換行？（ ）

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析：

選A

塊級元素block element

行內元素 inline element

行內塊元素 inline-block element

5、下面使用Animate-timing-function定義的貝塞爾曲線，哪一個是先快后慢的（ ）

A、animation-timing-function :

cubic-bezier(.22,1.23,.97,.89)

B、animation-timing-function :

cubic-bezier(1.23,..22,97,.89)

C、animation-timing-function :

cubic-bezier(1.23,.97,.89,.22)

D、animation-timing-function ：

cubic-bezier(.22,.97,.89,1.23)

解析：

選A

cubic-bezier即為貝茲曲線中的繪制方法

有四點，分別為P0-3，其中P0、P3是默認的點，對應了[0,0], [1,1]。

而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。

cubic-bezier(x1, y1, x2, y2) 為自定義，x1,x2,y1,y2的值范圍在[0, 1]。

6、放在HTML里的哪一部分JavaScripts會在頁面加載的時候被執行？（ ）

A、文件頭部位置

B、文件尾

C、<head>標簽部分

D、<body>標簽部分

解析：

選D

head部分中的JavaScripts會在被調用的時候才執行。

body部分中的JavaScripts會在頁面加載的時候被執行。

7、問一份標準的HTML文檔有哪幾個必須的HTML標簽？（ ）

A、<html>

B、<head>

C、<title>

D、<body>

解析：

選A、B、C、D

注意一下題目說的是標準的HTML文檔

8、下列說法正確的有：（ ）

A、visibility:hidden;所占據的空間位置仍然存在，僅為視覺上的完全透明；

B、display:none;不為被隱藏的對象保留其物理空間；

C、visibility:hidden;與display:none;兩者沒有本質上的區別；

D、visibility:hidden;產生reflow和repaint（回流與重繪）；

解析：

選A、B

visiblity:看不見，摸的著.

display:看不見，摸不著.

display是dom級別的，可以渲染和重繪。

visiblity不是dom級別的，不能重繪，只能渲染

9、請選出所有的置換元素（ ）

A、img

B、input

C、textarea

D、select

解析：

選A、B、C、D

置換元素：瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容

例如：

瀏覽器會根據<img>標簽的src屬性的
值來讀取圖片信息并顯示出來，而如果查看html代碼，則看不到圖片的實際內容；
<input>標簽的type屬性來決定是顯示輸入 框，還是單選按鈕等。 
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置換元素
這些元素往往沒有實際的內容，即是一個空元素。
置換元素在其顯示中生成了框，這也就是有的內聯元素能夠設置寬高的原因。

不可替換元素：html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（如瀏覽器）

例如：

<label>label中的內容</label> 標簽<label>是一個非置換元素，文字label中的內容”將全被顯示。

10、以下哪些動畫效果無法通過貝塞爾曲線cubic-bezier實現（ ）

A、linear

B、ease

C、fade-in

D、ease-out

解析：

選C

fade-in和fade-out為淡入淡出效果

11、下面屬于CSS3新增屬性的有？（ ）

A、box-shadow

B、text-shadow

C、border-radius

D、rgba

解析：

選A、B、C、D

下邊我對CSS3新增屬性用法的整理：

1、box-shadow（陰影效果）

2、border-color（為邊框設置多種顏色）

3、border-image（圖片邊框）

4、text-shadow（文本陰影）

5、text-overflow（文本截斷）

6、word-wrap（自動換行）

7、border-radius（圓角邊框）

8、opacity（透明度）

9、box-sizing（控制盒模型的組成模式）

10、resize（元素縮放）

11、outline（外邊框）

12、background-size（指定背景圖片尺寸）

13、background-origin（指定背景圖片從哪里開始顯示）

14、background-clip（指定背景圖片從什么位置開始裁剪）

15、background（為一個元素指定多個背景）

16、hsl（通過色調、飽和度、亮度來指定顏色顏色值）

17、hsla（在hsl的基礎上增加透明度設置）

18、rgba（基于rgb設置顏色，a設置透明度）

12、input元素的type屬性的取值可以是( )

A、image

B、checkbox

C、button

D、select

解析：

選A、B、C

語法：

<input type=”value”>

屬性值：

Button：定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本)

CheckBox：定義復選框

File：定義輸入字段和”瀏覽”按鈕，供文件上傳

Hidden：定義隱藏的輸入字段

Image：定義圖像形式的提交按鈕

Password：定義密碼字段，該字段中的字符被遮碼

Radio：定義單選按鈕

Reset：定義重置按鈕，重置按鈕會清除表單中的所有數據

Submit：定義提交按鈕，提交按鈕會把表單數據發送到服務器

Text：定義單行輸入字段，用戶可在其中輸入文本，默認寬度為20個字符

13、新窗口打開網頁，用到以下哪個值（ ）

A、_self

B、_blank

C、_top

D、_parent

解析：

選B

在html中通過<a>標簽打開一個鏈接，通過 <a> 標簽的 target

屬性規定在何處打開鏈接文檔。

如果在標簽<a>中寫入target屬性，則瀏覽器會根據target的屬性值去打開與其命名或名稱相符的 框架<frame>或者窗口.

在target中還存在四個保留的屬性值如下，

_black：在新窗口中打開被鏈接文檔

_self：默認。在相同的框架中打開被鏈接文檔

_ parent：在父框架中打開被鏈接文檔

_top：在整個窗口中打開被鏈接文檔

framename：在指定框架中打開被鏈接文檔

14、以下全部屬于塊級標簽的是？（ ）

A、<div><p><input><span><img>

B、<div><h1><p><img><dl>

C、<span><h1><p><img><dl>

D、<div><p><form><ul><h1>

解析：

選D

在CSS中，html中的標簽元素大體被分為三種不同的類型：

塊狀元素、內聯元素（又叫行內元素）和內聯塊狀元素

常見的塊狀元素有：

<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常見的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常見的內聯塊狀元素有：

<img>、<input>

15、元素的alt和title有什么異同，選出正確的說法？（ ）

A、不同的瀏覽器，表現一樣

B、alt和title同時設置的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字

C、alt和title同時設置的時候，title作為圖片的替代文字出現，alt是圖片的解釋文字

D、以上說法都不正確

解析：

選B

alt是html標簽的屬性，而title既是html標簽，又是html屬性。

title標簽這個不用多說，網頁的標題就是寫在

<title></title>

這對標簽之內的。

title作為屬性時，用來為元素提供額外說明信息。

例如，給超鏈接標簽a添加了title屬性

，把鼠標移動到該鏈接上面是，就會顯示title的內容，以達到補充說明或者提示的效果。

而alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息

16、下列說法錯誤的是( )

A、設置display:none后的元素只會導致瀏覽器的重排而不會重繪

B、設置visibility:hidde后的元素只會導致瀏覽器重繪而不會重排

C、設置元素opacity:0之后，也可以觸發點擊事件

D、visibility:hidden的元素無法觸發其點擊事件

解析：

選A

設置display:none后的元素會導致瀏覽器的重排重繪

17、下列選項中，不屬于CSS3樣式選擇器的是（ ）

A、empty選擇器

B、root 選擇器

C、target選擇器

D、ID選擇器

解析：

選D

ID選擇器在css1中就定義了

18、超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序？（ ）

A、a:link {} a:visited {} a:hover {} a:active {}

B、a:visited {} a:link {} a:hover {} a:active {}

C、a:active {} a:link {} a:hover {} a:visited {}

D、a:link {} a:active {} a:hover {} a:visited {}

解析：

選A

a:link; a:visited; a:hover; a:active;

a:hover必須放在a:link和a:visited之后；

a:active必須放在a:hover之后。

19、關于position定位，下列說法錯誤的是（ ）

A、fixed元素，可定位于相對于瀏覽器窗口的指定坐標，它始終是以 body 為依據

B、relative元素以它原來的位置為基準偏移，在其移動后，原來的位置不再占據空間

C、absolute 的元素，如果它的 父容器設置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據父容器進行偏移

D、fixed 屬性的元素在標準流中不占位置

解析：

選B

absolute：

生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位，元素的位置通過”left”、”top”、”right”、以及”bottom”屬性進行規定

fixed：

生成絕對定位的元素，相對于瀏覽器窗口進行定位，元素的位置通過”left”、”top”、”right”以及”bottom”屬性進行規定

relative：

生成相對定位的元素，相對于其正常位置進行定位，因此，”left：20”會向元素的LEFT位置添加20像素

static：

默認值，沒有定位，元素出現正常的流中（忽略top，bottom，left，right或者z-index聲明）

inherit：

規定應該從父元素繼承position屬性的值

20、css中哪些屬性可以繼承（ ）

A、font-size

B、color

C、font-family

D、border

解析：

選A、B、C

margin padding border display 不可以繼承

21、下列哪些是瀏覽器支持的錨偽類：（ ）

A、a:link

B、a:disabled

C、a:hover

D、a:active

解析：

選A、C、D

在支持 css 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態和鼠標懸停狀態。用來表示鏈接不同狀態的偽類就是錨偽類

a:link {color: green;} / 未訪問的鏈接 /

a:visited {color: blue;} / 已訪問的鏈接 /

a:hover {color:orange;} / 鼠標移動到鏈接上 /

a:active {color: yellow;} / 選定的鏈接 /

22、關于CSS選擇器，以下說法正確的是：（ ）

A、每條選擇器最多只能出現一個偽元素

B、每條選擇器最多只能出現一個偽類

C、:nth-child(an+b)中n的取值從0開始

D、A+B匹配A之后所有符合B規則的元素

解析：

選A、C

C選項：

nth-child(an+b)在下標計算表達式an+b中：

a,b是系數可以是任意整數；

n就是個字面量“n”，表示是遞增變量，并且取值是從0開始的整數。

D選項：

B是A的下一個兄弟節點（AB有相同的父結點，并且B緊跟在A的后面）

23、列表分為兩類，一是無序列表，一是有序列表，以下哪個是無序列表？（ ）

A、<UL>

B、<OL>

C、<DIR>

D、<DL>

解析：

選A

Ul無序列表

OL有序列表

24、浮動會導致頁面的非正常顯示，以下幾種清除浮動的方法，哪個是不推薦使用的？（ ）

A、在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>

B、通過設置父元素overflow值為hidden；

C、父元素也設置浮動

D、給父元素添加clearfix類

解析：

選C

這四種方法都可以清除，最常用的是DA方法；

B方法的話，如果子元素中有使用了絕對定位，在頁面上顯示是在父元素外面，一般就沒法使用B方法了。

大型項目一般會多層嵌套，如果采用給父元素設置浮動的方法，那么父元素的父元素很有可能也要設置浮動，頁面布局很容易亂掉

25、下列關于web頁面級優化描述最正確的是（ ）

A、減少HTTP請求的次數

B、進行資源合拼和壓縮

C、Inline images

D、將外部腳本置于低端

E、減少不必要的HTTP跳轉

F、以上描述都對

解析：

選F

1、減少HTTP請求的次數。

http協議是無狀態的應用層協議，每次http請求都需要建立通信鏈路、進行數據傳輸，而在服務器端每個http都需要啟動獨立的線程去處理，這些通信和服務的開銷都很昂貴。所以減少http請求的數目可有效提高訪問性能，A正確。

2、進行資源合拼和壓縮。

合并CSS、合并javascript、合并圖片，將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量，B正確。

3、Inline images，使用data: URL

scheme的方式將圖片嵌入到頁面或CSS中嵌入頁面，因為直接嵌入頁面增大了頁面的體積，而且無法利用瀏覽器緩存。所以使用在CSS中的圖片則更為理想一些，C正確。

4、將外部腳本置于低端

瀏覽器在加載javascript后立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此javascript最好放在頁面最下面，D正確。

5、減少不必要的HTTP跳轉

對于以目錄形式訪問的HTTP鏈接，很多人都會忽略鏈接最后是否帶’/’，假如你的服務器對此是區別對待的話，那么你也需要注意，這其中很可能隱藏了301跳轉，增加了多余請求，E正確

26、網頁開發中，一般需判斷瀏覽器類型，需通過userAgent中獲取瀏覽器內核來判斷，下列說法錯誤的是？（ ）

A、一直到IE9，都是Trident內核

B、firefox是Gecko內核

C、chrome是webkit內核

D、IE是目前最快的瀏覽器

解析：

選D

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性 IE使用的是Trident內核，Firefox

使用的是Gecko內核。目前使用IE內核的瀏覽器還有搜狗，遨游，360等等。

27、關于浮動元素，下面說法錯誤的是（ ）

A、如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象

B、浮動元素會盡可能地向頂端對齊、向左或向右對齊

C、如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素

D、行內元素與浮動元素發生重疊，其邊框，背景和內容都會顯示在浮動元素之下

解析：

選D

行內元素與浮動元素發生重疊，邊框、背景、內容都會顯示在浮動元素之上

塊級元素與浮動元素發生重疊，邊框、背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

28、要將下面代碼中超鏈接文本呈現為紅色，不可以使用的樣式表是（ ）

<div><a href="http://www.w3.org/">**鏈接到W3C**</a></div>

A、a:link{color:red}

B、div a:link{color:red}

C、div>a:link{color:red}

D、div:first-child{color:red}

解析：

選D

div：first-child

表示選擇屬于父元素的第一個子元素的每個<div>元素

29、下列哪個不屬于id與class之間的區別（ ）

A、id在文檔中只能使用一次，而class可以多次使用

B、id比class具有更高的樣式優先級

C、一個元素只能有一個id屬性值，卻可以擁有多個class屬性值

D、在class中可以定義:hover偽類，在id中不能定義

解析：

選D

在樣式表定義一個樣式的時候，可以定義id也可以定義class。

1、在CSS文件里書寫時，ID加前綴"#"；CLASS用"."

2、id一個頁面只可以使用一次；class可以多次引用。

3、ID是一個標簽，用于區分不同的結構和內容；class是一個樣式，可以套在任何結構和內容上

4、從概念上說就是不一樣的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

30、把鼠標移到按鈕并點擊時，會產生一串什么樣的事件（ ）

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

解析：

選D

觸發順序為 link-->visited--->hover--->active

31、下列哪些是HTML5相關的框架或類庫：( )

A、spring-core

B、RactiveJS

C、Dubbo

D、Bootstrap

E、AngularJS

F、Hibernate

解析：

選B、D、E

Spring框架是一個開放源代碼的J2EE應用程序框架

Dubbo是一款高性能、輕量級的開源Java RPC框架

Hibernate是一個開放源代碼的對象關系映射框架

32、css中clear的作用是什么？（ ）

A、清除該元素所有樣式

B、清除該元素父元素的所有樣式

C、指明該元素周圍不可出現浮動元素

D、指明該元素的父元素周圍不可出現浮動元素

解析：

選C

clear : none | left | right | both.

對于CSS的清除浮動(clear)，

這個規則只能影響使用清除的元素本身，不能影響其他元素

33、css 中可繼承的屬性有哪些（ ）

A、height

B、font-size

C、border

D、width

E、color

解析：

選B、E

所有元素可繼承：visibility和cursor。

內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

終端塊狀元素可繼承：text-indent和text-align。

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image

JavaScript

1、JavaScript中window對象的子對象不包含以下哪個對象？（ ）

A. document   B. self   C. history   D. message

解析：

選D

window的主對象主要有如下幾個：

document   frames   history  location   navigator   screen

window、self、window.self三者是等價的

2、將一個整數序列整理為升序，兩趟處理后變為10,12,21,9,7,3,4,25，則采用的排序算法可能Z:（ ）

A、插入排序

B、快速排序

C、選擇排序

D、堆排序

解析：

選C

第一層循環：依次遍歷序列當中的每一個元素

第二層循環：將遍歷得到的當前元素依次與余下的元素進行比較

符合最小元素的條件，則交換

選擇排序的基本思想：比較+交換

3、下邊這代碼輸出的結果是：( )

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A、Case A

B、Case B

C、undefined

D、Do not know!

解析：

選D

此題考查的是關于new string();其中new是一個實例對象,要匹配的也是object,

所以輸出結果為Do not know

4、下邊這代碼輸出的結果是（ ）

var two=0.2
var one=0.1
var eight=0.8
var six=0.6
console.log([two - one==one, eight - six==two]);

A、[true, true]

B、[false, false]

C、[true, false]

D、other

解析：

選C

這題考的是浮點數計算時精度丟失問題

5、以下代碼的執行結果是什么（ ）

var string='string';  
var number=0;       
var bool=true;     
console.log(number || string);      
console.log(number && string); 
console.log(bool || number);
console.log(bool && number);

A. ‘string’, 0, true,0

B. ‘string’, true,0, 0

C. ‘string’, ‘string’,true, 0

D. ‘string’, 0, true,true

解析：

選A

var string='string';               對象為true
var number=0;                      非零數字為true
var bool=true;                     非空字符串為true
console.log(number || string);         其他為false
console.log(number && string);          
console.log(bool || number);
console.log(bool && number);

6、下面可以匹配的正則表達式是（ ）

<img src=”http://image.163.com”></img>

A、<img src=”[^”]*”></img>

B、<img src=”[.”]*”></img>

C、<img src=”[^”]*></img>

D、<img src=”[.”]*></img>

<font color=#F4A460> 解析： </font>

選A

var a='<IMG src="http://image.163.com">'
          var b=/<IMGsrc="[^"]*">/gi          
           var s=a.match(b)                           
        for(var i=0;i<s.length;i++)             
            {                                         
                      alert(s[i]);
                    alert(RegExp.$1)
               }

7、["1", "2", "3"].map(parseInt) 返回的結果為（ ）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

選D

這題的答案是：[1,NaN,NaN]

該題用到了map與parseInt；parseInt() 函數的語法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可選。表示要解析的數字的基數。該值介于 2 ~ 36 之間。

如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數。

如果該參數小于 2 或者大于 36，則 parseInt() 將返回 NaN

實際上map里的callback函數接受的是三個參數 分別為元素 下標和數組

回調函數的語法如下所示： function callbackfn(value, index, array1) 可使用最多三個參數來聲明回調函數。

8、[typeof null, null instanceof Object]這些類型的結果是（ ）

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解析：

選A

這題考察的是typeof運算符和instanceof運算符

typeof運算符，一些基礎類型的結果是：

Undefined "undefined"

Null "object"

Boolean "boolean"

Number "number"

String "string"

Any other object "object"

Array "object"

Null instanceof任何類型都是false

9、下邊代碼輸出的結果是（ ）

var val='smtg';
console.log('Value is ' + (val==='smtg') ? 'Something' : 'Nothing');

A: Value is Something

B: Value is Nothing

C: NaN

D: other

解析：

選D

這題考的是js中的運算符優先級，

這里’+’運算符的優先級要高于’?’

所以val===‘smtg’實際上就是true

所以結果為’Something’

10、下邊代碼輸出的結果是（ ）

var name='World!';
(function () {
    if (typeof name==='undefined') {
        var name='Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye Jack

B: Hello Jack

C: Hello undefined

D: Hello World

解析：

選A

這題考的是js作用域中變量的提升，

js的作用于中使用var定義變量都會被提升到所有代碼的最前面，

所以var name目前是undefined,

題目的typeof name===‘undefined’的結果為true時，就會輸出’Goodbye Jack’

11、var arr=[];typeof arr 的結果是（ ）

A、array

B、function

C、object

D、undefined

解析：

選C

5種簡單數據類型（也稱基本數據類型）：

Undefined、Null、Boolean、Number、String

1種復雜數據類型：Object（基本上除了上述5種，其余都是Object）

12、以下代碼執行后，console 的輸出是（ ）

function Foo(){
console.log(this.location);
}
Foo();

A、當前窗口的 Location 對象

B、undefined

C、null

D、TypeError

解析：

選A

這題考的是this的用法

'use strict'條件下，會報TypeError

無'use strict'下，this指向window

13、下列事件哪個不是由鼠標觸發的事件（）

A、click

B、contextmenu

C、mouseout

D、keydown

解析：

選D

常見的事件：

1. 點擊事件：
        1. onclick：單擊事件
        2. ondblclick：雙擊事件

    2. 焦點事件
        1. onblur：失去焦點
        2. onfocus:元素獲得焦點。

    3. 加載事件：
        1. onload：一張頁面或一幅圖像完成加載。

    4. 鼠標事件：
        1. onmousedown    鼠標按鈕被按下。
        2. onmouseup    鼠標按鍵被松開。
        3. onmousemove    鼠標被移動。
        4. onmouseover    鼠標移到某元素之上。
        5. onmouseout    鼠標從某元素移開。
    5. 鍵盤事件：
        1. onkeydown    某個鍵盤按鍵被按下。    
        2. onkeyup        某個鍵盤按鍵被松開。
        3. onkeypress    某個鍵盤按鍵被按下并松開。

    6. 選擇和改變
        1. onchange    域的內容被改變。
        2. onselect    文本被選中。

    7. 表單事件：
        1. onsubmit    確認按鈕被點擊。
        2. onreset    重置按鈕被點擊。

14、如何遍歷下面的 my_data 對象？（ ）

var my_data={a:’Ape’, b:’Banana’, c:’Citronella’};

A、for(var key in my_data) {}

B、foreach(my_data as key=>value) {}

C、for(var i=0;i<my_data.length;i++) {}

D、全不正確

解析：

選A

for in遍歷對象所擁有的屬性(可枚舉的)

由于對象和數組不同，不能用下標來訪問，只能用for in遍歷

15、如何判斷一個js對象是否是Array,arr為要判斷的對象，其中最準確的方法是？（ ）

A、typeof(arr)

B、arr instanceof Array

C、arr.toString==='[object Array]';

D、Object.prototype.toString.call(arr)==='[object Array]';

解析：

選D

A選項中的typeof(arr) 返回的是 Object

instanceof 在跨 frame 對象構建的場景下會失效

arr.toString 沒有這種用法，正確的用法是 arr.toString() 返回的是數組的內容

16、在很多時候，我們需要給網頁中的一些元素不停的切換樣式，那么要怎樣實現給元素刪除一個樣式的同時，添加另外一個樣式（ )

A、

$('#ele').removeClass('className');
$('#ele').addClass('ClassName');

B、

$('us').removeClass('className');
$('us').addClass('ClassName');

C、

$('.us').removeClass('className');
$('.us').addClass('ClassName');

D、

$('us').remove('className');
$('us').add('ClassName');

解析：

選A

B選項錯

選項使用元素選擇器，但是 HTML 中沒有 us 標簽

C選項錯

選項使用類選擇器，但是刪除了類樣式后，如何通過類選擇器給元素添加樣式

D選項錯

add() 方法：把元素添加到已存在的元素組合中。

remove() 方法：移除被選元素，包括所有的文本和子節點。

17、下列代碼hasOwnProperty的作用是？（ ）

var obj={}
……..
obj.hasOwnProperty("val")

A、判斷obj對象是否具有val屬性

B、判斷obj對象是否具有val的值

C、判斷obj的原型對象是否具有val的屬性

D、判斷obj的原型對象是否具有val的值

解析：

選A

hasOwnProperty：

是用來判斷一個對象是否有你給出名稱的屬性或對象

isPrototypeOf :

是用來判斷要檢查其原型鏈的對象是否存在于指定對象實例中，是則返回true，否則返回false。

18、下列不屬于javascript內置對象的是（ ）

A、Math

B、Date

C、RegExp

D、Window

E、Error

解析：

選D

js中的內部對象包括

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象，
包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

19、javascirpt中的數字在計算機內存儲為多少Byte（ ）

A、2 Byte

B、4Byte

C、8Byte

D、16Byte

解析：

選C

"JavaScript內部，所有數字都是以64位浮點數形式儲存，即使整數也是如此。"

8 Byte=64bit ;

8個字節，64位

20、以下運行結果（ ）

for(var i=0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10個10

C、10個9

D、無限循環

解析：

選B

setTimeout中的閉包函數是每1s執行一次

由于for循環的執行速度遠小于1s，

所以當開始執行閉包函數的時候for循環已經結束了（i=10），

之后閉包函數執行十次（因為循環了10次），所以打印了10個10。

21、若需給子scope發送消息，需使用哪個方法（ ）

A、$emit()

B、$broadcast()

C、$on()

D、$send()

解析：

選B

$broadcast是向下傳播事件

22、函數的調用方式有哪些：（ ）

A、直接調用

B、作為對象方法調用

C、作為構造函數調用

D、通過call和apply方法調用

解析：

選A、B、C、D

23、下拉菜單中，用戶更改表單元素Select中的值時，就會調用（ ）事件處理程序

A、onMouseOver

B、onFocus

C、onChange

D、onClick

解析：

選C

切換下拉菜單更改狀態用onchange

A選項：鼠標事件

B選項：焦點事件一般是input

C選項：改變狀態

D選項：點擊事件

24、在ES6規范中，以下類型哪些屬于基本數據類型（ ）

A、String

B、Null

C、Undefined

D、Symbol

解析：

選A、B、C、D

基本數據類型：

Number,String, Null, Undefined,  Boolean，Symbol（es6新增）

引用數據類型：

Object，Function

25、語句var arr=[a,b,c,d];執行后，數組arr中每項都是一個整數，下面得到其中最大整數語句正確的是哪幾項？（ ）

A、Math.max(arr)

B、Math.max(arr[0], arr[1], arr[2], arr[3])

C、Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])

D、Math.max.apply(Math,arr)

解析：

選B、C、D

因為傳入的數組，所以A選項錯誤

C選項，Function.call()可以傳入任意多個參數，所以C正確

D選項，Function.apply()第二個參數以數組形式傳遞，所以D正確

26、以下結果里，返回true的是（ ）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

選A

A選項，由于數組屬于對象類型，所以空的數組轉換成布爾型是true，前置！！，兩次取反，返回true。A正確。

B選項，“===”同等于（包含數據類型），左右兩端數據類型不同，因此返回false。

C選項，同上，由于左右兩端數據類型不同，返回false。

D選項，字符的編碼值為0的字符，因此返回false。

27、JavaScript實現繼承的方式，不正確的是( )

A、原型鏈繼承

B、構造函數繼承

C、組合繼承

D、關聯繼承

解析：

選D

JavaScript實現繼承共6種方式：

原型鏈繼承、借用構造函數繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承。

28、以下代碼執行后，console 的輸出是（ ）

let x=10;
let foo=()=> {
console.log(x);
let x=20;
x++;
}
foo();)

A、拋出 ReferenceError

B、10

C、20

D、21

解析：

選A

let不存在變量提升，所以沒有事先聲明。

let塊級作用域，所以不會去訪問外部的x。

既不會訪問外部，又沒有事先聲明，輸出x便會報錯

29、關于 this 的工作原理，下面 4 種情況的描述哪一個是錯誤的？（ ）

A、在全局范圍內，this指向全局對象（瀏覽器下指window）

B、對象函數調用時，this指向當前對象

C、全局函數調用時，this指向全局函數

D、使用new實例化對象時，this指向新創建的對象

解析：

選C

this有四種情況！

1、當在函數調用的時候指向widow

2、當方法調用的時候指向調用對象

3、當用apply和call上下文調用的時候指向傳入的第一個參數

4、構造函數調用指向實例對象

JS中this關鍵字， 它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。

全局函數調用時，this指向全局函數； 應該是指向調用全局函數的對象。

30、以下js操作Array的方法中不能添加元素的是：（ ）

A、push

B、pop

C、unshift

D、splice

解析：

選B

數組.pop(): 刪除數組的最后一項，該表達式返回最后一項的數據

31、關于javascript，以下選項描述錯誤的是（ ）

A、在原型上擴展的可枚舉方法，會被for in循環出來

B、使用object.defineProperty可向對象添加或者修改屬性

C、通過hasOwnProperty可判斷一個對象以及其原型鏈上是否具有指定名稱的屬性

D、原型鏈是JS實現繼承的一種模型

E、每個對象都有prototype屬性，返回對象類型原型的引用

F、For循環是按順序的，for in 循環是不一定按順序的

解析：

選C

hasOwnProperty方法是用來檢測給定的屬性是否在當前對象的實例中。

32、關于ES6的使用以下描述錯誤的是？（ ）

A、

const a=1;

const b=2;

const map={a, b};

B、

enum TYPE {
OK,
YES
}

C、

class A {
constructor (a) {
this.a=a;
}
}
class AA extends A {
constructor (a, b) {
super(a);
this.b=b;
}
toString () {
return this.a + '' + this.b;
}
}

D、

function* greet(){

yield
"How";

yield
"are";

yield
"you";

}

var greeter=greet();

console.log(greeter.next().value);

console.log(greeter.next().value);

console.log(greeter.next().value);

解析：

選B

es6中將構造方法的function換成了class，

用于與普通函數區分，其中的屬性都放在constructor中，

方法在原型中，子類繼承采用extends關鍵字;對于es6中枚舉的使用，

只能是以類的方式定義枚舉類，不能直接使用enum關鍵字

33、獲取 input 節點的錯誤方法是( )

<form class="file" name="upload">
<input id="file" name="file" />
</form>

A、document.querySelectorAll('file')[0]

B、document.getElementById('file')[0]

C、document.getElementByTagName('file')[0]

D、document.getElementById('file')

解析：

選A、B、C、D

A選項：應該是 document.querySelectorAll('#file')[0]

B選項：應該是 document.getElementById('file')

C選項：應該是 document.getElementsByTagName('input')[0]

D選項：input標簽中就沒有class屬性

34、下列哪些會返回false（ ）

A、null

B、undefined

C、0

D、‘0'

解析：

選A、B、C

35、以下哪些選項可以將集合A轉化為數組（ ）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o=> o)

解析：

選A、B、C、D

A選項：可以把對象轉換成真正的數組

B選項：slice( )方法可從已有的數組中返回選定的元素

C選項：展開運算符，把A集合的元素展開后，用數組[]承載，返回新的數組

D選項：map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值

36、js數組的方法中，哪些方法不能改變自身數組（ ）

A、splice

B、concat

C、sort

D、pop

解析：

選B

splice刪除數據會改變數組

concat連接數組但是不改變院數組

sort排序會改變數組

pop出棧返回最后一個最后一個元素，改變數組

37、下面有關JavaScript中 call和apply的描述，錯誤的是( )

A、call與apply都屬于Function.prototype的一個方法，所以每個function實例都有call、apply屬性

B、apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入

C、call傳入的則是直接的參數列表。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

D、兩者傳遞的參數不同，call函數第一個參數都是要傳入給當前對象的對象，apply不是

解析：

選D

call, apply方法它們除了第一個參數,即執行時上下文對象相同外,

call方法的其它參數將依次傳遞給借用的方法作參數,而apply就兩個參數,

第二個參數為一個數組傳遞

38、白屏時間first paint和可交互時間dom ready的關系是（ ）

A、先觸發first paint ，后觸發dom ready

B、先觸發dom ready，后觸發first paint

C、一起觸發

D、沒關系

解析：

選A

白屏時間（first Paint Time）——用戶從打開頁面開始到頁面開始有東西呈現為止

首屏時間——用戶瀏覽器首屏內所有內容都呈現出來所花費的時間

用戶可操作時間(dom Interactive)——用戶可以進行正常的點擊、輸入等操作，默認可以統計domready時間，因為通常會在這時候綁定事件操作

總下載時間——頁面所有資源都加載完成并呈現出來所花的時間，即頁面 onload 的時間

39、最后一句alert的輸出結果是( )

var msg='hello'; 
for (var i=0; i<10; i++)
 { 
   var msg='hello'+i*2+i; 
 }
 alert(msg);

A、hello

B、hello27

C、hello30

D、hello189

解析：

選D

這里只是for循環不是函數，

因此for內部定義的msg與for外部定義的msg為在同一塊作用域，為同一個變量。

輸出hello189

hello+9*2+9

40、要在10秒后調用checkState，下列哪個是正確的（ ）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState(), 10);

C、window.setTimeout(checkState, 10000);

D、window.setTimeout(checkState(), 10000);

解析：

選C

checkState加了( )相當于函數表達式，會立即執行，執行的結果作為返回值傳遞給settimeout

10 s 應該為 10000

所以選C

41、下列代碼得到的結果是（ ）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

A、false true true

B、true true false

C、true false true

D、true true true

解析：

選B

Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0

console.log(([])?true:fasle);//=> console.log((true)?true:false);
console.log([]==false?true:false); //=> console.log(0==0?true:false);
console.log(({}==false)?true:false); //=> console.log((NaN==0)?true:false);

第一個

([])布爾轉換成true

第二個

==相等比較時，允許類型轉換

其他類型值和布爾值==比較時，先將布爾值強制轉換為對應數字，再進行比較

[]==false

[]==0

[]和數字相等比較時轉數字0

0==0

true

第三個

{}==false

{}==0

NaN==0

false

42、JavaScript定義var a="40",var b=7,則執行a%b會得到( )

A、null

B、undefined

C、5

D、"5"

解析：

選C

運算中，+號，數字隱式轉換成字符串

其余的運算符號是字符串隱式轉換成數字

43、下列關于閉包描述正確的是？（ ）

A、(function(){})()理論上是一個閉包

B、閉包不耗內存，可以隨意使用

C、閉包內變量執行后不會被清除

D、閉包不滿足鏈式作用域結構

解析：

選A、C

邏輯上立即執行函數可以理解為：聲明閉包函數-執行-釋放內存

閉包內變量要到整個閉包被清除的時候才會清除

44、在ECMAScript6 中,promise的狀態有（ ）

A、Pending

B、Pause

C、Resolved

D、Rejected

解析：

選A、C、D

Promise 對象代表一個異步操作，有3種狀態：

Pending(進行中)、Resolved(已完成，又稱Fulfilled)和Rejected(已完成)’

45、下面有關瀏覽器中使用js跨域獲取數據的描述，說法錯誤的是（ ）

A、使用window.name來進行跨域

B、域名、端口相同，協議不同，屬于相同的域

C、js可以使用jsonp進行跨域

D、通過修改document.domain來跨子域

解析：

選B

只要 協議、域名、端口有任何一個不同, 都被當作是不同的域

46、下面關于DNS說法正確的是（ ）

A、DNS協議端口號為53

B、DNS的作用是域名和IP地址的相互映射

C、DNS協議大多數運行在UDP協議之上

D、DNS的默認緩存時間為1小時

解析：

選A、C

A選項：DNS協議默認端口號是53

B選項：DNS就是將域名翻譯成IP地址。

C選項：主要用UDP，但是當請求字節過長超過512字節時用TCP協議，將其分割成多個片段傳輸

D：操作系統的DNS緩存：windows DNS緩存的默認值是 MaxCacheTTL，它的默認值是86400s，也就是一天。macOS 嚴格遵循DNS協議中的TTL。

游覽器的DNS緩存：chrome對每個域名會默認緩存60s；IE將DNS緩存30min；Firefox默認緩存時間只有1分鐘；Safari約為10S。

47、下面運行結果正確的是（ ）

var a={}, b=Object.prototype;
[a.prototype===b, Object.getPrototypeOf(a)===b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

選D

這題考的是__proto__和prototype的區別

Object實際上是一個構造函數（typeof Object的結果為"function"）

使用字面量創建對象和new Object創建對象是一樣的，

所以a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)與a.__proto__是一樣的，所以第二個結果為true

而實例對象是沒有prototype屬性的，只有函數才有

所以a.prototype其實是undefined，第一個結果為false

48、下面運行結果正確的是（ ）

var a=/678/,
    b=/678/;
a==b
a===b

A、other

B、true，true

C、true、false

D、false、false

解析：

選D

JavaScript中的正則表達式依舊是對象，使用typeof運算符就能得出結果：object

運算符左右兩邊都是對象時，比較他們是否指向同一個對象

最后

希望看到文章的同學都有收獲！

還有想了解更多的同學可以去https://www.jianshu.com/u/7e7ee1652bbf 看一下我之前發的文章，希望能夠對你們有所幫助。

有現代瀏覽器都使用了JavaScript的內置支持。很多時候，你可能需要啟用或手動禁用此支持。

本教程將讓您知道如何啟用和禁用JavaScript支持，在您的瀏覽器：IE瀏覽器，Firefox和Opera。

JavaScript在InternetExplorer(IE)中：

下面是簡單的步驟給打開或關閉JavaScript在您的InternetExplorer：

1、按照從菜單"工具"->"Internet選項"

2、從對話框中選擇"安全"選項卡

3、點擊"自定義級別"按鈕

4、向下滾動，直到找到"腳本選項"

5、選擇啟用"活動腳本"單選按鈕

6、最后點擊"確定"，然后退出來

要禁用JavaScript支持在InternetExplorer，需要在“活動腳本”給選擇“禁用”單選按鈕。

JavaScript在Firefox：

下面是簡單的步驟給打開或關閉JavaScript在Firefox：

1、從菜單按照"工具" ->"選項"

2、從對話框的“內容”選項

3、選擇啟用JavaScript的復選框

4、最后點擊確定，然后退出來

要禁用Firefox的JavaScript支持，應該選擇禁用JavaScript的復選框。

JavaScript在Opera:

下面是簡單的步驟給打開或關閉JavaScript在Opera：

1、從菜單按照"工具"->"首選項"

選擇對話框中的"高級"選項

2、從列出的項目選擇"內容"選擇啟用JavaScript 復選框

3、最后點擊"確定"，然后退出來

要禁用在Opera中支持JavaScript，那么不要選擇啟用JavaScript的復選框。

警告對非JavaScript的瀏覽器：

如果你有使用JavaScript做一些重要的事情，那么可以顯示一條警告消息，使用<noscript>標簽顯示給用戶。

可以在腳本塊后，如下立即加入noscript noscript 塊：

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

12345678910111213141516復制代碼類型：[javascript]

現在，如果沒有啟用用戶的瀏覽器不支持JavaScript或JavaScript，然后</noscript>會在屏幕上顯示的消息。

開課吧廣場-人才學習交流平臺