前端技術(shù)工具類文章

前沿

vue.draggable

[countUp.js-數(shù)字滾動效果]

darkmode-js

Darkmode.js實現(xiàn)黑暗模式

Darkmode.js運用的是CSS里面的一個特性叫mix-blend-mode?，這個?屬性描述了元素的內(nèi)容應該與元素的直系父元素的內(nèi)容和元素的背景如何混合，再加上Javascript的輔助判斷哪些頁面上的元素需要黑化的，哪些是不需要黑化的。

[使用wavesurfer.js繪制音頻波形圖]

wavesurfer.js是一個可自定義的語音音頻可視化工具，建立于web?audio和H5?canvas之上

將wavesurfer.js的包引用到項目中

復制代碼

為wavesurfer.js開辟一個空間，用來畫圖

<``div?id="waveform" class="waveform">

在script標簽中，創(chuàng)建一個wavesurfer實例，傳遞容器選擇器及一些選項

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
　　 cursorColor:'#ff0000',
　　 progressColor:'#0000ff',
});
復制代碼

加載音頻。用wavesurfer.js方法中的load()，直接傳入音頻路徑即可，可以是在線音頻

wavesurfer.load('audio.wav');
復制代碼

    var playPause = document.querySelector('#playPause');
    playPause.addEventListener('click', function() {
        wavesurfer.playPause();
    });
    wavesurfer.on('play', function() {
        document.querySelector('#play').style.display = 'none';
        document.querySelector('#pause').style.display = '';
    });
    wavesurfer.on('pause', function() {
        document.querySelector('#play').style.display = '';
        document.querySelector('#pause').style.display = 'none';
    });
復制代碼

btnStop.addEventListener('click', function () {
    wavesurfer.stop();
});
復制代碼

demo中加入了時間插件（timeline），頻譜插件（spectrogram）、光標插件（cursor）等

vue-pdf

[js獲取上、下級html元素 js刪除html元素方法]

js獲取下級html元素:htmlEle.childNode;

js獲取上級html元素:htmlEle.parentNode;

js刪除當前html元素: htmlEle.removeNode(true);??

js刪除子級html元素:parEle.removeChild(childEle);

Object.values()

Object.values() 方法返回一個給定對象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用[for...in]循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。

[語法]

Object.values(obj)
復制代碼

[參數(shù)]

• obj

  被返回可枚舉屬性值的對象。

[返回值]

一個包含對象自身的所有可枚舉屬性值的數(shù)組。

[描述]

Object.values()返回一個數(shù)組，其元素是在對象上找到的可枚舉屬性值。屬性的順序與通過手動循環(huán)對象的屬性值所給出的順序相同。

[示例]

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']

// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']
復制代碼

Node.parentElement

返回當前節(jié)點的父元素節(jié)點，如果該元素沒有父節(jié)點，或者父節(jié)點不是一個 DOM?[元素]，則返回?null。

[語法]

parentElement = node.parentElement
復制代碼

parentElement?是當前節(jié)點的父元素。它永遠是一個 DOM [元素]對象，或者?null。

[例子]

if (node.parentElement) {
    node.parentElement.style.color = "red";
}
復制代碼

HTML DOM appendChild() 方法

appendChild() 方法可向節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點。

提示： 如果文檔樹中已經(jīng)存在了 newchild，它將從文檔樹中刪除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 節(jié)點，則不會直接插入它，而是把它的子節(jié)點按序插入當前節(jié)點的 childNodes[] 數(shù)組的末尾。

你可以使用 appendChild() 方法移除元素到另外一個元素。

Coffee
Tea

Water
Milk

單擊按鈕將項目從一個列表移動到另一個列表中

點我

復制代碼

 
xxxxx

 

復制代碼

[Vue事件總線：this.bus.bus.emit與this.bus.bus.on]

1.創(chuàng)建Vue實例

復制//main.js
Vue.prototype.$bus = new Vue();
復制代碼

2.發(fā)射事件

復制//GoodsList
this.$bus.$emit("aaa")
復制代碼

3.監(jiān)聽事件

復制//home.vue
this.$bus.$on("aaa",()=>{
   this.$refs.scroll.scroll.refresh()
})
復制代碼

拼接元素的字符串，利用父元素的innerHTML設(shè)置父元素的內(nèi)容

創(chuàng)建 DOM 元素以及相應的追加方式

appendChild 是將一個元素追加到另一個元素的最后， 不會覆蓋父元素原有的內(nèi)容。

JavaScript Array?slice()?方法

slice() 方法可從已有的數(shù)組中返回選定的元素。

slice()方法可提取字符串的某個部分，并以新的字符串返回被提取的部分。

注意： ?slice() 方法不會改變原始數(shù)組。

