javascript
关注
分享
扫一扫
山顶哥
这个作者很懒，什么都没留下…
展开
-
react-router-dom文档
前言本来体验下react-router的，然后去react-router npm查看，发现了官方的提示如下:这个包为 React Router 提供了核心路由功能，但你可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，您应该安装 react-router-dom。同样，如果您正在编写 React Native 应用程序，则应该安装 react-router-native。这两个都将安装 react-router 作为依赖项也就是说如果想在react项目中添加路由功能，应该使用原创 2021-10-14 09:49:30 · 4625 阅读 · 0 评论 -
react hooks
useState相当于setState的原子方法const [show, setShow] = useState(false);const [age, setAge] = useState(10);useEffect(callback) useEffect((e) => { console.log("userEffect"); return () => { console.log("destory"); } });这个方法很操蛋啊，尤其是第二个参数根据原创 2021-09-29 10:25:20 · 197 阅读 · 0 评论 -
react学习第七天
看视频慢慢学习已经没兴趣了，以后直接开始学习源码吧redux感觉就是个发布订阅啊，会用就行这里附上react项目和redux项目学习资料，如果有不会的，可以拿这两个个项目练一练react练习项目GitHub - newZhaoZilong/testReact: 练习react开发redux练习项https://github.com/newZhaoZilong/testRedux...原创 2021-09-24 15:34:45 · 142 阅读 · 0 评论 -
前端工程化
现在面试有时候会问到工程化问题，所谓工程化，就是在一些问题的上最优解决方法现在做一个大型项目一般遇到的问题有:css管理问题:就是css选择器命名冲突问题怎么解决，就是如何做样式隔离的？方法对于react来说就是css modules,在class里写变量，然后react脚手架自动将变量名转化为唯一的字符串当作class选择器的名字；对于vue来说就是用scoped来解决，原理是同一个组件的所有元素上都添加了一个唯一的属性名，然后通过属性选择器的使用方式隔离样式，这样做是否有性能问题，怎么测试c原创 2021-09-19 19:18:23 · 109 阅读 · 0 评论 -
react学习第五天
使用react脚手架创建react应用react脚手架1.xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模版项目 1.包含了所有需要的配置(语法检查，jsx编译，devServer...) 2.下载好了所有相关依赖 3.可以直接运行一个简单效果2.react提供了一个用于创建react项目的脚手架库:create-react-app3.项目的整体技术架构为: react + webpack + es6 + eslint4.使用...原创 2021-09-19 17:49:41 · 203 阅读 · 0 评论 -
react学习第四天
react组件的生命周期<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>关于react的学习</title></head><body> <!-- 准备好一个容器，用于挂载 --> <div id="root"></div> <!原创 2021-09-14 20:30:52 · 92 阅读 · 0 评论 -
react学习第三天
ref属性，这个地方和vue一模一样是为了避免直接操作dom，就是使用document对象，所以添加了ref形式，如果标签上有ref属性，那么当前dom对象可以在实例的this.refs.name上获取到，name就是之前定义的ref属性值。...原创 2021-09-13 09:28:14 · 85 阅读 · 0 评论 -
react学习第二天
模块:向外提供特定功能的js程序组件:用来实现局部功能效果的代码和资源的集合模块化:当应用的js都已模块来编写的，这个应用就是一个模块化的应用，模块化语法有esmodule和commonjs两种，现在esmodule是趋势，因为esmodule导入的文件必须是字符串并且在编译时就能确定，这样可以根据这个性能做treeshaking优化组件化：当应用是以多组件的方式实现，这个应用就是一个组件化的应用...原创 2021-09-12 09:23:32 · 154 阅读 · 2 评论 -
大厂学习计划
本周计划研究shadow dom 样式隔离方式，听说优于ice，要明白优点是什么研究iframe cookie为什么种植不上，就是简单熟悉一下，月计划研究react项目怎么写，比如组建的封装，跨组件通信方式，单页路由怎么处理，有没有脚手架工具，哪儿个好用，项目结构学习钉钉小程序开发流程，研究钉钉小程序生命周期，页面间通信方式，跳转方式，原生api接口，数据的存储学习qiankun微前端框架，学习微前端源码，明白微前端实现的基本原理...原创 2021-09-10 17:55:29 · 127 阅读 · 0 评论 -
vuedraggable组件详解
vuedraggable内部是用SortableJS做的,vuedraggable只是做了vue组件方面的封装SortableJS原创 2021-08-27 13:35:05 · 1193 阅读 · 0 评论 -
webpack打包原理
webpack构建的bundle.js里有两个比较重要的东西，一个是__webpack_modules__对象，对象的key就是页面路径，值就是页面中的代码，每个module对应当前文件一个是__webpack_require__方法，用于执行module的，执行后会在内部创建一个module对象，并将module.exports初始化为空对象，然后执行module代码,如果module里有对module.exports赋值，则会将之前初始化的空对象覆盖还有一个是__webpack_module原创 2021-08-23 17:35:15 · 190 阅读 · 0 评论 -
未来职业规划
首先学习新公司项目的搭建方法，争取搭建出一套成熟的项目框架，之后可以把这个项目框架作为模版，以后有新项目的时候，直接通过yarn add安装即可，然后可以迅速投入开发框架需要解决的问题1.技术选型一定是vite+vue3+typescript+vuex+vue-router+scss+element2.当文件进行保存操作的时候，自动执行eslint调整代码规范的操作3.常用第三方库使用<script>标签方式引入，这样做的好处是，可以减少打包的时间，并且下载第三方库可以充分利用c原创 2021-08-14 16:06:05 · 99 阅读 · 0 评论 -
关于新公司的项目学习2
### 2. 项目配置 + 使用技术栈 vue 全家桶 + 关闭vue esm 错误提示 (请注意你的代码标准哦!) + 代码格式化 eslint standard标准 [](https://standardjs.com) + 网络请求使用 axios + 本地存储使用 session (钉钉环境).原创 2021-08-10 19:09:49 · 140 阅读 · 0 评论 -
关于新公司项目的学习1
第一天，用svn把项目拉下来，然后使用yarn安装依赖，yarn有啥用，为啥现在很多用yarn的,yarn的优点并行安装，npm是顺序安装，所以yarn的速度会更快，复用缓存包，如果之前已经安装过一个软件包，yarn再次安装时会从缓存中获取自动添加版本锁，yarn.lock类似于package-lock.json项目结构 ├─assets # 静态资源 │ └─img ├─components # 组件库 │ └─glo..原创 2021-08-10 18:48:34 · 124 阅读 · 0 评论 -
vue插槽原理
vue插槽原理之前一直理解的不好，因为之前一直理解错了，首先插槽和作用域插槽是完全不同的东西，要区别对待对于插槽称之为slotlet AppLayout = { template: '<div class="container">' + '<header><slot name="header"></slot></header>' + '<main><slot>默认内容</slot><..原创 2021-08-09 23:43:23 · 942 阅读 · 0 评论 -
如何定制第三方库
重写render函数 render (h) { // 对change 事件进行覆盖 const on = { ...this.$listeners } // 项目默认设置 const { border, stripe, fieldFormats } = this // 引入未覆盖的属性 留作扩展 const props = Object.assign({ border, stripe }, { ...this.$attrs }) // 对获取原创 2021-08-09 17:33:56 · 130 阅读 · 0 评论 -
模板解析(经典面试题)
实现一个简易的模板引擎const template = '嗨，{{ info.name.value }}您好，今天是星期 {{ day.value }}';const data = { info: { name: { value: '张三' } }, day: { value: '三' }};render(template, data); // 嗨，张三您好，今天是星期三实现方式function render(template,原创 2021-08-08 23:47:03 · 272 阅读 · 0 评论 -
js快速排序
let arr = [23, 22, 3, 4, 1, 8, 99, 66, 12];function quickSort(arr,startIdx,endIdx) { if(startIdx >= endIdx)return; let pivotIdx = partition(arr,startIdx,endIdx); quickSort(arr,startIdx,pivotIdx -1); quickSort(arr,pivotIdx + 1,endIdx);.原创 2021-08-06 14:51:41 · 75 阅读 · 0 评论 -
手写apply方法(经典面试题)
思想就是想办法把当前方法添加到传入的对象上原创 2021-08-06 14:49:43 · 92 阅读 · 0 评论 -
手写深拷贝(经典面试题)
//weakMap的key只能是对象，weakMap是弱引用，只要其他对象的引用被删除，垃圾回收机制就会释放该对象占用的内存function deepCopy(value, hash = new WeakMap()) { //如果是正则对象，就创建新的正则对象 if (value instanceof RegExp) return new RegExp(value); //如果是日期对象，就创建新的日期对象 if (value instanceof Date) retur.原创 2021-08-06 11:34:23 · 236 阅读 · 0 评论 -
手写promise(经典面试题)
class SPromise { constructor(executer) { this.state = "pending"; this.value = null; this.reason = null; this.onResolvedList = []; this.onRejectedList = []; let resolve = (value) => { if (t.原创 2021-08-05 16:52:40 · 610 阅读 · 0 评论 -
从输入url到浏览器展示页面的过程(经典前端面试题)
输入url，首先会进行dns查询解析域名获取ip地址优化策略:使用dnf-prefech属性，进行dns预查询tcp连接浏览器发送tcp连接的申请的报文，会携带SYN标志位，seq序号，SYN标志位设为1就说明这是一个申请连接的报文，之后服务器回复ACK标志位，ack序号=seq+1，这样浏览器就可以通过检验ack序号的值判断连接是否成功，ACK标志位为1说明这就是一个确认报文，之后服务器发送申请连接的报文，按理说应该是浏览器向服务器端申请连接，服务器回复确认，然后服务器向浏览器申请连接原创 2021-08-05 13:00:50 · 188 阅读 · 0 评论 -
面试之王(第七次面试)
江苏润和软件聊的还不错原创 2021-08-04 00:15:48 · 94 阅读 · 0 评论 -
面试之王(第六次面试)
电话面试恒生电子股份有限公司面试问题有:了解微前端吗，原理是什么?前端如何进行性能优化vue原理css怎么进行缩放适配h5新特性js箭头函数原理微前端我不会说实话，这里面性能优化我主要说了vue路由懒加载，原理是webpack会把import()方法引入的文件单独打包，然后加上prefetch属性，就是预加载，就是当前页面资源加载完毕才会进行加载，这个功能对单页面应用尤其重要，可以是单页面首次下载资源迅速减少，并且预加载也可以是单页面打开其他页面的时候快速降低之后就是原创 2021-08-03 18:22:04 · 112 阅读 · 0 评论 -
vue一个计算属性如何监听另一个计算属性
一般对vue了解不深的都理解不了这个问题，首先说一下vue的基本知识点:watcher 分为三种，lazy watcher和 user watcher和渲染watcher每一个计算属性都对应一个lazy watcher对象，每一个watch对象的属性都对应一个user watcher对象，每一个组件都对应一个渲染watcher对象每一个data中的属性都对应一个dep对象，dep对象是用来收集watcher和通知watcher更新的，简单来说就是当前属性的watcher管理对象，原创 2021-08-03 16:43:13 · 1141 阅读 · 0 评论 -
面试之王(第五次面试)
电话面试叮叮面试了大概一个小时，主要问题项目碰到的难点，我就说直播间消息爆炸问题，然后性能监控这儿快儿也问了一下，这块儿就是简单说了一下，这个跟项目有关系，说的一般吧，然后是问小程序原理，这个只能简单扯一下，因为小程序源码没什么兴趣看，说了一下，小程序分为逻辑层和视图层两个线程，逻辑层负责执行逻辑，视图层负责渲染视图，setData的时候，会将逻辑层的数据发送到视图层，然后视图层拿到数据执行渲染界面的操作，其实小程序也是用的虚拟dom，这块儿我很熟，但是幸亏没说，之后我说因为逻辑层和视图层分原创 2021-07-30 22:35:11 · 193 阅读 · 0 评论 -
面试之王(第四次面试)
杭州恒泰软件公司的面试下午5点从公司出发，本来想着面试完回公司呢，后面直接面试到8点首先是技术面试问一些优化，没什么亮点跨域问题面试官秀了一把服务器端反向代理解决线上跨域问题，之后在两个问题上栽了，一个是vue的provideinject功能还有一个是vue的组件封装如何动态加载属性，就是比如把饿了吗组件再封装一层，需要把饿了吗组件的功能全部暴露出来，然后再添加一些自定义属性，这个问题遇到过两次，看来需要研究一下了其他的问题比如宏任务，微任务问题，什么时候时候使用$.原创 2021-07-29 21:09:21 · 140 阅读 · 0 评论 -
面试之王(第三次面试)
软通动力信息技术电话测试主要问了四个问题数组去重http响应码css盒子模型css居中问题跨域问题sessionStorage和localStorage的区别数组去重没有回答好，后边发现一个很好的办法Array.from(new Set(arr));利用es6的新的set对象去重最简单http响应码，说几个常见的200正常301永久重定向302临时重定向304协商缓存404请求资源不存在502错误网关...原创 2021-07-28 00:53:47 · 248 阅读 · 0 评论 -
面试之王(第二次面试)
上海易立德信息技术股份有限公司电话面试主要聊了一些项目中遇到的难点我说了两个一个是解决直播间消息爆炸影响页面性能的问题，另一个是原生小程序如何实现vuex，解决小程序页面间通信问题...原创 2021-07-28 00:44:05 · 249 阅读 · 0 评论 -
面试之王(第一次面试深圳云积分)
今天请假去面试了云积分公司，以后还是尽量不要请假去面试，太花钱了跟面试官聊的很好，因为是熟人介绍面试了两个小时，面试的问题记不清了，大概有强制缓存和协商缓存的区别，项目中遇到的困难，我回答的是直播间上下滑动，和直播间消息过多的处理方式，剩下的时间就主要在讨论，装饰器，mock，代码规范，code-review和性能监控这块儿聊了两个小时，挺有意思的一天后进行了复试，是腾讯视频会议，约的是十点，结果hr发的邮件我没找到，最后发现在垃圾箱里，最后调整为下午6点面试主要问题有X原创 2021-07-27 11:12:19 · 410 阅读 · 1 评论