- 博客(28)
- 收藏
- 关注
RSS订阅原创 前端-项目设计相关记录
2、sourcemap的作用js上线时要压缩、混淆线上的js报错信息，将无法识别行、列sourcemapeval-JS在eval(…)中，不生成 sourcemapsource-map-生成单独的 map 文件，并在 JS最后指定eval-source-map，JS在eval(…)中，sourcemap 内嵌inline-source-map-sourcemap 内嵌到JS中cheap-source-map-sourcemap 中只有行信息，没有列3、何时用SPA,何时用MPA?S
2024-04-11 13:57:15
1369
原创 日常函数方法记录
on和once注册函数，存储起来emit时找到对应函数，执行off找到对应函数，从对象中删除events[type] = []//初始化key的fn数组if(!fn){// 解绑所有type的函数}else{// 解绑单个事件==fn)// 注意// once执行一次就要被过滤掉return!isOnce})LRU–Least Recently Used 最近使用如果内存优先，只缓存最近使用的，删除“沉水”数据核心API两个：get set。
2024-04-11 13:56:09
845
原创 vue常见面试题
diff算法很早就有diff算法应用很广泛，例如：github的Pull Request 中的代码diff如果要严格diff两颗树，时间复杂度O(n^3),不可用hash（通过location.hash来实现）WebHistory （通过H5 history API的pushSate()、onpopstate）MemoryHistory(Vue-router4之前叫做 abstract history )
2024-04-10 11:12:13
1776
原创 前端常用的设计模式
设计原则最重要的思想：开发封闭原则对扩展开放对修改封闭工场模式用一个工厂函数，来创建实例，隐藏new如jQuery $函数如Reat createElement函数单例模式全局唯一的实例（无法生成第二个）如Vuex Redux的store如全局唯一的dialog modal代理模式使用者不能直接访问对象，而是访问一个代理层在代理层可以监听get set 做很多事情如ES6 Proxy实现Vue3响应式观察者模式发布订阅模式装饰器模式原功能不变，
2024-03-26 10:22:51
237
原创 vue列表某个属性需要ajax请求后翻译
一开始翻译，打算直接用methods，但是有异步，不能直接return出来，后来发现用命令，直接更改当前值，避免了return。
2024-03-26 10:22:29
167
原创 前端必会的基础知识
Ajax ( Asynchronous Javascript and XML)，一种技术统称Fetch是一个具体原生的apiAxios，是第三方库Fetch：Fetch是浏览器原生api，用于网络请求和XMLHttpRuquest一个级别Fetch语法更简洁，易用，支持promiseAxios：最常用的网络请求lib(随着 Vue火爆起来)内部可用XMLHttpRequest 和 Fetch 来实现Axios，第三方库 https://axios-http.com/
2024-03-21 14:09:24
659
1
原创 HTTP跨域请求时为何发送options请求
跨域请求浏览器同源策略同源策略一般限制Ajax网络请求，不能跨域请求server不会限制静态资源<link><img><script><iframe>加载第三方资源options请求，是跨域请求之前的预检查，检查服务端是不是能满足当前的请求方式浏览器自行发起，无需我们去干预不影响实际功能
2024-03-21 14:08:15
133
1
原创 前端面试常见算法题(二)
如：输入‘abbcccddeeee1234’，计算得到：连续最多的字符是e，4次传统思路：嵌套循环，找出每个字符的连接次数，并记录，看似简单，时间复杂度是O(n^2)真实的时间复杂度是O(n),因为有优化思路：双指针定义指针i和j。j不动，i继续移动如果i和j的值一直相等，则i继续移动直到i和j的值不相等，记录处理，让j追上i。继续上一步正则表达式—效率非常低，慎用累计各个元素的连续长度，最后求最大值，徒增空间复杂度注意：算法题尽量用“低级”代码，慎用语法糖或者高级api。
2024-03-05 13:56:21
608
原创 前端面试常见算法题(一)
传统思路：遍历数组，遇到0则push到数组末尾，通过是splice截取当前元素，时间复杂度为O(n^2)—不可取（splice改变数组导致性能问题）输入[1,0,3,0,11,0],输出[1,3,11,0,0,0]有一个递增的数组[1,2,3,4,7,11,15]和一个n为15。用动态规划来分析问题：要跳到1级台阶，就1种方式f(1) =1。要跳到n级台阶，就f(n) = f(n-1)+f(n-2)嵌套循环，找到一个数，然后去遍历下一个数，求和，判断。要跳到2级台阶，就2种方式f(2) = 2。
2024-03-05 13:55:59
567
原创 简单了解栈、单项链表、队列
js代码执行时，值类型变量，存储在栈，引用型变量，存储在堆。3、堆恰巧是数组形式，根据栈的地址，可以O(1)找到目标。理论模型，不管如何实现，不受任何语言限制。3、整体复杂度都是在O(logn)级别的，即树的高度。2、堆的数据，都是在栈中引用的，不需要从root遍历。4、堆在逻辑结构上是二叉树，在物理结构上是数组。链表是一种物理结构（非逻辑结构），类似于数组。数组需要一段连续的内存区间，而链表是零散的。遇到右括号})]就判断栈顶，匹配则出栈。2、最大堆：父节点>=子节点。3、最小堆：父节点<=子节点。
2024-03-04 10:29:10
505
1
原创 前端性能优化
实现：自定义属性-将图片真实地址 url 存储在自定义属性中，当监听到图片进入可视区域时，将自定义属性值赋值给 img 的 src 属性（利用.getBoundingClientRect实时获取物体的动态位置）原理：监听图片是否位于页面的可视区域内，若在则加载图片，不在则不加载图片。节流：无论拖拽速度多快，都会每隔100ms触发一次（时间可以自定义）直接用keyup事件，则会频发触发change事件。直接用drag事件，则会频发触发，很容易导致卡顿。（图片懒加载，上滑加载更多）4.对DOM查询进行缓存。
2024-01-04 09:35:03
484
1
原创 前端工程师需要关注的页面加载过程
2、 window.onload和DOMContentLoaded的区别。1、从输入url到渲染出页面的整个过程。
2024-01-04 09:34:46
370
1
原创 export模块化简单使用示例
注意：export default导出后，不能用结构赋值引用。第三种:export default。第一种：集合单个导出。第二种：集合一起导出。
2023-12-24 13:15:29
385
原创 乾坤微前端框架如何主应用vue2.0，子应用vue3.0，子应用向父应用传参
第二步：子应用初始化的时候将mount函数中接到的props赋值到app，也就是vue实例上。第三步：子应用中，去调用vue实例上的parentMicro的eidtData方法即可。第一步，在主应用的props赋值microSelfData。
2023-12-24 13:14:25
1050
原创 cookie、localStorage和sessionStorage区别
document.cookie只能覆盖，同一个key是覆盖，不同key可以添加，每次只能添加一个key，只要不清除，怎么刷新赋值一直都会在，所以可以用于本地的存储。cookie localStorage sessionStorage区别。
2023-12-19 09:58:24
346
1
原创 http相关知识整理
Response Headers中，Cache-Control控制强制缓存的逻辑，所以本质上还是服务端控制。例如：Cache-Control:max-age=518400（单位秒）最大过期时间为518400秒。301永久重定向（配合location，浏览器自动处理）（老的网址不用了，可以用这个）no-store：不用本地强制缓存，也不用服务端缓存。no-cache：不用本地强制缓存，到服务端处理。手动刷新:强制缓存失效，协商缓存有效。强制刷新:强制缓存失效，协商缓存失效。5xx服务端错误，如500。
2023-12-19 09:57:36
1541
2
原创 前端工程师必须熟练掌握的ajax
从 fetch() 返回的 Promise 不会因 HTTP 的错误状态而被拒绝，即使响应是 HTTP 404 或 500。相反，它将正常兑现（ok 状态会被设置为 false），并且只有在网络故障或者有任何阻止请求完成时，才拒绝。未经server端允许就实现跨域，说明浏览器有漏洞，危险信号。图片可以直接使用其他地址的图片，除非服务器有防盗链。例如在自己的网站上使用cdn的css库、js库。所有的跨域，都必须经过server端允许和配合。手写结合promise和ajax。手写简单版ajax请求。
2023-12-15 10:33:30
16
原创 前端工程师必须要会的 JS Web API-DOM（附加常见面试题）
4、一次性插入多个DOM节点，考虑性能。3、attr和property的区别。2、DOM操作的常用API。1、DOM是哪些数据结构。
2023-12-13 17:30:19
39
1
原创 前端必须要会的同步异步知识点（包含经典面试题）
异步（setTimeout，ajax，等）使用回调，基于eventloop。宏任务：setTimeout、setIntetval、Ajax、DOM事件。Promise then catch 链式调用，但也是基于回调函数。js还是单线程，还得是有异步，还得是基于event loop。微任务：Promise.then async/await。aysnc/await是同步语法，彻底消灭回调函数。async/await是消灭异步回调的终极武器。DOM事件也使用回调，基于eventloop。of常用语异步的遍历。
2023-12-11 10:58:39
94
原创 前端知识点和面试题整理-作用域和闭包
向上级作用域，一层一层依次寻找，直到找到为止，如果到了全局作用域都没有找到，则报错xx is not defined。自由变量：一个变量在当前作用域没有定义，但被使用了。4.创建10个a标签，点击的时候弹出来的序号。3、实际开发过程中闭包的应用场景，举例说明。看懂上面的写法即可理解底下的代码。含义：某个变量合法的使用范围。经验证 弹出来的都是对应数字。经验证 弹出来的都是10。函数作为返回值被返回。2.手写bind函数。
2023-12-06 09:59:10
25
1
原创 vue的hash和history的
表现形式的区别hash模式 http://music.163.com/#/playlist?id=321900890history模式http://music.163.com/playlist/321900890原理区别hash是基于锚点，以及onhashchange事件history是基于HTML5的History APIhistory.pushState() IE10以后才支持histtory.replaceState()(如果我们要兼容IE9，还是要用hash)his
2023-07-03 10:30:46
42
1
原创 1rem、1em、1vh、1px各自代表的含义
1rem、1em、1vh、1px各自代表的含义rememvh vwpxremrem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素长度单位就是remem子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin 用em的话是相对于改元素的font-sizevh vw全称是Viewport Width和View Height ，视窗的宽度和高度，相当于屏幕的宽度和高度的1%，不过，处理宽度的时候%单位更合适，处理高
2021-06-02 14:23:29
728
原创 vuex的mutations和actions的区别
vuex的mutations和actions的区别相同点不同点相同点mutations和actions都是用来改变Vuex store的状态的不同点mutations提供的回调函数是同步的actions提供的回调函数是异步的，此外actions的方法最终还是通过mutations来实现的修改vuex的状态的mutations的使用方法// mutations的使用方法this.$store.commit(回调函数名,回调函数除第一个外的参数)actions的使用方法// actions
2020-07-15 10:35:43
637
原创 var、let及const区别
var、let及const区别变量提升console.log(a) //undefinedvar a = 1var b； console.log(b);b = 1;上述代码中，输出a了，此时a还未声明，但是我们却可以正常输出这个未被声明的变量，这就是变量提升，提升的仅仅是声明变量的操作不仅声明变量会提升，声明函数也会被提升，并且函数声明优先于变量声明console.log(a)...
2020-03-24 15:21:07
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人