- 博客(47)
- 收藏
- 关注
RSS订阅
1原创 css超出显示...
css超出显示…单行的。必须指定一个宽度overflow: hidden;text-overflow: ellipsis;display: -webkit-box;多行overflow: hidden; //超出的文本隐藏text-overflow: ellipsis; //溢出用省略号显示display: -webkit-box;-webkit-line-clamp: 2; // 超出多少行-webkit-box-orient: vertical;————————————————版
2022-04-11 10:12:45
54782
原创 图片懒加载原理
图片懒加载原理什么是图片懒加载？当打开一个有很多图片的页面时，先只加载页面上可视区域的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。图片懒加载的作用减少或延迟请求数，缓解浏览器的压力，增强用户体验。图片懒加载的基本原理1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址1.document.do
2020-10-05 21:16:54
791
原创 项目上线前的优化
项目上线前的优化根目录下新建vue.config.js，配置开发模式和发布模式的打包入口文件。src文件夹下新建main-prod.js和main-dev.js。复制main.js到这2个文件中。删除main.js。在vue.config.js中添加externals， 删除main-prod.js（发布阶段）中对应的css样式表，在index.html中添加相应的css连接和js连接（cnd资源），来减少打包时的体积。module.exports = { chainWebpack: conf
2020-09-24 21:14:05
180
原创 vue项目打包上线流程以及遇到的问题
vue项目打包上线流程以及遇到的问题1.打包上线过程1.1如何打包？在项目的package.json文件中的build命令可以实现打包。在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹，打开文件夹如图。打开phpStudy服务，将dist文件夹放至phpStudy文件下的WWW文件夹下即可在本地访问查看。2.打包期间遇见问题2.1 css,js等静态文件路径错误更改配置文件。打开项目文件下config文件夹下的index.js文件，将其中的build
2020-09-24 20:49:56
554
原创 js放大镜
js放大镜分析难点列出1.鼠标在图片区域时，透明小区域出现，放大的区域出现2.鼠标移出图片时，透明小区域小时，放大区域消失3.透明小区域随着鼠标移动难点解决关键（对应解决回答）1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.la
2020-09-22 19:25:12
105
原创 vue中mixins(混入)的使用
vue中mixins(混入)的使用一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以
2020-09-22 19:23:03
113
原创 vue中的provide和inject (依赖注入)
vue中的provide和inject (依赖注入)一、名词解析：provide：Object | () => Objectinject：Array | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：
2020-09-22 19:19:23
172
原创 Vue Virtual Dom（虚拟Dom） 和 Diff算法
Vue Virtual Dom（虚拟Dom） 和 Diff算法Vue Virtual Dom（虚拟Dom）： 是一个js对象，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作;Diff算法： 用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Virtual DOM： 是一种利用JavaScript构建dom的技术，主要解决了复杂应用程序的维护程度。Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的
2020-09-20 21:51:49
90
原创 vue的自定义过滤器
vue的自定义过滤器过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，过滤器通常会使用管道标志 “ | ”。使用:<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>自定义全局过滤器虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。定义一
2020-09-20 21:49:37
161
原创 vue的自定义指令
vue的自定义指令自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。钩子函数：指令定义函数提供了几个钩子函数（可选）：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初
2020-09-20 21:40:59
394
原创 vue自定义组件
vue自定义组件我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发
2020-09-17 21:26:47
523
原创 vue中的事件修饰符
vue中的事件修饰符(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，讲先执行方法，后执行gett方法。即通过了冒泡这个过程。（2）.prevent //阻止默认事件发生 即event.preventdefault():实例： 阻止了a标签的默认刷新（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕
2020-09-17 21:09:22
251
原创 vue双向数据绑定原理
vue双向数据绑定原理1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；3.介绍一下Object.defineProperty()方法（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） p
2020-09-16 21:41:21
164
原创 vue的常用指令
vue的常用指令v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。v-html指令：绑定一些包含html代码的数据在视图上，例如Daisy,这个字符包含了标签，要想不被当做普通的字符串渲染出来，发挥应有的效果，我们就得使用v-html指令 。例如下面的写法，name里面的Daisy外层套上，用v-html指令后的功能效果就会正常被渲染出来，从而不会当做字符串被解析出来。v-show指令：指令的取值为true/false，分别对应着显示/隐藏，例如下面这段代码，s
2020-09-16 21:29:10
129
原创 vue生命周期
vue生命周期1、创建vue实例，new Vue();2、在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数；3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；4、以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况：1）实例内部有template属性，直接调用，然后调用render函数去渲染；2
2020-09-15 20:58:43
94
原创 v-if和v-show区别
v-if和v-show区别相同点都可以动态控制着dom元素的显示隐藏区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速
2020-09-15 20:56:03
111
原创 axios封装与api接口管理
axios封装与api接口管理axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库axios封装步骤安装axiosnpm in
2020-09-14 21:47:54
126
原创 事件监听和事件模型
事件监听和事件模型事件监听事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。事件监听涉及到三个类对象1、EventSource(事件源）事件发生的场所2、Event(事件)：事件封装界面组件上面发生的特定事件3、EventListener(事件监听器)：负责监听事件源发生的事件事件监听用法1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方
2020-09-13 21:50:32
136
原创 垃圾回收和内存泄漏
垃圾回收和内存泄漏垃圾回收机制所谓的内存泄漏简单来说是不再用到的内存，没有及时释放，为了更好避免内存泄漏。其原理是：垃圾收集器会定期找出那些不在继续使用的变量，然后释放其内存。垃圾回收方法垃圾回收有两种方法：标记清除、引用计数。目前用的比较多得是标记清除。标记-清除：js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环
2020-09-13 21:45:48
108
原创 设计模式
设计模式设计模式（Design Pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。设计模式六大原则单一原则（Single Responsibility Principle）：一个类或者一个方法只负责一项职责，尽量做到类的只有一个行为原因引起变化；里氏替换原则（LSP liskov substitution principle）：子类可以扩展父类的功能，但不能改变原有父类的功能；（本质
2020-09-13 20:53:16
72
原创 js中事件委托
js中事件委托事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。优点：大量减少内存占用，减少事件注册。案例1需要触发每个li来改变他们的背景颜色。<ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&
2020-09-10 22:00:29
317
原创 数组扁平化
数组扁平化数组扁平化是指将一个多维数组变为一维数组比如int a[3][5]; a就是一个3行5列的二维数组，bai一共可以放15个整数多维数组的意思是指三维bai或者三维以du上的数组。三维数组具有高、宽、zhi深的概念，或者说行、列、层的概念，即数dao组嵌套数组达到三维及其以上。是最常见的多维数组，由于其可以用来描述三维空间中的位置或状态而被广泛使用。1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) {
2020-09-10 21:03:26
145
原创 数组排序
数组排序1、桶排序（桶中出现的数组元素都做个标记1，然后将桶数组中有1标记的元素依次打印）//简单, 但是不用,浪费内存var arr2=[];for(var i=0;i<arr.length;i++){ var key=arr[i]; arr2[key]=1;}for(var j in arr2){ console.log(j);}2、冒泡排序（每一趟找出最大的）//性能一般var arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大
2020-09-09 19:16:58
330
原创 数组去重
数组去重一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true",
2020-09-09 19:09:52
95
原创 数组方法（es6）
数组方法（es6）属性遍历ES6一共有5种方法可以遍历对象的属性。（1）for…infor…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。（2）Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。（3）Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举
2020-09-08 21:13:26
166
原创 数组方法（es5）
数组方法（es5）es5定义bai了新的数组方法遍历，映射，du过滤，检测，简化和搜索zhi数组。这些方法对操作数组dao 提供了极大的便利。es5数组 大对数方法，首先大多数方法的第一个参数 是一个函数，并且对数组的每个元素（或一些元素））调用一次该函数。大多数情况下，调用提供的函数提供三个参数：数组元素，元素索引和元素本身。通常情况下，只需要第一个参数，可忽略后两个参数。大多数 es5数组方法的第一个参数是一个函数，第二个参数是可选的，如果有第二个参数，则调用的函数被看成是第二个参数的方法。也就是说，
2020-09-08 21:09:24
135
原创 generator（特点，项目应用）
generator（特点，项目应用）1、generator（1）Generator函数是ES6提供的一种异步编程的解决方案；（2）Generator函数是一个状态机，封装了多个内部状态，执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了是状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。2.Generator函数的特征：（1）function 关键字与函数名之间有一个*号；（2）Generator函数内部使
2020-09-06 20:44:00
129
原创 async,await(特点，项目中应用)
async,await(特点，项目中应用)async,await作用: 是一套关于异步的解决方案await有两个作用，一是作为求值关键字，二是将异步操作变成同步操作；如果方法中使用了await，那么在方法前面必须加上async当await作为求值关键字时 后面可以跟Promise或表达式，可以直接获取Promise中的值或表达式的值跟Promiseapp.use(async (ctx, next) => { // next()返回的是Promise，a的值是"hello, world!"
2020-09-06 20:30:28
83
原创 promise（特点，项目中如何应用）
promise（特点，项目中如何应用）promisepromise 是用于异步编程的，他解决了编程的中的回调地狱，比传统的解决方案（回调函数和事件）更合理更强大。属性:使用 Promise 对象中有三个参数，pending:初始化状态fulfilled:操作成功rejected: 操作失败promise 优点：①统一异步 APIPromise 的一个重要优点是它将逐渐被用作浏览器的异步 API ，统一现在各种各样的 API ，以及不兼容的模式和手法。②Promise 与事件对比和
2020-09-06 20:07:36
415
原创 var let const 区别
var let const 区别var：变量提升（无论声明在何处，都会被提至其所在作用于的顶部）let：无变量提升（未到let声明时，是无法访问该变量的）const：无变量提升，声明一个基本类型的时候为常量，不可修改；声明对象可以修改var和let的区别1.函数作用域 vs 块级作用域var 和 let 第一点不同就是 let 是块作用域，即其在整个大括号 {} 之内可见。如果使用 let 来重写上面的 for 循环的话，会报错var：只有全局作用域和函数作用域概念，没有块级作用域的概念。
2020-09-06 19:46:15
232
原创 vuex
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。Vuex状态管理跟使用传统全局变量的不同之处1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（
2020-09-03 18:59:34
86
原创 javascript原型与原型链
javascript原型与原型链1.prototype每个函数都有一个prototype属性，这个属性指向函数的原型对象。2.proto每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。3.constructor每个原型都有一个constructor属性，指向该关联的构造函数。4.原型链当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.
2020-09-02 18:53:40
62
原创 继承
继承1.原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点：简单易于实现，父类的新增的实例与属性子类都能访问缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面无法实现多继承创建子类实例时，不能向父类构造函数中传参数2.借用构
2020-09-02 18:50:56
74
原创 this以及apply,call,bind之间的区别
this以及apply,call,bind之间的区别关于this对象this对象是在运行时基于函数的执行环境绑定的：在全局环境中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。每个函数都有自己的执行环境。全局执行环境是最外围的一个执行环境。this指向的就是当前代码所在的执行环境。改变this指向的几种方法以及之间的区别：apply()和call()每个函数都包含两个非继承而来的方法
2020-09-01 20:36:01
134
原创 数据类型判断
数据类型判断JavaScript 中常见的几种数据类型：基本类型：string,number,boolean特殊类型：undefined,null引用类型：Object,Function,Function,Array,Date,…typeoftypeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function等6种数据类型。如果是判断一个基本的类型用typeof就是可以的。typeof ''; // str
2020-08-31 19:50:12
100
原创 js数据类型
js数据类型JavaScript一共有8种数据类型：7种基本数据类型： Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值） 和 BigInt（es10新增）；1种引用数据类型 Object（Object本质上是由一组无序的名值对组成的）。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。如何存储基本数据类型： 直接存储在栈（stack
2020-08-31 17:06:38
72
原创 BFC
BFCBFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border bo
2020-08-30 20:51:17
109
原创 H5新特性
H5新特性标签语义化header，footer，nav，section，article，aside，diallog等。 好处：结构清晰，易于阅读，可维护性更高，有利于搜索引擎的搜索（SEO的优化）。音频和视频标签audio，video（source标签定义type属性） 属性：src（音频或视频链接），width，height，controls（显示控件）表单input新增输入类型：date，color，month，email，tel，url等 新增表单元素：keygen（公钥私钥），data
2020-08-30 19:56:59
116
原创 css3动画
css3动画css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。transition渐变动画property:填写需要变化的css属性如：width,line-height,font-size,color等,所有作用与dom样式的属性;duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线（lin
2020-08-30 19:11:14
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人