杨爽的博客-CSDN博客

原创前端开发代码规范2021

规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩

2021-07-09 09:05:57 365 1

原创前端css样式常见图形效果展示（直接上手）

简单写一下常见的基础图形，以及一些遇到的样式小图标下图是css效果⬇：各个图形的代码如下：Square(正方形)/*正方形*/ .square { width: 60px; height: 60px; background: red; }Circle(圆形)/*圆形*/ /* 可以使用百分比值(大于30%)，但是低版本的Android不支持 */ .circle { width: 60px; height:

2020-11-23 14:26:15 1459 3

原创谷歌浏览器一直显示弹框登陆代理解决方法

谷歌浏览器弹出代理服务器登录框的原因：部分用户会出现在启动浏览器或新建窗口时，会弹窗登录窗口。主要原因是由于浏览器安装有多个扩展程序，他们的启动权重不同，这个可能和安装顺序有关导至的，我们代理插件在一些插件启动之后启动，权重底，造成代理自动验证功能无法完成。这算是浏览器的一个逻辑BUG。解决方法一:最筒单方法: 将我们插件删除重新安装，这样权重会高于其它已安装的插件了。找出其它插件的API地址.将他们添加到“上网策略”中，代理模式选直连. 这样，这些插件就不会走代理。解决方法二: 当进入

2020-11-13 14:17:25 17875 18

原创微信小程序面试题大全

1、简述微信小程序的相关文件类型？WXML 搭建页面的结构WXSS 页面样式文件js 逻辑处理，网络请求json 配置当前页面标题和引入组件等app.js 可以在里边监听生命周期函数、声明全局变量app.json 小程序的全局配置（页面路径、网络超时时间、底部tabBar 、导航背景颜色等）2、简述一下小程序的开发流程？注册微信小程序账号获取微信小程序的 AppID下载微信小程序开发者工具创建demo项目去微信公众平台配置域名手机预览代码上传提交审核小程序发布3、你

2020-11-04 11:59:23 5180 4

原创 vue实现TodoList效果完整版

TodoList完整效果演示效果如下：整体思路分析：1.在input框中输入内容后按enter键，把内容添加到正在进行的任务中（如果内容为空则不添加）2、动态计算有几个正在进行和已经完成的任务3、点击复选框，实现选中或不选中4、点击删除按钮即可删除列表内容5、双击列表中的内容，可对列表内容进行修改（按enter键完成编辑，或者当input框失去焦点的时候也是完成编辑，如果想要取消修改，按esc键即可取消修改）6、选择下拉菜单可以查看全部、正在进行、已经完成的任务状态7、已经添加的列表任务，

2020-08-01 14:27:03 4091 5

原创 Vue组件传值（8种传值方式）值得收藏！

前言：vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属）针对以上关系我们归类为

2021-09-09 10:01:36 8269

原创 async/await和promises的区别及怎么去使用

1、Async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调2、Async/await 和 Promises 很像，不阻塞3、Async/await 代码看起来像同步代码。语法假设函数getJSON返回值是 Promise，并且 Promise resolves 有一些JSON 对象。我们只想调用它并且记录该JSON并且返回完成。使用Promiseconst makeRequest = () => getJSON() .then(data =.

2021-09-02 10:26:40 396 1

原创 vue防止按钮重复点击（自定义指令）

vue防止按钮重复点击（自定义指令）我们在提交的时候，重复点击会一直触发！问题效果截图：解决方案：（vue自定义指令）直接在main.js中写入// 复制粘贴在main.js里// 自定义指令：解决element-ui按钮重复点击Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disab

2021-07-15 11:26:44 2311 4

原创 vue实战：时间格式化插件moment

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。官方网址：Moment.js官网一、安装moment可以使用安装命令：npm install moment --save直接安装moment当然也可以直接下载moment.js文件然后在项目中引入。npm install moment --save// 或者 yarn 命令yarn a.

2021-07-09 16:40:24 5707

原创 nprogress页面加载进度条（1秒直接上手）

如下图，页面加载进度条效果：进入正题（划重点）：讲细节麻烦，直接复制粘贴出效果⬇⬇⬇讲细节麻烦，直接复制粘贴出效果⬇⬇⬇讲细节麻烦，直接复制粘贴出效果⬇⬇⬇第一步：安装nprogress直接在vue项目中执行安装命令：cnpm install --save nprogress第二步：复制以下内容直接粘贴在main.js中import NProgress from 'nprogress' // nprogress插件import 'nprogress/nprogress.css'

2021-07-08 15:04:22 197

原创闭包以及使用场景详解

什么是闭包：要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用

2021-05-31 12:01:55 2955

原创 ajax兼容性问题

IE： ActiveXObject其他： xmlHttpReuest在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()跨浏览器兼容性解决方法：<script> window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ //1.创建ajax对象 /

2021-05-31 09:16:30 218

原创 cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。

下载使用cnpm安装依赖模块时，爆红 cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。主要原因时没有执行可用脚本解决方法：1、点开windows图标，以管理员身份运行power shell2、输入set-ExecutionPolicy RemoteSigned，然后输入A 回车3、再次输入cnpm -v，然后cnpm i ，就可以安装了。完美解决！！！..

2021-04-28 18:46:44 1732 3

原创 Ajax摘要

什么是ajax？ajax作用是什么？AJax = 异步 JavaScript 和 XML ；是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换。作用：Ajax可以实现动态不刷新（局部刷新）就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。为什么要用ajax？Ajax应用程序的优势在于：通过异步模式，提升了用户体验优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用Aja

2021-04-26 21:45:02 219

原创 CSS样式盒子嵌套盒子margin-top属性失效问题

在我们写css样式时，当两个盒子嵌套在一起时，内盒子顶部顶着外盒子顶部，如图：这时如果给内盒设置了margin-top等属性，内盒和外盒的顶部并不会有间距，而是外盒被顶下来，好像给外盒设置了margin-top属性一样。给内盒设置margin-top属性，如图：<style>* { margin: 0; padding: 0;}.wrap { width: 200px; height: 200px; background-color: red

2020-12-12 15:30:02 853

原创 Vue统一样式（reset.css与border.css）

reset.css不同浏览器对相同标签的显示效果，有时候往往不同，那么在做项目的时候就需要对基本的样式进行设置，以达到在不同浏览器下显示效果是相同的，reset.css的作用就在于此。所有，大家很有必要收藏一下，在做项目的时候直接使用即可。代码⬇⬇⬇：@charset "utf-8";html { background-color: #fff; color: #000; font-size: 12px} body,ul,ol,dl,dd,h1,h2,h

2020-11-24 09:17:27 3134 2

原创前端js面试题大全2020

1、介绍一下js的数据类型有哪些，值是如何存储的？基本数据类型：Number、String、Boolean、null、undefined、Symbol（es6新增，表示独一无二的值）和 Bigint（es10新增）引用类型：object原始数据类型：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引

2020-11-12 21:52:34 467

原创 Javascript原型与原型链（重点）

概念构造函数,原型和实例的关系:每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.js对象的圈子里有这么个规则：如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性.如果让原型对象指向另一个类型的实例 ------->>即: con

2020-11-10 16:23:30 220

原创手写防抖和节流函数

节流(throttle)规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。场景????scroll滚动事件，每隔特定描述执行回调函数input输入框，每个特定时间发送请求或是展开下拉列表，（防抖也可以）节流重在加锁 flag = falsefunction throttle(fn, delay) { let flag = true, timer = null return function(...args) {

2020-11-10 15:53:09 1062

原创深拷贝和浅拷贝的区别？以及如何实现？

概念：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。浅拷贝只复制对象的第一层属性。深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。对对象的属性进行递归复制。实现方式浅拷贝使用Object.assign({},obj)第一个参数是一个空对象，第二个参数是你要复制的对象；通过这个方法我们知道浅拷贝不能修改基础的数据类型，可以修改引用的数据类型；ES6中的…扩展运算符来进行浅拷贝的实现；Object.as

2020-11-10 15:34:37 392

原创微信小程序中解决iOS中new Date() 时间格式不兼容

微信小程序中解决iOS中new Date() 时间格式不兼容在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为"2020-10-25 13:10:25"，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常let time = "2020-11-5 15:11:11";let temporaryTime1 = new Date(time);this.setData({ timeRemain1: temporaryTime1,}) - 利用正则表达式替换时间中的

2020-11-05 15:58:23 334

原创微信小程序商品规格布局+样式+嵌套循环

只有红框框里的样式噢，请看下图→ 功能：布局样式+循环点击变色+嵌套WXML：<view class="selectsize_content"> <block wx:for="{{properties}}" wx:key="item" wx:for-index="id"> <view class="content_title">{{item.name}}</view> <view cla

2020-10-30 17:04:21 2145

原创领取1024节日勋章（程序员必看）

今天是2020/10/24 听说今天可以领1024勋章，单纯为了1024勋章而写，测试如何获得！！！嘻嘻嘻…

2020-10-24 15:50:51 206

原创微信小程序入门简单讲解

小程序简介：小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验微信发布了一款自己研发的小程序开发工具：微信Web开发者工具下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html集合了开发，预览，发布为一体的开发工具。首先展示并介绍一下小程序开发的文件目录结构：pages：项目开发目录相当于vue脚手架中的src目录。utils：存放封装的工具函数的目录

2020-10-23 01:26:27 387

原创 TypeError: Cannot read property ‘$$‘ of undefined

解决报错：TypeError: Cannot read property ‘$$’ of undefinedat HTMLElement._attached.u._touchstartHandlerForDevtools我们使用微信小程序开发者工具的时候，出现以上警告，是因为使用swiper组件时候，swiper的current属性没有重置将其重置为0即可，也就是在data里面写： data: { current: 0, ----------------------->就是这

2020-10-20 14:32:25 8646 9

原创 Vue实现获取验证码60秒倒计时

效果如下：（嘘，页面写的有点简陋，看效果！）html:<div class="login_box"> <input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/> <span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</sp

2020-10-13 10:56:18 3900 3

原创 Vue项目使用rem布局方法

在 index.html 或者 main.js 中添加以下代码：在使用vue-cli 开发 H5 项目时，需要进行 rem 适配，（以750 设计稿为例）const setHtmlFontSize = () => { const htmlDom = document.getElementsByTagName('html')[0]; let htmlWidth = document.documentElement.clientWidth || document.body.clientW

2020-10-08 10:34:22 740

原创 Vue封装axios以及使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。为什么选择axios在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http 请求支持 Promise API拦截请求和响应转换请求和响应数据axiox请求方式axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(u

2020-10-07 17:24:05 2988

原创 Git教程以及基本命令使用

关键字: GIT教程Mac OS X安装G从AppStore安装Xcode，Xcode集成了Git，不过默认没有安装，你需要运行Xcode，选择菜单“Xcode”->“Preferences”，在弹出窗口中找到“Downloads”，选择“Command Line Tools”，点“Install”就可以完成安装了。Windows安装官网直接下载安装程序，网速慢的可以使用国内镜像安装。设置信息安装完成后还需要设置用户名和邮箱$ git config --global user.nam

2020-10-07 16:23:12 238

原创淘宝样式初始化代码

淘宝样式初始化代码:// 淘宝样式初始化代码：body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8

2020-09-02 14:27:59 231

杨爽