前端开发

打开 Chrome （浏览器）开发者工具，如下图。 方法1：在右上角 Chrome（浏览器） 菜单 > 更多工具 > 开发者工具 方法2：F12 键 可以看到一共分为10个面板，其中主要有比较常用、基础的四个面板： Elements （元素面板）、 Console （控制台面板）、 Sources （源代码面板）、 Network （网络面板） 其他面板，如： Performance（性能面板）、 Memory（内存面板）、 Application（应用面板）、 Security（安全面板） 等。 为了更加 直观入门 Devtools工具 ，新建一个txt文件，写入如下代码，并修改文件后缀为 .html 打开html，并按下F12键（调试出开发者工具Devtools），菜单面板，调整下布局 .txt 文件转换为 .html 的结果 Elements （元素面板），如下图所示 （1）可以看到 Element面板 主要用来：检查和调试页面、样式；编辑 DOM。即针对当前页面的html和css。 （2） Console （控制台面板）主要输出 JavaScript 控制的信息；命令行交互。 （3） Sources （源代码面板）可以 设置断点来调试 JavaScript。 （4） Network （网络面板）可以看到请求和下载的资源文件；加载资源时间轴 等等 以上

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。本文主要介绍各规范下的模块化实现方式。 一、CommonJS Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。 //定义模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum } //引用自定义的模块时，参数包含路径，可省略.js var math = require(‘./math‘); math.add(2, 5); //引用核心模块时，不需要带路径 var http = require(‘http‘); http.createService(...).listen(3000); 　　commonJS用同步的方式加载模块。在服务端

现在，几乎整个互联网行业都缺前端工程师，不仅在刚起步的创业公司，对上市公司乃至巨头这个问题也一样存在。 据统计，国外的前端开发人员和后端开发人员比例约1:1，但是在国内比例却在1:3以下，Web前端开发职位人才缺口巨大。前端工程师的发展之路十分有“钱”景。 每天，HR 群都有人在吐槽招不到前端工程师。实话说对这些需求，高级招聘人员也无能为力，因为在供不应求的前端招聘市场上，优秀的前端工程师才是有话语权的那一方。 但是，市场上优秀的前端工程师却相对较少，全世界范围看都是个难题。那造成优秀Web前端工程师稀少的原因有哪些呢？ 大量糟糕Web前端工程师的存在，扰乱了市场。由于Web前端工程师的入门门槛非常低，JS、CSS、HTML并不是很难入门掌握的语言，似乎只要花一点时间，谁都可以通过网上教程和书本学会它，Web前端工程师市场就是被这些浅尝辄止的家伙搞坏的。 糟糕的Web前端工程师是这样做事的： 1、滥用JS库，因为他们实际上并不了JS的内部(e.g.一切都用jQuery)； 2、滥用JS插件，抄别人的代码哪怕自己根本读不懂(e.g.jQuery.doParallaxPls.js)； 3、给Web应用程序添加CSS框架，却只用到CSS/JS的5%，没有看到任何的需求、设计或者比较和评价； 4、认为只要添加了CSS框架，网站就可以“有求必应”； 5、一边在说着“响应式Web设计”

HTML与CSS 初级 《Head First HTML与CSS(第2版)》豆瓣评分：9.3 入门经典，初始获得信息的好途径。帮助读者逐步构件小的知识点，再结合一本整体的类别逻辑型的书，就可以把所有基础知识学清楚了。 中级 《CSS权威指南(第三版)》 豆瓣评分 8.5 本书适合自学过 CSS 的人但希望全面了解 CSS 的人阅读。由浅入深，全面易懂，不愧为权威指南。虽然内容有点儿老，但依然能够满足学习的需求。希望出版社能引进更新的版本。 《css禅意花园》豆瓣评分 8.4 这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。 书籍较老，但理念却很经典。 高级 《CSS揭秘》豆瓣评分 9.4 多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进阶必读。 JavaScript 初级 《javascript语言精粹》豆瓣评分9.1 本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集，以便你能用它创建真正可扩展的和高效的代码。 雅虎资深JavaScript架构师Douglas Crockford倾力之作。 向读者介绍如何运用JavaScript创建真正可扩展的和高效的代码。 《JavaScript

