笔记
永远的净心
刚入门的前端小白。
展开
-
React笔记
React 中有三种构建组件的方式React.createClass()、ES6 class 和无状态函数。react 组件的划分业务组件技术组件根据组件的职责通常把组件分为 UI 组件和容器组件。UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。两者通过 React-Redux 提供 connect 方法联系起来。flux 思想Flux 的最大特点,就是数据的"单向流动"。用户访问 ViewView 发出用户的 ActionDispatcher 收到 Action,要求 Sto原创 2022-02-28 11:13:18 · 533 阅读 · 0 评论 -
vue笔记2
自定义指令钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。原创 2022-02-28 10:49:11 · 368 阅读 · 0 评论 -
vue笔记
vue组件通讯的方式props、emits都在子组件中.父组件向子组件传递数据通过props传递,子组件传递给父组件通过emits都在子组件中.父组件向子组件传递数据通过props传递,子组件传递给父组件通过emits都在子组件中.父组件向子组件传递数据通过props传递,子组件传递给父组件通过emit触发事件子组件:事件源头@click@click="btnClick(item)" methods: { btnClick(item) { this.$emit("itemcl原创 2022-02-28 10:39:43 · 171 阅读 · 0 评论 -
redux笔记
redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据,flux 也是用来进行数据操作的,有四个组成部分 action,dispatch,view,store,工作流程是 view 发出一个 action,派发原创 2022-02-28 10:18:31 · 228 阅读 · 0 评论 -
react 生命周期函数
初始化阶段:getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount:组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后运行中状态:componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新原创 2022-02-28 10:16:36 · 57 阅读 · 0 评论 -
sass和 less
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出一些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Less也是一种动态样式语言. 对CSS赋予了动态原创 2022-02-28 10:12:45 · 216 阅读 · 0 评论 -
jQuery笔记
jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(“p”) 选取 <p> 元素。$(“p.intro”) 选取所有 class=“intro” 的 <p> 元素。$(“p#demo”) 选取所有 id=“demo” 的 <p> 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href=’#’]") 选取所有原创 2022-02-28 09:57:14 · 298 阅读 · 0 评论 -
ES6的笔记
call、apply、bind区别apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向);如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是一个参数数组,call的第二个及其以后的参数都是数组里面的元素.bind()–也是改变函数体内this的指向;bind会创建一个新函数,称为绑定函数,当调用这个函数的时候,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个及以后的参原创 2022-02-28 09:20:52 · 57 阅读 · 0 评论 -
ES6笔记2
1.块级作用域const和letlet表示声明变量,而const表示声明常量,两者都为块级作用域2.模板字符串模板字符串 ${name}3.箭头函数箭头函数:左边是参数集合,右边是函数体箭头函数比普通函数语法更简洁箭头函数没有this,普通函数都有自己的this箭头函数不能使用new箭头函数没有arguments参数,可以通过 …arg获取箭头函数没有原型属性6.箭头函数 不需要function关键字来创建函数 省略return关键字 继承当前上下文的this关键字函数的参原创 2022-02-28 09:20:26 · 292 阅读 · 0 评论 -
函数防抖和节流
函数防抖定义:函数防抖一个频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。场景:防抖经常用在我们搜索框输入搜索,点击提交,防止等.函数节流定义:-函数节流(throttle)是事件被触发后,n秒内只执行一次事件处理函数。场景:-常用于JS动画等频繁触发的事件中,如resize,touchmove,mousemove,scroll等。...原创 2022-02-28 09:21:20 · 74 阅读 · 0 评论 -
数组遍历的几个方法
1、forEach:遍历开始以后无法停止,如果要遍历整个数组,那就使用这个方法;2、map:根据当前数组映射出一个新的数组;3、some:遍历整个数组,返回值true就停止循环(返回false继续循环)返回值:如果数组中的有一项回调函数返回true,那么结果为true,否则为false;(或者这样理解:数组别遍历完,那么结果为false,否则为true)4、every:与some相反,返回false就停止循环(返回true就继续循环)5、filter:过滤数组,返回一个新的数组6、reduce:原创 2022-02-27 19:54:13 · 1976 阅读 · 0 评论 -
ajax笔记
异步加载和延迟加载1.异步加载的方案: 动态插入script标签2.通过ajax去获取js代码,然后通过eval执行3.script标签上添加defer或者async属性4.创建并插入iframe,让它异步执行js5.延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。js延迟加载的方式defer和async、动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)、按需异步载入js...原创 2022-02-27 18:10:00 · 116 阅读 · 0 评论 -
多种跨域方案
• 源(域名):协议 + 域名 + 端口• 同源:相同的协议 && 相同的域名 && 相同的端口• 不同源(跨域):不同的协议 || 不同的域名 || 不同的端口跨域之1 – 服务器中转请求说明:同源策略只针对浏览器(客户端)跨域之2 – 设置基础域名+iframe说明:前提是基础域名必须一致跨域之3 – window.name+iframewindow.name的特点:每个浏览器窗口都有一个全局变量window(包含iframe框架contentWind原创 2022-02-27 18:07:23 · 84 阅读 · 0 评论 -
网络相关笔记
websocket-允许服务器向客户端传递信息,实现服务器和客户端双工通信特点-与http协议有良好的兼容性-建立在TCP协议之上,和http协议同属于应用层-数据格式比较轻量,性能开销小,通信高效-可以发送文本,也可以发送二进制-没有同源限制,可以与任意服务器通信http和websocket的区别-http是短连接,因为请求之后,都会关闭连接,下次请求需要重新打开连接-websocket是长连接,只需要通过一次请求来初始化连接,然后所有连接都是通过TCP连接进行通信HTTP: (原创 2022-02-27 16:37:02 · 56 阅读 · 0 评论 -
事件环 Event Loop
进程一CPU正在进行的一个任务的运行过程的调度单位浏览器是一个多进程的应用程序进程是计算机调度的基本单位任务管理器(mac活动监视器)查看chrome的进程情况每一个tab都会开启一个进程浏览器有一个主进程(用户界面)每一个tab各自有独立的渲染进程(浏览器内核Renderer,渲染引擎)、网络进程(网络请求)、GPU进程(动画与3D绘制)、插件进程(devtool)每个进程里包含了多个线程运行进程包含线程,线程在进程中运行渲染进程GUI渲染线程(渲染页面)JS引擎线程GUI渲染原创 2022-02-27 16:26:07 · 93 阅读 · 0 评论 -
前端笔记:对象2
isNaN<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <scr原创 2020-10-23 11:25:30 · 73 阅读 · 0 评论 -
前端笔记:对象
车属性遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <scr原创 2020-10-23 10:28:09 · 89 阅读 · 0 评论 -
前端对象:两数加和乘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script ty原创 2020-10-23 10:22:33 · 172 阅读 · 0 评论