LearningRecord
LearningRecord copied to clipboard
Rashomon511
学习资料汇总、阅读记录，持续学习,每天进步一点点.🏫🏫
- define-plugin：定义环境变量 - clean-webpack-plugin：清除文件 - html-webpack-plugin: 用于编译 Webpack 项目中的 html 类型的文件 - mini-css-extract-plugin：提取css文件到单独的文件 - optimize-css-assets-webpack-plugin： 配置在「plugins」中，webpack就会在启动时使用这个插件。 而配置在 「optimization.minimizer」 中，就只会在「optimization.minimize」这个特性开启时使用 - ugliys-webpack-plugin:压缩js丑化js代码 - terser-webpack-plugin： uglify不支持es6，且uglify-es不再更新，我们选择terser作为js代码压缩工具
git merge - 记录下合并动作 很多时候这种合并动作是垃圾信息 - 不会修改原 commit ID - 冲突只解决一次 - 分支看着不大整洁，但是能看出合并的先后顺序 - 记录了真实的 commit 情况，包括每个分支的详情 git rebase - 改变当前分支 branch out 的位置 - 得到更简洁的项目历史 - 每个 commit 都需要解决冲突...
1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数 2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译 3. 确定入口：根据配置中的 entry 找出所有的入口文件 4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理 5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会 7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统 >...
思路：利用对象属性值的唯一性 ```javascript var arr = [0,1, 1,0,3,12, 12, 3, 1,2, 3, 3, 3] const getNum = (arr) => { let obj = {} for(let i = 0; i < arr.length...
retina 是苹果推出的新型屏幕，由4个原像素点去描述一个新像素点（即压缩了2倍），且存在0.5个像素点这样的描述，所以需要兼容。 当一个图像在标准设备下全屏显示时，一位图像素对应的就是一设备像素，导致一个完全保真的显示，因为一个位置像素不能进一步分裂。而当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。 解决方法就是通过制作两种不同的图形，一张是普通屏幕的图片，另外一种是Retina屏幕的图形，而且Retina屏幕下的图片是普通屏幕的两倍像素 - 直接加载2倍大小的图片 ```javascript $(document).ready(function () { if (window.devicePixelRatio > 1) { var images = $("img.pic"); images.each(function(i) { var x1 = $(this).attr('src'); var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");...
 ```javascript let iterator = (ar) => { let m = ar.length; let n = ar[0].length; for(let i = 0,j = n;i !== j;i++,j--,m--) { for(let i2=i;i2i;i5--) { console.log(ar[i5][i]) }...
```javascript // 构造函数支持传入 URL 参数串 searchParams = new URLSearchParams("foo=1&bar=2") // 构造函数也支持传入一个包含参数键值对的对象 searchParams = new URLSearchParams({foo: "1", bar: "2"}) // 实例支持 get()、set()、has()、append() 四个方法 console.log(searchParams.get("foo")) // "1" searchParams.set("foo", "10") console.log(searchParams.has("bar")) // true...
函数签名： function findPrototypeByProperty(obj, propertyName){ // 请实现函数体 } 使用举例： const foo = {a: 1} const bar = Object.create(foo) bar.b = 2 const baz = Object.create(bar) baz.c = 3 console.log(findPrototypeByProperty(baz, "c") ===...
常见的几种布局： 文档流布局，浮动布局，定位布局，flex布局 html: ```javascript box ``` 水平居中： ```javascript .child{ width:200px; margin:0 auto; } ``` 垂直水平居中： 一：绝对定位 1. ```javascript .parent { position: relative; } .child { width: 200px; height: 200px; position:...
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上. 元素设置浮动后 display值自动变成了block。 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 清除浮动方法： 1. 父级div定义height； 2. 父级div 也一起浮动； 3. 常规的使用一个class； ```javascript .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom:...