Javascript

  • 关于React状态管理的三个规则总结

    目录 前言 No.1 一个关注点 No.2 提取复杂的状态逻辑 No.3 提取多个状态操作 总结 前言 React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook,负责管理功能组件内部的状态。 我喜欢 useState() ,它确实使状态处理变得非常容易。但是我经常遇到类似的问题: 我应该将组件的状态划分为小状态,还是保持复合状态? 如果状态管理变得复杂,我应该从组件中提取它吗?该怎么做? 如果 useState() 的用法是如此简单,那么什么时候需要 useReducer()? 本文介绍了 3 条简单的规则,可以回答上述问题,并帮助你设计组件…

    Javascript 2021年8月16日
    0 12 0
  • Angular封装WangEditor富文本组件的方法

    富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台。 得益于Angular的强大,封装WangEditor组件非常简单 1.使用yarn或者npm安装wangeditor yarn add wangeditor 2.创建一个Angular的组件 ng g c q-wang-editor 3.封装组件逻辑 3.1 模板 <div #wang></div> 3.2 ts逻辑 import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewC…

    2021年8月16日
    0 10 0
  • 使用Angular CDK实现一个Service弹出Toast组件功能

    目录 1.环境安装 2.创建Toast组件和ToastService 2.1编写Toast组件和样式 在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能。Angular的知名组件库几乎都依赖了这套开发包。比如ANT,PrimeNG等。 本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块。 1.环境安装 cdk不是angular的默认模块,需要手动安装 yarn add @angular/cdk 在app.modu…

    2021年8月16日
    0 10 0
  • JavaScript实现网页版贪吃蛇游戏

    本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id=”canvas” width=”400″ height=”400″></canvas> <script src=”https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”>&lt…

    2021年8月16日
    0 10 0
  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log(‘name属性发生变化了’) console.log(newvalue,oldvalue) } 5.监听对象时 <script…

    Javascript 2021年8月16日
    0 9 0
  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log(‘name属性发生变化了’) console.log(newvalue,oldvalue) } 5.监听对象时 <script…

    Javascript 2021年8月16日
    0 10 0
  • 小程序原生实现左滑抽屉菜单

    目录 WXS 响应事件 方案A 页面结构和样式 WXS 事件回调函数 WXS 脚本 遮罩层 方案B 为什么要使用 WXS 结语 & 参考资料 参考资料: 在移动端,侧滑菜单是一个很常用的组件(通常称作 Drawer,抽屉)。因为现在手机屏幕太大,点击角落的菜单按钮明显不如在屏幕中间滑动方便。 相比其他平台,小程序的组件库支持明显还不够完善,各个框架也还不太成熟。由于之前使用框架的过程中被各种神秘bug搞的头秃,还是用回了原生环境。 最近研究了一下如何在原生框架中实现滑动抽屉菜单效果,本来以为很麻烦,结果发现其实只需要几十行代码,而且可以类比实现很多灵活的效果。感觉现在网上相关资料较少,…

    2021年8月16日
    0 8 0
  • vue中keepAlive组件的作用和使用方法详解

    前言 在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition&gt…

    2021年8月15日
    0 7 0
  • Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用。 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改、便于后期维护。如给table内容展示,超出单元格以省略号展示等。 对于大部分的后台管理系统,数据表格的展示大同小异,由于不…

    2021年8月15日
    0 10 0
  • Vue的方法和属性案例详解

    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}}调用要写() 示例 {{aa()}} 事件触发 @click=aa”可以有()也可以没有如果需要传参,加上() 把$event这个特殊参数传进去可以获取事件对象 2.计算属性 计算属性是什么 computed 计算属性的特点 计算属性有缓存 计算属性是基于他们的依赖进行缓存的 计算属性只有在他的相关依赖发生改变时才会重新求值当 计算属性所依赖的属性发生变化时他会重新计算一次 计算属性中的方法 set(da) …

    Javascript 2021年8月15日
    0 12 0
  • vue router-view的嵌套显示实现

    目录 一、路由配置 二、vue页面嵌套 三、嵌套联系 一、路由配置 const routes = [ { path: ‘/’, name: ‘导航1’, component: Home, children:[ { path: ‘/customer’, name: ‘Customer’, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. compone…

    Javascript 2021年8月15日
    0 10 0
  • vue router-view的嵌套显示实现

    目录 一、路由配置 二、vue页面嵌套 三、嵌套联系 一、路由配置 const routes = [ { path: ‘/’, name: ‘导航1’, component: Home, children:[ { path: ‘/customer’, name: ‘Customer’, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. compone…

    Javascript 2021年8月15日
    0 9 0
  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    目录 简介和 Demo 展示 API: Container 属性 生命周期 回调 事件 API: Draggable 实战 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件。安利一下~ Vue Smooth DnD 是一个快速、轻量级的拖放、可排序的 Vue.js 库,封装了 smooth-dnd 库。 Vue Smooth DnD 主要包含了两个组件,Container 和 Draggable,Container 包含可拖动的元素或组件,它的每一个子元素都应该被 Draggable 包裹。每一个要被设置为可拖动的元素都需要被 Draggable 包裹…

    2021年8月15日
    0 11 0
  • vue项目打包以及优化的实现步骤

    目录 vue项目的打包上线及优化 vue项目的打包 项目托管 项目的常见优化 vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端,切换到项目根目录 输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件 项目托管 我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模拟访问服务器的项目 1.创建一个新的目录做为服务器根目录,小黑窗执行node init -y执行初始…

    2021年8月15日
    0 13 0
  • JS超出精度数字问题的解决方法

    精度问题最通俗易懂的解释 比如一个数 1÷3=0.33333333…… 大家都知道3会一直无限循环,数学可以表示,但是计算机要存储,方便下次取出来再使用,但0.333333…… 这个数 无限循环,你让计算机怎么存储?计算机再大的内存它也存不下,对吧! 所以不能存储一个相对于数学来说的值,只能存储一个近似值,所以当计算机存储后再取出来用时就会出现精度问题。 JS超出精度数字解决 一、js 最大安全数字是 Math.pow(2,53) – 1,超出这个数字相加会出现精度丢失问题,可通过将数字转换为字符串操作的思路处理,如下: // js …

    Javascript 2021年8月15日
    0 13 0