YinJie…-CSDN博客

原创前端通用后台登录解决方案（一站式解决封装axios模块、接口请求模块、登录请求动作、本地缓存处理、登录鉴权解决）

我们希望封装出来的axios模块，至少需要具备一种能力，那就是：根据当前模式的不同，设定不同的BaseUrl，因为通常情况下企业级项目在开发状态和生产状态下它的baseUrl是不同的。...

2022-07-20 14:40:13 1717 28

原创原生JS实现飞机大战游戏超详细解析快来做一个自己玩吧

案例分析：1.开始前：一个弹窗面板2.游戏中：背景滚动 hero的操作敌机的创建与运动子弹的创建与运动碰撞检测3.游戏结束：一个弹窗面板下面介绍一下一些核心的代码：背景滚动的实现：function start() { var timer = setInterval(function() { bgMove(); },30) }start();这是我们的初始化函数，为了实现背景滚动的效果我们需要定义一...

2022-05-19 17:50:46 5602 55

原创 Vue3全家桶入门（通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）

todolist项目准备vue3.0环境搭建进入想要的目录路径：vue create todolist选择select features，点击回车上下键移动按空格选择，一定不要按回车，这样就进入下一步了我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉我们选择3.x的版本，按回车路由是否选择history模式，写Y按回车这一步选择css预处理器，我就选择一个less配置项就选择它默认的配置项..

2022-05-15 00:07:20 2756 60

原创详解 JavaScipt 深拷贝与浅拷贝

一、JS中数据的存储形式-堆栈我们先简单理解一下堆栈分别是啥：什么是栈：计算机为原始类型开辟的一块内存空间 string number ...什么是堆：计算机为引用类型开辟的一块内存空间 object我们分别分析下面两段代码：var a = 'jack'var b = ab = 'andy'console.log(a,b);//jack andyvar c = {key : 1}var d = cd.key = 2console.log(c,d);//{ key: 2

2022-05-09 14:36:43 361 14

原创硬核解析Promise对象（这七个必会的常用API和七个关键问题你都了解吗？）

什么是promisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。1.Promise的基本使用Promise 是异步编程的一种解决方案，主要用来解决回调地狱的问题，可以有效的减少回调嵌套。从语法上说：Promise就是一个构造函

2022-04-23 08:00:39 1263 45

原创原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧

