weixin_41675013的博客

原创 前端梳理知识点

### 关于HTML5/CSS3大家自己回去看面试题即可- HTML5不仅仅是标签 + H5标签 + 表单 + 音视频 + canvas/webGL + 本地存储 + 地理位置 + websocket + ...- CSS3 + 基础的知识 + 动画transition/animation + 响应式布局开发 rem/px/vw/vh/flex/@media + 布局 + ...### JavaS...

原创 dva的笔记

js文档 ：MDN框架文档：印记中文webpack文档Taroexpresskoanodejsrequire和import区别纯函数 ：输入一定，输出一定副作用：输入一定，输出不一定 （setTimeout promise ）dva的优点1.可以将action reducer action-type state写到一个文件中，可以理解为功能a.js2.reducer不需要state初始化了，dva内部自动帮我们进行了初始化3.自动监听router的变化

原创 移动端300毫秒延迟解决

https://cloud.tencent.com/developer/article/1379785第一种：禁止缩放<meta name="viewport" content="user-scalable=no" />或者html { touch-action: manipulation; }第二种fastClick

原创 mpvue 的使用流程

mpvue的使用流程由于mpvue是基于vue-cli2.0所以先运行npminstall-g@vue/cli-init拉取2.0的模板一台电脑运行一次即可下一步使用vue-cli2.0的模板创建项目vueinitmpvue/mpvue-quickstart项目名项目创建好之后cd到建好的项目然后安装依赖（npmi）安装好依赖之后运行npmrundev运行之后会生成一个dist文件夹里边有一个wx文件夹我...

原创 小程序

在小程序中：App()根组件Page()页面级的组件Component()功能项组件需要在对应的JSON中有一个配置项"component":true使用功能组件的流程：1-创造组件先创造一个对应的文件夹然后右键新建Component这样会一次生成4个对应的文件2-想在哪里使用就需要在哪里注册；注册是在对应的JSON的usingComponents:{自定义组件名：‘对应的组件路径’}3...

原创 在【函数式组件HOOKS中】如何使用上下文

原创 【复合组件】1.父子组件的信息通信

原创 REACT中的函数式组件的HOOKS函数的应用

原创 PureComponent相对于Component的区别

