前端每周學習分享–第12期

1.VuePress

大家看過不少Vue.js及其子項目的文檔,一定發現了它們風格完全一致,界面清爽,讀起來很舒服,它們都使用了vuepress。

VuePress是尤大為了支持 Vue 及其子項目的文檔需求而寫的一個靜態網站生成工具,廣泛用於編寫技術文檔 ,可以部署在github上做個人博客。

原理:

在構建過程中,會創建應用程序的服務器渲染版本,通過訪問每個路由,來渲染相應的 HTML。

其中, 每個 markdown 文件都使用 編譯為 HTML,然後作為 Vue 組件的模板進行處理。這允許你直接在 markdown 文件中使用 Vue,在需要嵌入動態內容時,這種使用方式非常有用。

十分實用的特性:

  • md文件可內嵌vue代碼
  • 可自定義主題
  • 利用service worker做離線緩存
  • 多語言支持
  • 基於git的最近更新

官方文檔:

快速搭建:

2.WebWorker

web worker是運行在後台的jacvascript,利用類似線程的消息傳遞實現并行,獨立於其他腳本,不會影響頁面的性能。

web worker能夠長時間運行,有理想的啟動性能以及理想的內存消耗。

worker 創建后,它可以向它的創建者指定的事件監聽函數傳遞消息,這樣該worker生成的所有任務都會接收到這些消息。

webworker有專用線程dedicated worker(單窗口專用),sharedWorker(可多窗口共享),以及後來的service worker(目前瀏覽器支持程度還不高)。

2.1.dedicated worker

使用方法:

worker線程里監聽onmessage,

頁面線程里創建worker對象:const myworker = new Worker("worker.js")

發送消息:postMessage(msg)

接受消息:onmessage = function(e){const msg = e.data}

msg的數據格式自行定義。

終止worker:myworker.terminate()

例如下面的示例,worker會接收頁面上輸入的兩個数字,計算出乘積后返回結果。

worker.js

onmessage = function(e) {
  console.log('Worker: Message received from main script');
  let result = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    let workerResult = 'Result: ' + result;
    console.log('Worker: Posting message back to main script');
    postMessage(workerResult);
  }
}

index.html里

const first = document.querySelector('#number1');
const second = document.querySelector('#number2');
const result = document.querySelector('.result');
if (window.Worker) {
    const myWorker = new Worker("worker.js");

    first.onchange = function() {
      myWorker.postMessage([first.value, second.value]);
      console.log('Message posted to worker');
    }

    second.onchange = function() {
      myWorker.postMessage([first.value, second.value]);
      console.log('Message posted to worker');
    }

    myWorker.onmessage = function(e) {
        result.textContent = e.data;
        console.log('Message received from worker');
    }
} else {
    console.log('Your browser doesn\'t support web workers.')
}

2.2.shared worker

共享進程可以連接到多個不同的頁面,這些頁面必須屬於相同的域(相同的協議,主機以及端口)

在火狐中,共享進程不能在私有與公共文檔間進行共享。

SharedWorker.port返回一個MessagePort對象,用來進行通信和對共享進程進行控制。

創建共享進程對象:const myWorker = new SharedWorker("worker.js");

獲取端口:

發送消息:myWorker.port.postMessage(msg)

接收消息:myWorker.port.onmessage = function(e) {const msg = e.data}

worker線程獲取端口:onconnect = function(e) {const port = e.ports[0]}

啟動端口:port.start()

2.3.service worker

Service Worker 可以理解為一個介於客戶端和服務器之間的一個代理服務器 ,常用於做離線資源緩存

出於對安全問題的考慮,Service Worker 只能被使用在 https 或者本地的 localhost 環境下。

暫時沒有仔細學這塊,可以閱讀。

參考文章:

3.代碼相關

3.1.元素內文本垂直居中

已知元素高度的話,可以設置line-height:元素高度.

如果元素高度未知,就不能使用line-height了。

有人會想使用line-height:100%,會發現這是不行的,這個百分比是相對當前字體尺寸,而不是元素高度。

我使用了flex布局實現

    display: flex;
    align-items:center;
    justify-content:center;

還可以設置padding來使文本看起來垂直居中

padding: 50px 20px;

3.2.微信小程序自定義placeholder的隱藏時機

在一個searchBar組件中,有一個自定的placeholder如下:

<!-- <view
​        wx:if="{{!inputValue.length}}"
​        class="placeholder" >
​        {{placeholder}}
​     </view> -->

原生的placeholder不是在觸發bindinput時隱藏,而是在輸入鍵盤按鈕點擊時。使用inputValue.length來判斷显示自定義的placeholder會在某些輸入法中導致拼音預覽和自定義placeholder重疊(因為拼音显示的時候value值還沒變)

最後選擇棄用這個自定義placeholder,使用input組件的placeholder屬性,並使用placeholder-class來設置它的樣式。

3.3.關於微信小程序原生組件的坑

原生組件有camera、canvas、input (僅在focus時表現為原生組件) 、live-player、live-pusher、map、textarea、video、cover-view、cover-image。

所以當你用canvas畫圖表、使用地圖、播放視頻甚至做文本輸入時,都是可能遇到相關坑點的。

  1. 關於原生組件、組件之間的層級關係、

​ 原生組件的層級始終高於普通組件,不論普通組件的z-index設置了多少。

​ 后插入的原生組件可以覆蓋之前的原生組件。

​ 原生組件之間的相對層級關係可以通過z-index來調整。

​ 原生組件會遮擋vconsole彈出的調試面板。

​ cover-view和cover-image可以覆蓋在部分原生組件上。

  1. cover-view的使用

​ cover-view在做地圖、畫布、視頻上的彈出層時是會用到的,但它有很多使用限制。

​ cover-view只能內嵌cover-view、cover-image、button,其他元素在真機上就會被cover-view給覆蓋住,如果想內嵌radio、picker等就只能自己用這3個可內嵌的元素來實現。

​ cover-view不支持iconfont,也不支持單邊border、background-imageshadowoverflow: visible等。

  1. input的使用

​ input在不聚焦時是佔位元素,會被原生組件遮擋,聚焦時才使用原生組件渲染。這就會出現input設置了更高的z-index,不聚焦時仍會被其他原生組件遮住。

​ 要解決這個問題,可以使用textarea來代替input。

​ 我的一個解決方案是,加一個標誌位來記錄input是否聚焦,當不聚焦時,显示一個承載value值的cover-view(它需要綁定一個觸發聚焦的點擊事件),聚焦時,就显示input組件。

3.4.多個標籤頁之間的通信方案

  1. 使用websocket

  2. 使用localstorage或者cookie

  3. 使用sharedworker

我遇到的問題是需要在新窗口打開當前網站的新窗口時,能繼承上一個窗口的vuex的狀態樹里的某些數據。這不需要和服務器打交道,最好就在本地。

最後使用localstorage來做,在跳轉新窗口前更新localstorage,在新窗口根組件掛載時取出數據。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

台灣海運大陸貨務運送流程

兩岸物流進出口一站式服務

您可能也會喜歡…