![](https://img-blog.csdnimg.cn/20210311092642145.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 84
总结目前前端的各种技术和流行的技术
枸杞加上
总结->输出->实践->优化
展开
-
CSS布局(1)-Flex布局
一、Flex布局是什么?Flex是Flexible Box的缩写,意味“弹性布局”,通过将元素设定为容器,容器内部所包含的子元素称之为Flex项目,也就是容器成员。任何一个容器都可以指定为Flex布局。容器默认存在flex-wrap两根轴,水平的主轴和垂直的交叉轴,项目默认按照主轴排列,即默认按水平排列。.box { display:flex;}<!--行内元素也可以使用flex布局-->.line{ display:inline-flex;}注意:Flex原创 2022-03-24 18:40:10 · 498 阅读 · 0 评论 -
React-Hooks
什么是Hooks?Hooks是一类特殊的函数,适用于React的函数组件,可以让我们在不编写class的情况下使用state及其他的React特性,比如副作用处理及生命周期等。为什么要Hooks?Hooks主要可以解决以下几类问题:在无需修改组件结构的情况下复用状态逻辑。原来的类组件如果需要封装一段可重用的逻辑,需要使用到高阶组件,不仅增加代码复杂度,同时会增加额外的组件节点。但是采用hooks的话,会更加的简单方便。复杂逻辑分离,针对一些副作用进行了集中的管理,让相关的业务逻辑更加聚合。使得原创 2022-02-25 21:02:28 · 996 阅读 · 0 评论 -
Yarn-包管理工具
介绍代码通过 包(package) (或者称为 模块(module)) 的方式来共享,一个项目可能存在依赖于多个包,而yarn就是factbook推出的一款开源的包管理工具。优点快速:安装的时候会将安装的包创建一个本地缓存,以便下次其他项目安装相同包时直接从缓存读取可靠:通过yarn.lock来维护包的版本,从而保证一个项目在不同的环境重新安装包依赖的时候,保证版本的一致。安全:通过算法校验包的完整性。安装官网安装文档:https://yarn.bootcss.com/docs/原创 2021-08-07 15:56:30 · 461 阅读 · 0 评论 -
Webpack使用(二)——常见配置总结
本文主要总结Webpack的一些常见配置,比如ES6、react、css、图片解析和字体等ES6解析解析ES6需要使用babel-loader来做解析,babel-loader依赖babel,所以也需要单独安装babel和配置babel。安装命令如下:npm i @babel/core @babel/preset-env babel-loader -D //-D 是--save-dev的缩写创建.babelrc配置文件,并配置如下:{ "presets": [ "@babel/pr原创 2021-05-31 09:22:23 · 176 阅读 · 0 评论 -
HTML语义化
编写代码都讲究结构清晰,逻辑明确,便于他人阅读和团队开发,前后端都是如此,但是在过往发展的一段时间里,html很多时候都是各种div嵌套堆砌,css叠加等,这种代码当然难以阅读维护,所以相关组织也在后续推出了一系列语义化的元素标签,方便更好地搭建HMTL的语义结构,这就是HTML语义化的由来。原创 2021-03-18 09:38:41 · 136 阅读 · 0 评论 -
HTML、XHTML、HTML5的发展和区别
参考链接:HTML 30 年进化史原创 2021-03-13 10:32:20 · 365 阅读 · 1 评论 -
深入解析Http请求背后的秘密(下)
前言这边是承接上文深入解析Http请求背后的秘密(上)而写的,主要讲解在一次HTTP请求过程中,我们客户端已经创建好和服务器的连接通道之后,正式发送数据的过程。主要分两步:请求的发送和应答、断开连接。由于篇幅有限,我尽可能抓我们平时都会接触到的内容来做解析,一些不太需要了解的,就简单说明一下了,如果对你有用,记得一键三连哟~一、请求的发送和应答当我们创建好Http的连接时,接下来就是开始真正的发送我们的请求数据了,应用程序将数据发送到协议栈后,协议栈会暂时将数据放到发送缓冲区,等待应用程序的下一段数原创 2021-03-04 14:18:54 · 280 阅读 · 0 评论 -
深入解析Http请求背后的秘密(上)
前言我们用了那么久的浏览器,但是我们知道在输入一个网址到界面响应这背后的到底发生了什么吗?为什么我们输入www.baidu.com,它就知道我们找的是百度的地址呢?我们都知道我们按下回车之后触发的是http请求,但是http请求到底是什么,为什么它就能够请求到我们的数据呢?作为一名程序猿,探索和了解下我们的所处的网络世界,我觉得还是很有必要的。由于篇幅有限,不可能把所有细节都理清楚,因此尽可能抓我们平时都会接触到的内容来做解析,一些不太需要了解的,就简单说明一下了。同时针对每个人获取信息的目的不同,我将原创 2021-02-26 11:19:58 · 392 阅读 · 2 评论 -
JS之字符串方法
所有的字符串方法都会返回新的字符串,而不是改变原串。查找字符串indexOf(src,index)从头开始遍历target字符串,查出匹配src的首次出现的索引(位置),未找到返回-1lastIndexOf(src,index)从末尾开始遍历target字符串,查找匹配src的首次出现的索引(位置),未找到返回-1search(src)和indexOf相同,只不过没有第二个开始位置参数。字符串提取slice(start, end)提取从start开始到end的字符串内容,如果end大于字原创 2021-02-25 21:17:16 · 119 阅读 · 0 评论 -
JS之数组方法
常规方法toString() 把数组转换为数组值(逗号分隔)的字符串。在需要原始值的时候,JS会自动把数组转换为字符串。join(param) 和toString相似,区别在于以param作为分隔符增删改pop() 删除最后一个元素,返回被删除的值push() 在最后增加一个元素,返回新数组的长度shift() 删除首个数组元素,并将后面的元素前移,返回被删除的元素unshift() 在数组的开头添加新元素,整个数组后移,返回新数组长度arr[index] = newValue 数组inde原创 2021-02-25 21:12:29 · 207 阅读 · 0 评论 -
Webpack使用—基础介绍
为什么要使用webpack当前的浏览器要加载一个网页,除了JS之外,还会涉及到很多的依赖包,其中有些是没办法浏览器直接解析的(scss、typescript等),webpack就是支持通过分析项目结构,将所有的依赖模块打包,转化为合适的格式供浏览器使用。webpack是什么webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。什么是静态模块呢?其实是指静态资源所组成的模块,而静态资源包含我们前端常见到的字体、css、icon、图片等,这些都能够被webpack通过依赖关系进行原创 2021-01-27 15:07:22 · 176 阅读 · 0 评论