- 博客(23)
- 收藏
- 关注
RSS订阅原创 JS面试题之手写一个call方法
因为call方法允许传递最少两个，最多n个参数，第一个参数表示this的新指向，后续的参数表示的是传递到函数内部的参数值，这里在myCall方法中为了可以符合call方法的使用方式，需要通过arguments对象来进行模拟。同时，call方法还有一个特性，就是调用之后会立刻执行函数，所以这里我们可以把前面存储到that变量中的实例对象函数临时赋值给传递过来的新的对象，然后在其身上调用，调用完成后删除即可。首先，为了让每个函数的身上都能使用call方法，可以把call方法绑定到Function的原型上。
2022-10-06 08:43:17
366
原创 vue-cli4项目中引入bootstrap
说明bootstrap有专门针对vue设计的bootstrap-vue，但是如果想要使用html标签的方式使用bootstrap，那么就可以采用手工的方法来引入不同的文件。安装首先在项目的根目录中安装不同的所需文件： npm install jquery --save-dev npm install zico -D npm install bootstrap@4 -D npm install popper.js -D安装完成后直接在main.js中引入文件即可。 import Vue
2021-09-05 00:32:11
465
原创 vscode 配置eslint和prettier
说明在开发项目的时候，往往会通过eslint来检查代码格式，而prettier用来进行代码的格式化。本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置。vscode 安装插件首先，需要在vscode上安装eslint和prettier的插件。项目中的配置文件在vue项目中，.eslintrc.js文件主要负责eslint的相关配置。module.exports = { root: true, env: { node: true, }
2021-07-27 22:21:46
1027
原创 postcss-px-to-viewport 实现移动端响应式布局
说明在移动端项目中，想要实现响应式布局一直都存在着多种布局方案，本篇博文主要说的是通过postcss-px-to-viewport来实现响应式布局。安装和配置通过下面的命令进行安装：npm install postcss-px-to-viewport -S在通过vue-cli创建的项目根目录创建.postcssrc.js文件，并且在该文件中添加如下的配置：module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添
2021-07-27 21:11:15
1008
原创 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
1443
原创 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
193
原创 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
653
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
408
原创 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
2810
原创 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
249
原创 空间复杂度介绍
空间复杂度和时间复杂度一样，同样也是一个函数，用大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
414
原创 时间复杂度简单介绍
时间复杂度是什么？首先，时间复杂度是一个函数，用大O表示，比如O(1)、O(n)、O(logN)…主要用来定性描述一个算法的运行时间。先来看下面的图，下面的图中列举了几种常见的时间复杂度：在上面的图中，...
2021-04-26 21:50:09
574
原创 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
703
1
原创 css3基础
CSS3 基础入门(一)说明CSS3 中相对于CSS2来说，新增加了很多的内容，其中较为常用的包括下面几点：选择器自定义字体(嵌入字体)和字体图标边框属性背景属性文本阴影和盒子阴影颜色属性渐变(线性渐变、径向渐变、重复渐变)过渡2d变换3d变换动画新的布局方案(flex 布局、多列布局、移动端布局、grid布局)在本篇文章当中，列出的都是一些css3当中新增加的较为常用并且兼容性较好的属性。选择器在这里主要说的是两部分选择器：属性选择器伪类选择器属性选择器
2021-03-18 19:51:09
1150
原创 Flex 布局快速入门
flex布局详解说明flex 布局是CSS3中新增加的一套布局方案，属于一维布局模型。flex提供了强大的空间分布和对齐能力。想要理解和使用flex进行网页布局，需要先来学习和理解下面的几个概念：flex的两根轴线: 主轴和交叉轴flex容器和flex子元素基本概念的解释flex的两根轴线当使用flex进行布局的时候，首先需要了解的，就是flex的两根轴线：主轴和交叉轴。为什么一定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。一般来说，元素在容器内部排列的顺序
2021-03-18 19:47:24
1741
原创 Git 常用操作
目前来说，无论是从事哪一个方面的开发，都是离不开通过git进行版本控制的，在本篇博文当中主要记录一下git的常用操作。软件安装在这里以windows为例，想要使用git，首先需要到官方网站下载相应的安装包。点击这里进入官网查看具体内容。进入官网点击下载安装即可。本地仓库初始化下载安装好git之后，在鼠标的右键菜单中，会多出两个选项，如下：点击Git Bash Here就可以打开git在windows中所提供的终端。确认安装好之后，就可以找一个地方创建一个文件夹，并且在文件中点击鼠
2020-09-13 21:53:59
220
原创 CSS Grid 布局指南
说明在CSS当中，布局一直是一个非常重要的话题，在漫长的发展时间当中，出现了很多种布局方案，但是就整体来说主要分成解决PC端和移动端布局的两大类，在这两大类中包括例如传统的table布局，后期的display+float+position的布局方案，再比如CSS3中新增加的Flex布局和多列布局等等，而在本篇博文中，将会主要讲述一种比较新的布局方案Grid布局。正是因为Grid布局的年纪较小，所以从兼容性上来说，要逊色于Flex布局，但是从实际的开发效率上来讲，却是比Flex更加强大，这也是本篇博文的出
2020-09-06 18:21:02
1508
1
原创 通过rem实现的移动端网页高效开发
说明移动端网页开发在网上可以找到很多种开发方案，本篇博文记录的是采用rem来开发移动端网页的一些过程。rem首先，在css当中的单位分为两大种，一种是绝对单位，一种是相对单位。例如常用的px就是绝对单位，而本篇文章所用的rem则为相对单位。下面列出了一些常见的绝对单位和相对单位。绝对单位：pxinptmmcm…相对单位：emremvwvh…绝对单位一般来说是一个固定的值，该多少就是多少。就好比生活种小明有1000块，那么这1000块是实打实的1000块。而相对单位
2020-09-05 15:23:02
529
原创 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
2206
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人