- 博客(62)
- 收藏
- 关注
RSS订阅原创 React开发简书总结
React 简书网开发github地址技术栈whatwayReact创建组件Redux管理数据react-redux方便使用 reduxredux-thunk让store有能力接收函数，用来做异步数据获取与复杂逻辑immutable.js保证 redux 的 state 不被修改react-router路由管理react-loadable实现异步组件，而不是所有代码都打包在一起styled-components模块化 CSS
2020-11-29 02:23:26
514
原创 canvas画板总结
制作Canvas画板画板预览源码地址canvas的使用查mdn文档就可以了下面主要讲的是实现画板的思路，以及我的踩坑记录先不用canvas标签先用div，首先知道用户点了哪里使用console.log调试<div id="canvas"></div>xxx.onClick = (e) => { console.log(e) //e.clientX //e.clientY}在点击的地方出现圆点let div = document.creat
2020-11-29 02:01:09
443
原创 React入门--第四天--useRef/useContext
useRef/useContext先看一个bugimport React from "react";import ReactDOM from "react-dom";const rootElement = document.getElementById("root");function App() { const [n, setN] = React.useState(0); const log = () => setTimeout(() => console.log(`n:
2020-11-15 16:20:08
400
原创 React入门--第四天--useState原理
Hooks原理解析分析useState原理和源码useRef的作用useContext的作用Vue3对比Reactfunction App() { const [n, setN] = React.useState(0); return ( <div className="App"> {n} <button onClick={()=>setN(n+1)}>+1<button> </div>
2020-11-15 15:29:52
1296
原创 React入门--第三天--函数组件
函数组件创建方式没有state怎么办没有生命周期怎么办useState原理创建组件const Hello = (props) => { return <div>{props.message}</div>}const Hello = props => <div>{props.message}</div>function Hello(props) { return <div>{props.message}&
2020-11-14 20:15:20
136
原创 React入门--第三天--Class组件
Class组件创建方式props和state生命周期两种创建Class组件的方式ES5方式（过时）import React from 'react';const A = React.createClass({ render() { return ( <div>hi</div> ) }})export default A由于ES5不支持class，才会有这种方式ES6方式import React from 'reac
2020-11-14 18:46:33
167
原创 React入门--第二天
类组件和函数组件如何使用props和state如何绑定事件props对应Vue中的propsstate对应Vue中的data就目前而言，返回React元素的函数就是组件在Vue里面，一个构造选项就可以表示一个组件函数组件function Welcome(props){ return <h1>hello,{props.name}</h1>}使用方法：<Welcome name="frank"/>类组件class Welcome extend.
2020-11-14 01:42:17
93
原创 React入门--第一天
如何引入React函数的本质–延迟JSX的用法条件判断与循环引入reactCDN：比Vue麻烦许多（要引入react和react-dom）webpack：import…from…React和ReactDOM都是对象React.createElement和ReactDOM.render是函数（两个对象里面的方法）cjs和umd的区别cjs全称CommonJS，是Node.js支持的模块规范umd是统一的模块定义，兼容各种模块规范（和浏览器）理论上优先使用umd，同时支持Nod.
2020-11-12 23:49:47
151
原创 Vue入门--第六天--路由
路由是什么？hash模式，history模式，memory模式路由是什么路由：分发请求这个东西就是路由器什么是路由：分发请求的东西学习路由要从基础的学起，每个框架的路由的原理都一样，只是代码不一样，所以只要把原理搞清楚了，学起来就很快。根据用户的url不同，展示不同的页面hash可以通过window.location.hash可以得到url后面的#n（n是1，2，3…数字）const number = window.location.hash.substr(1)就得到#后面的数字然.
2020-11-12 16:17:36
156
原创 Vue入门--第五天--v-model
Vue表单和v-model官方文档很健全基本用法inputtextareacheckboxradioselectform修饰符.lazy.number.trim<template> <div id="app"> <input v-model="message" placeholder="edit me"/> <p>Message is: {{message}}</p> <p>
2020-11-11 19:44:39
112
原创 Vue入门--第五天--provide/inject
Vue-provide-inject子组件要改变父组件的数据父组件中provide(){ return { themName: this.themName };},data(){ return { themName: "blue", fontSize: "normal" };},上面的provide就把themName提供给别人了，不过themName是字符串，不是对象数组这些提供引用，外面改了是没有用的，因为是提供了复制的字符串。子组件中inje
2020-11-11 16:24:11
284
原创 Vue入门--第五天--mixins
Vue进阶属性mixins-混入简单来说就是复制也是为了减少重复directives的作用是减少DOM操作的重复mixins的作用是减少data,methods,钩子的重复场景：给五个组件添加name和time,在created和destroyed时打出提示，并报出存活时间。方法一：给每个组件添加data和钩子，共五次方法二：或者使用mixins减少重复<template> <div>Child1</div></template>
2020-11-11 15:14:44
82
原创 Vue入门--第五天--指令
Vue进阶属性directives, mixins, extends, provide, inject内置指令v-if,v-for,v-show,v-html自定义指令声明一个全局指令Vue.directive('x',directiveOptions)就可以在任何组件里使用v-x了directiveOptions是选项声明一个局部指令new Vue({ ..., directives: { "x": directiveOptions }})//v-x只能在该实例
2020-11-11 12:55:34
108
原创 Vue入门--第四天--修饰符.sync
指令-Directive什么是指令？以v-开头的就是指令语法：v-指令名:参数=值,如v-on:click=add如果只里面没有特殊字符，则可以不加引号。特殊：有些指令没有参数和值，如v-pre有些指令没有值，如v-on:click.prevent没有特殊字符，可以不加引号修饰符用来修饰指令@click.stop="add"表示阻止事件传播@click.prevent="add"表示阻止默认动作@click.stop.prevent="add"表示阻止两种的意思修饰符有很
2020-11-10 20:11:22
117
原创 Vue入门--第四天--模板的三种写法
Vue的模板语法1.使用Vue完整版，写在HTML里面<div id='xxx'> {{n}} <button @click="add"> +1<button></div>{{n}}会被替换，@click="add"会被监听2.Vue使用完整版，写在选项里<div id="app"></div>new Vue({ template:` <div> {{n}} &
2020-11-10 18:53:45
179
原创 Vue入门--第三天--computed和watch
Vue构造选项-进阶属性今天主要是学以下进阶属性computed 计算属性watch 侦听directives 指令mixin 混入extends 继承provide/inject之前学了options.data除了data变化更新UI，还能做点啥？下面的代码运行在完整版的Vue中computed - 计算属性用途被计算出来的属性就是计算属性new Vue({ data: { user: { email: "[email protected]",
2020-11-09 17:48:59
110
原创 Vue入门--第二天
Vue的数据响应式代理和监听今天深入理解options.data使用的是完整版的Vue做演示先看一段代码const myDate = { n: 0}console.log(myDate)const vm = new Vue({ data: myDate, template: ` <div> {{n}} <button @click="add">+10</button> </div> `,
2020-11-09 14:25:15
447
原创 Vue入门--第一天
构造选项 搞清楚Vue实例const vm = new Vue(options)这个实例更具你的选项（options）得出一个对象vm这个vm就是封装了这个DOM对象，以及对这个DOM对象的所有操作（和jQuery类似）操作有（事件绑定，数据绑定，DOM更新）对象.__proto__ = 其构造函数.prototype任何一个对象的原型 = 其构造函数.prototype所以vm.__proto__ = Vue.prototypeVue.__proto__ = Function.prototy
2020-11-09 00:14:25
1135
2
原创 vue入门--完整版和非完整版
搭建vue项目使用vue/cli来搭建全局安装:yarn global add @vue/cli创建目录: vue create路径选择使用哪些配置进入目录，运行yarn serve开启webpack-dev-serve然后就可以开始查文档学习了。完整版VS非完整版就拿完整版来说，创建了一个目录之后，我们可以先不看App.vue，只看js文件和html文件，在js文件中有这两句代码// import Vue from 'vue' // import App from './App.vu
2020-11-08 15:24:39
123
原创 CSS的两种布局
布局是什么把页面分成一块一块的，上中下，左中右等排列；一图流三种布局floatflexgrid（这里没说到）float步骤子元素加float: left或者float: right父元素加clearfix就是这么简单flex首先让一个元素变成容器然后分为父子关系container: 是父亲items: 是儿子然后我们对于container和items的属性分别做讨论container <style> .container {
2020-11-07 17:41:49
119
原创 对MVC的理解
一、MVC 是什么？M ： model，即数据模型，负责数据相关的任务，包括对数据的增删改查。V ： view，即视图层，即用户能看得到的界面。C ： Controller,即控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图。MVC 并没有一个比较明确的做法，MVC 其实就是将代码变的结构化的一种抽象概念。1.1 Model 数据模型//示例let Model = { data: { 数据源 }, create: { 增加数据 }, delete: { 删除数据 },
2020-10-18 16:33:09
303
原创 理解cookie和session
场景有一个需求让你去实现，当用户登录时，页面就显示你好XXX用户。这时就要从数据库中取数据，然后对比用户信息，再在页面显示内容。这两个需求，目标一还很好实现，目标二就有点大的跨步。怎么获取用户信息呢。当用户登陆后，服务器会发送一个cookie给浏览器，浏览器会保存这个cookie，这个cookie就包括一些信息（从后端把信息写入cookie的），比如用户信息，我们需要的信息都有，我们就能从浏览器保存的cookie中获取信息（每次刷新页面，也不会重新登录，就是因为浏览器保存了cookie）。问题
2020-10-16 14:12:30
76
原创 跨域中CORS和JSONP原理
跨域关键知识同源策略浏览器故意设计的一个限制功能CORS突破浏览器限制的一个方法JSONPIE时代的妥协同源策略什么是同源？源：协议 + 域名 + 端口号如果两个url的协议，域名和端口号完全相同，那么这两个url就是同源。http://www.baidu.com和http://baidu.com是不同源的，因为他们不完全相同同源策略定义如果JS运行在源A中，那么JS就只能获取A中的数据，不能获取源B的数据。就算JS是从源B下载的，运行在A中，也不能读取源B的数据。简单来说，同
2020-10-16 08:44:36
223
原创 理解promise
背景异步，同步和回调，简单来说同步：能直接拿到结果异步：不能直接拿到结果回调：写给别人用的函数（将来调用）如何判断是否是异步函数如果一个函数的返回值处于setTimeoutAJAXaddEventListener中，那么就是异步的。可是到了后来，异步就会有好几个返回值，怎么搞？promise当我们有多个回调函数时，就会有像这样doSomething(function(result) { doSomethingElse(result, function(newResult)
2020-10-15 15:43:30
153
1
原创 服务器端和ajax发送请求
背景AJAX是浏览器的功能浏览器可以发请求，收响应浏览器在window上加了一个XMLHttpRequest函数用这个构造函数可以构造出对象js通过它实现发请求，收响应服务器端发送请求先来康康服务器端发送请求server.js文件中的代码var http = require('http')var fs = require('fs')var url = require('url')var port = process.argv[2]if(!port){ console.lo
2020-10-15 15:02:28
161
原创 jQuery封装DOM
前言在自己封装了一个简单的DOM库之后，发现封装一个库还是不难的。我所理解的jQuery其实很简单，我们操作某个对象，不返回这个对象，返回操作这个对象的对象。jQuery 示例：window.jQuery = function (selectorOrArrayOrTemplate) { let elements; if (typeof selectorOrArrayOrTemplate === "string") { // 传进来的是选择器 elements = docum
2020-10-11 14:37:15
337
原创 DOM封装（自己写一个DOM库）
前言DOM提供的api实在是不好用，各种各样的都有，需要记住的又多，特性不一，还要考虑兼容性问题。在学习DOM原生api的同时，自己封装一套好用的api，即把原生api学会了，又做出一套好用的api；首先是把声明一个dom全局变量，并挂载在window上。dom = window.dom一，增加节点创建节点dom.create(<div>hi</div>)create(string) { const container = document.createElem
2020-10-11 14:04:21
709
原创 DOM 事件模型
一、引入：对于以下代码<div class="爷爷"> <div class="爸爸"> <div class="儿子">文字</div> </div></div>给这三个盒子都添加事件监听问点击文字，算不算点击儿子？点击文字，算不算点击爸爸？点击文字，算不算点击爷爷？都算那么他们的顺序是什么呢。在捕获阶段，爷爷->爸爸->儿子在冒泡阶段，儿子->爸爸->爷爷二、D
2020-10-11 11:55:14
216
1
原创 jQuery的用法
1.jQuery 如何获取元素$('h1').html(); //html()没有参数，表示取出h1的值$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值2.jQuery 的链式操作是怎样的$('div').find('h3').eq(2).html('Hello');分析$('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello');
2020-10-10 19:46:44
179
原创 js数组
数组在js中和在其它语言中是不一样的，至少和c语言是不一样的。在js中，只有7种数据类型，number，bool，string，symbol，undefined，null最后一种是object。数组和函数都是属于object的。在c语言中，数组的下标是数字，但是在js中是不一样的，在js中数组的下标是字符串。表面上可以用数字下标访问，但是其实这个数字下标是字符串。比如array1是一个数组，array1[‘xxx’] = 1；这样array的最后一个的下标就是字符串xxx。根本的原因还是js的数
2020-10-07 15:46:47
227
原创 JS 函数的执行时机
先来看一段代码let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}如果是按照以前学的c语言，是打印出012345但是在js里面，这里是打印出6个6；因为js的执行机制，setTimeout会在最后执行，在最后的时候，i已经变成了6；所以是打印出6个6；那么打印出0，1，2，3，4，5代码该怎么写呢for(let i = 0; i<6; i++){ setT
2020-10-06 13:35:16
138
转载 JS的诞生
JavaScript诞生1995年4月，BrendanEich（布兰登·艾奇） 加入网景公司。Brenden原本研究方向是函数式编程与Scheme语言。但是1995年5月，网景公司指定Brenden成为了“新语言”的设计师。并且要求这个“新语言”要和Java足够的相似（面向对象思想），但是要比Java能够更加简单地上手。 Brenden志不在此，而且对Java完全不感兴趣，为了完成任务他花了10天时间便把这门“新语言”的最初版本设计了出来。总的来说他的设计思路是这样的：（1）借鉴C语言的基本语法；
2020-10-04 16:46:22
86
1
原创 JS 的基本语法
什么是表达式和语句表达式：1+2表达式的值是3语句： var a = 1；是语句区别表达式一般有值，语句一般没有值语句一般会改变环境（赋值）标识符的规则第一个字符是以_或者&或者英文或者中文开头if else 语句while for 语句break continue这些语法和c语言差不多，这里就不多做记录了label{ foo: 1 }这是代码块（label）不是对象；...
2020-10-04 16:38:01
66
原创 JS 对象基本用法
声明对象的两种语法let obj = { 'name': 'frank', 'age': 18 }let obj = new Object({'name': 'frank'})如何删除对象的属性delete obj.xxx或 delete obj['xxx']即可删除 obj 的 xxx 属性区分「属性值为 undefined」和「不含属性名」不含属性名'xxx' in obj === false含有属性名，但是值为 undefined'xxx' in obj && o
2020-10-04 16:24:01
132
原创 CSS 知识总结
浏览器渲染原理两种方式做动画transitiontransform位移：translate缩放：scale旋转：rotate倾斜：skewtransition做过渡transition：属性名 时长 过渡方式 延迟animation做动画这只是简单罗列一下基本的属性，平时给自己做的总结，mdn上都查得到。图片出自于 饥人谷...
2020-10-03 22:37:02
67
原创 关闭vscode保存就自动格式化的功能
被这个问题困扰好久了，我的代码明明好好的，保存的时候就自动格式化。然后格式就错了。保存就出现这样的问题。在—文件—首选项----设置----搜索“保存”或者“格式化”----用户区中截图最下面----在settings.json中编辑把光标的一行的true改为false把这个文件保存后，再去保存其他的文件，就不会出现这样的问题了。因为学习断断续续的，遇到过几次这样的问题了。就很烦。。。...
2020-09-19 19:34:12
18471
13
原创 ES6内置对象扩展
Array的扩展扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3 console.log(1, 2, 3)扩展运算符可以应用于合并数组。// 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.pu
2020-08-16 00:06:25
135
原创 ES6的新增语法
let没有变量提升有块级作用域const具有块级作用域没有变量提升常量声明时必须赋值常量赋值后，不能修改作用：声明常量，常量就是值（内存地址）不能变化的量。<body> <script type="text/javascript"> /* let关键字就是用来声明变量的 使用let关键字声明的变量具有块级作用域 在一个大括号中 使用let关键字声明的变量才具有块级作用域 //var关键字是不具备这个特点的 防止循
2020-08-15 01:52:32
127
原创 JS正则表达式
JS当初被创建的时候时被用来做表单验证的，正则表达式就是专门做这个的。对用户输入的信息做校验，不合格的信息就不发给后端。匹配替换提取创建正则表达式正则表达式也是对象通过调用 RegExp 对象的构造函数创建var 变量名 = new RegExp(/表达式/);通过字面量创建var 变量名 = /表达式/;检测正则表达式regexObj.test(str)regexObj是正则表达式str是要被检测的字符串返回一个布尔值true或者false符号<script&
2020-08-15 00:35:44
90
原创 JavaScript函数进阶
用这个标题可能不太好，不是包含所有的函数进阶的知识，只是我最近学的部分做一个总结。函数声明函数声明方式 function 关键字 (命名函数)函数表达式 (匿名函数)new Function() 用的比较少，效率较低。函数中this指向一般指向我们的调用者，改变函数中this的三种方法call，apply，bind。fun.call(thisArg, arg1, arg2, ...)fun.apply(thisArg, [argsArray])fun.bind(thisAr
2020-08-14 16:50:04
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人