兰亭古墨-CSDN博客

原创使用 GitHub Actions 实现 Dumi 博客自动化部署

作为技术人，相信大家都会想有一个自己的专属博客，用于记录自己走过路的，趟过的坑，或是沉淀工作和学习心得！首先讲下行业现状，目前主流搭建博客用到的方式：dumi：蚂蚁金服出品，一款为组件开发场景而生的文档工具VuePress：Vue 官方出品，支持第三方主题，可搭配 commento 实现博客评论Hexo：一个快速、简洁且高效的博客框架，热度蛮高GitHub Pages： Github 官方提供的为项目提供的文档[Github issue]：本是用于提交代码缺陷的，但目前发现有很多人用作写

2021-01-16 21:28:57 1667

原创【React源码】Day02——实现事件绑定和同步状态更新

【React源码】Day02——实现事件绑定和同步状态更新github实现事件绑定// react-dom.jsfunction updateDOMAttr(dom, props) { for (let key in props) { if (key === "children") { continue; } if (key === "style") { for (let attr in props[key]) { dom.styl

2020-11-07 22:09:23 290

原创 React 源码——day01

首先实现一个简单的 React 程序，打印一些元素import React from "react";import ReactDOM from "react-dom";// let helloComponent = (// <div className="title" style={{ color: "red" }}>// <h1>hello</h1>world// </div>// );let helloComponent =

2020-11-05 22:38:24 257

原创 webpack 打包后 bundle.js 文件分析

Bundle Analysiswebpack 打包后的文件如下，省略中间部分逻辑代码，可以看到是一个自执行函数，传入了一个对象，该对象的键 ./src/index.js 和 ./src/title.js 都是文件路径，值为导出的模块。// webpackBootstrap(function (modules) { // ... // ... // ... // Load entry module and return exports return __webpack_re

2020-09-13 15:11:55 2100

原创 Vue 3.0新特性学习

vue3-appv-model 指令// vue 2.x<ant-input v-model="inputValue"></ant-input>// vue 3.x<ant-input v-model:inputValue="inputValue"></ant-input>v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’)，

2020-09-05 14:21:54 1307

原创 javascript 中 forEach不可用于删除数组项目

