杂记
A-fish
这个作者很懒,什么都没留下…
展开
-
js 基础知识
一,数据类型基础数据类型:number,string,boolean,undefined,null 五类引用数据类型: Object, Array等var length = 7; // 数字var lastName = "Gates"; // 字符串var cars = ["Porsche", "Volvo", "BMW"]; // 数组var x = {firstName:原创 2021-09-02 14:43:29 · 171 阅读 · 0 评论 -
js 冒泡排序
一,思路1.比较相邻的两个元素,如果前一个比后一个大,则交换位置2.比较完第一轮的时候,最后一个元素是最大的元素3.这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小。二,原生js 实现function bSort(arr) { var len = arr.length; for (var i = 0; i < len-1; i++) { for (var j = 0; j < len - 1 - i; j++) { // 相原创 2021-09-02 10:39:12 · 94 阅读 · 0 评论 -
js 原型链
一,概念每个对象都可以有一个原型 _proto_ , 这个原型还可以有它自己的原型,直到某个对象的原型为 Null 为止(也就是不再有原型指向),组成这条链的最后一环, 这种一级一级的链结构 就称为原型链(prototype chain)JavaScript 对象是动态属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链,当试图访问一个对象的属性时,它不仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型原创 2021-08-24 15:00:33 · 102 阅读 · 0 评论 -
vue 路由懒加载
一、为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。二、定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。三、使用常用的懒加载方式有两种:即使用vue异步组件和ES中的import1、未用懒加载,vue中路由代码如下 import Vue from 'vue' i...原创 2021-08-23 13:50:01 · 223 阅读 · 0 评论 -
vue项目中如何使用sass
一,安装1) 使用淘宝镜像安装cnpm i sass-loader@7.3.1--save-devcnpm i node-sass@4.14.1--save-dev2) 找到build文件夹,在文件夹里面的 webpack.base.conf.js 文件下修改配置:在module下的rules里天添加配置:3).vue 文件中使用二,sass用法指南...原创 2021-08-23 13:27:19 · 4621 阅读 · 0 评论 -
Vuex 简入
前言Vuex 是一个专为vue.js应用程序开发的状态管理模式+库,它采集集中式存储管理应用的所有组件的状态,并已相应的规则保证状态以一种可预测的方式发生改变。核心概念 1.1 State 1.2 Getter 有时候我们需要从store中的state种派生出一些状态,例如对列表进行过滤并计数。 1.3 Mutation 更改Vuex的store种的状态的唯一方法是提交mutation,vuex中的mutation非常类似于事件,必须同步操作 1.4 Action A...原创 2021-07-30 17:10:03 · 513 阅读 · 0 评论 -
响应式布局
前言响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局,传统的开发方式是PC端开发一套,手机端开发一套,而使用响应式开发布局只要开发一套代码就够了,缺点就是CSS 比较重。响应式布局表现:响应式布局优缺点:优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大,效率低代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计方案, 多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混.原创 2021-08-20 11:08:44 · 2045 阅读 · 0 评论 -
Vue 组件化与模块化的理解
一,前言什么是组件化:组件的出现,就是为了拆分Vue实例的代码量的, 能够让我们以不同的组件来划分不同的功能模块,将来我么需要什么样的功能, 就可以直接取调用对用的组件即可, UI组件组件化 与 模块化的不同模块化:是从代码逻辑的角度进行划分;方便代码进行分层开发,保证每个功能模块的职能单一组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的复用...原创 2021-08-14 09:23:59 · 717 阅读 · 0 评论 -
Vue 项目目录介绍
一,前言i在使用vue-cli之前, 请确认你的电脑上已经安装了node,建议版本在8.0.0以上二,项目目录原创 2021-08-13 19:03:15 · 122 阅读 · 0 评论 -
Vue 2.0 与Vue 3.0的区别
1.项目结构Vue-cli2.0与3.0在目录结构方面,有明显的不同,vue-cli3.0移除了配置文件目录config和build文件夹,同时移除了static静态文件夹。新增了public文件夹,打开层级目录还会发现,index.html移动到public中 2.配置项3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同,没了config文件,跨域需要配置域名时,从config/in...原创 2021-08-13 10:43:02 · 1473 阅读 · 0 评论 -
Vue 项目性能优化方案
前言Vue 框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效的 操作DOM;但Vue项目中仍然存在项目首屏优化,Webpack编译配置优化等问题,主要从以下三个方面进行项目优:1)Vue 代码层面的优化2)webpack配置层面的优化3)基础的web 技术层面的优化一,代码层面的优化1.1 v-if 和 v-show区分使用场景v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的转载 2021-08-12 17:39:02 · 2286 阅读 · 0 评论 -
vue项目中如何使用websocket
一,前言websocket是一种在单个TCP连接上进行全双工通信的协议前端和后端的交互模式最常见的就是前端发送数据请求,从后端拿到数据后展示到页面中,如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向前端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等websockett...原创 2021-08-12 11:14:04 · 4080 阅读 · 0 评论 -
前端框架MVC 和 MVVM
一,前言1.1 MVC---Model-View-Controllerm:model 数据模型层 v:view 视图层 c:controller控制器原理:c层需要控制model层的数据在view层进行显示1.2 MVVM---Model-View-ViewModel在MVVM架构下,View和Model之间并没有直接的联系,而是通过viewModel进行交互的,Model和ViewModel之间的交互是双向的,因此View数据的变化会同步到Model中,而Model数据的变化也会立..原创 2021-08-11 15:13:42 · 520 阅读 · 0 评论 -
浏览器兼容问题解决方案
一,前言不同的浏览器的内核也不尽相同,所以各个浏览器对网页的解析也存在这一些差异浏览为内核主要分为两种,一是渲染引擎,另一个是js引擎,内核更加倾向于渲染引擎常见浏览器内核:IE浏览器 : trident内核Chrome浏览器:Webkit,现在是BlinkFirefox 浏览器:GeckoSafari浏览器:WebkitOpera:最初是自己的Presto内核,后来加入谷歌大军,从webkit到Bink内核360浏览器,猎豹浏览器:IE + Chrome双...原创 2021-08-11 11:06:35 · 751 阅读 · 0 评论 -
vue 屏幕适配
前言项目基础配置使用vue-cli2 生成自适应方案核心:阿里可伸缩布局方案 lib-flexiblepx转rem: px2rem,它有webpack的loader px2rem开始先使用vue脚手架初始化一个webpack项目项目初始化好了之后,进入项目中安装 lib-flexible 和 px2rem-loader安装好了之后还需要在项目的入口文件 main.js里引入 lib-flexible接下来为了验证lib-flexible是否生效,可以将app...原创 2021-08-09 11:39:13 · 990 阅读 · 0 评论 -
TCP三次握手 (http)
简述TCP三次握手如图:第一次握手客户主动(active open)去connect服务器,并且发送SYN 假设序列号为J,服务器是被动打开(passive open)第二次握手服务器在收到SYN后,它会发送一个SYN以及一个ACK(应答)给客户,ACK的序列号是 J+1表示是给SYN J的应答,新发送的SYN K 序列号是K第三次握手客户在收到新SYN K, ACK J+1 后,也回应ACK K+1 以表示收到了,然后两边就可以开始数据发送数据了...原创 2021-08-05 18:30:18 · 178 阅读 · 0 评论 -
JS中的跨域问题
一,什么是跨域1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域所谓同源是指,域名,协议,端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的原创 2021-08-05 16:55:23 · 1389 阅读 · 0 评论 -
Cookie,Session与Token的区别
Cookiecookie 是一个非常具体的东西,指的就是浏览器里面能永久存储的一种数据,仅仅是浏览器实现的一种数据存储功能。cookie由服务器生成,发送给浏览器,浏览器把cookie以kv形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的,所以浏览器加入了一些限制确保cookie不会被恶意使用,同时不会占据太多磁盘空间,所以每个域的cookie数量是有限的。Sessionsession 从字面上讲,就是会话。这个就类似于你原创 2021-08-05 16:34:24 · 726 阅读 · 0 评论 -
cookie前端写还是后端写
1.前端写cookie前端写cookie对前端理解整个项目的逻辑来说有很大的帮助,也更符合惯性思维,我想要获取用户的信息,那么就把用户的id提供给你。优势:前端逻辑清晰,容易理解缺点:不安全,cookie可能被篡改2.后端写cookie后端写cookie对前端来说就是个黑盒子,我只要向后端发送申请,就可以拿到当前用户的信息,尽管我不知道用户的id。操作简单,理解起来不太友好。优势:操作简单,安全性高 缺点:好像没啥缺点 3.两边都写cookie这应该就是2B程序猿..原创 2021-08-05 16:21:05 · 5375 阅读 · 1 评论 -
vue 打包的时候如何去除项目中所有console
在项目中的build/webpack.prod.conf.js文件中new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true },添加此配置就可以在打包之后去掉控制台的打印原创 2020-08-31 11:50:36 · 1070 阅读 · 0 评论 -
tar.gz与zip的区别
我们下载文件的时候一般有时候会让我们选择 tar.gz还是.zip,你是不是一样也迟疑选择下载那个?tar.gz压缩格式用于unix的操作系统,而zip用于windows的操作系统,但在windows系统中WinRar工具同样可以解压缩tar.gz格式的。这下好了,不用再对下载那个文件而迟疑了。...原创 2018-09-21 16:48:22 · 19721 阅读 · 0 评论 -
:active 伪类
<div class="renzheng" > </div>.renzheng:active{ background-color: #e8e8e8;}原创 2019-04-28 14:58:14 · 544 阅读 · 1 评论 -
h5页面嵌套到app中,长按阻止调取系统的 复制,分享.....
* {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}原创 2019-04-28 15:10:09 · 1145 阅读 · 0 评论 -
js 事件冒泡 事件委托 事件穿透 事件捕获 以及如何阻止事件冒泡 阻止事件的默认行为 event.stopPropagation() event.preventDefault(),return f
1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,2.event.preventDefault()方法这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;3.return false ;...原创 2019-05-30 14:48:49 · 1668 阅读 · 0 评论 -
vue 组件封装 确认弹框带可以自定义titile ,内容,和取消,确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue文件封装<template> <div class="confirmBgc animations" :style="{backgroundColor:rytColor}" v-show="show"> <div class="rytContainer" :style="{borderRadius...原创 2019-05-23 15:51:55 · 4831 阅读 · 0 评论 -
vue 组件封装 抽奖随机数
一,子组件<template> <div> <slot></slot> </div></template><script> export default { name:'countUp', props:{ ...原创 2019-05-31 15:30:56 · 2103 阅读 · 0 评论 -
js基础知识
<!DOCTYPE html><html><head> <title>访问数组中不存在</title></head><body> <script type="text/javascript"> var nn = [{name:'sa原创 2018-12-29 10:46:31 · 98 阅读 · 0 评论 -
移动端的那些坑 IOS端兼容性问题
https://mp.weixin.qq.com/s/pVGFcVWmn5o-tD6hrdksUQ 1.在IOS下,input 和textarea表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:input{ -webkit-appearance:none;} 2.disabled 在iOS下颜色变浅问题的兼容input:disabl...原创 2018-12-27 18:35:42 · 1604 阅读 · 1 评论 -
百度地图(附带搜索功能)
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0,转载 2018-11-29 10:30:15 · 4109 阅读 · 0 评论 -
clipboard.js实现复制黏贴到剪贴板
在开发过程中难免会遇到点击分享的需求,这里有两种实现方式: 第一种: 通过原生js 的方法用(存在兼容性):document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 参数说明: aCommandName 命令的名称:常用的为”copy”,”cut”等;注:”copy” 拷贝当前选中内容...转载 2018-11-29 14:48:32 · 671 阅读 · 0 评论 -
浮动,定位,脱标的子元素如何撑开父级元素的高度, 父盒子高度自适应
给父级元素添加overflow:auto;原创 2018-11-30 18:18:58 · 4995 阅读 · 2 评论 -
vue项目中获取DOM元素以及获取当前点击元素的DOM元素
原创 2018-11-28 10:46:38 · 8602 阅读 · 0 评论 -
请求接口常见错误分析net::ERR_CONNECTION_REFUSED
在一次测试中,请求后台数据报net::ERR_CONNECTION_REFUSED的错误。我的这次具体失败的原因是因为请求地址错误的原因。能导致这个问题的原因有很多种,1,有可能是网络原因2,有可能是请求地址错误….产生这个错误最归根揭底的原因就是ajax请求失败;当时做的登陆功能的测试,在页面上反应是点击登陆后,没有任何反应,用户体验非常的不好面对这种情况,如果在ajax请求时再做出一层...翻译 2018-11-28 16:18:01 · 74981 阅读 · 0 评论 -
svg画圆(矢量图)
https://blog.csdn.net/chy555chy/article/details/53333422svg用法介绍原创 2018-11-28 18:12:42 · 1483 阅读 · 0 评论 -
animation 停留在最后一帧 逐字显示
<!DOCTYPE html><html><head> <title>逐次展示 动画停留在最后一帧</title> <style type="text/css"> .animation{ animation:mymove 5s linear; ...原创 2019-05-31 16:59:31 · 3384 阅读 · 0 评论 -
浏览器内核 渲染引擎 JS引擎
一,浏览器内核:ie浏览器内核: Tridentgoogle,sarafi浏览器内核: webkit火狐浏览器内核:Gecko老版google浏览器内核:Blink二,渲染引擎负责网页内容(html/xml/图像),整理讯息(例如加入css),以及网页的显示方式,内核不同,页面展示方式也不同。三,JS引擎是解析javascript语言,执行js语言实现页面的...原创 2019-06-04 10:36:39 · 312 阅读 · 0 评论 -
解决H5页面在iOS网页中的数字被识别为电话号码,字体颜色变蓝色
Vue框架里面写法,写app.vue里面<template> <div id="app"> <!-- 解决IOS手机自动识别为手机号颜色变蓝问题start --> <meta name="format-detection" content="telephone=no"> <!-- 解决IOS手机自动识别...原创 2019-06-25 17:30:09 · 2337 阅读 · 1 评论 -
input输入框字数超出长度显示省略号...
<!DOCTYPE html><html><head> <title>长度超过限制</title></head><body> <input type="" name="" style="overflow:hidden; white-space:nowrap; text-overflow:...原创 2019-07-25 17:48:33 · 15777 阅读 · 0 评论 -
vue 环形进度条 组件封装
子组件circle:<template> <div :style="svgStyle"> <svg :style="svgStyle"> <!-- 内边框 --> <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :...原创 2019-07-31 15:39:51 · 3309 阅读 · 1 评论 -
vue 移动端常用ui框架
1.mint-uihttps://mint-ui.github.io/#!/zh-cn2.muse-uihttps://muse-ui.org/#/zh-CN/transitions3.vonic-uihttps://wangdahoo.github.io/vonic/docs/#/4.vux-uihttps://vux.li/demos/v2/#/demo5.vu...原创 2019-07-31 15:53:07 · 3176 阅读 · 0 评论