YKnotebook-CSDN博客

原创结构多维数组[1,[[2,3],4],5] ，变为(1-((2-3)-4)-5)

将类似结构的数组 [1,[[2,3],4],5] ，变为(1-((2-3)-4)-5)let num = [1,[[2,3],4],5]function calc(arr) { return arr.reduce((a, b) => { if (Array.isArray(a) && Array.isArray(b)) { return calc(a) - calc(b) } else if (Array.isArr

2022-01-04 17:49:00 501

原创前端JS&ES6对树形结构数据遍历处理为自己想要的结果

// 遍历树形结构数据，加入或处理需要的键值/*data: 需要被处理的数据level: 树形结构需要被遍历到第几层！！！ ==> i和str不是必填项，这是我的业务需求要判断数循环到了第几层，和拼接层级名称*/export const treeFn = (data: any, level: any, i = 0, str = '') => { const options: any = [] if (typeof data === 'object' &&am

2021-09-02 15:38:45 2102

原创前端常见的数据处理总结

前端常见的数据处理总结一、数据去重1、简单的数组数据去重//重复的数组const arr = [1,2,1,3,4,5,1,1,1,1,1]//ES6新特性去重const arrFilter = [...new Set(arr)]console.log(arrFilter) // [1, 2, 3, 4, 5]2、在对象中带某些重复项属性的去重//重复数据const data = [{key:0, desc:'JS'}，{key:1, desc:'Less'}，{key:2,

2021-05-11 17:53:40 960

原创谷歌清除浏览器host缓存

谷歌清除浏览器缓存1、把这个输入到地址栏chrome://net-internals/#sockets2、你就会看到这个页面3、点击我标出的按钮清除Sockets4、再清除DNS最后再尝试刷新一下希望达到预期的页面瞅一下，不好用请重启电脑...

2021-04-26 13:49:33 1911

原创 less @media根据宽度判断不同屏幕手机样式

获取设备width方法： alert(window.screen.width);//web @media screen and (min-width:769px) { //css style } //ipad pro && ipad mini 768px @media screen and (max-width: 768px) and (min-width:481px) { //css style }//android 6.4inch 480px@m

2020-11-10 20:55:30 1791

原创 React使用className多类名设置

React使用css module和className多类名设置最近在写react的时候碰到了一个小问题：现在css样式我通过下图这样的方式直接引进来的时候，发现会和其他组件里面相同className的会有冲突的现象。正常来说吧，是可以通过不同的组件在className前面加上不同组件的标识做区分的，但是这样感觉不舒服。写习惯了vue的，发现vue里面是可以加scoped将样式私有化，那react应该也会有类似的解决方案吧。正常引入然后找了下发现有个叫做css module的。下图里框着的这刚好就是

2020-11-09 20:45:45 2506 3

原创 Vue指令（在学习的过程中会继续补充）

Vue指令1.v-text和mustachev-text是将数据文本化，会把字符串变量的内容原封不动的显示在页面上mustache中可以写JavaScript表达式。v-text与mustache语法的区别相同点：把数据原封不动的显示在页面上。不同点：v-text会把标签里的所有内容用数据替换；mustache语法只会把双花括号里的内容替换；v-text使用的是自定义属性，如果说出错了，不会再页面上有莫名其妙的输出(双花括号的代码)。2.v-html将数据转为可被渲染在页面上的htm

2020-06-09 01:18:20 107

原创 Vue数据绑定

Vue数据绑定是通过什么完成的?Vue数据绑定是通过数据劫持和观察者模式的方式来实现的。5Vue数据绑定的原理数据劫持：使用Object.defineProperty(); 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。观察者模式：发布订阅，并添加订阅者进行观察，针对Model数据的的变化声明改变，做出相应的数据处理

2020-06-09 00:50:19 174

转载数据驱动

数据驱动数据驱动，就是通过控制数据的变化来改变（驱动）DOM。当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。Vue实现数据数据驱动的双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineP

2020-06-08 21:55:17 256

原创声明式渲染

声明式渲染由字面意思来看，就是声明程序在何处渲染什么数据，具体可以体现在Vue.js中。Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统：//html代码<div id="app"> {{ message }}</div>//javascript代码var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})这样就生成了一个Vue应用，现

2020-06-08 20:46:58 761

原创 MV*模式中的MVVM模式浅理解

MV*模式中的MVVM模式浅理解MVVM是Model-View-ViewModel的缩写，MVVM模式与MVP模式基本相似，区别就是MVVM采用数据双向绑定的方式，且View具有主动性。Model代表我们整个webapp所需要的数据模型，一个典型的例子就是用户信息Model，它应该含有（姓名，年龄等属性）。Model含有大量信息，但他并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。 MVVM中View是具有主动性的，因为它包括了一些数据绑定，事件，和行为，这些都会直接影响Model

2020-06-08 20:06:01 417

weixin_45576305的博客