前端總結1

時間  2019-11-08
標籤 前端 總結 简体版
原文   原文鏈接

1、cssjavascript

一、Flex 佈局css

參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhtml

1）flex-direction屬性決定主軸的方向（即項目的排列方向）vue

它可能有4個值。java

  • row（默認值）：主軸爲水平方向，起點在左端。
  • row-reverse：主軸爲水平方向，起點在右端。
  • column：主軸爲垂直方向，起點在上沿。
  • column-reverse：主軸爲垂直方向，起點在下沿。

.top-banner {
  text-align: center; display: flex; flex-direction: column; justify-content: center;
}

2）flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。node

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。react

3）flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。webpack

 若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。es6

4）flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。web

5）flex 規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，用來設置 flex-grow, flex-shrink 與 flex-basis，默認值爲0 1 auto。

 默認狀況下，元素不會縮短至小於內容框尺寸，若想改變這一情況，請設置元素的min-width與 min-height屬性。

flex 屬性能夠指定1個，2個或3個值。

單值語法: 值必須爲如下其中之一:

  • 一個無單位數(<number>): 它會被看成<flex-grow>的值。
  • 一個有效的寬度(width)值: 它會被看成 <flex-basis>的值。
  • 關鍵字none，auto或initial.

雙值語法: 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。第二個值必須爲如下之一：

  • 一個無單位數：它會被看成 <flex-shrink> 的值。
  • 一個有效的寬度值: 它會被看成 <flex-basis> 的值。

三值語法:

  • 第一個值必須爲一個無單位數，而且它會被看成 <flex-grow> 的值。
  • 第二個值必須爲一個無單位數，而且它會被看成  <flex-shrink> 的值。
  • 第三個值必須爲一個有效的寬度值， 而且它會被看成 <flex-basis> 的值。

 

2、js

一、Promise 對象

參考：http://es6.ruanyifeng.com/#docs/promise

Promise.reject(reason)方法也會返回一個新的 Promise 實例，該實例的狀態爲rejected。

const p = Promise.reject('出錯了');
// 等同於
const p = new Promise((resolve, reject) => reject('出錯了'))

p.then(null, function (s) {
  console.log(s)
});
// 出錯了

Promise 實例具備then方法，也就是說，then方法是定義在原型對象Promise.prototype上的。它的做用是爲 Promise 實例添加狀態改變時的回調函數。前面說過，then方法的第一個參數是resolved狀態的回調函數，第二個參數（可選）是rejected狀態的回調函數。then方法返回的是一個新的Promise實例（注意，不是原來那個Promise實例）。所以能夠採用鏈式寫法，即then方法後面再調用另外一個then方法。Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的別名，用於指定發生錯誤時的回調函數。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 處理 getJSON 和 前一個回調函數運行時發生的錯誤
  console.log('發生錯誤！', error);
});

上面代碼中，getJSON方法返回一個 Promise 對象，若是該對象狀態變爲resolved，則會調用then方法指定的回調函數；若是異步操做拋出錯誤，狀態就會變爲rejected，就會調用catch方法指定的回調函數，處理這個錯誤。另外，then方法指定的回調函數，若是運行中拋出錯誤，也會被catch方法捕獲。通常來講，不要在then方法裏面定義 Reject 狀態的回調函數（即then的第二個參數），老是使用catch方法。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

上面代碼中，第二種寫法要好於第一種寫法，理由是第二種寫法能夠捕獲前面then方法執行中的錯誤，也更接近同步的寫法（try/catch）。所以，建議老是使用catch方法，而不使用then方法的第二個參數。通常老是建議，Promise 對象後面要跟catch方法，這樣能夠處理 Promise 內部發生的錯誤。catch方法返回的仍是一個 Promise 對象，所以後面還能夠接着調用then方法。

 

3、webpack

一、代碼分離

參考：https://webpack.docschina.org/guides/code-splitting/

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

代碼分離是 webpack 中最引人注目的特性之一。此特性可以把代碼分離到不一樣的 bundle 中，而後能夠按需加載或並行加載這些文件。代碼分離能夠用於獲取更小的 bundle，以及控制資源加載優先級，若是使用合理，會極大影響加載時間。

1）入口起點

這是迄今爲止最簡單、最直觀的分離代碼的方式。不過，這種方式手動配置較多，並有一些隱患。

// webpack.config.js
module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  }
};

隱患：若是入口 chunk 之間包含一些重複的模塊，那些重複模塊都會被引入到各個 bundle 中；這種方法不夠靈活，而且不能動態地將核心應用程序邏輯中的代碼拆分出來。

分離 app(應用程序) 和 vendor(第三方庫) 入口：在 webpack < 4 的版本中，一般將 vendor 做爲單獨的入口起點添加到 entry 選項中，以將其編譯爲單獨的文件（與 CommonsChunkPlugin 結合使用）。而在 webpack 4 中不鼓勵這樣作。而是使用 optimization.splitChunks 選項，將 vendor 和 app(應用程序) 模塊分開，併爲其建立一個單獨的文件。不要 爲 vendor 或其餘不是執行起點建立 entry。

