原创 Echarts圖表設置百分比顯示以及圖表內容合併問題

業務需求 需要開發一個動態tab用來切換Echarts圖表的顯示,tab項指定顯示圖表的展示數據。 實現思路 通過多個DIV標籤承載Echarts圖表。起初的思路是將多個DIV標籤設置樣式display:none:進行隱藏,在每次進行

原创 VUE路由變更頁面未更新問題

VUE路由變更頁面未更新業務需求實現方案遇到的問題問題定位以及解決 業務需求 在做一個管理用戶賬戶下APP的網站,在主頁需要切換應用APP的ID,來顯示不同APP對應的數據,對不同APP進行操作。 實現方案 由於切換APP對應的是整個

原创 通過業務場景理解跨域與請求(簡單與非簡單)

跨域問題業務場景中出現的問題問題的表現問題的定位什麼是OPTIONS請求兩種請求什麼時候會出現OPTIONS請求迴歸問題本身解決問題總結 業務場景中出現的問題 近期我單獨負責一個項目的前端工作,在網絡方面是和後端分離開發,在前端發起網

原创 HTML meta標籤總結與屬性使用介紹

簡介 在查閱w3school中,第一句話中的“元數據”就讓我開始了Google之旅。然後很順利的在英文版的w3school找到了想要的結果。(中文w3school說的是元信息,Google和百度都沒有相關的詞條。但元數據在Google

原创 CSS3 僞元素 ::before&::after

::before 和 ::after僞元素的說明 :before 和 :after將在內容元素的前後插入額外的元素;:before將會在內容之前“添加”一個元素而:after將會在內容後“添加”一個元素。在它們之中添加內容我們可以

原创 水平垂直居中方案

水平居中 內聯元素 .center-text { text-align: center; } 塊級元素 .center-box { margin: 0 auto; } 多塊級元素 利用inline-block 如果一行中有兩個

原创 Vue2實踐揭祕讀書筆記(1)——Vue概要

Vue.js與Angular2和React相比,Vue.js一開始就爲我們鋪平入門的道路,腳手架vue-cli。 因爲它的存在,省去了手工配置開發環境、運行環境和測試環境的步驟,開發者可以直接步入Vue.js開發的殿堂。 在開始之

原创 Vue2實踐揭祕讀書筆記(2)——webpack模板以及構建工具

Vue作爲AngularJS和React的繼承者和改良者,它不單單從編碼的特色與開發框架本身的使用上進行大面積的改良與優化。它提供了整套簡化開發、測試與部署的方案。 安裝vue-cli vue-cli是一個npm的安裝包,我們希望它能

原创 雙向數據綁定

Vue核心: 響應式的數據綁定 組件化 Vue三要素: 響應式:例如如何監聽數據變化,其中的實現方法就是我們提到的雙向綁定。 模版引擎:如何解析模版。 渲染:Vue如何將監聽到的數據變化和解析後的HTML進行渲染。 可以實現雙向綁

原创 HTTP1.0->HTTP1.1->HTTP2.0的進階

HTTP1.0 -> HTTP1.1 長連接:HTTP1.0需要使用keep-alive參數來告知服務器端要建立一個長連接,而HTTP1.1默認支持長連接。(TCP三次握手,有開銷,可以維持一個長連接) 節約帶寬:HTTP1.1支持

原创 JavaScript垃圾收集

JavaScript具有自動垃圾收集機制,執行環境會負責管理代碼執行過程中使用的內存。而在C和C++之類的語言中,開發人員的一項基本任務就是手工跟蹤內存的使用情況,這是造成許多問題的一個根源。這種垃圾收集機制的原理其實很簡單:找出那些

原创 JavaScript數組去重

下面是用來創建隨機數數組的函數(1-1000) function createRandomArr(len){ var arr = []; for(var i = 0; i < len; i++) { arr[i] = Math

原创 JS深拷貝

function deepClone(obj){ let objClone = Array.isArray(obj) ? [] : {}; if(obj && typeof obj === "object"){ for(key

原创 箭頭函數

箭頭函數表達式的語法比函數表達式更短,並且沒有自己的this,arguments,super或new.target。這些函數表達式更適用於那些本來就需要匿名函數的地方,並且它們不能用作構造函數。 基礎語法 (參數1,參數2,...

原创 ES6&ES5實現觀察者模式(發佈訂閱者模式)

ES6 class Observer{ constructor(){ this.handle = []; } addSubscribe(topic, fn) { this.handle.push({topic: topi