今日爬坑,代码如下：let data = [ { name: 'hefeng', from: 'china', }, { name: 'alice', from: 'china', }, { name: 'jack', from: 'america', },];data.forEach((item, index) => { if (item.from === 'china') { data.splice(i

2020-08-27 22:37:19 1319

转载让你的 commit 更有价值(规范)

以下文章来源于奇舞周刊，作者陈方旭编者按：本文作者陈方旭，奇舞团前端开发工程师。提交规范AngularJS 在开发者文档1中关于 git commit 的指导说明，提到严格的 git commit 格式规范可以在浏览项目历史的过程中看到更易读的信息，并且能用 git commit 的信息直接生成 AngularJS 的 change log 。commit messages 格式规范commit messages 由 header 、body 、footer 组成。header 又

2020-08-08 21:10:12 669

转载弹性盒子中 flex: 0 1 auto

三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。<div class="parent"> <div class="item.

2020-07-15 09:20:45 2761

原创 javascript高级进阶之函数防抖节流

函数防抖(debounce)概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。生活中的实例：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。假设，我们观察的总时间为10秒钟，规定1秒作为一次事件的最小间隔时间。如果触发事件的频率是0.5s/次，那么函数防抖如图因为始终没法等一秒钟就被再次触发了，所以最终没有一次事件是成功的。函数实...

2020-07-11 18:42:47 354

原创前端缓存详解

HTTP 缓存分为 2 种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。这是缓存运作的一个整体流程图：强缓存不需要发送请求到服务端，直接读取浏览器本地缓存，在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ，在 Chrome 中，强缓存又分为 Disk Cache (存放在硬盘中)和 Memory Cache (存放在内存中)，存放的位置是由浏览器控制的。是否强缓存由 Expires、Cache-Cont

2020-07-11 15:55:10 4010 1

原创 js 实现一个url格式化查询字符串函数

你可能会这么写，双重循环简单粗暴！function parseQueryString(url) { let queryString = url.slice(url.indexOf('?')+1) let tempArr = queryString.split('&') let obj = {} tempArr.forEach(item => { let arr = item.split('=') obj[arr[0]] = arr[1] }); ret

2020-07-10 21:57:23 1057

转载前端模块化详解(完整版)

本文转载自浪里行舟前端模块化详解(完整版)前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本..

2020-07-07 21:43:14 288

原创 GitLab服务器搭建

安装依赖软件yum -y install policycoreutils openssh-server openssh-clients postfix2.设置postfix开机自启，并启动，postfix支持gitlab发信功能systemctl enable postfix && systemctl start postfix3.下载gitlab安装包，然后安装wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/.

2020-06-25 20:45:10 385

原创前端js将扁平化数据转化为=菜单树

let menuList = [ { id: 1, pid: -1, name: '江西' }, { id: 2, pid: 1, name: '南昌' }, { id: 3, pid: 1, name: '九江' }, { id: 4, p...

2020-06-21 16:47:37 686

原创手写Vue表单组件

test-form.vue<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" > <el-form-item label="用户名" prop="username"> <el-input type="username" v-model="ruleForm.username" autocomplete="off"><

2020-05-31 18:11:17 660

原创前端异常监控

近日腾讯音乐电话面试提到如何监控前端代码报错，涉及 js代码报错，异步报错，图片资源、js资源加载报错，Promise报错如何进行监控统计，答的不够全面，于是仔细研究下。js代码报错异步报错图片请求报错 scriptsrc资源加载报错 Promisereject 或者抛错JS 异常处理使用 try...catch...try { w}catch(e){ console.log(e) // ReferenceError: w is not defi...

2020-05-25 21:52:32 611

原创 leetcode-求两数之和

1. 两数之和难度简单8267收藏分享切换为英文关注反馈给定一个整数数组nums和一个目标值target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]方法一：双重循环/** * @param {...

2020-05-22 21:29:20 387

转载从一道题浅说 JavaScript 的事件循环

从一道题浅说 JavaScript 的事件循环注：本篇文章运行环境为当前最新版本的谷歌浏览器（72.0.3626.109）最近看到这样一道有关事件循环的前端面试题：//请写出输出内容async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async

2020-05-17 21:37:09 329

原创 Vue源码学习之computed

首先，了解下Vue中，computed的作用，主要用于对一个变量的惰性更新，当这个属性所依赖的变量发生改变时，它将会更新。用官网的话讲 “计算属性是基于它们的响应式依赖进行缓存的”1、创建Vue实例时会initState和$mount，前者用于初始化 data，computed，watch初始化函数。后者用于做页面渲染Vue.prototype._init = funct...

2020-05-01 21:45:17 359

原创 Vuex文档通读感悟

Vuex文档通读感悟1、为什么要用 Vuex 进行状态管理？定义一个全局对象，再去上层封装了一些数据存取的接口不也可以么？Vuex 的状态存储是响应式的，当 Store 中状态发生改变时，对应的组件的视图能够得到高效的更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。可以方便地使用工具（v...

2020-04-10 22:29:22 355

转载观察者模式 vs 发布订阅模式

有一回面试，面试官问：观察者模式，和发布订阅模式，有什么区别？我脑海中立刻闪现了《Head First设计模式》里讲的：Publishers + Subscribers = Observer Pattern“哼哼，我知道答案了，兄dei！”，我内心无比鸡冻。“它们是一样的。”，我故作镇定，嘴角露出一丝微笑，仿佛下一秒钟面试官就会给我发offer。面试官也...

2020-02-01 14:31:46 323

原创 js高级进阶——手动实现深拷贝函数

主要考察目标：数据类型校验循环引用 function deepClone(data, hash = new WeakMap) { if (data == undefined) return data; if (typeof data !== 'object') return data; if (data instanceof RegExp) r...

2019-12-14 21:52:29 1114

原创 js高级进阶——手动实现apply()函数

// 首先看下apply() var obj = { name: 'Nicholas S.Zakas', age: 41, from: 'America', introduce: function (name, from) { console.log('hello, everyone, i am ' + name, ...

2019-12-07 18:33:12 567

原创 js高级进阶——手动实现call()函数

// 首先看下原生的js的call() var obj = { name: 'Nicholas S.Zakas', age: 41, from: 'America', getName: function (prefix) { console.log(prefix + this.name) } }...

2019-12-07 17:26:15 925

原创 js高级进阶——手动实现new操作符

function Animal(name, age) { this.name = name this.age = age // return {} } Animal.prototype.sayName = function () { console.log("Hello Everyone, I am " + this.na...

2019-12-07 15:58:12 375

原创 @vue/cli vue create初始化项目时使用yarn安装依赖

使用vue-cli搭建Vue项目脚手架后如何将Vue项目初始化的命令改用yarn安装呢？也就是运行如下命令后，安装依赖使用Yarnnpm install -g @vue/cli# ORyarn global add @vue/cli1.全局安装Yarnnpm install -g yarn2.把.vuerc文件的改成 "packageManager": "yarn...

2019-12-02 20:50:52 4560 2

原创网址url的正则表达式

let reg = /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/ilet str = 'http://www.hefeng6500.cn/home/index.html?hefeng6500=bob#test'reg.exec(str)

2019-11-26 14:56:00 982

原创使用原生js实现replace()函数

需求：let str = 'zhufeng2019zhufeng2019'str = str.replace(/zhufeng/g, function(...args){ // args中存储了每一次大正则匹配的信息和小分组匹配的信息： content, $1, $2 return '@' // 返回的是啥就把当前正则匹配的内容替换成啥}) Strin...

2019-11-26 12:25:17 784

原创 CSS三栏布局方法及其分析

前言相信很多同学在面试的时候遇到过三栏布局的问题，一般面试题会让你尽可能多的写出三栏布局的方法，本篇小记对三栏布局的一些主流方法，做一些总结和分析。不正之处，欢迎指点！正文1.绝对定位法html如下：<div class="container"> <div class="left"></div> <div class="center"...

2019-11-09 17:30:54 529

原创 vue高级技巧

1、索引数组的修改，vue无法劫持该数据进行响应式变化，代码如下：当btnClick触发时，视图并不会相应更新<template> <div> <span v-for="(item, index) in testData" :key="index"></span> </div></template>export...

2019-11-05 20:34:24 1122

原创【软件项目管理】学习之软件项目管理基本概念

软件项目管理五大过程组：初始、计划、控制、执行、结束十大知识域：范围管理、计划管理、成本管理、质量管理，资源管理、沟通管理、风险管理、采购管理，整合管理，利益人管理...

2019-10-31 22:50:24 813

转载 Compare two HTML sources and display visual differences

I am trying to show where the two HTML pages differ. I am trying to figure out a way if i can compare the HTML source code of two webpages(almost similar), and show/highlight the differences visually(...

2019-10-13 21:10:51 281

原创 Flutter真机调试指南

以华为手机为例1、使用数据线（非充电线）连接电脑2、设置-系统-关于手机-EMUI版本，连续点击7次，打开开发人员选项3、将USB调试打开在cmd中输入 flutter devices 就可以看到已经连接的手机设备。当然在AndroidStudio中也会显示已连接的设备...

2019-09-30 11:55:36 5222

原创 Handsontable使用教程含授权码LicenseKey

目前使用的Vue做的项目，就讲下 Handsontable 在Vue中的使用吧Installationnpm install @handsontable/vue handsontableBasic usage<template> <hot-table :data="data" :rowHeaders="true" :colHeaders="true"><...

2019-09-28 16:39:34 10403 1

原创手动实现简易Vue框架——Object.defineProperty

所谓“千里之行，始于足下；骐骥一跃，不能十步；驽马十驾，功在不舍”，今天我准备从最简单的步骤开始手写一个简易版的Vue所用设计模式MVVM。首先来来熟悉下Object.defineProperty 这个api的使用，详细请自行MDN查阅 var obj = {} Object.defineProperty(obj, 'test', { configur...

2019-09-24 22:58:38 384

原创解析url查询字符串高级方法

function queryURLParams(url) { let result = {}, reg1 = /([^?=&#]+)=([^?=&#]+)/g, reg2 = /#([^?=&#]+)/g; url.replace(reg1, (n, x, y) => result[x] = y)...

2019-09-09 21:47:50 457

原创前端处理上万条数据的优化

最近碰到一面试题给了一个请求接口，没有分页，一共一万条数据，并且让前端渲染在页面上，这个场景一般在实际应用场景不多见，一般后端都会设置分页查询，但是面试官考的就是前端对于大量数据的处理能力。看本文之前不妨思考下，如果让你做，你会怎么处理呢？先给出代码吧！<!DOCTYPE html><html><head> <script src="h...

2019-08-19 19:33:24 10752 4

原创 js实现数字金额千分位逗号分开格式化

const formatter = (num) => { const reg = /^\d*$/ if(!reg.test(num)){ throw '输入内容有误！请输入数字' }else{ return String(num).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g,'$&,') ...

2019-08-19 17:12:12 1510

转载理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

一、XMLHttpRequest 2.0的家臣们我大学那会儿，一个称为Ajax的东西对前端行业造成了深远影响，不仅是JS语言，而包括前端地位、职位兴起以及工作分工等。抛开IE6浏览器不谈，其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。然后，好多年过去了，XMLHttpRequest带着两位家臣，DOMString和Document数据类型攻城略地，几乎一统天下。...

2019-08-13 21:57:18 1162 2

原创原生js实现平滑滚动

原生js实现平滑滚动今天上班遇到一个问题，点击某个按钮，将某个div里面含有id的某个元素滚动到视野中央，大概距离视口顶部100px位置。思索良久，没搞出来，今晚回来好生研究，思路如下。首先了解下关于元素以及浏览器窗口各种尺寸含义一张图搞清楚　html 定位：ClientHeight,scrollWidth本教程只需要用到一下几个尺寸名称含义offsetTop当前元...

2019-07-17 23:51:10 2746

菲利普·科特勒（Philip Kotler市场营销：原理与实践（第16版）营销管理最新版 高清PDF

空空如也

菲利普·科特勒（Philip Kotler市场营销：原理与实践（第16版）营销管理最新版高清PDF