JavaScript Array filter() 方法

filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

注意： ?filter() 不會對空數(shù)組進行檢測。

注意： ?filter() 不會改變原始數(shù)組。

JavaScript?entries()?方法

entries() 方法返回一個數(shù)組的迭代對象，該對象包含數(shù)組的鍵值對 (key/value)。

迭代對象中數(shù)組的索引值作為 key， 數(shù)組元素作為 value。

github.com/PanJiaChen/…

1. keep-alive 本質(zhì)是把應該銷毀的組件緩存起來，當再次需要的時候去讀取緩存的組件信息而不是重新渲染，所以 keep-alive 必須包裹一個組件才能生效。

2. 使用了 include and exclude 會按照這個規(guī)則進行匹配緩存那些頁面，不使用會緩存所有。

3. 如果使用了第二條的篩選規(guī)則，那么必須配置對照和 name,不然無法正確緩存。

文檔原句：
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

4. keep-alive 內(nèi)部的 router-view ，填寫 key 的時候，需要謹慎 ，不然會出現(xiàn)問題。

比如在編輯信息的時候，用戶打開了兩個標簽頁使用了同一個組件，不使用 key 就會復用這同一個組件 但是我們需要的是渲染兩個，使用不同的 key 就會分別渲染兩個，而有時候 key 又會生成多余的頁面。

5. 取消緩存頁面只需要把 include and exclude 中不需要緩存的 name 刪除即可，因為源代碼中會監(jiān)聽這個兩個字段，刪除緩存的組件。

  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  }
復制代碼

vuex案例-配置指定界面緩存

VUEX：

export default const views = {
 state: {
    visitedViews: [], // 已經(jīng)點擊訪問過的View, 用于展示為tag-tabs
    cachedViews: [] // 哪些Views需要使用keep-alive進行緩存,默認不加noCache的都會緩存(根據(jù)業(yè)務(wù)需求)
  },
  mutations: {
    // 增加瀏覽記錄路由對象
    ADD_VISITED_VIEW (state, { route, token }) {
      if (state.visitedViews.some(v => v.path === route.path)) return
      state.visitedViews.push(route)
      if (route.name && route.meta && !route.meta.noCache) {
        state.cachedViews.push(route.name)
      }
    }
  },
  actions: {
    addVisitedViews ({ commit }, { route, token }) {
      commit('ADD_VISITED_VIEW', { route, token })
    }
  },
  getter: {
   // 頁面
    cachedViews: state => state.views.cachedViews,
    visitedViews: state => state.views.visitedViews
  }
}
復制代碼

創(chuàng)建路由：

// router
import Layout from '@/components/layout'
const _import_ = file => () => import('@/views/' + file + '.vue')
export const aysncRoutesMap = [
 {
    path: '/homepage',
    component: Layout,
    meta: { title: 'Homepage', icon: 'iconfont icon-yunzhuomian', role: ['admin', 'user'] },
    children: [
      {
        path: 'home',
        name: 'Homepage',
        component: _import_('Homepage/index'),
        meta: { title: 'Home', icon: 'nocturne icon-home', isHome: true, isCache:true}
      }
    ]
  },
  {
    path: '/dashboard',
    component: Layout,
    meta: { title: 'dashboard', role: ['admin', 'user'] },
    children: [
      {
        path: 'dash',
        name: 'Dashboard',
        component: _import_('Dashboard/index'),
        meta: { title: 'Dashboard', icon: 'nocturne icon-dash', isHome: false, isCache:false }
      }
    ]
  }
]
復制代碼

JavaScript Array concat() 方法

concat()?方法用于連接兩個或多個數(shù)組。

concat()?方法不會更改現(xiàn)有數(shù)組，而是返回一個新數(shù)組，其中包含已連接數(shù)組的值。

JavaScript?splice()?方法

splice() 方法用于添加或刪除數(shù)組中的元素。

規(guī)定應該刪除多少元素。必須是數(shù)字，但可以是 "0"。
如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素

注意： 這種方法會改變原始數(shù)組。

返回值

如果僅刪除一個元素，則返回一個元素的數(shù)組。如果未刪除任何元素，則返回空數(shù)組。

JavaScript Array some() 方法

some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。

some() 方法會依次執(zhí)行數(shù)組的每個元素：

• 如果有一個元素滿足條件，則表達式返回true?, 剩余的元素不會再執(zhí)行檢測。

• 如果沒有滿足條件的元素，則返回false。

注意： ?some() 不會對空數(shù)組進行檢測。

注意： ?some() 不會改變原始數(shù)組。

typescript 中的keyof、 in

keyof與Object.keys略有相似，只是?keyof 是取 interface 的鍵，而且 keyof 取到鍵后會保存為聯(lián)合類型。

