- 博客(55)
- 收藏
- 关注
原创 js面试题(一)
1.浏览器工作原理?当我们向浏览器中输入一个url时,其实会先经过dns服务器进行dns解析,将域名转化成ip地址,这时会从ip对应的服务器获取到一个index.html,然后浏览器开始解析这个index.html,解析到link标签,就会去服务器加载css文件,解析到script标签,就会加载相对应的js文件。而将这些文件展现成我们看到的这个页面的样子,取决于浏览器内核。浏览器内核webkit为例:包括 webCore和JavaScriptCorewebCore负责解析html、布局,css解析渲染
2022-02-28 22:06:50
199
原创 Vue2.0与vue3.0响应式对比
Vue2.0 响应式原理主要api------Object.defineProperty(需要对数组相关方法进行重写;数组改变length无效;对象不存在的属性不能被拦截)主要时对对象的属性做一些限制,是否可以被访问,被修改,被枚举等等;访问这个属性,会触发get方法修改这个属性,会触发set方法定义了get 方法,若没有return值出去,则访问该属性时,得到的会是undefined需要借助一个中间变量去存贮_value; 不优雅的地方;var ob={ a:1, b:2
2021-03-16 17:07:32
272
原创 ts-学习类型-class
class中声明变量可以有3种类型,public,private,protectedpublic:在类内类外都能访问private: 只能在类内访问,还可以在子类内使用protected:constructor声明constructor的简化方法class Person { // 简化写法 constructor(public name:string){}}子类继承父类时,需要先调用父类的构造函数super(),若父类的构造函数中有需要传递的参数,则必须传递参数class.
2021-01-29 14:58:55
1036
原创 ts---学习类型--- interface篇
interface篇定义:interface:接口,感觉像是自定义类型,因为ts中,会进行类型的强校验,但是除了基本数据类型,引用类型,还可以具体定义某一个对象的属性使用:比如:interface Person{ name:string; age?:string;}这是接口类型,要求此类型必须有name属性,?表示可以有age属性,可以没有age属性。同自定义类型的type的区别如下,type类型可以直接代替某基础类型,但是interface接口不可以,接口一般都代表具体对象类型。ty
2021-01-26 14:06:11
3299
原创 react-redux
下载 npm install react-reduximport React from 'react';import ReactDOM from 'react-dom';// import App from './App'; // 会自动补全。js文件import TodoList from './todoList';import { Provider } from 'react-redux'; // react-redux提供的核心apiimport store from './store.
2021-01-11 16:48:29
106
原创 redux-saga
redux-saga使用dispatch派发action时,同时派发一个action到saga中,就是,saga能监听到action的触发目的:强化redux,帮助处理异步逻辑使用:1, 下载redux-saga2.配置相关信息import {createStore,applyMiddleware,compose} from 'redux';import createSagaMiddleWare from 'redux-saga';import reducer from './reducer
2021-01-11 16:12:44
108
原创 redux-thunk
1.redux-thunk是redux的中间件,是用来丰富redux的功能的,不是react的中间件好处:正常情况下,redux中的actionCreators创建的action值能是对象,但是,使用了redux-thunk后,action的返回值可以函数!!!可以写异步代码下载插件 npm install redux-thunk使用:创建store时使用import {createStore,applyMiddleware,compose} from 'redux';import thun
2021-01-11 15:24:22
393
原创 react中生命周期函数
在某一时刻,组件会自动调用执行的函数render都属于生命周期函数mount阶段的生命周期函数update阶段componentWillReveiveProps(){} 这个生命周期函数,如果没有对应的父组件,这个生命周期函数不会执行1.一个组件要从父组件接受了参数2.只要父组件的render函数被执行了,子组件的这个生命周期函数就会执行(如果这个组件第一次存在于父组件中,不会执行;如果这个组件之前已经存在父组件中,才会执行)unmounting阶段componentWillUnmou
2021-01-08 15:58:46
176
1
原创 react中的虚拟dom
数据-模板-页面自动生成state数据jsx模板数据+模板生成真实dom数据变化数据+模板结合,生成真实dom,替换原始dom##缺陷第一次生成了 完整的dom片段第二次生成了完整的dom片段第二次dom替换第一次dom 耗性能局部改变也要生成完整的dom片段,很耗性能1.state数据2.模板3.数据+模板生成真实dom4数据改变5.数据+模板生成真实的dom,并不直接替换原始的dom6 新的dom与旧dom结构做比对,找出差异7.找出input框发生变化8.只用新的i
2021-01-08 14:22:24
271
原创 props-state-render函数的关系
props-state-render函数的关系当组件的props或者state被修改的话,render方法就会执行。当父组件的render方法运行时,子组件的render方法也会重新运行
2021-01-08 14:00:50
112
原创 propTypes-类型校验
父子组件传值时,可以对传递的数据进行类型的强校验。import PropTypes from 'prop-types'; // 对父组件传递过来的数值进行强校验// 对组件做类型的强校验TodoItem.propTypes={delItemEvent:PropTypes.func,index:PropTypes.number,test:PropTypes.string.isRequired, // 要求父组件必须给子组件传递这个test变量}如果要求test变量必须传递,但是父组件不传递就.
2021-01-08 13:51:00
340
原创 react语法
在jsx中编写注释{/* 注释说明 */}{// 这样也行}在jsx中要写js表达式的话,需要放到{}花括号中react中认为class是一个类,所以写样式的时候,class应该替换成为className在todoList逻辑中,如果输入的是<h1>hello<h1>这样的文本,想让他直接出来大写的hello,而不是<h1>hello<h1>,可以这样做!(<li key={index} dangerouslySetInnerHTML.
2021-01-07 16:31:59
96
原创 react完成todoList
熟悉react语法,完成todoList小逻辑1.immutable这个,state不允许我们自己修改,如果要修改state数据,需要copy副本修改2.this指向问题,绑定事件时,需要指定函数调用时的this3.循环生成列表,使用.map方法4.不想要多余的div标签,可以使用fragment代替import react, { Component, Fragment } from 'react';class TodoList extends Component { constructor
2021-01-07 16:10:57
200
原创 react初探
react起步1.先安装node环境2. npm install create-react-app下载create-react-app 这个node包3.运行 npx create-react-app my-app 命令这三步会创建一个react应用定义组件的方式class App extends React.Component{ render(){ return ( <div> 学习react </div> )
2021-01-07 15:22:24
97
原创 小程序
小程序中组件化开发说明:1.先编写组件2.js文件对应的pages({})变成了component({})3.有对应的properties:{},可以接受外来数据4.关于事件:this.triggerEvent(‘radioChange’,this.data.radioObj),通过this.triggerEvent触发父组件中的方法使用时:1.usingComponents在json文件中,对应的usingComponents中添加组件路径2.在组件中调用。在小程序中调用其他h5页面.
2020-12-08 09:53:26
152
原创 vue3.0初探
1.关于v-model默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。多个v-model,新增了多个v-model的使用场景<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>app.component('user-name', { props: { f
2020-12-01 16:08:51
737
2
原创 webpack-1.1相关入门-(webpack-dev-server mini-css-extract-plugin)
关于抽离css文件的说明1.1 mini-css-extract-plugin requires webpack >= 4.1.0webpack 4.x以前 抽离css文件需要使用extract-text-webpack-plugin 或者 extract-text-webpack-plugin@nextwebpack 5.x 以后,抽离css文件需要使用 mini-css-extract-plugin使用这种抽离css文件的插件,就不需要使用style-loader了,使用style-loa
2020-10-26 17:08:07
306
原创 vuex源码部分--store的构造函数
先贴一下store的构造函数var Vue; // bind on install// Store的构造类除了初始化一些内部变量以外,主要执行了installModule(初始化module)以及resetStoreVM(通过VM使store“响应式”)var Store = function Store (options) { debugger var this$1 = this; if ( options === void 0 ) options = {}; // Auto in
2020-07-07 17:31:56
510
原创 vuex源码解读
简单解读一下,第一次读vuex源码,在vue项目中,main.js通过vue.use(vuex)使用,其实就是把vuex当做一个插件使用了,在vuex中有一个install方法,来看一下这个install方法function install (_Vue) { if (Vue && _Vue === Vue) { if (process.env.NODE_ENV !== 'production') { console.error( '[vuex] al
2020-07-07 16:15:44
186
原创 vue源码调试之数据render过程
这一篇主要是介绍data里面的数据是如何变成了浏览器里面的dom元素?依旧是从vue的构造函数入手到init方法里。只留下了本篇文章介绍的render这条线的代码,别的都舍弃了!渲染这条线,需要从vm.$mount()入手! function initMixin (Vue) { Vue.prototype._init = function (options) { var vm = this; if (vm.$options.el) { vm.$mou
2020-07-06 11:01:11
408
原创 vue2.0源码调试过程记录---主要initState包括data响应式属性等过程
记录一下vue源码调试的过程!只为学习! function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } // 从这里的init开始调试!!!! this._init(options); }只截取了部分源码,把我没有看到的部分暂时先舍去了。上面的i
2020-07-06 10:23:45
244
原创 parse后续篇----ast数据结构的生成
废话不多说,直接上重点!parseHtml中解析template模板字符串,匹配到startTag后,就执行parseStartTag方法,在parseStartTag执行完后,有一个handleStartTag方法,在里面执行了options.start方法,这个里面关于生成ast的逻辑,处理v-for,v-if的逻辑(processFor 等等),都在这个方法里可以找到。var element = createASTElement(tag, attrs, currentParent);按照之前的
2020-06-30 11:06:27
327
原创 搞懂vue源码-parse
上一篇讲解了parse过程中的parseStartTag过程,这篇主要讲解parseText过程!话不多说,直接上代码!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2020-06-30 10:34:57
407
原创 都2020了,你还不懂vue中的complie---parse篇
vue中template模板是如何变成我们认识的dom结构呢?是一个complie过程!complie过程,其实就是拿着template和options生成一个render方法的过程。compile过程的三个核心,parse,optimize,generate,今天主要说一下parse这个过程!parse这个过程是生成ast语法树的过程。具体分析一下!这个过程其实就是用各种正则进行字符串匹配的过程,所以先罗列一下源码中使用到的正则表达式!var dynamicArgAttribute = /^\
2020-06-29 14:47:04
552
原创 **都2020了,你还不会js继承?**
都2020了,你还不会js继承?如何实现js继承,不难不难,看这里!第一种,使用call function Parent1(){ this.name = 'parent1'; } Parent1.prototype.add=function(){ console.log('add'); } function Child1(){ Parent1.call(this); this.type = 'child1' }缺点:只能继承父类构造函数上的特性,原型对象上的继
2020-06-19 10:12:49
96
原创 闭包引起的面试题
for(var i = 1; i <= 5; i ++){ setTimeout(function timer(){ console.log(i) }, 0)}上面的代码一直输入6666666,如何让他按顺序输出1,2,3,4,5,一、立即执行函数表达式for(var i = 1;i <= 5;i++){ (function(j){ setTimeout(function timer(){ console.log(j) }, 0) }
2020-06-18 16:57:15
137
原创 浏览器篇----本地存储
1.cookie2.webStorage(sessionStorage + localStorage)3.indexedDB- cookie1.如何产生的额?最开始是为了解决http无状态的问题,不知道是哪个浏览器发送了请求,cookie本质上就是浏览器中一个很小的文本文件,发送请求时,会携带相同的cookie2.关于cookie2.1 容量小,只有4kb2.2 紧跟域名,不管这个cookie是否被需要2.3 安全缺陷- localStorage与cookie相同点:有域名限制,同一
2020-06-15 16:06:00
163
原创 浏览器篇---缓存
- 浏览器的缓存机制本篇文章是根据神三元大佬整理的,不为商业,只为自己学习!原文章连接https://juejin.im/post/5df5bcea6fb9a016091def69#heading-241.强缓存检查强缓存。1.1 http 1.0 使用Expires字段,值为一个具体的过期时间,但是由于服务器和浏览器时间不一样,可能有误差,故废弃。1.2 http 1.1 使用cache-control 字段,可选的valuepublic:公开的,中间代理服务器和浏览器都
2020-06-15 16:01:34
119
原创 遍历对象
遍历对象的方式:for —in–var object = { name:'rose', age:'23', hobby:'play',}for (const key in object) { console.log(key); console.log(object[key]); }for ----of 结合Object.entrie...
2020-04-20 14:07:38
223
原创 flex-中篇
关于flexflex-grow默认值 0;flex-shrink默认值1flex-grow值为0时,不可扩张,即使还有剩余空间flex-shrink值为0时,不可压缩,即使还有溢出空间测试案例如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2020-04-14 17:28:50
96
原创 flex
关于flex-shrinkflex-shrink 压缩因子控制items项目如何减小宽度或者高度,当所有项的宽度大于父元素宽度时才有用,如果所有子项的宽度之和小于父元素宽度,即使给flex-shrink设置了数据也会无效。默认值:1 (超出自动压缩)如果某一项设置flex-shrink:0,则此项不压缩。计算权重方式:如果父元素内部有三个子元素,宽度为w1,...
2020-04-14 15:36:53
132
原创 react-组件组合
react中除了一些基本的操作之外,还有一些纯组件,高阶组件,高阶组件链式调用,高阶组件装饰器写法,组合使用组件,等等组合组件,类似于vue中slot最简单的用法,默认插槽import React, { Component } from 'react'function Dialog(props){ return( <div style={{border: `1px so...
2020-02-23 16:06:33
203
原创 19年12月份面试总结
js何为数据持久化?简单理解,就是cookie,localstorage,sessionstorage这些,区别用户输入url到渲染的过程?自行百度浏览器是如何渲染的?结合上一题会一起问。需要了解浏览器的渲染机制。自行百度浏览器的渲染机制 可参考 https://www.jianshu.com/p/05eb1b17b298为什么浏览器会有同...
2020-01-09 17:39:32
98
原创 scss
官方文档 https://www.sass.hk/docs/@extend 继承scss中提供了一个单独的选择器.article a{ color:blue; &:hover{ color:red; }}.circle>div{ width: 100px; &>div{ width: 200px; }}.art...
2020-01-05 21:48:47
136
原创 粘贴复制
js实现粘贴到剪贴板的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>copy example</title></head><body><input type="text" place...
2020-01-05 09:13:19
200
原创 promise
class myPromise { constructor(executor) { //1.参数的校验 if (typeof executor !== 'function') { throw new TypeError('is not a function') } this.initValue() this.initBind() t...
2019-12-30 21:24:03
63
原创 vue生命周期
生命周期钩子函数beforeCreate(){ // 第一个周期函数,此时,这个对象身上,只有一些生命周期函数和默认的事件,其他的都未创建,data和methods都都还没有初始化}created(){ // data和methods都已经初始化好了,如果要调用methods中的方法,或者操作data中的数据,最早在这里可以}beforeMount(){ // 模板已经编译...
2019-12-03 20:51:19
76
原创 vue-面试题
文中的链接,均为转载和参考,主要是自己看着方便,侵权删。vue面试题,可以参考https://mp.weixin.qq.com/s/9xBlHltYImi_0liSZKQSNw1.指令:v-text v-html 两者皆会将变量所对应的内容直接替换到标签的innerHtml处v-model 数据的双向绑定,主要是表单元素v-for 列表渲染v-on绑定事件v-bindv-if 则...
2019-12-03 20:47:21
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人