原创 React通過原生鼠標事件實現拖拽(drag and drop)列表重排序

雖然現在html5已經有支持拖拽的事件,但是支持還不那麼全面。所以目前大部分的拖拽還是通過原生的鼠標事件來實現列表重新排序。話不多說。一步步開始做吧 盆友們可以通過下面鏈接查看所有代碼和效果。 https://codesandbo

原创 React公用scrollToTop(返回頂部)組件

現在web頁面要兼容各種設備,部分頁面的內容長度在手機端就顯得過於冗長。除了給客戶提供一個按鈕,一鍵返回頂部。更好的客戶體驗就是當客戶做某種操作的時候,就自動滾動到頂端。這樣就能順暢的進行接下來的操作了。 目前我所接觸到需要自動返

原创 替換多個敏感詞

此例子只考慮少量的敏感詞詞庫替換。 let comments = "sexy girl yes, no sexy fuck"; let abusiveWordsData = ['fuck', 'ass', 'sexy girl'

原创 TypeScript - 函數詳解

JS中創建函數的兩種方式 // 命名函數 function add(x, y) { return x + y; } // 匿名函數 let myAdd = function(x, y) { return x + y; };

原创 GIT bash可以用,但是cmd, vscode, intelliJ的命令行不能識別git

在安裝GIT的時候沒有設置環境變量 第一步、在GIT bash裏面查找git的安裝路徑 第二步、設置系統環境變量 第三步、cmd, vscode, intelliJ的命令行測試      

原创 TypeScript - 類詳解

類寫法 class Greeter { greeting: string; //屬性 constructor(message: string) { //構造器: this.greeting = message;

原创 爲什麼在Firefox裏placeholder的顏色比設置的代碼淺, 比其他瀏覽器淺

今天在開發的時候突然發現在Firefox下設置的placeholder顏色不是代碼設置的顏色。本着碼農樸實的精神,我先檢查下是不是寫錯了。 畢竟各大瀏覽器都堅持以自我爲中心,其他爲goushi的精神。 堅持要苦逼的前端寫不同兼容的代碼。

原创 java-將xlsx(excel)文件轉換成json

最近在工作接觸到將xlsx(excel)轉換成Json文件的需求。特此寫個文章總結學習。以供以後參考。 首先了解一下Json的語法 摘抄自http://www.w3school.com.cn/json/json_syntax.a

原创 TypeScript - 泛型解析Generics

泛型 主要用於創建重用組件,允許用戶去使用自己的類型去重用這些組件。 如何定義泛型? function identity<T>(arg: T): T { return arg; } 對比一下 function ident

原创 TypeScript - 枚舉詳解

知識點列表 數字枚舉 字符串枚舉 合成枚舉 (包括字母和數字類型) 計算成員和常量成員 枚舉成員作類型 運行時枚舉 編譯時枚舉 反向映射 (僅僅適用於數字枚舉) const枚舉 環境枚舉 數字枚舉 沒有初始化值,默認從0開始自

原创 js實現瀏覽器往手機端,PC端自帶日曆添加事件提醒

之前接收到一個需求,要求添加一個鏈接。用戶點擊後就可以在手機端,PC端的日曆中添加一個待辦事項,能夠到時提醒。 各種google後發現,只要編輯ics格式文件,點擊下載。手機端、PC端會識別和詢問是否要加入日曆。 話不多說,例子走

原创 TypeScript - 接口詳解

TypeScript的核心原則之一是對值所具有的形態進行類型檢查,在TypeScript中,接口的作用就是命名這些類型和在你的代碼和第三方代碼之間建立契約 舉個栗子 function printLabel(labeledObj:

原创 TypeScript - ES2015與Typescript之間變量聲明, 解構賦值的區別和新增

本文只介紹了在ES2015與TypeScript之間變量聲明, 解構賦值的區別和新增 如果你不熟悉怎麼使用let和const還有解構賦值,請參考阮大神的ES6教程 https://es6.ruanyifeng.com/#docs

原创 TypeScript - 基本類型

基本類型 Boolean布爾值 let isDone: boolean = false; Number數字 let decimal: number= 6; //十進制 let hex: number = 0xf00d; //

原创 js動態提示輸入框剩餘字符數及accessbility實現(無障礙網頁)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-