自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

北极那企鹅丶

一只小企鹅的前端之路

  • 博客(19)
  • 收藏
  • 关注

原创 js在if语句中的函数声明会不会得到函数提升?

话不说多,先上代码。var a = 0;if (true) { function a () { } a = 3;}console.log(a) // a() {}如果程序中遇见if语句的情况,且程序内恰好包含函数声明的情况(一般我们不会写出这样的代码,但是容易出现在面试题中)首先看mdn的解释一个被函数声明创建的函数是一个 Function 对象,具有 Function 对象的所有属性、方法和行为。查看 Function 以获取 function 的详细信息。

2021-03-16 18:16:56 2020 10

原创 从源码角度了解vue执行流程(二)

上篇博文已经讲到了执行完import Vue from “vue”,Vue构造函数和实例已经拥有了很多的属性和方法,那么我们接下来继续进行。文章目录import App from "./App.vue";import router from "./router";import store from "./store";Vue.config.productionTip = false;new Vue({ ... })执行initLifecycle(vm)执行initEvents(vm)执行initRen.

2021-03-05 17:04:33 504 1

原创 从源码角度了解vue执行流程(一)

作为一个vuer终于开始对vue源码动手了,激动的心颤抖的手,不如撸行代码走一走。源码基于最新的v2.6.12版本开始叙述,可能会理解错误导致出入,还请指正,另外只做流程梳理,具体源码不做深入讲解,后续计划会出详细博文。文章目录使用vue-cli脚手架创建简单的vue项目import Vue from "vue";定义Vue构造函数执行initMixin(Vue)执行stateMixin(Vue)执行eventsMixin(Vue)执行lifecycleMixin(Vue)执行renderMixin(.

2021-03-02 15:46:38 688 1

原创 vue项目获取不到异步数据dom的解决方案

我们都知道在created钩子函数获取异步数据,mounted钩子函数里面获取dom节点,但是如果出现这种情况,你获取的异步数据比mounted钩子函数还要滞后,导致异步数据的dom渲染不出来,那么这种情况怎么解决呢?第一种方案为了确保异步数据确实获取到了,我们可以在异步数据获取成功里面的回调写我们的逻辑。// 以下为伪代码methods: { async getList() { await getList() // 这里成功获取异步数据 this.$nextTick(() =>.

2021-01-28 17:31:44 2230

原创 vue项目使用fullendar v5事件日历的分享

学习新技术是不可能的,这辈子都不可能,要不是需求有这个,我肯定不学,好了吐槽完毕,开始进行事件日历fullendar v5版本的分享效果图首先看一哈效果图,这是总览图这个是添加事件预览图这个是点击单元格快捷添加,最大的区别就是单元格点击事件日期已经确定另外一个就是点击事件时,出现对事件的再次编辑,相当于预览加编辑二合一另外针对事件的删除功能,做成了事件长按删除此外还能拖拽事件到另外一个日期,扩大一个事件的日期范围等功能。如何使用企鹅自己使用的vue项目,所以保证你的项目是vu.

2021-01-12 11:05:51 2331 5

原创 通杀pc端自适应(包含可视化大屏)

最近撸项目时,需求只说了做pc端的自适应项目,结果最后验收时,领导还要在大屏看效果,而且大屏还好几种,有一种是地铁站的那种广告屏,还有一种是类似天猫双十一那种巨屏,可想而知,这种普通的pc端项目放上去是什么效果。熬夜撸代码,终于在头发没剩几根时,想出来了一种pc端的自适应解决方案,通杀pc端的自适应适配问题文章目录pc端的显示分析pxemrempc端显示比例通杀pc端适配方案参考文献pc端的显示分析首先大致说下,px,rem,em这几个单位。pxCSS 像素(CSS Pixel):又称为虚拟.

2020-12-11 15:04:48 3263 5

原创 mock.js的替代方案easy-mock的使用

项目上线部署离不开测试,而测试也离不开数据的支撑。一般而言,在后端设计表结构的时候,前后端商量接口格式以及返回数据机构,尽量保证在数据库表结构设计完成没多久,一份较完整的接口文档会给到前端,前端以此进行开发。文章目录常见的数据模拟1. 前端本地写死数据2. 前端本地mock3. 使用easy-mock如何使用easy-mock创建项目创建接口预览接口同步Swaggerfunction 使用常见的数据模拟1. 前端本地写死数据比如一个列表list,前端同学可能这么定义:const list = .

2020-12-08 14:33:58 1971

原创 尝鲜vue3.0 从todoList开始

vue3.0 都已经进入beta版本了,预计今年就会面向广大的vuer,嘴里说着学不动学不动了,可吃饭的家伙,再难也得啃过去呀,干啃两天vue3征求意见稿,马马虎虎写出了这个tidolist先看看最后完成的效果吧,样式有点丑,将就着看下吧启动项目这里企鹅遇到个问题,按照官方说的,先是使用vue-cli4.x以上的脚手架创建个vue2项目,然后使用vue add vue-next将其转换成vue3的项目,但是试了几次总是报错,所以采用了另一套方案,就是使用vite进行创建。更多vite点击这里进行.

2020-09-11 17:56:41 336

原创 手把手教你从零配置你的代码编程风格(eslint+husky+prettier+lint-staged)

参考eslint 与 prettier 实现代码规范自动格式化vue-cli3的eslint配置问题(五花八门的问题在此终结!!!)使用项目自带的eslint未使用cli3提供的eslint"devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-router": "^4.1.0", "@vue/...

2020-04-12 11:38:55 6204 3

原创 typescript学习之路(五) —— ts的接口

项目开发中,我们会遇到这样的需求。就是我们需要开发一个函数或者一个插件或者库等等,需要调用者调用时传入指定的参数,比如我们需要的是string类型的或者对象类型的,再或者是对象类型的且里面的属性必须包含什么属性等,如果说我们自己的约定属于彼此之间的约定,那么接口就是ts为你的代码定义的强制契约。文章目录一般情况下的我们定义的约定接口初探可选属性只读属性额外的属性检查使用类型断言使用类型兼容使...

2020-03-25 21:02:48 2327 1

原创 基于node+vue的全栈项目,探索node中间件

这是一个基于node搭建的全栈项目,没有ssr,纯spa项目,目的就是探究node在项目中所起到的中间件作用。常规vue项目自带webpack-dev-server,这样就是前端项目起了一个服务,node中间件也起了一个服务,这样就会造成跨域(不同端口),而且很不美观,况且webpack-dev-server本身就是node所写的一个插件,所以想法就是利用node启动服务,webpack-dev...

2020-03-19 16:28:05 1272

原创 typescript学习之路(四) —— ts类的继承(包含es5以及es6的类继承)

上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细。文章目录es5继承原型链继承构造函数继承组合继承es6继承ts继承es5继承原型链继承所谓原型链继承,就是将一个实例对象挂载到另一个原型上。即继承对象的prototype = new 实例化的对象// 声明一个Pa...

2019-11-21 23:42:26 4614

原创 仿写vue-router,超详细的逐行注释

仿写vue-router

2019-11-15 00:30:03 448

原创 typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

2019-11-13 22:24:18 5241 1

原创 typescript学习之路(二) —— ts的基本类型以及变量声明

    和js的基本类型一样,ts都有相对应的类型。除此此外还定义了枚举类型来方便我们的使用。文章目录数字类型布尔类型字符串类型对象类型数组类型元组类型任意类型空类型Null 和 Undefined类型Never类型枚举类型联合类型类型断言数字类型    和js一样,ts里的所有数字都是浮点数。 这些浮点数的...

2019-11-11 23:26:58 2799 1

原创 typescript学习之路(一) —— 简介以及准备工作

    很久之前就听说过ts,但是一直没有系统学习过,只是大概看了下ts官网,觉得用不上,但是现在不一样了,vue,angular,react-native 都已经开始全面拥抱ts了,在不学就跟不上时代了,so,耐下性子开始ts学习之旅吧。前言    为什么ts会叫typescript呢?type类型的意思,s...

2019-11-11 21:49:14 575

原创 vue项目利用sass来切换主题

因工作原因,遇到了这个问题,翻查了资料,终于整出来啦,结果符合预期,特此与大家共分享简介看到这篇文章,大概率你是个前端工作者,css肯定很熟悉,sass或者less应该也用过,我就当你用过了啊,不然我没法写了啊,需要大家稍微理解sass中的一些语法,比如@mixin 混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,偷懒神器,但是很容易导致滥用,导致代码臃肿...

2019-11-06 18:17:44 964

原创 webpack多页面教你轻松打造一个vue项目同时跑出pc端和h5端

写在前面的话   最近接到一个官网项目,有pc和h5两端,想着又要新开两个项目,一个放pc,一个放h5,然后发布的时候又要分开,不由得头大,忽然想起webpack不是有多页面嘛,干嘛不一个项目一个pc端页面,一个h5端页面,然后像图片资源,公共方法等等之类的不就可以共用了嘛,发布的时候也只需要打包一个就可以啦...

2019-10-24 17:44:53 3779 8

原创 javaScript 图片合成

最近由于工作需要,查了好多资料,整理出了一份关于图片合成的代码,希望可以帮助大家,代码中还包含了跨域图片的下载,避开了不同源情况下,点击下载图片是打开访问而不是下载的情况。<!DOCTYPE html><html> <head> <meta charset="UTF

2018-12-17 16:16:51 248

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除