in用于取聯(lián)合類型的值。主要用于數(shù)組和對象的構(gòu)造。

HTML DOM?createElement()?方法

實例

創(chuàng)建指定文本的按鈕：

var btn=document.createElement("BUTTON");\
var t=document.createTextNode("CLICK ME");\
btn.appendChild(t);
復制代碼

new Map()

JavaScript的對象（Object），本質(zhì)上是鍵值對的集合（Hash結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當作鍵。這給它的使用帶來了很大的限制。
為了解決這個問題，ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。

Array.prototype.forEach()

forEach() ?方法對數(shù)組的每個元素執(zhí)行一次給定的函數(shù)。

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的?事件類型 (type) ?和 一個?回調(diào)函數(shù) (handler) 。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。

• Action 可以包含任意異步操作。

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調(diào)用?context.commit?提交一個 mutation，或者通過?context.state?和?context.getters?來獲取 state 和 getters。

forEach() 的 continue 與 break

forEach() 本身是不支持的 continue 與 break 語句的

使用?return?語句實現(xiàn)?continue?關(guān)鍵字的效果：

continue 實現(xiàn)

實例

var?arr?=?[1,?2,?3,?4,?5];\
\
arr.forEach(function?(item)?{\
? ??if?(item?===?3)?{\
? ? ? ??return;\
? ??}\
? ? console.log(item);\
});\
復制代碼

[MouseEvent]

當鼠標進行某種操作時，就會生成一個event對象，該對象記錄著鼠標觸發(fā)事件時的所有屬性。

altkey ：觸發(fā)鼠標事件時是否alt 按鍵被按下,如果按下，則返回true，否則返回 fasle。

button: ?事件屬性返回一個阿拉伯數(shù)字 ， 0代表 按下 左鍵 ，1 代表按下 滾輪 ，2 代表按下 右鍵。

offsetX、offsetY ：事件屬性返回觸發(fā)事件時 鼠標相對于事件源元素 的X,Y坐標，標準事件沒有對應的屬性。

clientX、clientY ：?事件屬性返回當事件被觸發(fā)時鼠標指針相對于瀏覽器頁面（或客戶區(qū)）的水平坐標、垂直坐標。

pageX、pageY：事件屬性返回當事件被觸發(fā)時鼠標指針相對于整個頁面左上角的水平坐標、垂直坐標。

screenX、screenY：事件屬性返回當事件被觸發(fā)時鼠標位置相對于用戶屏幕水水平坐標、垂直坐標，此時的參照點也就是原點是屏幕的左上角。

call()、apply()、bind()

例 1

obj.objAge;  // 17
obj.myFun()  // 小張年齡 undefined
復制代碼

例 2

shows()  // 盲僧　
復制代碼

比較一下這兩者 this 的差別，第一個打印里面的 this 指向 obj，第二個全局聲明的 shows() 函數(shù) this 是 window ；

1，call()、apply()、bind() 都是用來重定義 this 這個對象的！

如：

obj.myFun.call(db)；　　　　// 德瑪年齡 99
obj.myFun.apply(db);　　　 // 德瑪年齡 99
obj.myFun.bind(db)();　　　// 德瑪年齡 99
復制代碼

以上出了 bind 方法后面多了個 () 外 ，結(jié)果返回都一致！

由此得出結(jié)論，bind 返回的是一個新的函數(shù)，你必須調(diào)用它才會被執(zhí)行。

2，對比call 、bind 、 apply 傳參情況下

obj.myFun.call(db,'成都','上海')；　　　　 // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德瑪 年齡 99  來自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德瑪 年齡 99  來自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德瑪 年齡 99  來自 成都, 上海去往 undefined
復制代碼

微妙的差距！

從上面四個結(jié)果不難看出:

call 、bind 、 apply 這三個函數(shù)的第一個參數(shù)都是 this 的指向?qū)ο螅诙€參數(shù)差別就來了：

call 的參數(shù)是直接放進去的，第二第三第 n 個參數(shù)全都用逗號分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有參數(shù)都必須放在一個數(shù)組里面?zhèn)鬟M去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函數(shù)以外，它 的參數(shù)和 call 一樣。

當然，三者的參數(shù)不限定是 string 類型，允許是各種類型，包括函數(shù) 、 object 等等！

正則表達式

??關(guān)注+點贊+收藏+評論+轉(zhuǎn)發(fā)??，原創(chuàng)不易，鼓勵筆者創(chuàng)作更好的文章

點贊、收藏和評論

我是Jeskson，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內(nèi)容有地方講解有誤，歡迎指出?謝謝，一起學習了)

我們下期見！

github收錄，歡迎Star：1024bibi.com