博客 / 列表

zxl20070701 - 從零開始搭建 Vue3 組件庫開發環境

搭建開發環境 Vite初始化 新建一個空的文件夾，比如叫 Vue3UI ，然後使用命令行在此文件夾下使用npm初始化： npm init 回車後，我們再安裝vite（我們這裏選擇使用Vite進行打包，使用別的也類似）： npm install --save-dev vite 根目錄創建 index.html 文件，裏面內容如下： !DOCTYPE html html lang="zh-cn"

vue.js , vite , component , 前端 , ui

zxl20070701 - postMessage

此方法可以用於實現跨源通信等，我們來演示如何實現在兩個窗口之間進行通信。 假設我們現在有兩個頁面：page1.html和page2.html， 他們的關係是通過iframe關聯起來的，就像這樣（下面是page1.html的內容）： iframe id="receiver" src="./page2.html" width="300" height="100"/iframe 為了實現通信，首先你需要

iframe , postmessage , 前端 , html5 , Javascript

zxl20070701 - 關於this指向的一些梳理

函數內 非嚴格模式 通常情況下，定義的函數的this就是window，比如： function doit(){ console.log(this); } doit(); 打印結果： Window {window: Window, self: Window, document: document, name: '', location: Location, …} 嚴格模式 不過，如果開啓了

node.js , this的用法 , this , typescript , Javascript

zxl20070701 - 從JQuery出發總結的關於原型使用上的一些淺薄理解

比如我們現在的需求如下。 有一個函數MyObj，支持如下功能： 可以通過MyObj()的方式返回一個對象，這個對象和new MyObj()是等價的 MyObj本身是一個對象，可以通過MyObj.doit()的方式調用其上的方法或屬性 為了實現需求，第一反應是： var MyObj=function(){ return new MyObj(); }; 然後在My

prototype , proto , jquery插件 , jquery , 前端

zxl20070701 - React 相關插件之 Redux 基本使用入門

引入和定義 首先，你需要創建Store實例並暴露出來： // stores/login.store.js const loginInstance = (preState, action) = { switch (action.type) { // 修改狀態 case "changeLoginState": preState.isLo

react , redux , 前端

zxl20070701 - sftp基本的操作

連接 sftp -P 22 username@ip 然後輸入密碼即可登錄。 文件傳輸 上傳文件 put -r /User/zxl20070701/Desktop/demo.html /root/zxl20070701 上面的例子就是把本機電腦的/User/zxl20070701/Desktop/demo.html文件上傳到服務器的 /root/zxl20070701文件夾下。 下載文件 get -

sftp , ftp-get , ftp , Linux , ftp-client

zxl20070701 - MySql實用命令和基本操作

使用下面的命令進行登錄： mysql -h 主機名 -u 用户名 -p 回車後輸入密碼即可。 基礎命令 查看版本 select version(); 數據庫操作 創建 create database [數據庫名]; 刪除 drop database [數據庫名]; 選擇 在你連接到 MySQL 數據庫後，可能有多個可以操作的數據庫，所以你需要選擇你要操作的數據庫： use [數據庫名]; 查看 也

jdbc , MySQL , 數據庫 , JAVA

zxl20070701 - TypeScript系列：【6】模塊

導出 導出聲明 比如變量、函數、類、類型別名或接口等，例如： export interface DemoType { } 或者 export const demo: number = 10; 當然，別的聲明也可以，這裏就不一一舉例子了。如何記住？在聲明語句的開頭加一個export即可。 導出語句 有時候，我們可能需要先聲明，然後導出，可以使用類似下面的語句： class DemoClass {}

ecmascript-6 , module , export , import , typescript

zxl20070701 - H5輸入區域光標控制

什麼是光標? 頁面上輸入區域（比如input和textarea）中閃爍的光標其實是一個選區，也就是選區的左邊界和右邊界直接形成的選區。 非IE瀏覽器 輸入框結點input=document.getElementById('#input')有兩個屬性： selectionStart、selectionEnd，分別代表選區開始位置，選區結束位置。 通過修改這兩個值就可以形成選區，寬度為0也就實現了光標

input , textarea , 光標 , HTML , 前端

zxl20070701 - TypeScript系列：【4】接口

接口就是定義一個類型，比如一個json數據或一個函數等，描述其具體的結構就可以使用接口來規範。 基礎説明 先來看個例子： interface MyDataType { name: string, age: number } 我們定義了一個json的數據格式，可以且只可以包含值是字符串的name屬性和值是數字的age屬性，下面是一個正確的例子： let myData: MyDataT

ecmascript-6 , interface , class , typescript

zxl20070701 - TypeScript系列：【3】類

基礎説明 先來看個例子： class Person { name: string; constructor(name: string) { this.name = name; } say() { return "你好，我是" + this.name; } } 這樣，我們就定義了一個類，包含一個屬性用於保存名稱，一個構造器用於創

ecmascript-6 , extend , object , class , typescript