又菜又卷-CSDN博客

原创 JS高级--深入JavaScript运行原理

一、浏览器工作原理当我们在浏览器输入域名之后，DNS服务器就会自动对域名进行解析，将域名地址转为IP地址。根据IP地址浏览器可以从对应服务器里拿到一个index.html文件，随后浏览器内核将对HTML进行解析。1、浏览器内核概念：浏览器内核（指的是浏览器的排版引擎，也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎）浏览器内核其实就是浏览器的渲染引擎，它的作用就是渲染html页面。它的作用有点类似xml解析器。它通过读取htm

2022-05-14 20:01:26 238

原创 JavaScript基础--数据类型

一、分类JS中一共分成六种数据类型：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义、Object 任意对象可以使用一个运算符 typeof 来检查一个变量的类型基本（值）类型：1、String 字符串JS中的字符串需要使用引号引起来（双引号或单引号都行）使用typeof运算符检查字符串时，会返回"string"2、Number 数值JS中所有的整数和浮点数都是Number类型 JS中可以表示的数字的最大值：Numb

2022-04-25 18:13:38 219

原创小程序项目实战总结--组件通信（子传父）

子组件触发事件向父组件传递数据（事件）时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。组件间通信与事件 | 微信开放文档实例1、在子组件中监听点击2、运用triggerEvent 方法向父组件发射事件（类似Vue的this.$emit()）3、在父组件中接收事件，然后可以进行对应处理总结：小程序中子组件触发事件向父组件传递数据（事件）和Vue中的父子组件通信（子传父）类似，重点区别在于小程序中使用triggerEvent 方法（V..

2022-04-18 23:31:45 519

原创小程序项目实战总结--结合HTML data-* 属性进行路由跳转

小程序通常在点后进行路由跳转，跳转时通常需要携带特定的参数。这时我们可以通过HTML的 data-* 属性，将需要跳转的数据存储在data-*中。在监听点击事件时就可以拿到其所存储的数据，从而在路由跳转时携带对应参数。（备注：data-* 属性用于存储私有页面后应用的自定义数据）HTML data-* 属性 | 菜鸟教程<view class="list"> <view wx:fo.

2022-04-18 23:05:54 284

原创 CSS--实现文本显示两行

