- 博客(55)
- 收藏
- 关注
RSS订阅原创 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
195
原创 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
255
原创 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
1021
原创 ts---学习类型--- interface篇
interface篇定义：interface:接口，感觉像是自定义类型，因为ts中，会进行类型的强校验，但是除了基本数据类型，引用类型，还可以具体定义某一个对象的属性使用：比如:interface Person{ name:string; age?:string;}这是接口类型，要求此类型必须有name属性，?表示可以有age属性，可以没有age属性。同自定义类型的type的区别如下，type类型可以直接代替某基础类型，但是interface接口不可以，接口一般都代表具体对象类型。ty
2021-01-26 14:06:11
3290
原创 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
88
原创 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
89
原创 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
387
原创 react中生命周期函数
在某一时刻，组件会自动调用执行的函数render都属于生命周期函数mount阶段的生命周期函数update阶段componentWillReveiveProps(){} 这个生命周期函数，如果没有对应的父组件，这个生命周期函数不会执行1.一个组件要从父组件接受了参数2.只要父组件的render函数被执行了，子组件的这个生命周期函数就会执行(如果这个组件第一次存在于父组件中，不会执行；如果这个组件之前已经存在父组件中，才会执行)unmounting阶段componentWillUnmou
2021-01-08 15:58:46
157
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
267
原创 props-state-render函数的关系
props-state-render函数的关系当组件的props或者state被修改的话，render方法就会执行。当父组件的render方法运行时，子组件的render方法也会重新运行
2021-01-08 14:00:50
93
原创 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
337
原创 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
82
原创 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
186
原创 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
91
原创 小程序
小程序中组件化开发说明：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
136
原创 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
708
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
285
原创 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
492
原创 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
166
原创 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
388
原创 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
241
原创 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
318
原创 搞懂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
393
原创 都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
531
原创 **都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
93
原创 闭包引起的面试题
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
131
原创 浏览器篇----本地存储
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
158
原创 浏览器篇---缓存
- 浏览器的缓存机制本篇文章是根据神三元大佬整理的，不为商业，只为自己学习！原文章连接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
114
原创 遍历对象
遍历对象的方式：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
202
原创 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
94
原创 flex
关于flex-shrinkflex-shrink 压缩因子控制items项目如何减小宽度或者高度，当所有项的宽度大于父元素宽度时才有用，如果所有子项的宽度之和小于父元素宽度，即使给flex-shrink设置了数据也会无效。默认值：1 (超出自动压缩)如果某一项设置flex-shrink:0，则此项不压缩。计算权重方式：如果父元素内部有三个子元素，宽度为w1,...
2020-04-14 15:36:53
125
原创 react-组件组合
react中除了一些基本的操作之外，还有一些纯组件，高阶组件，高阶组件链式调用，高阶组件装饰器写法，组合使用组件，等等组合组件，类似于vue中slot最简单的用法，默认插槽import React, { Component } from 'react'function Dialog(props){ return( <div style={{border: `1px so...
2020-02-23 16:06:33
199
原创 19年12月份面试总结
js何为数据持久化？简单理解，就是cookie，localstorage，sessionstorage这些，区别用户输入url到渲染的过程？自行百度浏览器是如何渲染的？结合上一题会一起问。需要了解浏览器的渲染机制。自行百度浏览器的渲染机制 可参考 https://www.jianshu.com/p/05eb1b17b298为什么浏览器会有同...
2020-01-09 17:39:32
96
原创 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
129
原创 粘贴复制
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
183
原创 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
55
原创 vue生命周期
生命周期钩子函数beforeCreate(){ // 第一个周期函数，此时，这个对象身上，只有一些生命周期函数和默认的事件，其他的都未创建,data和methods都都还没有初始化}created(){ // data和methods都已经初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早在这里可以}beforeMount(){ // 模板已经编译...
2019-12-03 20:51:19
72
原创 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
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人