前端 | 易学教程

我的前端学习经验（8）

阅读更多关于我的前端学习经验（8）

前端学习经验（8） CSS 结构伪类选择器 type系列： first-of-type：选择同类型的标签或选择器中第一个元素。父元素>标签或选择器:first-of-type{ 样式表 } 如： <head> <style> .a>div:first-of-type{ font-family: "楷体"; font-size: 30px; color: aqua; } .a>.aa:first-of-type{ font-family: "黑体"; font-size: 50px; color: green; } </style> </head> <body> <div class="a"> <h3>子元素1</h3> <div>子元素2</div> <p>子元素3</p> <span class="aa">子元素4</span> <h3>子元素5</h3> <h3 class="aa">子元素6</h3> <div>子元素7</div> <p>子元素8</p> <h3>子元素9</h3> <div>子元素10</div> <div class="aa">子元素11</div> <p>子元素12</p> </div> </body> first-of-type：选择同类型的标签或选择器中最后一个元素。父元素>标签或选择器:last-of-type{ 样式表 } 如： <head

关于前端的性能优化问题

阅读更多关于关于前端的性能优化问题

1. 减少http请求数合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。 CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。内联图片使用data: URL scheme 把图片数据嵌入页面，但这会增加Html文档的大小。 2. 使用内容分布式网络内容分布式网络（CDN）是一系列分布在不同地域的服务器的集合，能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法，选取为某个用户发送数据的服务器。比如，到达用户最少跳或者最快相应速度的服务器会被选中。 3. 给头部添加一个失效期或者Cache-Control 对于静态组件：把头部的缓存期设为某个遥远的未来，使其能够“永不过期”。对于动态组件：使用适当的Cache-Control头部帮助浏览器执行特定的请求。 4. Gzip压缩组件在HTTP请求的头部中Accept-Encoding指定的压缩格式： ν Accept-Encoding: gzip, deflate ν Content-Encoding: gzip 5. 把样式表放在前面把样式表挪到文档的头部可以让页面的加载显得更快

Web前端优化初探，小弟抛砖引玉，期待高手共破难关！

阅读更多关于 Web前端优化初探，小弟抛砖引玉，期待高手共破难关！

前言其实没想过写前端优化这篇文章来的，因为我自知现在水平达不到这个高度！但是，你知道面试官很烦的，他每次面试非要问你浏览器兼容与前端优化......，所以我又不得不在这两个上面做一定研究。上面几个问题，没一定功力的前端不可能答得好的。对于优化这块东西，我也很多正在摸索，实在觉得现在拿不出手啊！但是时间不等人。比如这段时间参加的一个面试，面试官就非要将我做的页面想象得很卡，而且指定就是前端卡，让我优化，还问我平时会不会注意一些优化的东西。说实话，平时写代码时候，我惊奇的发现一个事实： 1 我会不自主的将css写成一排：#tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; }2 我写js时，两个等号一定要空格：var con = document.getElementById('content'); //不用编辑器我写出来的代码排版也不会差3 在写页面时候我会花10分钟纠结我这里是不是多了一个div...... 通过以上事实，我觉得我已经养成一种规范的“强迫症了”，这里不是要说自己编码多好，而是想说明：很多优化在平时在意或者不在意之间就已经做了，到后面你就不自主认为他不是优化而是必须了，比如： for(var i = 0, len = args.length; i < len; i++) {} 但是

vue项目+element表格前端使用纯js导出word文档

阅读更多关于 vue项目+element表格前端使用纯js导出word文档

详细请读 https://www.jianshu.com/p/0de31429b12a 这篇文章首先安装各种工具： -- 安装 docxtemplater cnpm install docxtemplater pizzip --save -- 安装 jszip-utils cnpm install jszip-utils --save -- 安装 jszip cnpm install jszip --save -- 安装 FileSaver cnpm install file-saver --save 然后在需要的文件中导入新建word文档，将格式排版好，值用{name}的格式填写，放在static目录下。前端html：数据data：方法：效果：来源： CSDN 作者： qq_41588568 链接： https://blog.csdn.net/qq_41588568/article/details/103683660

我的前端学习经验（7）

阅读更多关于我的前端学习经验（7）

前端学习经验（7） CSS 选择器结构伪类选择器结构伪类选择器：减少类选择器和id选择器的定义 child系列： first-child：选择父级元素中的第一个子元素，必须是子元素中的第一个元素父元素>子元素（第一个）标签:first-child{ 样式表 } 如： <head> <style> .a>div:first-child{ color: orange; background: green; width: 30px; height: 30px; } .a5>span:first-child{ font-family: "楷体"; font-size: 50px; } </style> </head> <body> <div class = "a"> <div>子元素1</div> <h1>子元素2</h1> <p>子元素3</p> <span>子元素4</span> <div class = "a5">子元素5 <span>子元素5.1</span> <p>子元素5.2</p> <div>子元素5.3</div> </div> <div>子元素6</div> </div> </body> last-child：选择父级元素中的最后一个子元素，必须是子元素中的最后一个元素父元素>子元素（最后一个）标签:last-child{ 样式表 } 如： <head>