.content { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; overflow-wrap: break-word; word-break: break-all; white.

2022-04-16 22:32:27 4319

原创小程序项目实战总结--如何获取手机屏幕宽高？

一、获取手机屏幕宽高并存储手机屏幕宽高一般是固定的，所以我们将它存在全局app.js中我们通过wx.getSystemInfoSync()获取手机相关信息// app.jsApp({ // 定义一个变量存储屏幕属性 glabalData: { screenHeight: 0, screenWidth: 0 }, // 生命周期回调——监听小程序初始化 onLaunch() { const info = wx.getSystemInfoSync()

2022-04-16 22:26:24 1471

原创小程序项目实战总结--slot

小程序中的slot可以在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点，和Vue中的类似。但是小程序中的slot不可以实现当有数据实现时，默认的节点消失，我们可以使用以下方式解决：1、父组件传一个值，采用wx:if决定默认节点是否显示（比较麻烦，不推荐）2、采用CSS中的 + 伪类选择器...

2022-04-16 22:17:55 1041

原创小程序项目实战总结--轮播图

实现小程序中的轮播图可以使用小程序中的swiper和swiper-item组件swiper | 微信开放文档一、基本使用：二、常见问题问题一：轮播图的图片下面可能会多/少几像素解决方法：给swiper-item添加display: flex;问题二：原生轮播默认高度伟150px，但轮播的图片高度不一定是150px（我们的图片高度是由宽度决定，图片宽度由机型屏幕宽度决定），这时有可能会出现一些bug如下解决方案：我们可以让轮播组件swiper的高度和图片的高度保持一致.

2022-04-15 23:42:03 484

原创小程序项目实战总结--引入第三方库Vant

Vant 是一个轻量、可靠的移动端组件库，一般情况在小程序中引用库（下面用vant示范）的步骤如下：1、npm init -y2、npm i @vant/weapp -S --production3、在【详情】--【本地设置】中勾选【使用npm模块】（现在小程序似乎没有这个选项，可忽略）4、安装完Vant后还要将node_modules文件进行转化，点击【工具】--【构建npm】5、在index.json中引入组件之后即可使用该组件...

2022-04-15 23:12:56 486

原创小程序项目实战总结一

一、image组件小问题image媒体组件在小程序中具有默认宽高（默认宽度320px、高度240px），我们可以通过mode属性（图片裁剪、缩放的模式）进行更改widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变<image src="{{item.cover}}" mode="widthFix" class="image"></image>二、WXSWXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结

2022-04-13 21:18:24 267

原创 JS高级--闭包

一、理解闭包1、如何产生闭包当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包2、闭包到底是什么（使用chrome调试查看）理解一：闭包是嵌套的内部函数（绝大多数人理解）理解二：包含被引用变量（函数）的对象（少数人理解）注意：闭包存在于嵌套的内部函数中3、产生闭包的条件函数嵌套内部函数引用了外部函数的数据（变量/函数）执行外部函数function fn1 () { var a = 2 var b = 'abc'

2022-04-09 20:39:20 592

原创 JS高级--作用域与作用域链

一、作用域1、理解就是一块地盘，一个代码段所在的区域它是静态的（相当于上下文对象），在编写代码时就确定了2、分类全局作用域函数作用域没有块作用域（ES6有了）3、作用隔离变量，不同作用域下同名变量不会有冲突二、作用域与执行上下文区别与联系区别一：全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建函数执行上下文环境是在调用函数时, 函数体代码.

2022-04-08 21:15:19 155

原创 JS高级--执行上下文与执行上下文栈

一、变量提升与函数提升1、函数声明提升* 通过var定义（声明）的变量，在定义语句之前就可以访问到* 值：underfine2、函数声明提升* 通过function声明的函数，在声明函数之前就可以直接调用* 值：函数定义（对象）3、问题：变量提升和函数提升是如何产生的？console.log(a) // undefine 变量提升fn1() // 可执行 fn1() 函数提升fn2() // 不可执行变量提升 var a = 3function fn1

2022-04-07 22:42:10 171 1

原创 JS高级--原型与原型链

一、原型函数的prototype属性* 每个函数都有一个prototype属性，它默认指向一个object空对象（即称为：原型对象）* 原型对象中有一个constructor属性，它指向函数对象function Fun() {}console.log(Fun.prototype) // 默认指向一个空对象// 原型对象中有一个constructor属性，它指向函数对象 console.log(Fun === Fun.prototype.constructor) // true

2022-04-06 22:37:28 307

原创 JS高级--IIFE

一、理解全称：Imemediately-Invoked Function Expression 立即执行函数表达式二、作用1、隐藏实现2、不会污染外部（全局）命名空间3、用它来编码js模块// 匿名函数自调用 === IIFE;(function() { console.log('aaa')})();(function() { let a = 3 console.log(a) // 3})()let a= 4console.log(a) //

2022-04-06 14:54:21 213

原创 JS高级--函数中的this

一、this是什么1、任何函数本质上哦都是通过某个对象调用的，如果没有指定对象this就是window2、所有的函数内部都有一个变量this3、this的值是调用函数的当前对象二、如何确定this的值text() // windowp.text() // pnew text() // 新创建的对象p.call(obj) // obj1、以函数形式调用时，this永远都是window2、以方法形式调用函数时，this就是调用方法的那个对象3、以构造函数形式调用时，

2022-04-04 15:55:20 473

原创 JS高级--函数

一、什么是函数具有实现特定功能的n条语句的封装体只有函数是可以执行的，其他类型的数据不能执行二、为什么要用函数提高代码复用便于阅读交流三、如何定义函数1、函数声明function myFunction(a, b) { return a * b}2、表达式var x = function (a, b) {return a * b}四、如何调用（执行）函数1、text() 直接调用function myFunction(a, b) {

2022-04-04 15:39:54 811

原创 JS高级--对象

一、什么是对象多个数据的封装体 / 用来保存多个数据的容器一个对象代表现实中的一个事务二、为什么要用对象统一管理多个数据三、对象的组成1、属性：由属性名（字符串）和属性值（任意类型）组成2、方法：一种特别的属性（属性值为函数的属性）四、如何访问对象内部的数据1、.属性名简单有效，优势不能用2、[ ‘属性名’ ] 编码麻烦，通用必须使用[ ‘属性名’ ]的方式访问内部数据的情况：1、属性名包含特殊字符：— 、空格等等2、变量名不确定//

2022-04-04 15:04:44 226

原创 JS实现将时间戳转化为日期字符串

const dateFormat = function(originVal){ const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0').

2022-03-30 20:09:35 976

原创 JS高级--数据、变量和内存（相关问题）

一、关于赋值与内存的问题问题： var a = xxx ，a的内存中到底保存的是什么？若 xxx 是基本数据，a的内存中保存的就是这个数据若 xxx 是对象，a的内存中保存的是对象的地址值若 xxx 是一个变量，保存的就是 xxx 的内存内容（可能是基本数据，也可能是地址值）二、关于引用变量赋值问题1、n个引用变量指向同一对象，通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据var obj1 = { name: 'Tom'}var obj2 =

2022-03-25 23:21:01 440

原创 JS高级--数据、变量和内存

一、什么是数据？数据是存储在内存中特定信息的“东东”，本质上是 011101010... 数据的特点：可传递、可运算二、什么是内存？内存是内存条通电后产生的可储存数据的空间（临时的）内存的产生和死亡：内存条（电路板）==》通电 ==》产生内存空间 ==》存储数据 ==》处理数据 ==》断电 ==》内存空间和数据都消失一块小内存的两个数据：内部储存的数据地址值内存分类：栈：全局变量/局部变量堆：对象注意：函数（对象）本身在堆里，但函数名（表示对象的变量）在栈中

2022-03-25 22:46:31 347

原创 Window sessionStorage 属性

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。基本用法：保存数据语法：window.sessionStorage.setItem("key", "value");读取数据语法：var lastname = window.sessionStorage.getItem("key");删除指定键的数据语法：window.sessionStorage.removeItem("key");删除所有数据：wind

2022-03-19 23:34:24 1289

原创 token原理分析（登录）

登陆页面输入用户名和密码进行登录服务器验证通过之后生成该用户的token并返回客户端存储该token后续所有的请求都携带该token发送请求总结图如下：我们可以将token存储在sessionStorage、localStorage和vuex中，各自特征如下：sessionStorage：在不关闭窗口的情况，可以持久化保存token，也需要在重新登录时，清除原有的sessionStorage数据；但打开新的页面（新窗口）重新登录其他账号，不会替换原有token；也不会因为刷新页面

2022-03-19 20:36:03 796

原创 Vue 中的mapState 辅助函数

如果我们想要获取Vuex中state的某一个属性的时候，总是this.$router.state.属性名非常的麻烦，这时候使用mapState辅助函数就非常方便了获取store里面的state的city属性，没有使用mapState的情况：{{this.$store.state.city}}使用mapState后：{{this.city}}如何使用mapStation函数：// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapStat

2022-03-19 18:19:54 1469

原创 Element-UI项目第一天

登录页面<template> <div class="login"> <el-card>  <div class="head_portrait"> <img src="~assets/img/user-default.png" alt=""> </div>  <!-- Form 组件提供了表单验证的功能，只需要通过

2022-03-18 22:26:12 260

原创 VUE的作用域插槽

VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据带有如下模板的 <current-user> 组件：<span> <slot>{{ user.lastName }}</slot></span>我们可能想换掉备用内容，内容为子组件的 user对象的firstName属性。如下：<current-user> {{ user.firstName }}</current-user

2022-03-16 22:23:16 7378 1

原创 JS实现电话号码脱敏

方法一：使用slice方法function phoneHandel(num) { return num.slice(0, 3) + '****' + num.slice(num.length - 4， num.length)}方法二：substringfunction phoneHandel(num) { return num.substring(0, 3) + '****' + num.substring(num.length - 4)}注意：slice和subst

2022-03-16 10:47:48 1486

weixin_60811442的博客