随笔分类 - Web技术
摘要：使用pnpm的目的是节约磁盘空间并提升安装速度。 pnpm代表performant npm（高性能的npm），同npm和Yarn，都属于Javascript包管理安装工具，它较npm和Yarn在性能上得到很大提升，被称为快速的，节省磁盘空间的包管理工具。 当使用 npm 或 Yarn 时，如果你有
阅读全文
摘要：使用device-aspect-ratio，宽高比最方便 /* iPhone6/7/8 */ @media (device-aspect-ratio: 375/667) { /* 自定义提示点 */ .radius { display: flex; } } /* iPhone6/7/8 Plus*/
阅读全文
摘要：因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。 该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 根据上述介绍可以理解为默认 1 为开启收缩 所以可以将display:flex;下的子元素的flex属性设置为flex
阅读全文
摘要：.image_zone_touch { box-sizing: border-box; position: absolute; width: 16vw; height: 16vw; background-color: transparent; border-radius: 50%; animatio
阅读全文
摘要：<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } .a {width: 100px;} 正常两栏布局，但如果b得子元素太宽，会撑开b，
阅读全文
摘要：随着公司业务的膨胀，处理业务的系统数量也跟着膨胀，运营人员处理一单业务需要在各个系统之间来回穿梭。 为了使运营人员在一个系统里可以完成所有操作，技术人员必须给出解决方案。 其实 iframe 在 “微前端” 这个概念被喊出来之前一直是整合系统的利器，但它有些不理想的地方具体原因戳这里 why not
阅读全文
摘要：order是设置在items里面的属性,具体作用是可以决定本身的排列先后顺序, <style> .test{ height: 400px; width: 400px; background-color: #f00; /* 开启flex布局 */ display: inline-flex; } .bo
阅读全文
摘要：Solution 1： 给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数 .con{ width:200px; height:200px; background:#ccc; position:relative; } .abs{ width:4
阅读全文
摘要：在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。 所以，浏览器在解析 HTML 文档时，会把每个标签抽象成代码里的对象，按照这种层次分明的结构组织，这就是 DOM。如下图所示为数据结构
阅读全文
摘要：<select id="citySel" class="select" onchange="func()> <option value="">请选择城市</option> <option value="sh">上海</option> <option value="bj">北京</option> <o
阅读全文
摘要：两个浏览器窗口间通信 WebSocket 这个没有太多解释，WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。当然是有代价的，需要服务器来支持。 js语言，现在比较成熟稳定当然是 socket.io和ws. 也还有轻量级的ClusterWS。 你可以在Th
阅读全文
摘要：1. 两个标签的嵌套： <div class="element1"> <div class="child1"></div> </div> .element1{ width: 200px; height: 200px; background-color: lightpink; border-radiu
阅读全文
摘要：大家好，由于最近从事的是微信公众号和APP内嵌 H5开发，避免不了开发一些和native相同的操作功能，就如接下来说的 仿IOS滚轮选择器。github源码链接 https://github.com/zhangKunUserGit/vue-component大家可以下载运行 先来个截图： 先来屡一下
阅读全文
摘要：一、前言 - webpack热更新 Hot Module Replacement，简称HMR，无需完全刷新整个页面的同时，更新模块。HMR的好处，在日常开发工作中体会颇深：节省宝贵的开发时间、提升开发体验。 刷新我们一般分为两种： 一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.lo
阅读全文
摘要：前言 Express和Koa是目前最主流的基于node的web开发框架，他们的开发者是同一班人马。貌似现在Koa更加流行，但是仍然有大量的项目在使用Express，所以我想通过这篇文章说说Express中间件的原理。 中间件的功能和分类 中间件的本质就是一个函数，在收到请求和返回相应的过程中做一些我
阅读全文
摘要：webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。 webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。 webpack原理 在深入实战前先要知道webpack的运行原理
阅读全文
摘要：我们知道vue可以快速开发web单页应用，而且官方为我们提供了自己的应用脚手架vue-cli，我们只需要下载脚手架，安装依赖后就可以启动vue应用雏形。 这得益与webpack的依赖追踪，各种资源后缀的loader，以及相关webpack插件的强大功能。 然而有些时候，我们有多页面的开发需求，在这种
阅读全文
摘要：本文主要涉及三种跨域方法：JSONP、CORS、postMessage。 Q：为什么会出现跨域问题？ A：出于浏览器的同源策略限制，浏览器会拒绝跨域请求。 *注：严格的说，浏览器并不是拒绝所有的跨域请求，实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的： 通常浏览器允许进行跨域写操作（C
阅读全文
摘要：一、HTTP一共有八种常见请求方法 get：参数在url上，浏览器长度有限制，不安全 post：参数不可见，长度不受限制 put：上传最新内容到指定位置 delete：删除请求的url所表示的资源 head：不返回相应主体，主要用于客户端查看服务器性能 options：与head类似，是客户端用于查
阅读全文
摘要：类别原因短语 1XX Informational(信息性状态码) 接收的请求正在处理 2XX Success(成功状态码) 请求正在处理完毕 3XX Redirection(重定向状态码) 需要进行附加操作以完成请求 4XX Client Error(客户端错误状态码) 客户端错误，请求包含语法错误
阅读全文