前端开发 | 易学教程

传统的DOM是如何进行渲染的

阅读更多关于传统的DOM是如何进行渲染的

在这篇文章里，DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。在Chrome中，这个渲染好的DOM，就是在开发者工具中元素这个tab中，递归的展开之后得到的整个文档。 DOM渲染的演化过程，大致可以分为可以分为三个阶段：纯后端渲染纯前端渲染服务端的js渲染结合前端渲染下面我们分阶段来做一下说明。第一个阶段是纯后端渲染。采用这样的渲染方式，就是每一个页面中，在Chrome中展开得到的DOM，和服务器返回的DOM是基本一致的（可以通过查看网页源代码来得到服务器返回的DOM）。当然，这里是“基本”一致，因为实际操作中，页面或多或少还是会带有一些js代码，并且在浏览器端中运行这些js代码来对DOM进行的渲染，不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，并转换成一个字节流作为HTTP Response的body返回给浏览器。这种渲染的逻辑如下图所示纯后端的渲染的整体的结构是最简单的，把全部的逻辑都交给后端来完成。这样的优点在于返回的HTTP Response是包含着全部页面内容的，相对来说页面的主体DOM结构都会在这个响应中返回，可以让用户更快的看到页面的主体部分，而这样的响应对于浏览器爬虫来说也更有好，对SEO更有帮助

聊聊Vue.js组件间通信的几种姿势

阅读更多关于聊聊Vue.js组件间通信的几种姿势

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址： https://github.com/answershuto/learnVue 。在学习过程中，为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ，希望可以对其他想学习Vue源码的小伙伴有所帮助。可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 <br /> <br /> Vue组件间通信父组件向子组件通信方法一：props 使用 props ，父组件可以使用props向子组件传递数据。父组件vue模板father.vue <template> <child :msg="message"></child> </template> <script>

Web前端面试题目汇总

阅读更多关于 Web前端面试题目汇总

来源： http://www.cnblogs.com/bigboyLin/p/5272902.html HTML/CSS部分 1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：span、img、input、select、label、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link 3、CSS实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现： HTML结构： <div class="wrapper"> <div class="content"></div> </div> CSS： .wrapper { position: relative; width: 500px; height: 500px; background-color: #ddd; } .content

前端开发工程师需要掌握的技能总结

阅读更多关于前端开发工程师需要掌握的技能总结

1、扎实的基本功： HTML5、DIV+CSS、JS、XML、Json基础知识精通 2、熟悉几种后端语言，通晓前后端的交互方式，熟悉互联网的运作原理：学习Spring mvc框架，掌握到controller层，理解框架原理 3、对某几个方面有自己深入的理解：如svg,canvas,编写插件等等 4、知识的广度：熟悉当前流行的几种前端框架，如Jquery、Bootstrap及相关组件。对其他脚本语言的优劣有自己的认识，熟悉当下流行脚本语言如node.js, angular.js等 5、了解所有浏览器的兼容问题，在工作中有独立解决兼容性问题的经验及优化大型网站的性能问题 6、关注WEB前端的新技术、新趋势的信息和应用，有很强的兴趣和快速学习能力，良好的沟通能力，优秀的解决问题能力和精致的细节处理能力。来源： https://www.cnblogs.com/yjtm53/p/5472215.html

前端工程化，组件化，模块化，层次化

阅读更多关于前端工程化，组件化，模块化，层次化

个人认为：前端发展的导向是前端工程化，智能化，模块化，组件化，层次化。一个项目的开发逐渐在人工智能+物联网的时代，走向以下的五化原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。 1.前端工程化。前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效协同，质量开发。具体是： a.Node服务，提供数据代理，路由，服务器渲染。 b.Web应用开发，专注于web交互体验。 c.前端运维：构建，测试，部署，监控。 2.前端模块化(页面模块化开发+基础模块化)。（1）基础模块化： A. CommonJS————同步加载、服务器端的模块化规范，采用案列：Node.js 实现原理：一个单独的文件就是一个模块；加载模块采用同步方式，加载完成后才能执行后面的操作；加载模块使用require方法，该方法读取一个文件并执行，最后返回内部的exports对象；特点：比较适合运用于服务器的编程，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载 B. AMD————异步加载，采用案例：require.js 实现原理：异步模块定义，通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性；

学习前端的第一周

阅读更多关于学习前端的第一周

结构、样式、行为相分离　　结构(HTML)，样式(CSS)，行为(JS)由三个不同文件编写,这样的好处是能够反复使用。 HTML语义化　　语义化即用最恰当的标签来标记内容 HTML语义化的原因即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。通常语义化HTML会使代码变的更少，使页面加载更快。 CSS及特点　　css用于美化修饰网页来源： https://www.cnblogs.com/xf2019/p/12005998.html

前端开发之三、【第三篇: JavaScript基础】

阅读更多关于前端开发之三、【第三篇: JavaScript基础】

一、JavaScript 的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,( Brendan Eich) 在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript. 为了统一三家,ECMA( 欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范. J avaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。二、如何编写 1、JavaScript代码存在形式  <script type"text/javascript

前端开发-css基础入门

阅读更多关于前端开发-css基础入门

CSS cascading（层叠） style（样式） sheet（表） css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式  <div style="width:100px;height:100px;"></div>  <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head>  <link rel="stylesheet" href="css文件路径" > css选择器　　基本选择器元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选择器后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟弟弟选择器 div~a 找到所有兄弟属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p

项目冲刺第六篇

阅读更多关于项目冲刺第六篇

周四工作完成情况：蔡建龙：完成分区板块、帖子列表数据，正在进行板块分区、分页功能、发帖功能的开发工作曾楷鸿：学习了springboot对富文本的存储，学习了MongoDB的部分知识陈泽超：进一步实现对数据的接收和呈现陈振华：等待前端反馈陈志海：等待前端反馈李奕柱：完成登录注册个人用户页面的原型，进行登录注册数据的实现，解决了部分发现的bug 燃尽图：代码签入：文档签入：程序截图：前端主页：帖子内容前端页面：登录注册：来源： https://www.cnblogs.com/K-mengmengpi/p/9896492.html

原生 JavaScript 实现 AJAX、JSONP

阅读更多关于原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择 JQuery 中封装的 AJAX 方法，但是有些时候，我们只需要 JQuery 的 AJAX 请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生 JavaScript 实现 AJAX 并不难，这篇文章将会讲解如何实现简单的 AJAX ，还有跨域请求 JSONP ！一、AJAX AJAX的核心是 XMLHttpRequest 。一个完整的 AJAX 请求一般包括以下步骤：实例化 XMLHttpRequest 对象连接服务器发送请求接收响应数据我将 AJAX 请求封装成 ajax() 方法，它接受一个配置对象 params 。 function ajax(params) { params = params || {}; params.data = params.data || {}; // 判断是ajax请求还是jsonp请求 var json = params.jsonp ? jsonp(params) : json(params); // ajax请求 function json(params) { // 请求方式，默认是GET params.type = (params.type || 'GET').toUpperCase(); // 避免有特殊字符，必须格式化传输数据

订阅前端开发