PureComponent相对于Component会默认创建一个shouldComponentUpdate周期函数（如果用户自己设置shouldComponentUpdate，以用户自己设置的为主，此时没有任何的区别）并且在这个周期函数中默认把最新的 属性/状态 和之前的 属性/状态 进行浅比较（shallowEqual），一但发现没有任何的变化，则返回FALSE/* // 解决方案1:自己设置替换默认设置的（不建议） shouldComponentUpdate() { return tru

原创 2.状态和属性

import React,{Component} from 'react'import ReactDOM from 'react-dom';/* 在react中 每一个组件 只有两个数据来源； 状态state 组件自己的数据 vue的data 属性props 外边传给这个组件的数据 vue的props 无状态组件 就是没有自己的state 数据全在 props中；*/class App extends Component{ constructor(props){.

原创 3.事件

import React from 'react';import ReactDOM from 'react-dom';/* 在react中 想要更改数据之后 触发视图更新 必须调用 setState setState 更新数据（大部分）是一个异步操作， 异步操作 是为了可以把多次setState 合并成一次 最后再去渲染最终的数据 类似于VUE的DOM更新 setState 不能用在render函数中；*/class App extends React.Compon.

原创 4.父子组件

import React from 'react';import ReactDOM from 'react-dom';/* 父传子： 通过行内自定义属性 + this.props 子传父： 通过行内自定义属性（对应的是一个函数） + this.props 凡是用在组件上的属性 都是创造组件的那个人自己定义的*/class Button extends React.PureComponent{ add=()=>{ this.props.onClick(10) .

原创 5父子组件 children的判断输出

import React from 'react';import ReactDOM from 'react-dom';class Button extends React.Component{ render(){ console.log(this.props) let {children} = this.props;//等价于 vue中的 slot // children 有可能是一个数组 也有可能是一个字符串 let til = [],text = []; .

原创 6.REF

import React from 'react';import ReactDOM from 'react-dom';/* ref=‘xxx’ 这种方式 我们通过 this.refs.xxx 获取对应的DOM 或者 组件；将来要被废弃 ref={(el)=>{this.xxx=el}} 直接通过 this.xxx 即可调到对应的组件或者DOM元素 第三种 ： 先在constructor中 编写 this.xxx = React.createRef(); 使用的时候 .

原创 7_prop-types

import React from 'react';import ReactDOM from 'react-dom';import Types from 'prop-types';// react中的 怎么 限制 父串子过来的数据的类型 // 需要用到 prop-types这个包class Child extends React.Component{ static propTypes = { // // name:Types.number,// 规定 name必须是一个.

原创 TASK-OA项目reduxt实现

TASK项目1.搭建项目2.ANTD3.数据处理4.reduxcreate-react-app 脚手架$ npm i create-react-app -g$ create-react-app xxx或者$ npx create-react-app xxx 【yarn】向配置less1.-->$ git init -y (在一个大仓库就直接提交到历史区) (如果项目不在一个仓库或者本身也不是一个仓库，则需要把项目初始化成一个git仓库,代码提交到历史区 )...

原创 axios二次封装

第一种 基于全局的封装/* AXIOS的二次配置 */import axios from 'axios';import qs from 'qs';axios.defaults.baseURL = "";axios.defaults.withCredentials = true;axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";axios.defaults.transformReques

原创 react-redux源码解析

react-redux源码1.Provider ：把基于属性传递进来的store挂载到上下文上2.connectprovider创建一个组件 并把store挂载到上下文中供后代使用connect 是干啥的 把两次执行的返回结果 给app.js用 是一个组件俩参数connect(...)(...)第一个执行返回是一个函数第二个执行返回是一个组件 代理组件 Proxy 渲染proxy目的是把传进来的Task渲染也就是第二个执行的参数是我们到处的一个代理组件Proxy，后续在在其他组件条用

原创 定时器

原创 防抖和节流

防抖 是让 函数在最后一次执行节流 是固定频率 每个一段时间执行一次常见的就是oninput事件和onscroll事件let inp = document.querySelector('#inp'); let timer = null; inp.oninput = function(){ // 只要input框的内容发生改变 就会触发这个函数 clearTimeout(timer);// 内容每改变一次 都会把上一次形成的定时器给清除； timer = s...

原创 react路由

https://zhufengzhufeng.github.io/zhufengreact/html/React%E8%B7%AF%E7%94%B1.html$ yarn add react-router-domimport{HashRouter,BrowserRouter,Route,Link,NavLink,Switch}from'react-router-dom';ReactDOM.render(<HashRouter><App/></H...

原创 165:事件对象

let $box = $('#box'); box=$box.get(0); //==>$box[0];

原创 164：jquery中事件处理机制

原创 163:DOM0和DOM2事件绑定的区别

性能方面：dom1事件性能比dom2好一些

原创 事件及浏览器常用事件行为

原创 JSONP  原理

JSONP客户端再向服务器发请求（基于script）functionfunc(result){....}<scriptsrc='/api/xxx?callback=func'>====服务器端会接收到func给客户端返回的是"func([数据])"...

原创 React中的组件通信上下文的使用

单向数据流 （深度优先原则）父组件WillMount->父组件render->(子组件WillMount->子组件render->子组件DidMount)->父组件DidMount父组件shouldUpdate->父组件WillUpdate->父组件render->(子组件WillReciveProps->子组件shouldUpdate->子组件WillUpdate->子组件render-...

原创 react jsx

基于vue的脚手架构建一个以webpack为主的工程化的目录@vue/cli"react-app-polyfill":"^1.0.6",处理兼容的create-react-app脚手架$npmicreate-react-app-g$create-react-appxxx或者$npxcreate-react-appxxx【yarn】----------------@vue/cli可以让用户自己创...

原创 复习vue知识点

npmi@vue/cli-g全局安装安装一次vuecreate项目名打包项目npmrunbuildvue指令v-model:组件上使用v-modelv-textinnerTextv-htmlinnerHTMLv-once只渲染一次v-pre有这个指令的元素他本身及后代元素vue在模板编译的时候会直接忽略之一部分，直接应用；能够提高vue...

原创 REM布局以及插件使用

使用rem布局需要在public/index.html模板中写另一种直接使用插件flexible.js用rem布局即可

原创 vue中路由元信息-设置面title

每一次路由切换都要走前置守卫，所以也要设置一下

原创 vue中beforeEach前置导航守卫

原创 js中的继承

现实中的继承大部分都是复制一份在JS语言中，它的继承和其它编程语言还是不太一样的 ，是查找父类的私有的和公有的属性和方法 这种查找方式的继承继承的目的：让子类的实例同时也具备父类中私有的属性和公共的方法在js中的重写，直接修改的父类原型，这样不仅影响其他父类的实例，也影响其他子类的实例这种非拷贝式的，而是查找和指向式的基础，重写会影响很大1.=>原型继承 （让子类的原型等于父类的实例即可）Child.prototype = new Parent;核心：Child.prototype..

原创 合并对象合并数组

合并对象：Object.assign(obj1,obj2,obj3)是把obj2,obj3,...合并到obj1中；返回值是合并后的obj1;合并数组：1.展开运算符 ...2.concat()Object.assign([],[1,2],[3,4]) ==>[3,4]Object.assign合并数组的时候，把数组当对象，属性名重复就覆盖了原有的值--------------------------------------------ES6对象原型...

原创 ES6中的class

functionPerson(){this.name="珠峰";this.age=10;}Person.prototype.constructor===Person;Person.prototype.eat=function(){}Person.prototype.play=function(){}Person.qwer=666;//qwer是Person的静态属性varp=newPerson();//class声明的类只能...

原创 let和var的区别

原创 ES6中新增数组方法

//eval 可以把字符串转为表达式eval(ary.join('+'))回调函数forEach map some every filter reducevar ary = [100,200,300,400];let fn = (item,index)=>{// 回调函数 // item 和 index 都是形参 // item 是数组中的每一项 // index 是每一项对应的索引 console.log(item,index) item = 1000;}ary....

原创 VUE中transition动画使用

/*.fade-enter刚要显示的时候.fade-enter-active整个显示过程的区间.fade-enter-to显示完成.fade-leave刚要消失的时候.fade-leave-active整个消失过程的区间.fade-leave-to消失完成...

原创 VUE中过滤器

全局指令和全局过滤器在任何组件都可以使用局部指令和局部指令只有在当前组件能够使用全局指令语法Vue.filter("money",function(val){ return "￥"+(val/100).toFixed(2)})使用语法：<h2>{{total|money}}</h2>{{item.count*item.price|money}}局部过滤器语法 Vue.component('qqq', { temp.

原创 VUE自定义指令

自定义指令分为 全局指令和局部指令自定义指令对应的回调函数中的this不是当前实例全局指令语法：//我们自己定义了一个全局的指令v-color，模板中只要使用一次v-color这个函数就会执行一次 Vue.directive('color', function (el, obj) { //el 当前使用指令的元素 //obj 存储指令值的一个对象 console.log(arguments); el.style.co..