原创 超微編譯器

事物的特殊性往往也能反映事物的普遍性。-- 網摘 背景:在瞭解抽象語法樹的時候偶然瞭解到 the-super-tiny-compiler這個開源項目,一看之下似乎不復雜,原文全是英文,閱讀的時候就想到翻譯一下,一方面加深理解

原创 前端e2e測試嘗試

環境 node: 12.14.0 puppeteer:3.3.0 resemblejs:3.2.4 解決問題 通過puppeteer模擬用戶操作,將操作後的頁面效果進行截屏保存,此外保留第一次成功運行後的所有截屏圖片,迴歸測試

原创 Angular之入門

一、基礎知識 HTML CSS TypeScript 面向對象思維 二、應用組成 模塊構成應用的運行環境 組件(Components)樹組成應用視圖 路由實現視圖之間的切換 三、組件數據交換 數據輸入:@Input裝飾器

原创 前端異步小結

一、異步操作 XMLHttpRequest請求 定時器 事件 WebWorkers,工作線程的運行 Websocket請求 二、異步編程解決方案 Promise Generator async 事件輪詢 響應式編程,RxJS

原创 angular項目中配置文件實踐

前言:這裏的配置一般指項目構建後可能需要運維人員進行手動修改的內容,比如:url地址等(沒有使用代理服務器)。因此爲便於運維人員修改,會創建單獨的配置文件,且構建後也能方便其修改。 一、配置內容放在json文件中 json文

原创 canvas特效用例之粒子射線

實現效果 構建粒子類 function Particle(option){ option = option || { color:'#000', radius:10, x:0, y:0,

原创 可視化佈局實現方案

背景:大屏展示網頁,管理端實現拖拽佈局配置 一、功能點 拖拽實現佈局配置 根據配置渲染出頁面 二、開源工具 vue-grid-layout:基於vue的可視化拖拽佈局工具,可拖動改變容器大小 muuri:功能和vue-g

原创 BDD、TDD、ATDD的對比區別(譯文)

本指南旨在描述不同的測試方法或實踐,例如行爲驅動開發(BDD)、測試驅動開發(TDD)、 驗收測試驅動開發(ATDD)。它還將描述這些技術之間的主要區別。在文章最後,將描述它們是怎樣工作的,它們的關鍵差異以及在開發過程中所扮演的

原创 webpack4.x打包文件解析

眼睛裏的東西,是被賦予的,逃脫,就分不清‘真相’與‘現實’。–極簡 一、環境 "webpack": "^4.43.0" "webpack-cli": "^3.3.11" 二、源碼 src/index.js export de

原创 web端分屏異顯實現技術思路-同主機同域名環境

要點: 數據存儲 兩屏之間的通信 存儲 Cookie 受同源策略限制,支持多標籤頁數據共享,大小4KB左右,視瀏覽器而定 LocalStorage 受同源策略限制,支持多標籤頁數據共享,存儲數據量大概幾M,視瀏覽器而定

原创 web明水印

信息的不對稱,對任何人都一樣,就像白天不懂夜的黑。 背景:出於相對安全考慮,要求對網頁加上明水印,考慮到水印要浮於內容之上,且不影響用戶操作,本文對採用水印DOM節點的方法做一個描述。 一、功能點 文本自定義 顏色自定義

原创 webpack構建自定義vue組件庫

本文用於描述用webpack構建vue組件庫的過程 前提:安裝node 一、創建目錄w-components,自己可以隨便命名 二、進入目錄執行npm init初始化項目 三、安裝webpack和webpack-cli n

原创 node命令行工具-創建默認格式的vue單文件

地球上的一切工具和機器,不過是人肢體知覺的發展而已。——愛迪生 背景:平常在編寫vue單文件時總是拷貝一個單文件,然後修改成自己想要的格式,次數做多了未免有點繁瑣。於是覺得不如寫個node命令行工具,自動生成默認格式的單文件

原创 多值排序算法

一、測試用例 用例一 入參:[[1,2],[3,4],[5,6]] 出參: [1, 3, 5] [1, 3, 6] [1, 4, 5] [1, 4, 6] [2, 3, 5] [2, 3, 6] [2, 4, 5] [2, 4,

原创 css3動畫-月食一顆星

跟着時間行走,原本熟悉的東西也會變得陌生。-- 極簡 一、效果 二、代碼:CodeOpen