1.适配设备pc:320*568移动：占满窗口适配设备：新建一个public.js文件，来判断是否是移动端设备function isPhone() { var arr = ["iPhone","iPad","Android"] var is = false; for(var i = 0;i<arr.length;i++) { if(navigator.userAgent.indexOf(arr[i])!=-1) { i

2022-04-18 18:17:43 8490 45

原创我用JS做了一个记账本 [数据可本地存储] 附万字详解

我们所有的操作都是围绕点击添加新交易来进行的那么我们先给添加新交易这个按钮绑定点击事件，那么显然我们要对输入进去的内容进行一个判断，我们待会把isAlert函数补全，isAlert函数就是在输入框内容不符规范时返回flase，这样就弹出一个有问题的对话框提醒用户，我们先做一个简易的，主要先把逻辑搞懂，然后再加以完善var add = document.querySelector('#add');//添加交易var name = document.querySelector('#name');//

2022-04-15 13:27:31 5311 21

原创详解JS原型与原型链

目录1.构造函数原型prototype2.对象原型__proto__3.constructor构造函数4.原型链5.原型对象中的this指向6.扩展内置对象（原型对象的应用）在ES6之前，我们面向对象是通过构造函数实现的。我们把对象的公共属性和方法放在构造函数里像这样：function student(uname,age) { this.uname = uname; this.age = age; this.school = functi..

2022-04-04 18:52:20 6140 6

原创 ES6中的this指向问题

先看这段代码：class student { // 父类 constructor (uname,age) { this.uname = uname; this.age = age; } get() { console.log(uname); }}var stu = new student('小杰',18);stu.get();最后的输出会报错吗？答案是肯定的，因为get方法里uname没有加this那么为

2022-04-03 12:40:04 1466 2

原创 JS进阶第三篇：开发中对数组及对象的判断方法

可以获取到变量的不同类型。这个方法可以用来检测一个对象是否含有特定的自身属性，即是用来判断一个属性是定义在对象本身而不是继承自原型链的，上面是最简单的一个创建构造函数实例的例子，根据我们原型链学到的知识，在这个例子中，对于实例 p 而言，JavaScript的in操作符可以用来判断一个属性是否属于一个对象，也可以用来变量一个对象的属性。Reflect是在ES2015新增的一个内置对象，提供了与Javascript对象交互的方法。这么做虽然可以但是不正规，最特殊的情况就是我们有age字段，而它的值是。

2022-12-14 14:58:52 831 2

原创微信小程序第六篇：元素吸顶效果实现

通过 wx:if 来控制它的显示与隐藏，当页面移动到“啦啦啦”所在位置的时候显示这个元素，并且让他的 position 为 fixed。当页面距离顶部高度超过 216 也就是 “啦啦啦” 所在元素高度时，就让 header 下的元素显示。我们要实现“啦啦啦”所在的元素块在移动到它的时候吸顶，那必然需要结合 scroll-view 标签的 bindscroll 属性实现，这种效果在我们日常开发中是非常常见的，下面让我们结合代码一起来看看是如何实现的吧。，这样就巧妙实现了元素的吸顶效果。

2022-12-09 18:10:18 3066

原创微信小程序第五篇：页面弹出效果及共享元素动画

首先我们先看一下要完成的效果：我们要实现的效果就是点击歌单图片的时候，弹出一个假页并且伴随动画效果，当退出假页页面的时候，假页的歌单封面图会缩小到歌单页的封面图大小，并且移动到相应的位置。

2022-12-09 17:41:29 3557

原创微信小程序第四篇：生成图片并保存到手机相册

刚刚我们封装了顶部的分享组件，那现在就要去定义保存图片到相册的方法了，我们写代码的时候一定要考虑清楚这段代码是否是可复用的，是否应该剥离出去。显然保存图片到相册这个方法我们应该写在 utils 目录中，因为有很多其他的场景都可以用这个方法，那我们就封装一个公用方法，参数就是图片的地址，成功的回调函数和失败的回调函数。wx.getSetting ({ // 查询所有授权if (res.authSetting['scope.writePhotosAlbum']) { // 用户已经授权。

2022-12-09 15:15:12 7971 7

原创 JS进阶第二篇：函数参数按值传递

引用类型复制的是引用（即指针），之后的任何一方改变都会映射到另一方。所谓按引用传递，就是传递对象的引用，函数内部对参数的任何改变都会影响该对象的值，因为两者引用的是同一个对象。来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，还有其他的解决方法吗？拷贝虽然很好理解，但是当值是一个复杂的数据结构的时候，拷贝就会产生性能上的问题。中的类型分为值类型和引用类型，值类型保存在内存栈中，引用类型保存在内存堆中。答案是有，我们只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的。

2022-11-28 11:55:40 583

原创 JS进阶第一篇：手写call apply bind

一定要弄清楚谁是这个被执行的方法，就是调用call的函数，而fn2现在的身份是替代window作为fn1的直接调用者，这是理解call和apply的关键，也可以运行下。如果 newTest 是我们 new 出来的 man 实例，那根据原型链的知识，定义在man的原型对象上的方法肯定会被继承下来，所以我们通过 newTest.sayHi 调用能正常输出 hello 么？在实现手写bind方法的过程中，看了许多篇文章，答案给的都很统一，准确，但是不知其所以然，所以我们就好好剖析一下bind方法的实现过程。

2022-11-28 11:54:44 599

原创 React useState 进阶实践指南

原因很简单，函数组件更新就是函数的执行，在函数一次执行过程中，函数内部所有变量重新声明，所以改变的 state ，只有在下一次函数组件执行时才会被更新。所以在如上同一个函数执行上下文中，number 一直为0，无论怎么打印，都拿不到最新的 state。否则，如果闭包捕获了过时的状态值，则可能会遇到过时的状态问题。demo 中两次 state 指向了相同的内存空间，所以默认为 state 相等，就不会发生视图更新了。是一个过时的闭包，它从初始渲染（使用0初始化时）中捕获了过时的count变量。

2022-11-27 17:49:09 495

原创微信小程序第三篇：获取页面节点信息

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。可以用于获取节点属性、样式、在界面上的位置等信息。在自定义组件或包含自定义组件的页面中，使用。，这样可以确保在正确的范围内选择节点。获取节点的相关信息。的尺寸、滚动位置等信息。方法后，节点信息会在。

2022-11-26 21:31:22 4467

原创微信小程序第二篇：七种主流通信方法详解

今天我们来说下微信小程序的三种通信：组件通信、页面通信和全局通信

2022-11-26 21:16:10 1164

原创微信小程序第一篇：自定义组件详解

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。{这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。代码示例： < component-tag-name inner-text = " Some text " >

2022-11-26 21:13:49 1291

原创前端JS基础第三篇：七道例题带你弄懂this指向问题

也就是当我们将函数作为参数传递时,会被隐式赋值，回调函数丢失this绑定，因此这时候setTimeout中函数内的this是指向window。其实这里和1.4很像，不过一看到函数内的函数，就很容易让人联想到闭包😂，然后... 然后就脱口而出，答案是2啊，这还不简单。小伙伴们，审题可得仔细啊，这里问你的是this.a，而在inner中，this指向的还是window。执行的时候，打印出来的是obj对象中的a，也就是1。对象，所以它里面this的指向是为。其实这里不是的，它打印出的是。，变量是不会被绑定到。

2022-11-19 14:55:05 582

原创前端JS基础第二篇：作用域与作用域链

作用域是在程序运行时代码中的某些特定部分中变量、函数和对象的可访问性。从使用方面来解释，作用域就是变量的使用范围，也就是在代码的哪些部分可以访问这个变量，哪些部分无法访问到这个变量，换句话说就是这个变量在程序的哪些区域可见。var inVariable = "内部变量";}Fun();//inVariable是在Fun函数内部被定义的，属于局部变量，在外部无法访问，于是会报错。

2022-11-19 14:51:06 505

原创前端JS基础第一篇：执行上下文与执行栈

代码执行前，浏览器的Js引擎先会创建代码执行的环境来处理此Js代码的转换和执行，代码的执行环境称为执行上下文。执行上下文是一个抽象概念，包含当前正在运行的代码以及当前执行环境中的变量、函数声明，参数（arguments），作用域链，this等信息。执行上下文就是javascript代码被解析和执行时所在环境的抽象概念。

2022-11-19 14:46:41 535

原创 React 中 memo useMemo useCallback 到底该怎么用

在 React 函数组件中，当组件中的 props 发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改 values/props 的函数/组件。在 react 中，我们可以通过 memo，useMemo 以及 useCallback 来防止子组件的 rerender。

2022-10-18 15:08:26 619 1

原创 React props 完整解析

props 是 React 组件通信最重要的手段，它在 React 的世界中充当的角色是十分重要的。学好 props 可以使组件间通信更加灵活，同时文中会介绍一些 props 的操作技巧，和学会如何编写嵌套组件。

2022-10-10 10:58:20 1438

原创 useEffect 完整使用指南

我们用 useCallback 对 getFetchUrl 做了一层缓存，现在只有当依赖项变化的时候，才会重新执行 useCallback 来返回新的函数，依赖项没有变化的时候就算组件 rerender 了，这个函数也不会重新执行，这样我们把 getFetchUrl 作为 useEffect 的依赖就没问题了。这当然不是我们想要的。在下面这个组件中，我们的直觉是：“开启一次定时器，清除也是一次”。我们对 React 撒谎说我们的 effect 不依赖组件内的任何值，可实际上我们的 effect 有依赖。

2022-09-25 18:16:18 5256 1

原创 React 函数组件与类有何不同？

首先我们要知道的是，项目性能能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略各有略微，但它们之间的性能差异可以忽略不计。

2022-09-24 15:52:36 592 2

原创如何使用 React Hooks 获取数据

useEffect 的 hook 用于从 API 中获取从后端请求回来的数据，并使用 state hook 的更新函数在组件的本地状态中设置数据。这就是为什么不允许直接在 effect hook 中使用异步的原因。如果包含变量的数组为空，则在更新组件时根本不会运行钩子，因为它不必监视任何变量。但是，当你运行应用程序时，你会发现效果挂钩在组件装载时运行，但在组件更新时也会运行，这样它就会一次又一次地获取数据。这是一个错误，需要避免。在代码中，我们使用 async/await 从第三方 API 获取数据。

2022-09-23 20:57:07 1042 1

空空如也

空空如也