postMessage
此方法可以用於實現跨源通信等，我們來演示如何實現在兩個窗口之間進行通信。 假設我們現在有兩個頁面：page1.html和page2.html， 他們的關係是通過iframe關聯起來的，就像這樣（下面是page1.html的內容）： iframe id="receiver" src="./page2.html" width="300" height="100"/iframe 為了實現通信，首先你需要
昵稱 zxl20070701
@Javascript
貢獻者369
粉絲0
貢獻者
@Javascript
動態 列表
使用 `postMessage` 跨域名遷移 `localStorage`
朋友的網站有個需求：要從 A 域名遷移到 B 域名。所有內容不變，只是更改域名。這個需求不復雜，理論上改下配置然後 301 即可。但這個網站是純靜態網站，用户數據都存在 localStorage 裏，所以他希望能夠自動幫用户把數據也遷移到新域名。 我們知道，localStorage 是按照域名存儲的，B 網站無法訪問 A 網站的 localStorage。所以我們就需要一些特殊的手段來實現需求。經
昵稱 Meathill
navigator.mediaDevices.getUserMedia undefined問題解決
navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o
昵稱 任天鏜
使用 Socket.io 和 React 開發一個聊天應用
這篇文章是關於什麼的 相信大家對於 web 版的線上聊天室都不陌生，這篇文章主要講的就是如何使用 Socket.io 和 React 開發一下簡單的線上聊天應用。 所謂線上聊天應用，就是你給一個人或者一個羣發送一條消息，他們可以看到這條消息並且可以回覆。既簡單又複雜。 開發一個聊天室應用，你需要在新信息來到的時候及時的感知到。 通常來説，為了獲得服務端的信息，我們需要發送一個 HTTP 請求。但是
昵稱 superZidan
Vue 中實現雙向綁定的 4 種方法
1. v-model 指令 input v-model="text" / 上例不過是一個語法糖，展開來是： input :value="text" @input="e = text = e.target.value" / 2. .sync 修飾符 my-dialog :visible.sync="dialogVisible" / 這也是一個語法糖，剝開來是： my-dialog :vi
昵稱 fjc0k
160行代碼仿Vue實現極簡雙向綁定[詳細註釋]
前言 現在的前端面試不管你用的什麼框架，總會問你這個框架的雙向綁定機制，有的甚至要求你現場實現一個雙向綁定出來，那對於沒有好好研究過這方面知識的同學來説，當然是很難的，接下來本文用160行代碼帶你實現一個極簡的雙向綁定機制。如果喜歡的話可以點波贊/關注，支持一下，希望大家看完本文可以有所收穫。 本文是在面試題：你能寫一個Vue的雙向數據綁定嗎？的基礎上仔細研究+改動，並添加了詳細註釋，而成的。
昵稱 OBKoro1
js實現數據單向綁定
如果你在學習一種前端框架，如vue、angular等，那麼你一定不會對數據的單向綁定陌生。 何為數據的單向綁定？ 傳統開發模式下，如使用jQuery開發，我們想將一個變量顯示到html中，首先要定義一個變量name，然後通過jq代碼操作dom將變量放到HTML中，如果name發生修改，還要再次通過jq代碼操作dom將新的變量值放到HTML中。這就是傳統的MVC框架，其中的Model和View是我們
昵稱 巴斯光年
js實現數據雙向綁定
接上一篇文章《js實現數據單向綁定》 上篇文章中用原生js實現了數據的單向綁定。本篇文章繼續介紹如何用js實現數據的雙向綁定。綁定的方式模仿vue中的v-model指令。 創建標籤 div id="div1" input type="text" v-model="name" br 姓名：{{name}} /div 創建一個輸入框，使用v-model屬性綁定變量name，注意這裏只是模
昵稱 巴斯光年
javascript用defineProperty實現簡單的雙向綁定
defineProperty Object提供的方法，用於給對象添加自定義屬性具體用法如下： const obj = { _value: 1 }; Object.defineProperty(obj, 'value', { get: function() { console.log('get方法執行'); return this._value; }
昵稱 張磊
vue 使用computed報錯 .. was assigned to but it has no setter.
問題： a-radio @change="chooseOther" v-model="tempReadio"其他/a-radio computed: { tempReadio() { if (this.reasonValue == 7) { return true; } else { return false; }
昵稱 那年
“前端”工匠系列（一）：合格的工匠，究竟該搞什麼 | 京東雲技術團隊
作者：京東零售劉偉東 此文為系列文章第一篇，為淺嘗輒止的引入，目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是幹什麼的這個話題有個無門檻的瞭解。 “前端職能是什麼” 説起"前端"，維基百科對這個技術角色的定位是“前端（英語：front-end）和後端（英語：back-end）是描述進程開始和結束的通用詞彙。 前端作用於採集輸入信息，後端進行處理。 計算機程序的界面樣式，視
昵稱 京東雲開發者
深入理解Base64編碼原理
前言 上篇文章有涉及到Base64編碼的內容，今天我們再來詳細瞭解一下Base64的編碼原理以及應用場景。 通過這篇文章你能夠學習到： 什麼是Base64，為什麼需要Base64？ Base64的編碼原理 Base64的應用場景 什麼是Base64？ Base64是一種用於傳輸8bit字節數據的編碼方式，Base64 的字符集包含 64 個字符（A-Z、a-z、0-9、+、/）以及補
昵稱 南玖
長風網視頻—網課刷課腳本&console控制枱粘貼回車即用
思路 一些視頻學習網站，在學生觀看一段時間後，就自動暫停，防止學生掛機 針對於這個情況，我們可以寫一個腳本去處理，從而做到電腦不關機 睡覺的時候，也能夠自動播放，就很嗨皮 大致就是，通過setInterval定時檢查判斷視頻狀態 並且派發點擊事件讓視頻播放 這樣的話，就可以掛機了 其他的視頻類網站也是類似的思路... 腳本一 document.querySelector(".btn
昵稱 水冗水孚
利用input file模擬一個圖片上傳
用到的知識點： （1）input type="file"標籤 （點擊閲讀參考資料） （2）利用addEventListener()事件監聽input type='file'改變（點擊閲讀參考資料） （3）利用HTML5FileReader()中的.readAsDataURL()方法將圖片url轉為Base64位碼（點擊閲讀參考資料） （4）FileReader.onload(
昵稱 顧昀峯
ES5和ES6函數你不知道的區別【面試篇】
前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑，有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,
昵稱 火狼
webpack.01-簡單使用
webpack官網：https://webpack.js.org/ 全局安裝webpack cnpm i -g webpack webpack-cli 創建index.js console.log('hellowebpack')//示例：建議寫es5語法可正常運行，es6需要babel後面做筆記會寫 cmd運行 webpack index.js//------生成文件夾dist，生成文件main.
昵稱 B͜a͜r͜a͜n͜
es5/es6中新增的方法
ES5中的新增方法 ES5 中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括： 數組方法 字符串方法 對象方法 1.1 數組方法 迭代(遍歷)方法：forEach()、map()、filter()、some()、every()； array.forEach(function(currentValue, index, arr)) 讓數組中每個元素都執行一次 fn
昵稱 sugar_coffee
JS開發必須知道的41個技巧【持續更新】
前言 JS是前端的核心，但有些使用技巧你還不一定知道； 本文梳理了JS的41個技巧，幫助大家提高JS的使用技巧； 文章有點長，可以clone下源碼，直接擼，源碼地址請戳全部源碼，原創不易，歡迎star； 序列文章： Vue 開發必須知道的 36 個技巧 React 開發必須知道的 34 個技巧 Array 1.數組交集 普通數組 const arr1 = [1, 2
昵稱 火狼
ES5 繼承
首先要明白兩點： 一、非方法屬性每個子類實例需要獨立 二、方法屬性每個子類實例需要共享 為什麼？ 如果非方法屬性為引用類型，且非方法屬性共享，在一個實例中改變，其他實例中就會做出改變，這樣每個實例就會相互影響，而方法屬性一般是不需要進行改變的，只是對方法調用。 方法跟屬性分別可以定義在構造函數內部跟prototype上。 繼承的目的是子類繼承父類的方法跟屬性,換句話説一些類
昵稱 assassin_cike
使用babel把es6語法轉換成es5
Babel 是什麼 Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 Babel能用在哪裏 NodeJs 使用 npm 初始化項目 $ mkdir es6-to-es5 $ npm init -y 安裝Babel $ npm install --save-dev @ba
昵稱 xx小枱燈
數組並集/交集/差集
underscore 官網 _.union([2,1,2]); // [2,1] lodash 官網 _.uniq([2,1,2]); [2,1] 不產生新數組 使用indexOf判斷和splice刪除。 const removeDuplicates = (nums) = { let len = nums.length - 1 for(let i = len; i=0; i--
昵稱 洋仔
使用原生ES5封裝 call, apply, bind 等方法
直接上代碼，大家一看就明瞭 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metahttp-equiv="X-UA-Compatible"content="IE=edge" metaname="viewport"content="width=device-width,initial-scale=1.0" titleDocument/
昵稱 ox1dp6ei
第一個nodejs程序
推薦編輯器 記事本 是的，首先開發要明確一點，代碼才是一個項目的核心，編輯器只是一個輔助工具，一個能給予可靠的關鍵詞提示的工具，心中有代碼，處處能開發； 而代碼的運行也一樣，編輯器只是起到一個輔助的作用，給關鍵命令行提供了一個可靠的按鈕，只需要輕鬆點擊即可完成該命令行的執行，完成代碼的運行和debug； 所以要擅長運用命令行來運行代碼，不要過度依賴編輯器，這樣如果編輯器的某個按鈕出問題
昵稱 小壞壞
JS語言特性（下）
調包 即引用其他項目或者文件。 之所以需要把這個模塊單獨拎出來，是因為，一個語言能不能成氣候的其中的一個關鍵點在於能否模塊化；一個項目能否形成一個可觀的體量也離不開模塊化，簡單來説就是不同文件或項目間能否互相調用，es5和es6中都有着不同風格的引用方式，開發時要注意自己的開發環境以及語法格式 es5 有着AMD、CMD、CommonJS三種的引用方式，其中AMD（Asynchrono
昵稱 小壞壞