前端正则表达式书写以及常用的方法

阅读更多关于前端正则表达式书写以及常用的方法

前端正则表达式书写一.写法写法一 /正则表达式/修饰符修饰符 /i (忽略大小写) /g (全文查找出现的所有匹配字符) /m (多行查找) /gi(全文查找、忽略大小写) /ig(全文查找、忽略大小写) 例子:/a/gi 查找内容中的a 不写修饰符默认只匹配一个写法二 let a = new RegExp(’/正则表达式/’,‘修饰符’) 二.常用几个方法 1.match 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回的内容 ["匹配到的内容", index: 3, input: "字符串对象", groups: undefined] 如果regexp修饰符为/g则返回对象为一个数组语法： 1. stringObject . match ( str ) 2. stringObject . match ( regexp ) 拿查找字符串abc 中的a举例 'aabc' . match ( 'a' ) 只匹配第一个 'aabc' . match ( /a/ ) 只匹配第一个 2.replace 用于字符串中一些字符替换另一些字符，或替换一个与正则表达式相匹配的子串语法： 1. stringObject . replace ( '查找的第一个字符串' , '修改后的字符串' ) 2. stringObject . replace ( regexp

给HTML、CSS、JS三兄弟排座次

阅读更多关于给HTML、CSS、JS三兄弟排座次

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 每当有小白在前端这个圈子的外围试探，想要进入这个"门槛低收入高"的工种时，老江湖们就会用各种前端框架以及框架配套的技术栈和开发理念把小白们吓个半死，最不济也要用JS里一堆奇门遁甲式的编程妖术恐吓一番，以让新手心存敬畏。相反忽略了作为前端而言，最核心最重要，真正关系生存的HTML和CSS的重要性。这个原因可能跟HTML和CSS本身的特性有关，因为它们严格意义上说不能叫“编程语言”，连基本的if、else、for都没有，所以作为前端哪怕是以“码农”做自嘲，都没有其他语言工种来得有底气，只有JS看前来最像一门“真正的编程语言”，尽管这门语言也是连它的生父都吐槽它，更是长期被“古典程序员”们当作玩具脚本。而集JS使用的大成者，就是各种前端框架。为了证明我们是”真正的程序员“，是写JS的，不知不觉就忽略了HTML+CSS。另外，我也发现一般互联网公司而言，对HTML+CSS完成的页面质量要求也是越来越低了，自己先后跳槽的3个公司，一家比一家名气大，一家比一家工资高，但是就纯粹的html页面而言，无论是页面对设计稿的还原度，还是兼容要求，适配要求，页面体积要求都是越来越低了，相反对JS的使用确实比重越来越大，这样今天的前端的HTML+CSS水平确实可能不如初期，确实更简单，变得不那么重要了。但是即便如此

Web前端开发的框架可以应用到哪些地方

阅读更多关于 Web前端开发的框架可以应用到哪些地方

随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以说是现在非常火热的了。比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。web前端开发的新技术新框架学习可以应用到什么地方 Web-App 　　也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。做好Web-App开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。小程序　　这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法

前端JavaScript书籍阅读

阅读更多关于前端JavaScript书籍阅读

前言：作为一个想从事前端工作，目前还是零基础的菜鸟，我想通过合理学习，让自己成为能有比较全局观念（前端-后端分离，工程化等），又在前端又能熟练掌握并灵活使用技术的前端工程师。下面是我自己看了一些知乎，豆瓣，博客总结出来一些比较好、经典的JavaScript书籍（好书太多，我也是挑了基本看上去比较适合我的），与大家分享。（这也是我接下来要看书单，因为本人现在还没看完，看完了我再分享一下阅读心得，怎么去把这些“厚书”快速读完）目标： 1、熟练掌握JavaScript技术（当然不仅是看书，还是得边看书边Coding，切勿“只看不做”）书籍阅读： 1、JavaScript高级程序设计（Professional JavaScript for Web Developers）　　JS红宝书，虽说高级，里面却是基础中的基础，但是很厚，建议还是老老实实读下去。也有不少读者觉得这个入门前端的话太过于枯燥（鉴于我之前在W3C School网站看完了Web的JS,CSS,HTML知识看再JS书籍的，所以我是想通过红宝书强化记忆），不少读者推荐《你不知道的JavaScript（上卷）》入门JS，比较轻松有趣。 2、ES6标准入门　　JS红宝书可以了解到很多基本概念，其中第六章中，因为 ES6 增加了 class 的概念等，改进很多，第六章可以接着看这个本书的ES6全部。ES6标准比较新