js實現數據單向綁定
如果你在學習一種前端框架，如vue、angular等，那麼你一定不會對數據的單向綁定陌生。 何為數據的單向綁定？ 傳統開發模式下，如使用jQuery開發，我們想將一個變量顯示到html中，首先要定義一個變量name，然後通過jq代碼操作dom將變量放到HTML中，如果name發生修改，還要再次通過jq代碼操作dom將新的變量值放到HTML中。這就是傳統的MVC框架，其中的Model和View是我們
昵称 巴斯光年
@Javascript
贡献者374
粉丝0
贡献者
@Javascript
动态 列表
js實現數據雙向綁定
接上一篇文章《js實現數據單向綁定》 上篇文章中用原生js實現了數據的單向綁定。本篇文章繼續介紹如何用js實現數據的雙向綁定。綁定的方式模仿vue中的v-model指令。 創建標籤 div id="div1" input type="text" v-model="name" br 姓名：{{name}} /div 創建一個輸入框，使用v-model屬性綁定變量name，注意這裏只是模
昵称 巴斯光年
利用input file模擬一個圖片上傳
用到的知識點： （1）input type="file"標籤 （點擊閲讀參考資料） （2）利用addEventListener()事件監聽input type='file'改變（點擊閲讀參考資料） （3）利用HTML5FileReader()中的.readAsDataURL()方法將圖片url轉為Base64位碼（點擊閲讀參考資料） （4）FileReader.onload(
昵称 顧昀峯
原生js slider插件 r-slider
網上看到的一款原生slider插件，覺得挺好用，https://github.com/mohammadFe... script src="javascript/r-slider.js"/script 引入插件 div id="container1"/div html 樣式可以自己寫一下 var mySlider2 = new slider({ // cont
昵称 弱雞的前端程序員
LayoutUnit & Subpixel Layout
LayoutUnit Subpixel Layout 引言 為了更好的支持移動端和 PC 端的縮放，WebKit 增加了subpixel layout（次像素/亞像素佈局）為此他們還改變了 rendering tree。一個次像素單元在 WebKit 內被稱為 LayoutUnit 用於取代之前使用整數來佈局一個元素在頁面中位置和大小。從 2013 年開始 WebKit 就已經開啓了這個 fla
昵称 Jiavan
ES5和ES6函數你不知道的區別【面試篇】
前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑，有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,
昵称 火狼
javascript用defineProperty實現簡單的雙向綁定
defineProperty Object提供的方法，用於給對象添加自定義屬性具體用法如下： const obj = { _value: 1 }; Object.defineProperty(obj, 'value', { get: function() { console.log('get方法執行'); return this._value; }
昵称 張磊
模擬實現js中的new操作符
new 運算符創建一個用户定義的對象類型的實例或具有構造函數的內置對象的實例。 這是MDN上對new操作符的定義，從這句話中可以看出new返回的其實就是一個實例，那麼問題來了實例又是個啥東西？ 先看個例子： function Cat(name, gender) { this.name = name; this.gender = gender; } Cat.prototype.sa
昵称 WillemWei
模擬實現Javascript中的bind函數
bind() 方法創建一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其餘參數將作為新函數的參數，供調用時使用。 從MDN對於bind的描述來看： 返回值是一個函數，而不是執行結果 this值會指向第一個參數 其餘參數會作為新函數的參數 看個例子： function test(name, age) { console.lo
昵称 WillemWei
如何回覆postMessage的消息
evt.origin為消息來源frame的location.origin evt.source為消息來源frame的window對象，通過evt.source.postMessage(message, evt.origin)即可回覆消息 需要特別注意的是frame unload時發送的消息，監聽方獲取到的evt.source為空，此時為不可回覆狀態，需要處理異常，否則會中斷代碼邏輯
昵称 堅殼
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͜
一個學習 Koa 源碼的例子
作者： MarkLin 學習目標： 原生 node 封裝 中間件 路由 Koa 原理 一個 nodejs 的入門級 http 服務代碼如下， // index.js const http = require('http') const server = http.createServer((req, res) = { res.writeHead(200) res.
昵称 凹凸實驗室
Requirejs加載文件、清除緩存
Requirejs加載js問題 在使用 require(['app1'], function (app1) { console.log(app1); }); 加載app1模塊時，不配置requireJs.config中的path時，會請求當前html文件所在路徑下的app1.js 如果找不到，報如下錯誤 require.js:168 Uncaught Error: Scr
昵称 奶粥
es5/es6中新增的方法
ES5中的新增方法 ES5 中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括： 數組方法 字符串方法 對象方法 1.1 數組方法 迭代(遍歷)方法：forEach()、map()、filter()、some()、every()； array.forEach(function(currentValue, index, arr)) 讓數組中每個元素都執行一次 fn
昵称 sugar_coffee
js原型知識梳理(二)
最近重新梳理了一下原型的知識,想分享一下，希望對那些被原型，原型鏈，構造函數，實例對象等關係滿頭包的童鞋有些幫助~~~ 廢話不説了 上代碼 //原型 prototype function Man(name,age){ this.name=name, this.age=age } let Pers
昵称 大白白
jsonp跨域原理解析
1、背景： 由於瀏覽器同源策略的限制，非同源下的請求，都會產生跨域問題，jsonp即是為了解決這個問題出現的一種簡便解決方案。 2、同源策略： 同一協議，同一域名，同一端口號。當其中一個不滿足時，我們的請求即會發生跨域問題。 舉個栗子🌰： http://www.abc.com:3000到https://www.abc.com:3000的請求會出現跨域（域名、端口相同但協議不同） http:
昵称 姓趙的趙先生
替代 webpack？一文帶你瞭解 snowpack 原理，你還學得動麼
近期，隨着 vue3 的各種曝光，vite 的熱度上升，與 vite 類似的 snowpack 的關注度也逐漸增加了。目前（2020.06.18）snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代碼很輕量，本文會從實現原理的角度介紹 snowpack 的特點。同時，帶大家一起看看，作為一個以原生 JavaScript 模塊化為核心的年輕的構建工具，它是如
昵称 alienzhou
基於小程序請求接口 wx.request 封裝的類 axios 請求
Introduction wx.request 的配置、axios 的調用方式 源碼戳我 feature 支持 wx.request 所有配置項 支持 axios 調用方式 支持 自定義 baseUrl 支持 自定義響應狀態碼對應 resolve 或 reject 狀態 支持 對響應（resolve/reject）分別做統一的額外處理 支持 轉換請求數據和響應數據 支持 請
昵称 海闊天空_mac
react-Router的使用及原理講解和實現react-Router
react-router簡介 react-router包含3個庫，react-router、react-router-dom和react-router-native。 react-router提供最基本的路路由功能，實際使⽤的時候我們不會直接安裝react-router，⽽是根據應⽤運行的環境選擇安裝 react-router-dom(在瀏覽器器中使⽤)或react-router-nativ
昵称 哦哈哈
JS開發必須知道的41個技巧【持續更新】
前言 JS是前端的核心，但有些使用技巧你還不一定知道； 本文梳理了JS的41個技巧，幫助大家提高JS的使用技巧； 文章有點長，可以clone下源碼，直接擼，源碼地址請戳全部源碼，原創不易，歡迎star； 序列文章： Vue 開發必須知道的 36 個技巧 React 開發必須知道的 34 個技巧 Array 1.數組交集 普通數組 const arr1 = [1, 2
昵称 火狼
Docker 第一次上手
Docker第一次上手 引言 DevOps/開發運維/不懂運維和部署的前端開發 項目實際需要，平穩升級構建工具 安裝Docker 去看官網就好了 涉及的幾個命令 dockerimages  dockerbuild -t指定image的repository和tag，這兩項的含義可
昵称 胡斐
老生常談之跨域
一、JSONP script src=""/script 基本原理就是通過動態創建 script 標籤，然後利用 src 屬性進行跨域(後端用回調函數名稱包裹數據進行返回即可)，但是要注意 JSONP 只支持 GET 請求，不支持 POST 請求: // 回調函數 function showData (result) { // json 對象轉成字符串 $('#text').
昵称 焦偉奇
【快速開發App實戰】BUI高仿網易新聞App系列一、搭建App開發環境和工作空間
一. 搭建App開發環境和工作空間 前言 我們的目標是要做一個真實的案例, 着重通過BUI框架及其相關工具的使用, 結合原生打包平台, 幫助大家理解一個App的開發過程. 以最新網易新聞的App為例, 儘量只描述過程, 細節可以自行完善, 高仿得太過以假亂真, 會有侵權問題 ^_^. 文章會分為多個小章節, 知識點逐個講解的方式, 每天掌握一點點, 進步一點點. 文章首發都會在bui神速訂閲號,
昵称 王小o
[分享]高仿網易新聞WebApp模板源碼下載
BUI-163網易新聞 大小: 6.27M 該App基於BUI Webapp框架+Dcloud構建. 僅供學習交流使用. 整個app開發過程記錄在這裏bui神速訂閲號. 快速開發App系列篇 預覽 交互1: 下拉刷新, 加載分頁 交互2: Tab嵌套交互 交互3: 欄目刪減自動更新 交互4: 底部tab的交互, 每個Tab裏面還有各自的交互 下載 源碼下載: https
昵称 王小o