⽇前，开源中国翻译了前端开发者罗伯托·埃尔南德斯（Roberto Hernandez）的⼀篇⽂章，作者根据⾃⼰对前端发展现状的观察，以及⼀些已有调查的研究，对 2020 年的前端发展趋势做出了个⼈预测，以下是部分重点内容。 微前端——微服务的扩展 这可能是近年来前端中的最新问题。2019 年，微前端确实获得了不少关注，2020 年，它将被越来越多的开发⼈员和公司接受和使⽤。 那么，究竟什么是微前端呢？⽬前⽹络上对其普遍的定义是：微前端是⼀种类似于微服务的架构，它将微服务的理念应⽤于浏览器端，即将单⻚⾯前端应⽤由单⼀的单体应⽤转变为多个⼩型前端应⽤聚合为⼀的应⽤。 在 2020 年，微前端架构将继续受到关注，因为它有助于解决应⽤程序和组织复杂架构中的重⼤问题。 前端框架——React.js 最受喜爱 2019 年的 JavaScript 现状调查结果显示，React 仍以最⾼的满意率蝉联第⼀。Stack Overflow 的调查中也体现了开发⼈员对 React 的喜爱，很多⼈表示会继续使⽤ React 构建漂亮、健壮且可扩展的应⽤程序。 此外，我们还应关注快速增⻓的 Svelte.js。它在短短的⼀年内吸引了不少爱好者，现在它的受欢迎程度⾮常接近 React.js。 Web组件 根据 MDN 的定义，“Web 组件是⼀套不同的技术套件，能够⽤来创建可重⽤的⾃定义元素

前面我们已经梳理了前端面试中css的相关内容，同时也对面试中常问的本地存储 、缓存做了一个详细的介绍，有需要的可自行查看之前的文章，文章链接如下： 前端常见面试-css篇 前端常见面试-存储/缓存篇 当然，对于前端开发来说，js那就是每一个前端小可爱都需要必备掌握的技能，无论现在多火爆的mv*框架，都是基于基础的js来进行的。好了，话不多说，直接进入主题 1. 请说出js中的数据类型 答：js中的数据类型主要分为两种：基础类型和引用类型，其中基础类型包括：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（es6中引入的）；引用类型包括：对象(Object)、数组(Array)、函数(Function) 2. 请说明一下js中定义变量的方式 答：js中申明变量的方式主要有三种，分别为：var、let、const 1）var：定义的变量可以修改，如果不初始化会输出undefined，不会报错 2）let：是块级作用域，函数内部使用let定义后，对函数外部无影响 3）const：定义变量不可以修改，而且必须初始化，但是如果定义的是对象，则对象的属性可以修改（原因是引用的是对象的地址，地址不可更改，但是地址对应的内容可以修改） 来源： CSDN 作者： bililibili 链接： https://blog

努力的一天又开始了，编辑这一篇文章，写下当初我自学web前端走的弯路，希望大家引以为戒，不要多走前人走过的弯路，浪费时间。 弯路一：盲目的去学 当初我在对于web前端这个行业什么都不了解的情况下，比如：不知道未来发展趋势，不知道学习web前端应该注意哪些初始问题，不知道具体的学习规划学习路线等等，一味的买书看书，看视频，到了中期阶段萌生放弃的想法，和主要是因为觉得自己越学越迷茫，也知道自己这样学找不到工作，这是初学者最大的误区。 弯路二：孤军奋战 当初在学web前端的时候，从来都没有跟别人交流过，就感觉活在自己的世界里，总认为自己什么都可以搞定，而且很多知识不会了，直接就过去了，并没有深究，而这种学习态度也注定了我的学习是失败，学习前端一定要有讨论的过程，只有跟不同的交流才能了解到你自己不知道的东西。 弯路三：没人指点 web前端对于我来说是从来不了解的行业，而我当时从来没有想过找一个这个行业比较厉害的人去请教下，现在我终于认识到了一点什么叫“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本是一致，而对于一个什么都不懂的初学者根本不会知道怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点， 弯路四：盲目看书 对于新手来说，学习一个技能肯定是买书看书，但是后来我才实践的证明，对于一个啥都不懂的初学者来说看书基本可以成为无用的

基本思路 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。 减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又比如使用Linux + Mono来部署.net应用，避开Windows Server的费用。 提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是 每一次做新产品都可以利用已有的东西，那就会好很多。怎样才能减少变更代价呢？如果我们能够理清模块之间的关系，合理分层，每次变更只需要修改其中某个部 分，甚至不需要修改代码，仅仅是改变配置就可以，那就更好了。 我们先不看软件行业，来看一下制造行业，比如汽车制造业，他们是怎么造汽车的呢？造汽车之前，先设计，把整个汽车分解为不同部件，比如轮子，引擎，车门， 座椅等等，分别生产，最后再组装，所以它的制造过程可以较快。如果一辆汽车轮胎被扎破了，需要送去维修，维修的人也没有在每个地方都修一下，而是只把轮胎 拆下来修修就好了，这个轮胎要是实在坏得厉害，就干脆换上个新的，整个过程不需要很多时间。

Web前端开发是目前非常有“钱”途的行业，不仅从业人员众多，相应的开发工具也不断涌现。有人想知道前端常用的工具有哪些？有人好奇Web前端课程会教哪些工具库的用法，接下来小编就给大家解惑。 1、jQuery jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70％的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。 2、Bootstrap 超过65％的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。 3、Angular 如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。 4、NPM NPM是Node的包管理器。借助NPM

大前端基础之Css3新增的选择符 CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局 等。 Css3的优点 ：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏） 其基本特点可以分为两个特点： **渐进增强 progressive enhancement：**针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 **优雅降级 graceful degradation：* 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 两者的区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。