前端开发

1. 你对浏览器的理解？ 浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常 是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请 求资源的位置。 HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的 组织。 但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。 简单来说浏览器可以分为两部分，shell 和 内核。 其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作， 参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些 浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。 2. 你对浏览器内核的理解？ 主要分成两部分：渲染引擎和 JS 引擎。 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也 可以借助插件（一种浏览器扩展

理解前后端分离 目录 理解前后端分离 为什么要做前后端分离，它到底有什么好处？ 实现的一些表现 RESTful风格的API 为什么要做前后端分离，它到底有什么好处？ 前后端的分离也实现了前后端架构的分离，带来的好处有： 整个项目的开发权重往前移，实现真正的前后端解藕，动态资源和静态资源分离，提高了性能和扩展性。 前端静态化 前端有且仅有静态内容,再明确些,只有HTML/CSS/JS。 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。 前端内容的运行环境和引擎完全基于浏览器本身。 后端数据化 后端可以用任何语言,技术和平台实现。 遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。 统一API接口，接口完全可以共用。 提供的数据可以用于任何其他客户端(如IOS,安卓,PC,微信小程序等)。 通过一些代码重构，就可以大量复用接口，提升效率。 平台无关化 前端3大技术（HTML/CSS/JS）本身就是平台无关的。 后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现。 前后端交给不同的人来编写，明确划分职责，发现bug的时候可以快速定位。 vue.js等框架编写前端时，会比之前写jquery更简单快捷。 架构分离化 前端架构完全基于HTML/CSS的发展和JS框架的演变,由于前台是纯静态内容

译注：本文翻译自谷歌工程师 Philip Walton 的一篇博客。看过之后非常有感触，很多观点都是自己长期非常坚持和认同的，所以翻译出来分享给更多的前端同学！ 最近我收到一封读者来信让我陷入了思考，信是这么写的： Hi Philip，您是否介意我问，您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？ 不得不承认，被问这样的问题，我很惊讶，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行的头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅，而且大家面试我的时候都不知道从 何问起 http://www.cnblogs.com/roucheng/p/csslogin.html 话虽这么说，我到现在做得还算不错，而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候，我经常会被要求招聘我的继任者。现在回看这些面试，我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘，即便我个人的这种经历也有可能成功。 我在 web 领域工作越长时间，我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然，知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域，你前进和获取知识的方式 (至少在相当长的一段时间里)

Sublime Text是前端开发不可不说的 编辑器 ，本文以Sublime Text 3为例讲解一下如何搭建前端的开发环境。 下载Sublime Text 3 下载地址 #==> Sublime Text 3 下载自己电脑对应的版本，然后双击执行安装就好了。 安装Package Control 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，然后粘贴下面的代码然后回车执行： import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 执行完毕之后查看Preferences菜单下如果出现了Package Setting 和 Package

一、安装Sublime Text3 网址：http://www.sublimetext.com/3 注册码：（ sublime Text3汉化和激活注册码 ） ----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------ 二、安装 package control 说明网址： https://packagecontrol.io/installation 自动安装（代码安装）方法： 1、按住Ctrl+~键，调出控制台。 2、输入： import urllib.request,os,hashlib;

JavaScript规范 目录 类型 对象 数组 字符串 函数 属性 变量 条件表达式和等号 块 注释 空白 逗号 分号 类型转换 命名约定 存取器 构造器 事件 模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离 使用jsHint 前端工具 类型 原始值 : 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。 string number boolean null undefined var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 复杂类型 : 相当于传引用 object array function var foo = [1, 2], bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 对象 使用字面值创建对象 // bad var item = new Object(); // good var item = {}; 不要使用保留字 reserved words 作为键 // bad var superman = { class: 'superhero', default: { clark: 'kent' }, private: true }; // good var

场景： 　　6月1号到6月5号这一周，面试了差不多10家公司，职位都是"前端开发"。 　　下面简单介绍面试中遇到的一些题。 题目： 　　 HTML & CSS 相关： 如何在 body 中水平垂直居中一个 div (宽100px，高100px)？ inline-block 造成的水平间隙该如何解决？列出你能想到的所有办法。 如何用 css 创建一个三角形？写出 css 代码并说明它的实现原理。 position 有哪几种？它们的定位原点分别是什么？是否脱离文档流？ css 中有哪几种选择器？它们的优先级是什么？ css3 中添加了哪些新的属性？它们分别是用来做什么的？它们的兼容性如何？ box-sizing 的作用是什么？列出它可能的几个值。 　　 JavaScript 相关： 函数声明的两种方式 function func(){} 和 var func = function(){} 有什么区别？ constructor、prototype、__proto__ 有什么区别？ null、undefined、undeclared 的区别，如何检测它们？ 如何 copy 一个 Array？如何检测一个 Array？ 如何用原生 JS 创建一个 div 并添加到 body 中？ 如何扩展 JavaScript 的内置对象，这样做有什么问题？ 列出 addEventListener

在大多数人眼里，互联网前端开发是一个有着高薪水、高职业荣誉感的行业。没错，随着互联网大环境的快速崛起，HTML5的发展，绝对属于既有“钱景”还有前景的的朝阳行业。 高收入、前景光明，即使对前端开发的要求越来越高，也还是有许多新人愿意来一试身手，纷纷打破头往这个行业里面涌。 都说一入前端深似海，从此节操是路人。 想实现从小白到前端大神的华丽转身吗？ 接下来告诉你在学习前端的过程中不得不跨过的这些坑！（从学习的大方向开始说起） 一定要学好英语，虽然英文不好也可以学会前端。但你一定会遇到比英语好的人更多的困难。因为你只能看中文的教程和书籍，学习框架和工具只能依赖中文文档，交流问题只敢去中文社区。而前端99%的工具框架都是歪果仁发明的，这就显得很尴尬了。。。 很多新手学编程都喜欢看视频，每次看完都似乎仿佛好像可能理解里面讲的是什么了。回头你让他写代码，他一行都写不下去。记得要多翻阅前端有关的书籍，看书是主动学习，看视频是被动学习。通过看书你可以自主把握获取知识的速度和节奏。当然我也不是说完全摒弃看视频的学习方式，从视频中你也可以获取到文档书本中获取不到的信息。 主抓基础，避免盲目，花了太多时间学习那些不是特别需要的东西上。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段

解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 个人背景： 首先我的前端是自学的，而那个时候并没有前端的称呼，那个时候叫网页制作，所以我们当时是学Java，所谓的web前端其实就是顺带学的，并没啥难度，我学编程是用了大概一年的时间，因为当时在学校时间还是比较多的，所以我建议大家不要想着速成，学任何一门手艺都需要一个过程，这是我个人的建议，而且根据我目前对于行业的了解，速成找工作还是比较困难的，就培训来说，很多人培训出来都找不到工作，并不是培训教的不好，实在时间太短，只有四个月时间。 几点建议： 1.作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己专研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。 2.视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里小编给大家提醒，书可以看

很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时，因为要和第三方公司的一个项目进行数据的共享，因为考虑多不占用服务器的资源，遂决定直接在html进行数据的读取，不走服务器端进行中转了。然后正好就遇到了浏览器端跨域访问的问题。 跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。 目前浏览器端跨域访问常用的两种方法有两种： 1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。 html页面端示例代码： //首先要引入jquery的js包 jQuery(document).ready(function(){ $.ajax({ type : "get", //jquey是不支持post方式跨域的 async:false, url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL dataType : "jsonp", //传递给请求处理程序