2）防止重複

SplitChunksPlugin 插件能夠將公共的依賴模塊提取到已有的 entry chunk 中，或者提取到一個新生成的 chunk。

3）動態導入

當涉及到動態代碼拆分時，webpack 提供了兩個相似的技術。第一種，也是推薦選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法 來實現動態導入。

動態地加載模塊。調用 import() 之處，被做爲分離的模塊起點，意思是，被請求的模塊和它引用的全部子模塊，會分離到一個單獨的 chunk 中。

// 在註釋中咱們提供了 webpackChunkName。這樣會將拆分出來的 bundle 命名爲如mainPage.xxxx.js
export default new Router({
  mode: process.env.VUE_APP_ROUTE_MODE,
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/main'
    }, {
      path: '/main',
      component: AppMain,
      redirect: '/main/index',
      children: [{
        path: 'index',
        name: 'index',
        component: () => import(/* webpackChunkName: "mainPage" */ './views/Index'), // 首頁
        meta: { title: '首頁' }
      }, {
        path: 'prdRank',
        name: 'prdRank',
        component: () => import(/* webpackChunkName: "mainPage" */ './views/PrdRank'), // 遊戲庫
        meta: { title: '遊戲庫' }
      }, {
        path: 'orderList',
        name: 'orderList',
        component: () => import(/* webpackChunkName: "mainPage" */ './views/OrderList'), // 個人訂單
        meta: { title: '個人訂單' }
      }]
    }, {
      path: '/prdList',
      name: 'prdList',
      component: () => import(/* webpackChunkName: "prdPage" */ './views/PrdList') // 商品列表
    }, {
      path: '/prdDetail',
      name: 'prdDetail',
      component: () => import(/* webpackChunkName: "prdPage" */ './views/PrdDetail'), // 商品詳情
      meta: { title: '商品詳情' }
    }
  ]
})

webpackChunkName：新 chunk 的名稱。

當打包構建應用時，JavaScript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

 把組件按組分塊：有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。只須要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)。Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

4）預取/預加載模塊

在聲明 import 時，使用下面這些內置指令，可讓 webpack 輸出 "resource hint(資源提示)"，來告知瀏覽器：

  • prefetch(預取)：未來某些導航下可能須要的資源
  • preload(預加載)：當前導航下可能須要資源

與 prefetch 指令相比，preload 指令有許多不一樣之處：

  • preload chunk 會在父 chunk 加載時，以並行方式開始加載。prefetch chunk 會在父 chunk 加載結束後開始加載。
  • preload chunk 具備中等優先級，並當即下載。prefetch chunk 在瀏覽器閒置時下載。
  • preload chunk 會在父 chunk 中當即請求，用於當下時刻。prefetch chunk 會用於將來的某個時刻。
  • 瀏覽器支持程度不一樣。

 二、緩存

　　咱們使用 webpack 來打包模塊化的應用程序，webpack 會生成一個可部署的 /dist 目錄，而後把打包後的內容放置在此目錄中。只要 /dist 目錄中的內容部署到 server 上，client（一般是瀏覽器）就可以訪問網站此 server 的網站及其資源。而最後一步獲取資源是比較耗費時間的，這就是爲何瀏覽器使用一種名爲 緩存 的技術。能夠經過命中緩存，以下降網絡流量，使網站加載速度更快，然而，若是咱們在部署新版本時不更改資源的文件名，瀏覽器可能會認爲它沒有被更新，就會使用它的緩存版本。經過必要的配置，以確保 webpack 編譯生成的文件可以被客戶端緩存，而在文件內容變化後，可以請求到新的文件。webpack 提供了一種使用稱爲 substitution(可替換模板字符串) 的方式，經過帶括號字符串來模板化文件名。其中，[contenthash]substitution 將根據資源內容建立出惟一 hash。當資源內容發生變化時，[contenthash] 也會發生變化。

　　將第三方庫(library)（例如 lodash 或 react）提取到單獨的 vendor chunk 文件中，是比較推薦的作法，這是由於，它們不多像本地的源代碼那樣頻繁修改。所以經過實現以上步驟，利用 client 的長效緩存機制，命中緩存來消除請求，並減小向 server 獲取資源，同時還能保證 client 代碼和 server 代碼版本一致。

// webpack.config.js
optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\\/]node_modules[\\\/]/,
          priority: -10,
          chunks: 'initial'
        }
     }
　 }
}

而 vendor hash 發生變化是咱們要修復的。幸運的是，可使用兩個插件來解決這個問題。第一個插件是 NamedModulesPlugin，將使用模塊的路徑，而不是一個數字 identifier。雖然此插件有助於在開發環境下產生更加可讀的輸出結果，然而其執行時間會有些長。第二個選擇是使用 HashedModuleIdsPlugin，推薦用於生產環境構建。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程