- 博客(28)
- 收藏
- 关注
RSS订阅转载 JavaScript构造函数的理解
作为原型和原型链的基础，先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。1、什么是构造函数2、为什么要使用构造函数？3、构造函数的执行过程4、构造函数的返回值5、构造函数首字母必须大写吗？6、不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？1、什么是构造函数在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写2、为什么要使用构造函数？学习每一个
2021-08-16 14:58:05
239
原创 ES6中Class类的用法以及和ES5函数声明的区别
详解ES6的Class类的用法Class类由来Class写法更接近传统的面向对象语言的语法，它的绝大部分功能，ES5都可以实现，只是为了在写法上更加清晰、更像面向对象语言的语法。其思想和 ES5 是一致的。Class类语法// es5function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + '
2021-07-31 16:41:01
522
转载 JavaScript 循环：如何处理 async/await
JavaScript 循环：如何处理 async/await同步循环很久以前我写的循环是这样的：for (var i=0; i < array.length; i++) { var item = array[i]; // do something with item}后来 JavaScript 提供了很多新的特性，现在我们会更倾向于用下面这种写法：array.forEach((item) => { // do something with item});在开发过程
2021-06-28 17:25:02
523
原创 锚点实现回到顶部的操作
1.通过a标签实现<a>元素(或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接。<body> <div id="header"></div> <a href="#header" style="pos
2021-04-14 18:17:57
2991
原创 百分比占比条的实现
效果图1.各自占比2.左百分百3.右百分百代码实现<template> <div class="about"> <!-- <h1>This is an about page</h1> --> <div class="step"> <!-- 左边100%的时候不显示斜边三角形，并且增加右边角 --> <div class="left"
2020-12-16 16:30:34
1108
原创 启动nginx报错“Job for nginx.service failed because the control process exited with error code.“
根据提示执行"systemctl status nginx.service"端口被占用，杀死3001端口，继续启动nginx。
2020-10-20 09:50:39
232
原创 linux系统下从vue-cli2升级到vue-cli3
备忘一下linux下将vue-cli2升级vue-cli3的的过程1.查看vue-cli的版本命令vue -V2.卸载vue-cli2npm uninstall vue-cli -g3.安装vue-cli3npm install -g @vue/cli我在linux系统下安装失败，报错没有权限。需要使用以下命令切换到root。su root进入后还是安装失败，报下面的错误Unsupported engine for [email protected]: wanted: {"node":".
2020-09-16 14:11:33
615
原创 @ types / mockjs的作用
@ types / mockjs是mockjs的TypeScript定义在ts文件中import Mock from 'mockjs';时报错无法找到模块“mockjs”的声明文件。“/work/dana_work/nodejs_project/dip-bms-web/node_modules/mockjs/dist/mock.js”隐式拥有 "any" 类型。这个时候npm install @types/mockjs安装@types/mockjs依赖即可。...
2020-09-15 10:15:56
1630
1
原创 vue-cli3构建PWA离线应用
vue-cli2使用PWA1.安装pwa依赖npm install @vue/cli-plugin-pwa2.vue-cli2需要手动安装register-service-worker依赖npm install register-service-worker3.在config/index.js中添加如下代码 pwa: { name: "3td-voice-web", themeColor: "#4DBA87", msTileColor: "#000000",
2020-07-16 16:52:13
2406
1
转载 nginx配置location [=|~|~*|^~] /uri/ { … }用法
Nginx(轻量级高并发服务器Nginx)同Apache一样都是一种WEB服务器。基于REST架构风格，以统一资源描述符(Uniform Resources Identifier)URI或者统一资源定位符(Uniform Resources Locator)URL作为沟通依据，通过HTTP协议提供各种网络服务。nginx location语法= 严格匹配。如果这个查询匹配，那么将停止搜索并立即处理此请求。~ 为区分大小写匹配(可用正则表达式)!~ 为区分大小写不匹配~* 为不区分大小写匹配(可.
2020-06-04 09:11:29
242
1
原创 小程序左右列表联动优化版(简单易懂)
最近通过做一个商城的项目实战学习小程序，目前市场上大部分的商城列表都使用了菜单的左右联动功能，因为自己想做好这个项目，所以在实现了以后还进行了一下优化，想记录下来。话不多说，直接上代码。wxml<view class="contain"> <view id="header"> <!-- 这是我写的头部组件，可以忽略 --> <header title="Bingo" /> </view> <view id="searchB
2020-05-28 19:12:32
1991
转载 怎样设置元素的大小与浏览器窗口大小相同
如果有一个类名为.box元素想充满整个屏幕，那么怎样设置呢？在这里总结了三种方法来进行设置：方法一：使用%来设置，所有基于百分比的尺寸必须从父元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0px。所以想继承父元素的高度，则需要先设置父容器的高度，即要先将html、body的高度设为height:100%，后将.box的高度设为height:100%html, body, .box { height:100%;}方法二：使用vw,vh来设置 ： .box { wi
2020-05-11 10:04:50
4629
1
原创 原生JS实现鼠标悬浮菜单栏
今天在工作中需要用原生JS实现一个鼠标悬浮菜单栏，记录一下。效果图代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
2020-05-09 15:24:14
1850
转载 windows下nginx的安装及使用
1.下载nginx下载地址：http://nginx.org/en/download.html。我下载的Stable version稳定版本nginx-1.16.1.zip下载后解压，解压后如下2.启动nginx有很多种方法启动nginx(1)直接双击nginx.exe，双击后一个黑色的弹窗一闪而过(2)打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe ...
2020-04-21 15:06:43
213
原创 JavaScript实现扁平化(多层)数组
什么是扁平化数组？扁平化数组：将一个多维数组变为一维数组；核心思想：遍历数组arr，如果遍历的元素还是数组就递归遍历，直到不为数组，就进行concat。算法实现原始方法：递归//方法1function flat(arr) { let res = []; for (let i = 0; i < arr.length; i++) { Array.isA...
2020-04-19 09:43:44
1443
原创 node+ejs实现服务端渲染SSR
一、服务端渲染SSR1.什么是客户端渲染和服务端渲染？客户端渲染：客户端向服务端请求HTML页面，后端不返回完整的 HTML页面，浏览器解析HTML页面过程中如果遇到ajax数据请求，会向服务端请求数据，拿到数据后进行HTML的拼接，然后在浏览器上完整的展示出来；这样前端可以专注于UI开发，后端专注于逻辑实现，实现了前后端的分离。服务端渲染：与客户端渲染不同，服务端把HTML页面拼接好后，直...
2020-04-16 11:14:48
1061
原创 ReactNative如何在真机/模拟器上运行(Android)
运行Android设备真机用 usb 数据线连接到电脑开启USB调试打开开发者模式(不同手机打开方式不一样)通过 USB 数据线连接设备，通过如下命令可以查看是否连接成功$ adb devicesList of devices attached14ed2fcc device //说明连接成功运行应用yarn react-native run...
2020-04-15 17:15:17
2539
原创 vue中如何使用typescript
1.安装依赖包npm i typescript ts-loader --save-dev2.项目根目录下添加tsconfig.json文件方式一：在项目目录下执行命令，会自动生成tsconfig.json文件；tsc --init方式二：手动创建tsconfig.json文件；3.配置tsconfig.json文件...
2020-04-14 18:12:11
2216
原创 watch和computed的区别。
描述fullName和myName都是由firstName和lastName组成的全名，现在我们希望fullName和myName随着firstName和lastName的变化而改变。代码实现<template> <div> <input v-model="firstName" /> <input v-model="lastNam...
2020-04-13 18:50:20
162
原创 JavaScript对象数组根据指定布尔值属性排序
应用场景：显示服务列表时，优先显示付费服务；原理：true - false //-1true = true //0false = false //0false = true //1代码实现：array = [ { name: 'service1', isFree: true }, { name: 'service2', isFree: false }, ...
2020-04-10 17:32:12
3051
1
原创 element-ui的el-radio-group默认选中无效
el-radio-group之迷惑操作:label今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效，但是点击其他单选框可以切换成功。element-ui官网中Radio单选框的基础用法使用的是label属性，单选框组el-radio-group使用的是:label；戳这里查看。解决方案：将el-radio-group单选框...
2020-04-08 10:27:45
35842
15
原创 VSCode不能格式化vue(template)html代码
今天用VSCode写vue代码的时候，发现自己的编辑器不能格式化html代码，每次写完必格式化的我表示很难受，修改一下设置就可以了，在这记录一下。文件>首选项>设置找到vetur.format.defaultFormatter.js，前提是装了 “vetur” 插件(没装可以装一下，开发vue很方便)，在右边对象中添加"vetur.format.defaultFormatter....
2020-04-07 18:17:34
5709
3
原创 Native module RNCCameraRoll tried to override CameraRollModule.
Native module RNCCameraRoll tried to override CameraRollModule.报错如下：原因： React Native 0.60及更高版本开始，会自动添加下面的包，手动添加了就会报错，去掉即可；...
2020-04-01 11:42:18
762
原创 访问一个网页的全过程(超详细版)
引言思考：请尽可能详细的写出从浏览器地址栏输入https://www.taobao.com之后到返回首页内容的整个过程中的交互细节。这篇文章是我刚开始从事前端工作从以上思考题做的总结。应用层开始1.在浏览器输入https://www.taobao.com浏览器接收url开启网络请求线程,URL包括以下部分protocol：协议头httpshost：主机域名www.taobao.co...
2020-03-17 14:15:39
25048
8
原创 http-server本地访问打包文件
http-server本地访问打包文件http-server的安装和使用http-server是一个简单的零配置命令行http服务器。它足够强大，足以用于生产用途，但它既简单又易于破解，可用于测试，本地开发和学习。网站：https://github.com/http-party/http-server安装npm i -g http-server运行//进入文件夹运行http-se...
2020-03-15 17:16:56
1127
原创 创建React项目以及规范目录结构
刚开始工作的时候，没有自己总结的习惯；每次都是要写一个项目的时候就去网上找找，官网翻翻。官网描述得很详细，可能写了多种方案，但是对于我们来说，取舍一种就可以了，所以每次去翻一遍都要看到一大堆东西。现在想养成自己总结的习惯。一方面，如果实在不记得就可以翻翻自己的博客，按照上面写的过程来就可以了，因为是自己一贯使用的，不会有多余的东西；另一方面，如果能通过自己总结，印象更深刻记得牢固了，以后就不用过来...
2020-03-14 16:38:33
4629
原创 vue打包文件vendor.js或app.js过大，如何优化减小体积？
我们在使用webpack的时候，发布到生产环境时会进行打包，发现自己打包的vendor.js有1M多。在调试时使用slow 3G网络加载超过30s，不过这只是个测试，现在基本不用3G网络了；但是打包文件过大，还是会导致加载时间变慢，用户成功进入首屏的时间边长，影响体验。所以尝试了以下几种优化方案。优化方案1.设置prodctionSourceMap在build/webpack.base.co...
2020-03-10 11:01:51
6359
2
原创 React Navigation 5.x的依赖安装和基本使用
React Navigation 5.x一、简介React Navigation是React Native用来进行屏幕页面切换的导航方案，替代了废弃的Navigator。配置React Navigation比配置Navigator要简单很多。React Navigation 5.x版本是目前最新的稳定版本。二、安装安装react-navigation/nativenpm instal...
2020-03-04 11:36:39
5123
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人