前端小白的博客

转载 Flex弹性盒模型详解

Flexbox叫弹性盒模型，它的使用场景主要是屏幕自适应布局和取代浮动布局。细节性的知识需要大量实践，系统性的知识则需要真正理解系统。我认为Flexbox就属于系统性的知识。所以这篇文章从概念入手，力求做到只要阅读一遍，就可以让开发者心中有乾坤。一维布局模型你他妈可能是三体看多了吧，啥叫一维布局模型？一维布局模型，简单讲就是，在主轴方向确定的情况下，只有行，没有列。我们熟悉的二...

转载 单页应用（SPA）和多页应用（MPA）的区别？

单页面的优点：1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小2，前后端分离，后端的接口代码可以在不同端使用，节省了后端的成本。3，页面效果会比较炫酷（比如切换页面内容时的专场动画）单页面缺点：1，不利于seo（可以做一些静态页）2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己...

原创 git的commit的注释前缀

git的commit的注释前缀feat：新功能（feature）fix：修补bugdocs：文档（documentation）style： 格式（不影响代码运行的变动）refactor：重构（即不是新增功能，也不是修改bug的代码变动）test：增加测试chore：构建过程或辅助工具的变动...

原创 JavaScript 将数组中具有相同值的对象 取出组成新的数组

var arr=[{name:2,id:3},{name:2,id:4},{name:3,id:5},{name:3,id:6},{name:1,id:1},{name:1,id:2}]; // 传入一个数组// 按照特定方式格式化function sortArr(arr, str) { var _arr = [], _t = [], // 临时的...

原创 小程序封装request方法

封装一个成本低，效率快，简单又简洁的方法在公共的js文件中：function commonAjax(url, types, data) { //这里的tpyes个人根据项目情况来定，也可以完全区分开 wx.showLoading({ title: '加载中...', }) // 获取公共配置 var app = getApp() // 公共参数（一般写接口的...

原创 git强制线上覆盖本地

git强制覆盖：git fetch --allgit reset --hard origin/mastergit pullgit强制覆盖本地命令（单条执行）：git fetch --all &&git reset --hard origin/master &&git pull...

原创 前端现状

参加技术评审，合不合理，怎么做，听后端说就行了，有时候一个需求后端与后端、后端与产品讨论花费一半的时间为什么还要前端参与，因为要你来做事。技术评审你可以讨论该不该展示，怎么展示的问题，怎么做的问题还是算了吧，重逻辑在后端偶尔和产品撕一撕某个按钮应该放在哪里等问题，现在不撕了，倾向于妥协需求下来后定个排期，后端5天，前端4天吧，可能一天就做完了，但太快也不好，多点自己的时间有了接口文...

转载 手动搭建 webpack + react 框架

转自：https://blog.csdn.net/qq_35771567/article/details/83588854准备创建空项目文件夹。建议安装cnpm，下文所有npm可以用cnpm代替npm install -g cnpm --registry=https://registry.npm.taobao.org初始化 npm 环境npm init一路回车...

原创 微信小程序手机FormId

直接上图，关键点，report-submit属性一定要加上JS文件中代码：formSubmit:function(e){ // 监听提交事件，获取e.detail console.log(e.detail);}图例展示：（小程序模拟器上给的是假的formid）html:<form report-submit='true' bindsubmit='...

原创 VS Code 自动补全css前缀插件

vscode扩展中搜索：Autoprefixer 然后在css页面，ctrl+shift+p，选择autoprefixer，就可以自动全部添加好了

原创 javascript的诞生

JavaScript因为互联网而生，紧随着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史讲起。1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非...

转载 正则表达式中?=和?:和?!的理解

要理解?=和?!，首先需要理解前瞻，后顾，负前瞻，负后顾四个概念：前瞻：exp1(?=exp2) 查找exp2前面的exp1后顾：(?<=exp2)exp1 查找exp2后面的exp1负前瞻：exp1(?!exp2) 查找后面不是exp2的exp1负后顾：(?<!=exp2)exp1 查找前面不是exp2的exp1举例："中国人".replace(/(?&...

原创 深入理解JavaScript作用域和作用域链

前言JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！作用域(Scope)1.什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先...

原创 深入理解JavaScript执行上下文和执行栈

前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。本文尽可能用通俗易懂的方式来介绍这些概念。一、执行...

原创 一文读懂HTTP/2 及 HTTP/3特性

前言HTTP/2 相比于 HTTP/1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。一、HTTP协议HTTP协议是HyperText T...

转载 TCP和UDP比较

引言网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP，本文将介绍下这两者以及它们之间的区别。一、TCP/IP 网络模型计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信，所有的这一切都...

原创 2018年年底PC浏览器使用率

原创 iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax屏幕适配尺寸@media

原创 解决IE8及以下不支持getElementsByClassName的bug

原因：在DOM3里已经加入了getElementsByClassName这个方法，然而IE9、10以外的其它版本均不支持。第一种方法：改为getElementById获取（好吧，相当于没说，哈哈哈）第二种方法：将原生getElementsByClassName进行修改，加个判断，如果不支持用自己写的if(!document.getElementsByClassName){...

转载 JQuery播放暂停HTML视频

本文档原始链接：http://blog.okbase.net/jquery2000/archive/4485.html；我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。我的代码是这样的：123$('#play