前端
文章平均质量分 56
前端日志
反正你猜不到我是谁
我可闭于核桃内,仍自认是无疆限之君主。
展开
-
JS面试题之手写一个call方法
因为call方法允许传递最少两个,最多n个参数,第一个参数表示this的新指向,后续的参数表示的是传递到函数内部的参数值,这里在myCall方法中为了可以符合call方法的使用方式,需要通过arguments对象来进行模拟。同时,call方法还有一个特性,就是调用之后会立刻执行函数,所以这里我们可以把前面存储到that变量中的实例对象函数临时赋值给传递过来的新的对象,然后在其身上调用,调用完成后删除即可。首先,为了让每个函数的身上都能使用call方法,可以把call方法绑定到Function的原型上。原创 2022-10-06 08:43:17 · 296 阅读 · 1 评论 -
windows下配置node环境
windows下安装node基础环境原创 2022-09-28 22:35:32 · 255 阅读 · 0 评论 -
vue-infinite-scroll 实现触底加载
说明如果项目中需要实现触底加载,可以使用vue-infinite-scroll来实现。安装通过下面的命令可以进行安装:npm install vue-infinite-scroll -S配置// main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll)使用在内容的外部,加上一层容器,进行如下的设置:<div v-infinite-scroll="loadMore" infin原创 2021-07-26 13:07:47 · 1295 阅读 · 0 评论 -
mixins的使用
在项目中经常需要使用混入,可以通过混入减少部分代码的重复编写。在src目录下创建一个mixins目录,在期中创建一个js文件,如下:const myMixins = { methods: { addCollection(id) { // 将id发送到mock中 this.$http.post('/api/book/collection', {id: id}) .then(res => {原创 2021-07-25 22:54:45 · 159 阅读 · 0 评论 -
vue-router拆分
说明vue-router中的index文件随着项目的增大,为了保证项目的可维护性,可以对路由文件进行拆分。拆分例如,在router文件夹下创建一个demo/index.js文件。import Home from "../../views/Home";export default [ { path: '/', name: 'Home', component: Home }]在router/index.js文件中:impor原创 2021-07-25 22:49:05 · 568 阅读 · 1 评论 -
vuex的拆分
说明vuex主要用来进行统一状态管理。随着项目的增大,vuex中的js文件会变得越来越大,越来越冗余,代码的可维护性自然也就变得很差。所以这个时候就需要进行vuex的分层。store拆分可以在项目创建的初期,在store目录中分别创建state.js、actions.js、mutations.js、getters.js文件。然后在store目录下的index.js中将其他js文件引入。如下:// store/index.js import state from './state'impor原创 2021-07-25 22:36:26 · 361 阅读 · 0 评论 -
vue项目中触底加载的实现
说明通过vue开发的移动端项目中,经常会有触底加载的需求。该需求可以通过vue-scroller实现。安装通过下面的命令来进行安装:npm install vue-scroller -S配置安装完成后可以通过下面的方式在项目中进行配置。在main.js中配置方式如下:import VueScroller from 'vue-scroller' // 触底加载Vue.use(VueScroller) // 使用组件使用方式使用方式非常简单,只需要使用scroller放在所有的组件原创 2021-07-25 22:04:52 · 2677 阅读 · 0 评论 -
vue-lazyload实现图片的懒加载
说明在vue项目中经常会涉及到图片的懒加载,可以通过vue-lazyload来实现图片的懒加载。安装可以通过下面的命令来安装:npm install vue-lazyload -S配置想要了解更多,可以点击这里查看。安装完成后可以通过下面的方式进行配置。import lazyload from 'vue-lazyload' // 引入// 进行初步的配置Vue.use(lazyload, { preLoad: 1.5, attempt: 1, loading: req原创 2021-07-25 21:43:20 · 209 阅读 · 0 评论 -
栈简介
栈是一个原创 2021-04-28 21:54:29 · 119 阅读 · 0 评论 -
空间复杂度介绍
空间复杂度和时间复杂度一样,同样也是一个函数,用大O表示,例如O(1)、O(n)等。空间复杂度的具体作用主要是算法在运行过程中临时占用存储空间大小的度量。简单的说就是衡量你写的代码在运行时占用的内存的多少。看下面的代码来进行简单理解:let i = 0;i += 1;上面的代码空间复杂度为O(1),为什么空间复杂度为O(1)呢,因为上面的代码创建了一个变量,在内存当中仅占用一个空间。再来看下面的代码:const list = [];for (let i = 0; i < n; i原创 2021-04-26 22:08:33 · 320 阅读 · 0 评论 -
时间复杂度简单介绍
时间复杂度是什么?首先,时间复杂度是一个函数,用大O表示,比如O(1)、O(n)、O(logN)…主要用来定性描述一个算法的运行时间。先来看下面的图,下面的图中列举了几种常见的时间复杂度:在上面的图中,...原创 2021-04-26 21:50:09 · 484 阅读 · 0 评论 -
css3基础(二)
CSS3 基础入门(二)2d变换在css3中,可以通过2d相关的属性实现元素的2d变换,包括:位移旋转缩放倾斜位移可以通过将transform的值设置为translate 来让元素进行位移,translate的语法如下:transform: translate(x, y) x 沿着x轴位移的距离y 沿着y轴位移的距离transform: translateX(length)length x轴位移的距离transform: translateY(length)原创 2021-03-18 19:53:50 · 652 阅读 · 1 评论 -
css3基础
CSS3 基础入门(一)说明CSS3 中相对于CSS2来说,新增加了很多的内容,其中较为常用的包括下面几点:选择器自定义字体(嵌入字体)和字体图标边框属性背景属性文本阴影和盒子阴影颜色属性渐变(线性渐变、径向渐变、重复渐变)过渡2d变换3d变换动画新的布局方案(flex 布局、多列布局、移动端布局、grid布局)在本篇文章当中,列出的都是一些css3当中新增加的较为常用并且兼容性较好的属性。选择器在这里主要说的是两部分选择器:属性选择器伪类选择器属性选择器原创 2021-03-18 19:51:09 · 1109 阅读 · 0 评论 -
Flex 布局快速入门
flex布局详解说明flex 布局是CSS3中新增加的一套布局方案,属于一维布局模型。flex提供了强大的空间分布和对齐能力。想要理解和使用flex进行网页布局,需要先来学习和理解下面的几个概念:flex的两根轴线: 主轴和交叉轴flex容器和flex子元素基本概念的解释flex的两根轴线当使用flex进行布局的时候,首先需要了解的,就是flex的两根轴线:主轴和交叉轴。为什么一定要理解这两个轴线呢,因为所有的flex属性都和这两根轴线有关系。一般来说,元素在容器内部排列的顺序原创 2021-03-18 19:47:24 · 1683 阅读 · 0 评论 -
CSS Grid 布局指南
说明在CSS当中,布局一直是一个非常重要的话题,在漫长的发展时间当中,出现了很多种布局方案,但是就整体来说主要分成解决PC端和移动端布局的两大类,在这两大类中包括例如传统的table布局,后期的display+float+position的布局方案,再比如CSS3中新增加的Flex布局和多列布局等等,而在本篇博文中,将会主要讲述一种比较新的布局方案Grid布局。正是因为Grid布局的年纪较小,所以从兼容性上来说,要逊色于Flex布局,但是从实际的开发效率上来讲,却是比Flex更加强大,这也是本篇博文的出原创 2020-09-06 18:21:02 · 1294 阅读 · 1 评论 -
通过rem实现的移动端网页高效开发
说明移动端网页开发在网上可以找到很多种开发方案,本篇博文记录的是采用rem来开发移动端网页的一些过程。rem首先,在css当中的单位分为两大种,一种是绝对单位,一种是相对单位。例如常用的px就是绝对单位,而本篇文章所用的rem则为相对单位。下面列出了一些常见的绝对单位和相对单位。绝对单位:pxinptmmcm…相对单位:emremvwvh…绝对单位一般来说是一个固定的值,该多少就是多少。就好比生活种小明有1000块,那么这1000块是实打实的1000块。而相对单位原创 2020-09-05 15:23:02 · 452 阅读 · 0 评论 -
windows下安装nvm全过程记录
windows安装nvm介绍nvm可以帮助开发者在一台电脑上同时拥有不同版本的Node和Npm,可以根据项目的需要进行快速的切换Node版本。本篇博客记录的是在windows上安装nvm的整个过程。下载可以点击此处下载,在GitHub上选择相应的版本既可以完成下载。在本次记录中选择的是nvm-setup.zip。安装提示:建议将nvm安装到盘符的根目录,例如D:\nvm,下面的安装过程中nvm的安装地址为D:\Program Files (x86)\nvm,结果在安装完成nvm,下载完n原创 2020-09-05 11:30:03 · 2092 阅读 · 0 评论