原创 幾種常見的 CSS 佈局

本文概要 本文將介紹如下幾種常見的佈局: 單列布局 兩列自適應佈局 聖飛佈局和雙飛翼佈局 僞等高佈局 粘連佈局   一、單列布局   常見的單列布局有兩種:   header,content和footer等寬的單列

原创 Web框架的架構模式探討

在寫乾貨之前,我想先探(qiang)討(diao)兩個問題,模式的侷限性?模式有什麼用? 最近看到一篇文章對我啓發很大,許來西在知乎的回答《哲學和科學有什麼關聯?》,全篇較長,這裏摘錄我要引出的一點: 科學作爲一種經驗主義的認識論,有着

原创 JS對象添加getter與setter的5種方法

  定義 getter 與 setter 1.通過對象初始化器在創建對象的時候指明(也可以稱爲通過字面值創建對象時聲明) (function () {   var o = {     a : 7,     get b(){return

原创 JavaScript快速上手:關於閉包的知識分享

  01 JS中變量的作用域 在理解閉包之前,我們得弄清楚JS中變量的作用域原理,它分爲全局作用域和局部作用域,它有一個特點就是局部可以獲取全局的聲明變量,而全局卻不能得到局部聲明的變量,我們先來看一個小例子: 1        va

原创 h5 與原生 app 交互的原理

現在移動端 web 應用,很多時候都需要與原生 app 進行交互、溝通(運行在 webview中),比如微信的 jssdk,通過 window.wx 對象調用一些原生 app 的功能。所以,這次就來捋一捋 h5 與原生 app 交互的原理

原创 Vue + better-scroll 實現移動端字母索引導航

效果圖:   配置環境 因爲用到的是 vue-cli 和 better-scroll,所以首先要安裝 vue-cli,然後再 npm 安裝 better-scroll。 簡單介紹一下 better-scroll: better-scro

原创 如何實現一個簡化版的 jQuery

jQuery 對於操作 DOM 來說,jQuery 是非常方便的一個庫,雖然如今隨着 React, Vue 之類框架的流行,jQuery 用得越來越少了,但是其中很多思想還是非常值得我們學習的,這篇文章將介紹如何從零開始實現一個簡化版 

原创 CSS粘住固定底部的5種方法

本文主要介紹一個Footer元素如何粘住底部,使其無論內容多或者少,Footer元素始終緊靠在瀏覽器的底部。我們知道,當內容足夠多可以撐開底部到達瀏覽器的底部,如果內容不夠多,不足以撐開元素到達瀏覽器的底部時,下面要講的佈局就是解決如何

原创 深入理解Node.js垃圾回收與內存管理

  使用JavaScript進行前端開發時幾乎完全不需要關心內存管理問題,對於前端編程來說,V8限制的內存幾乎不會出現用完的情況,但是由於後端程序往往進行的操作更加複雜,並且長期運行在服務器不重啓,如果不關注內存管理,導致內存泄漏,就算

原创 數千份項目中找出的十大 JavaScript 錯誤

通過統計數據庫中的1000多個項目,我們發現在 JavaScript 中最常出現的錯誤有10個。下面會向大家介紹這些錯誤發生的原因以及如何防止。   對於這些錯誤發生的次數,我們是通過收集的數據統計得出的。Rollbar 會收集每個項目中

原创 VueMixins高級組件與VueHOC高階組件

  在項目裏,我們經常會使用組件庫進行快速開發,然而在過程中,又難免會遇到對組件庫的改造和拓展,如何優雅且簡單的進行重構,下面讓我們從一個簡單需求來探索組件的奇技淫巧--Mixins和HOC   項目中使用組件庫遇到的需求   需求:

原创 微信小程序之圓形進度條

需求概要 小程序中使用圓形倒計時,效果圖: 思路 使用2個canvas 一個是背景圓環,一個是彩色圓環。 使用setInterval 讓彩色圓環逐步繪製。 第一步先寫結構 一個盒子包裹2個canvas以及文字盒子; 盒子使

原创 H5最強接口之canvas動態圖形實現

上個文章中我們分享瞭如何利用canvas來進行圖形繪製,但是繪製的都是靜態圖形,本週我們就來學習如何利用canvas進行動態圖形繪製。   什麼是動畫? 我們在繪製動畫之前必須要弄清楚什麼是動畫,一個動畫最起碼需要哪些基本條件呢? 我們可

原创 如何讓對象屬性不可配置或枚舉

一、什麼是屬性描述符? MDN: 對象裏目前存在的屬性描述符有兩種主要形式:數據描述符和存取描述符。 數據描述符是一個擁有可寫或不可寫值的屬性。 存取描述符是由一對 getter-setter 函數功能來描述的屬性。 描述

原创 盒子模型自適應水平垂直居中的方法

1.Flexbox佈局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap柵格佈局: 一共12格,分成3塊,每塊佔4列。