- 博客(32)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 拖拽不够自由？Vue3 DnD它来了~
前言众所周知，在React中有一款非常强大的拖拽库，叫React DnD，而Vue中，大部分都是类似于vue.draggable等拖拽排序的库，然而它并不能满足我们所有的需求，特别是应对一些自由拖拽或混合拖拽的场景(例如：低代码)，它是很难做到的，所以vue3-dnd它来了！React DnDReact DnD 是 Redux 核心作者 Dan Abramov 创造的一组 React 工具库，可以帮助您构建复杂的拖放接口，同时保持组件的解耦性。 React DnD 并没有提供一个排序或拖拽的组件，相反
2022-05-04 20:41:48
5360
4
原创 TypeScript入门学习@郝晨光
前言现在TypeScript越来越火，咱也赶一下潮流，开始学习一下TypeScript，在学习的同时做笔记记录，希望可以共同学习，在未来的程序生涯中可以使用TypeScript来进行开发。TypeScript是什么？TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，因为JavaScript是弱类型语言，我们在开发的时候，很容易会因为数据类型...
2019-07-29 08:42:23
370
原创 简单实现Vue响应式原理@郝晨光
前言Vue的数据双向绑定，响应式原理，其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。我们可以先试着拆分一下Vue的核心模块。Vue构造函数，集中以下模块实现MVVM。Observer 通过Object.definePropty进行数据劫持Dep 发布订阅者，添加观察者者以及在数据发生改变的时候通知观察者Watcher 观察者，对数据进行观察以...
2019-07-28 23:03:30
277
原创 前端常见面试题（十六）@郝晨光
用正则和非正则，实现一个字符串转为驼峰例：get-element-by-id转成：getElementById;非正则let str = 'get-element-by-id';function toCamBakStr(str) { let strArr = str.split('-'); for(let i = 1; i < strArr.length; i++) { le...
2019-07-28 23:02:41
239
原创 前端常见面试题（十五）@郝晨光
什么是函数防抖和函数节流？有什么区别？概念函数防抖函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。通俗一点：在一段固定的时间内，只能触发一次函数，在多次触发事件时，只执行最后一次。函数节流函数节流，就是限制一个函数在一定时间内只能执行一次。区别函数节流与函数防抖的区别：我们以一个案例来讲一下它们之间的区别：设...
2019-07-28 23:02:07
163
原创 前端常见面试题（十四）@郝晨光
怎样添加、移除、复制、创建、查找节点创建节点document.createDocumentFragment(); // 创建一个空的虚拟节点，一个DOM片段document.createEelement(TagName); // 创建指定的DOM节点document.createTextNode(); // 创建一个文本节点document.createAttribute(); /...
2019-07-28 23:01:21
269
原创 原生JS - 瀑布流布局@郝晨光
前言瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！本文参考链接：浅谈瀑布流 - 作者：evenyao，感谢作者提供的思路以及图片。...
2019-07-23 01:24:31
209
原创 原生JS - 图片懒加载@郝晨光
前言在现在以用户体验至上的前端时代，为了提升页面加载速度，为了提升用户体验，我们经常会用到图片懒加载这个功能。所以总结记录一下图片懒加载的原理以及实现方式什么是懒加载？懒加载其实就是延迟加载，是一种对网页的性能优化的方式，当访问一个页面的时候，优先显示可视区域内的图片，而不是一次性加载所有图片，当需要显示的时候，再进行加载，避免打开网页时加载过多的资源，发送过多的HTTP请求。实现...
2019-07-21 23:17:53
276
原创 前端常见面试题（十三）@郝晨光
列举三种强制类型转换和两种隐式类型转换JavaScript是一门弱类型语言，在JavaScript中声明变量不需指定类型， 对变量赋值也没有类型检查，同时JavaScript允许隐式类型转换。强制类型转换通过String()，toString()，Number()，parseInt()，parseFloat()，Boolean()等函数强制转换Boolean(0) // => fa...
2019-07-21 23:16:53
244
原创 前端常见面试题（十二）@郝晨光
link和@import的区别始终建议使用link，慎用@import从属关系link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性@import：@import是css提供的语法，只有导入样式表的作用加载顺序link：link在页面加载时CSS同时被加载@import：引入的CSS要等页面加载完毕后再加载兼容性问题link是HTML提供的...
2019-07-21 23:15:53
154
原创 Koa - Node.js框架学习@郝晨光
本文由郝晨光整理总结并编写，未经允许禁止转载。前言学习koa，我之前学习过express，但是在使用express的时候，还是一直使用的回调函数的方式来处理异步，现在想想真是恐怖，后来了解到koa这个框架，它相对于express来说，小巧了很多，对于异步的处理也变得更加优雅了。用官方的话来说，koa是基于Node.js平台的下一代web平台开发框架。正文首先肯定要先开始一个新的项...
2019-07-21 23:15:02
176
原创 前端常见面试题（十一）@郝晨光
什么是事件委托？为什么要用事件委托？什么是事件委托？事件委托，又称事件代理，就是将元素的事件处理交由父元素或者祖先元素来代为执行；事件委托利用了事件冒泡，只指定一个事件处理程序（函数），就可以管理某一类型的所有事件。例如：我们只需要在document上绑定一个onclick事件，就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件，而不必给每一个元素去绑定onclick事件...
2019-07-21 23:12:50
188
原创 前端常见面试题（十）@郝晨光
new操作符干了什么？我们可以一起通过代码实现来看看new关键字到底做了一些什么事情function Book(name) { this.name = name;}Book.prototype.say = function() { console.log(this.name);};let book = new Book('javascript高级程序设计');console.l...
2019-07-14 18:20:46
222
原创 前端常见面试题（九）@郝晨光
前端常见面试题（九）@郝晨光请详解移动端点透，为什么会发生点透？描述发生的场景及解决方案提到移动端点透问题，就不得不先提到移动端的click事件300ms延迟问题一、移动端click事件300ms延迟问题在移动端执行click事件时，通常移动端的浏览器会延迟300ms来触发对应的事件，这个问题的原因是：为了判断用户是否是双击，因为在移动端浏览器刚开始的时候，为了提升用户体验感，开发了双击...
2019-07-14 16:02:08
173
原创 前端常见面试题（八）@郝晨光
前端常见面试题（八）@郝晨光ES5/ES6 的继承除了写法以外还有什么区别？ES5寄生组合式继承（只是列举一个方法，ES5继承还有很多实现方式）function Parent(name) { this.name = name;}Parent.prototype.say = function() { console.log(this.name);};function Chi...
2019-07-12 10:24:03
214
原创 前端常见面试题（七）@郝晨光
简述同步和异步的区别众所周知，javascript是单线程的语言，所谓的单线程，就是从上至下，依次执行，当然这里的依次执行要抛开javascript的预解析机制。这样做的原因是因为javascript最初是为了操作DOM，运行在浏览器环境下的，而操作DOM的时候，不能是异步的，不然的话两个异步任务同时修改DOM结构的话，会导致浏览器不知道该执行哪一个。但是这样做也有缺点，当遇到一个响应时间...
2019-07-11 07:58:13
372
原创 前端常见面试题（六）@郝晨光
Vue路由的实现原理路由这个概念最初是由后端提出来的，在我们没有SPA单页面应用之前，使用的一直都是后端路由，根据不同的路由返回不同的页面，后来随着单页面应用的诞生，开始有了前端路由，实现不刷新但是更新页面的效果vue-router是专为Vue打造的路由管理工具vue-router提供三种路由模式hash模式默认模式，通过路径中的hash值来控制路由跳转，不存在兼容问题his...
2019-07-10 13:38:03
261
原创 前端常见面试题（五）@郝晨光
对MVC、MVP、MVVM的理解MVCM 表示 Model , 专门用来处理数据模型。V 表示View， 专注页面布局和数据显示。C 表示Controller 专注于控制，执行业务逻辑，操作模型和视图。MVC的数据之间通信都是单向的View(视图层) 传送指令到 Controller(控制层)Controller(控制层) 完成业务逻辑后，要求 Model(模型层) 改...
2019-07-09 21:00:53
283
原创 前端常见面试题（四）@郝晨光
什么是Vuex？详述Vuex的工作流程官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex其实就是一个Vue的集中状态管理工具，类似于redux，但使用方法很明显优化了许多什么时候使用Vuex？官方的话说，在你需要用的时候自然而然就知道自己什么时候要用了在我看来...
2019-07-09 20:59:49
209
原创 Vue实现移动端三级联动_@郝晨光
最近的项目中需要用到，所以自己手写了一个，拿出来分享。首先，我们最后实现的是一个支持一级、二级、三级乃至多级联动的可复用组件，照例先看一下效果图，第一张是二级联动，第二张是三级联动。是我们实现的最终效果。本文用到的知识点Vue组件绑定的v-model，参考：Vue在组件(非表单控件)上使用v-model双向数据绑定@郝晨光Vue的组件通信Vue的插槽对Vue的API有一定的了解...
2019-07-09 20:58:44
2765
1
原创 前端常见面试题（三）@郝晨光
1. keep-alive组件的作用为什么使用keep-alive？在Vue中，我们使用component内置组件或者vue-router切换视图的时候，由于Vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等keep-alive的作用？keep-alive是一个Vue...
2019-07-09 20:57:44
170
原创 前端常见面试题（二）@郝晨光
Vue常用的指令v-text 主要用来渲染纯文本内容，类似于原生JS的innerText <div v-text="msg"></div> // msg 的值为纯文本，不会解析标签v-html 主要用来渲染带有html标签的文本内容，可以渲染原生HTML标签 <div v-html="msg"></div> // msg 的值可以是...
2019-07-09 20:56:39
185
原创 Vue实现移动端 message-box 与 alert 弹框@郝晨光
前言最近在做移动端的项目，需要制作移动端的alert弹框和message-box提示信息；之前使用Vue框架的element-ui时，就记得element-ui的弹框，今天深入的研究了一下源码，然后简单制作了一点小demo用到的知识点Vue组件的定义，Vue的extendVue.extend(options)options参数是一个对象，一个Vue组件配置项的对象，例如// 创建一个...
2019-07-09 20:54:56
2968
原创 Vue在组件(非表单控件)上使用v-model双向数据绑定@郝晨光
先看一下效果，注意：完全没有使用任何表单控件实现原理在Vue中，我们一般都使用v-model来实现表单控件的双向数据绑定，但是一般而言我们都使用在表单控件上，例如input，textarea；但是如果我们现在一般都不使用原生的表单样式，因为它实在是太太太丑了其实我们是可以给组件设置v-model属性的，此时，不论你的组件内部是不是一个表单元素，你都可以使用v-model这个属性...
2019-07-09 20:53:56
2984
原创 前端常见面试题 （一）@郝晨光
HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？新特性绘画 canvas，svg;用于媒体播放的的 video(视频) 和 audio(音频) 元素;本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 存储会话级数据，数据在浏览器关闭后自动删除;语意化更好...
2019-07-09 20:52:56
347
原创 原生js面向对象实现函数节流@郝晨光
函数节流（throttle）限制一个函数在一定时间内只能执行一次。函数节流的使用场景当事件不需要频繁的被触发，但是由于特定DOM事件的原因不断的触发事件的时候在你需要用它的时候，你自然而然会知道是什么时候！如： input事件，resize事件，scroll事件，mousemove事件，touchmove事件等只要发生操作就会频繁触发的事件例如：scroll滚动加载，sc...
2019-07-09 20:51:24
197
原创 原生js面向对象书写移动端轮播图@郝晨光
先看一下效果图该项目为仿清欢美味严选商城小程序demo前言轮播图的原理，其实就是一个简单的 n+2 模式，即在原有图片的基础上，再添加两张图片，以达到障眼法的效果，在这个原理方面，我就不做过多的叙述，可以自行寻找度娘，该项目使用了原生js，面向对象，移动端的touchstart，touchmove，touchend事件，有一小部分使用了ES6的语法，如箭头函数，let声明变量等等，建议有一...
2019-06-27 08:04:52
281
原创 git命令行基本操作和常见错误
git to gitee使用的gitee（码云） www.gitee.comGit 全局设置:git config --global user.name "hcg1023"git config --global user.email "2293885211@qq.com" 1、如果是本地已有的项目要提交到线上指定的空仓库先进入项目目录下，执行$ git init如果要...
2019-06-11 11:48:41
410
原创 react的生命周期钩子
react的生命周期钩子 constructor() { // 构造函数，在创建组件的时候调用一次。 // 组件初始化开始 // 初始化state } getDefaultProps() { // 设置默认的props，也可以用dufaultProps设置组件的默认属性。 } getInitialStat...
2019-06-11 11:40:37
315
原创 react-redux详细使用方法
文件目录*---store // 存放redux，数据，以及action*---store子目录 actions // 存放action的文件夹 reducers // 存放reducer的文件夹 actionTypes.js // 存放所有的actionType index.js // store的入口文件安装npm install redux ...
2019-06-06 11:22:10
576
原创 Vue基础入门
Vue是什么？借用官网的介绍：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面（View）的渐进式MVVM框架。Vue 被设计为可以自底向上逐层应用。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue官方教程网址使用Vue 1、我们要使用vue，有两种方式(1). 一是在咱们的传统项目中使用，通过scri...
2019-04-29 09:29:31
1122
原创 javascript基础
一、什么是 javascript (js)？在浏览器环境下 javascript是一种基于对象和事件驱动的客户端脚本语言，由浏览器解析执行在服务端环境下 javascript通过Node.js的解析器，也可以用作服务端语言使用此文章仅记录浏览器环境的javascript二、javascript由什么组成？BOM（Borwser Object Model）浏览器模型对象DOM (Do...
2019-04-02 13:41:04
235
空空如也
使用npm下载任何文件都报错，报错如下
2019-03-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人