前端
逆光-mazewei
这个作者很懒,什么都没留下…
展开
-
Webpack 缓存优化
webpack之optimization.runtimeChunk作用runtimeChunk 是运行时的chunk文件,比如异步执行的代码:如果主文件引入这样的文件的话 每次改变引入文件的内容,生成的主文件哈希值都会变化,这时候就需要使用runtimeChunk将包含chunks映射关系的list单独从主文件总提取出来的, 不提取出来的话app每次都会改变值,重新缓存数据。非常耗时配置runtimeChunk但是这样也有一个问题 每次加载runtime的时间比执行该脚本的时间还要长,所以我们需要将其原创 2022-07-15 14:37:08 · 652 阅读 · 0 评论 -
JavaScript中 原型链继承的问题
原型链继承是JS中实现继承的方法之一,但是它有两大问题1 在原型中包含的引用值会在所有实例之间共享,function SuperType(){ this.color = ["red", "blue", "green"];}function SubType(){}SubType.prototype = new SuperType();let instance1 = new SubType();instance.color.append("black");console.log(insta原创 2022-05-28 16:08:34 · 180 阅读 · 0 评论 -
CSS 与 JS 是这样阻塞 DOM 解析和渲染的
添加链接描述原创 2022-05-21 17:52:26 · 191 阅读 · 0 评论 -
React文档 学习记录
高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体而言,高阶组件是参数为组件,返回值为新组件的函数。组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。class CommentList extends React.Component { constructor(props) { super(props); this.handle原创 2022-04-29 22:47:56 · 369 阅读 · 0 评论 -
CSS响应式布局
**根据游览网页设备(pc, phone, pad, print, tv)的不同,而自动的改变布局,图片文字效果,不会影响用户的游览体验**响应式网页必须做到下面几件事布局,不能固定元素的宽度,必须是流式布局(默认文档+浮动)文字和图片大小随着容器的大小而改变 rem使用css3提供的媒体查询功能 相应网页依靠的是媒体查询技术,媒体查询技术会导致css代码量几何性的增加。复杂页面不适合响应式编写响应式网页1移动端的适配在meta中设置视口<meta name="viewpoi原创 2022-04-29 22:44:50 · 209 阅读 · 0 评论 -
React18中类似redux的 context
// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。// 为当前的 theme 创建一个 context(“light”为默认值)。const ThemeContext = React.createContext('light');class App extends React.Component { render() { // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。 // 无论多深,任何组件都能读取这个值。原创 2022-04-24 11:34:52 · 175 阅读 · 0 评论 -
react router component与render有什么区别?
添加链接描述原创 2022-04-11 22:24:14 · 376 阅读 · 0 评论 -
javascript中 this的指向
添加链接描述原创 2022-04-09 09:34:49 · 807 阅读 · 0 评论 -
CommonJs和ES6 module的区别
CommonJS 是一种模块规范,最初被应用于 Nodejs,成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范,在 ES6 出来之前,前端也实现了一套相同的模块规范 (例如: AMD),用来对前端模块进行管理。自 ES6 起,引入了一套新的 ES6 Module 规范,在语言标准的层面上实现了模块功能,而且实现得相当简单,有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好,我们平时在 Webpack 中使用的 export原创 2022-04-04 15:14:15 · 694 阅读 · 0 评论 -
CSS中的权重计算
内联样式,如: style=“…”,权值为1000。ID选择器,如:#content,权值为0100。类,伪类、属性选择器,如.content,权值为0010。类型选择器、伪元素选择器,如div p,权值为0001。通配符、子选择器、相邻选择器等。如* > +,权值为0000。继承的样式没有权值...原创 2022-04-02 21:58:40 · 122 阅读 · 0 评论 -
URL 中 fragmemt的使用
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]fragment主要资源是由 URI 进行标识,URI 中的 fragment 用来标识次级资源。我理解看来,fragment 主要是用来标识 URI 所标识资源里的某个资源。在 URI 的末尾通过 hash mark(#)作为 fragment 的开头,其中 # 不属于 fragment 的值。javascript https://domain/index#L18这个原创 2022-04-01 17:08:51 · 955 阅读 · 0 评论 -
javascript中Object对象常用方法学习
1 Object.assign将来自一个或者多个源对象的值复制到另外一个目标对象。Object.assign(target,...sources);//其中将sources中的对象复制到target中 同名的将会覆盖此函数返回目标对象。仅可枚举自有属性从源对象复制到目标对象。可使用此函数合并或克隆对象。只拷贝对象自身的可枚举的属性const returnObject = Object.assign(target, ...sources);console.log(returnObject===原创 2022-03-31 13:47:56 · 418 阅读 · 0 评论 -
JS中执行机制
/* 结果是: //"马上执行for循环啦" //"代码执行结束" //"执行then函数啦" //"定时器开始啦"*/setTimeout(function(){ console.log('定时器开始啦')}); new Promise(function(resolve){ console.log('马上执行for循环啦'); for(var i = 0; i < 10000; i++){原创 2022-04-01 16:45:20 · 134 阅读 · 0 评论 -
js中getElementBy系列和querySelectorAll的对比
querySelectorAll比getElementBy系列速度慢因为querySelectorAll返回一个静态的NodeList(深克隆)getElementBy系列返回一个动态的实时变化的NodeList(HTMLCollection)(浅克隆,每次都返回一个指针)所以querySelectorAll会降低性能什么叫静态的?意思是指选出的所有元素的数组,不会随着文档操作而改变。用querySelector操作元素示例如下:HTML代码:<ul> <l原创 2022-03-31 23:02:24 · 408 阅读 · 0 评论 -
JavaScript中大量拼接字符串的方法
由于js中字符串的不可变性 使得我们在使用+=拼接字符串的时候会占用很大的空间,容易造成卡死情况接下来是解决方法<script>//如果我们大量使用+=进行字符串拼接的话,将会使界面失去响应(卡死状态)//高效拼接字符串var StringBuilder=function(){ this.data=[];}StringBuilder.prototype.append=function(){ this.data[this.data.length]=arguments[0原创 2022-03-31 16:06:27 · 717 阅读 · 0 评论