前端开发 | 易学教程

前端攻略系列-开光篇

阅读更多关于前端攻略系列-开光篇

背景&前言　　什么是攻城狮？维基上的解释：“工程师（Engineer）是指那些在工程专业领域的人，他们使用科学知识来驾驭技术以解决实际问题，并以此为职业” 　　一句老掉牙的话说前端的由来：“随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面 —— web前端开发工程师 ” 　　作为前端中的一份子，不为国家和人民做点什么都觉得愧对呼吸北京像鸡汤一样的空气(够浑浊)，所以本人虎躯一震，打算力排万难、奔过艰险，写篇自己在“前端领域知识积累”的《前端攻略系列》，于是开光篇就介么诞生了。　　一名码农的自述　　读军校是因年少时够调皮捣蛋，父母担心送去地方大学必会惹是生非之类，所以毅然决然的给我丢进军校深造，美名曰——“ 锻炼我”。实际，去了军校更没少打架斗殴；然后转眼四年毕业，懂得两点。部队并不适合自身性格坐办公室折腾电脑不错　　。。。　　于是乎卷起衣袖、扛着麻袋成为一名IT从业人员。　　我是一名以“码农”自称的“前端”。骄傲这两个称呼，所以依旧在自己梦想的道路上坚持着。　　技术杂，不精，互联网从业四年。领导曾对鄙人的评价是 “艺术青年”，个人觉得可改为“学艺不精的技术打杂青年 ” 　　。。。目的定下学习目标，后续好展开自己的学习计划学习各种实现技巧学习优秀代码、库、框架、浏览器等的设计理念巩固知识和基础

腾讯前端一面总结

阅读更多关于腾讯前端一面总结

看到一片特别好的文章原文作者：广工小成 https://segmentfault.com/a/1190000013654696 前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。背景我是一名大三学生，大一在学校acm集训队，后来转向学习java，又去开发Android，在期间，学会怎么去解决一些编程遇到的问题以及灵活运用github。在大二寒假的时候，开始接触学习前端，如今已经一年了，一开始是做百度前端技术学院( http://ife.baidu.com/2016/task/all)的任务，学习了html和css，以及参考别人优秀的代码。 js是通过红宝石，js高级教程第三版开始入门学习的，这本书里面的基础知识很精髓，那时候我也很有耐心的去看完了，虽然说可能实践还是跟不上理论，因为后面做的项目基本都是用框架去做项目，而导致对于基础知识的实践比较少。接下来，我们进入正题吧。腾讯一面首先，接到电话的时候，由于之前心情的忐忑，情绪还是有点兴奋的，以期待的口气向面试官问好，面试官也问问好之后就开始进入面试题了。【你先简短的介绍一下自己】在这里，我就简短的介绍了自己的学校专业，应聘的岗位，以及是怎么走向学习前端的道路，也就和我写的背景差不多。【你是怎么学习前端的？】

跨域与防止表单重复提交

阅读更多关于跨域与防止表单重复提交

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径允许 http://www.domain.com/lab/c

学习前端Vue——by盐焗西蓝花inb站

阅读更多关于学习前端Vue——by盐焗西蓝花inb站

经过断断续续近一个月的学习，总算跟着b站黑马程序员的视频入门了Vue，对前端框架有了一个新的认识接下来总结一下：课程主要分为四个板块，Vue基础，本地应用，网络应用，综合应用 Vue基础：导入Vue，准备html结构，把Vue挂载上去，再在里面准备data和methods 本地应用：实现计数器，图片切换，记事本的制作网络应用：结合axios，和准备好的接口综合开发；制作天知道-天气查询页面，综合应用：实现一个音乐播放页面，可以在搜索音乐的基础上，对应播放，并且显示歌曲专辑的封面，以及热门评论；在播放暂停的时候会有不同的动画效果，最后在有mv的歌曲中可以在线观看当前歌曲的mv Vue基础学习Vue之前需要有一些铺垫知识：HTML，CSS，JavaScript，AJAX基础知识~~（然而我都不怎么会）~~ 在学习中选用vscode作为课程中的开发工具（其实其他的也可以，之前用过hbuilder）。 Vue 呢，JavaScript的框架，出现的目的呢是为了简化dom操作（然鹅我并不知道什么是dom操作）百度如下：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。回看课程发现， dom操作呢简单来说就是获取元素，再操纵元素来实现不一样的网页效果。 Vue呢还可以做到响应式数据驱动，简单来说因为页面是由数据来生成的

Vue前端路由（Vue-router）

阅读更多关于 Vue前端路由（Vue-router）

1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数 2.前端路由的初体验前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件 window.onhashchange = function(){ //location.hash可以获取到最新的hash值 location.hash } 前端路由实现tab栏切换： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial

自学前端开发，现在手握大厂offer，我的故事还在继续

阅读更多关于自学前端开发，现在手握大厂offer，我的故事还在继续

简要背景我是一个非科班出身的程序员，而且是连续跨专业者，用一句话总结就是： 16 届本科学完物流，保送研究生转交通，自学前端开发的休学创业者。 17 年休学创业，正式开始学习前端，离开创业公司后，我又回炉深造，期间一直没有放弃前端开发的自主学习，在 19 年秋招（20 年毕业）大战中也收获了一些 offer。列举一部分 SP（Special Offer）：美团（专注吃喝玩乐的 O2O 互联网公司）小米（2019 年世界 500 强中最年轻的公司）顺丰（物流行业中高端市场扛把子）云从（人工智能行业四大明星独角兽之一）一加（中高端手机市场新贵）具体的薪资水平，都是在传统的物流和交通行业之上的，可以上一些平台比较。找到满意得工作后，我现在想通过自己的努力，帮助到有志于从事前端开发工作的各位朋友，收获适合自己的 offer。大学教育赋予了我们的自学能力，只要感兴趣，肯用心，转行吃碗热饭是可以的。下面我将仔细讲述亲身经历得故事，不堆砌词藻，但求真实，也许会给你带来一些启发。经历不可复制，经验却可以流传。在校求学本科专业是物流工程，研究生专业是交通工程。本科期间我只学过 VB（Visual Basic）和 R 语言。研究生没有上过任何计算机课程，全靠自学。当然，也在本科期间参与过大大小小的科技竞赛，数学建模比赛，对物流专业的管理学知识渐渐兴趣不大。于是

2020年大前端发展趋势

阅读更多关于 2020年大前端发展趋势

迅速发展的前端开发，在每⼀年，都为开发者带来了新的关键词。2019 年已步⼊尾声，2020 年前端发展的关键词⼜将有哪些呢？发展的方向又会是什么呢？参考2019年大前端的发展，不出意外，前端依旧会围绕⼩程序、超级APP、跨端开发、前端⼯程化以及新技术运用等几个方面进行展开（可以参考 2019年大前端技术趋势深度解读）。小程序在⼩程序⽅⾯，今年仍然是⼩程序突⻜猛进的⼀年，各⼤主流的 App 都上线了⼩程序能⼒的⽀持，各前端团队也都有了专⻔的⼩程序开发团队，以适应更快的⼩程序开发需求。同时App 中很多关键的功能都被⼩程序所替代，甚⾄有些 App 已经变成 Native ⼩程序壳，上层的应⽤实现全部是⼩程序。在微信小程序出现以前，大家在谈 Hybird、ReactNative，但终归只是技术层面的狂欢，始终没有业务属性的注入。小程序的出现，一方面告诉业界在当前设备上 Webview 也没差到哪去，另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域运营。另一方面，从技术角度说，在上层 DSL 的严格限制下，超级 APP 就可定义符合自己诉求的 Web 标准，弥补当前 Web 标准的不足，最后和客户端配合，结合离线、预加载、定制Webview 能产出类似于 NSR 等各种酷炫的技术模型，让 Web 在端内低成本达到 Native 版的体验，端外也不会像 Weex

前端面试知识点汇总

阅读更多关于前端面试知识点汇总

作者：AmbitionC 链接：https://www.nowcoder.com/discuss/258810 来源：牛客网一、JavaScript 原始值和引用值类型及区别判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor 类数组与数组的区别与转换数组的常见API bind、call、apply的区别 new的原理如何正确判断this？闭包及其作用原型和原型链 prototype与__proto__的关系与区别继承的实现方式及比较深拷贝与浅拷贝防抖和节流作用域和作用域链、执行期上下文 DOM常见的操作方式 Array.sort()方法与实现机制 Ajax的请求过程 JS的垃圾回收机制 JS中的String、Array和Math方法 addEventListener和onClick()的区别 new和Object.create的区别 DOM的location对象浏览器从输入URL到页面渲染的整个流程（涉及到计算机网络数据传输过程、浏览器解析渲染过程）跨域、同源策略及跨域实现方式和原理浏览器的回流（Reflow）和重绘（Repaints） JavaScript中的arguments EventLoop事件循环宏任务与微任务 BOM属性对象方法函数柯里化及其通用封装

手淘适配-flexible

阅读更多关于手淘适配-flexible

目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于 paintcodeapp.com 为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。而整个手淘设计师和前端开发的适配协作基本思路是：选择一种尺寸作为设计和开发基准定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果还是上一张图吧，因为一图胜过千言万语：在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px *

基于Citrix云桌面前端开发环境搭建

阅读更多关于基于Citrix云桌面前端开发环境搭建

介绍基于Citrix的云桌面前端开发环境搭建，具体步骤如下，及时更新。第一步：在云桌面外下载需要版本node免安装包地址：https://nodejs.org/dist/ 注意下载64位版本，如：node-v9.11.1-win-x64.zip 第二步：将解压包CP到云桌面内解压注意，解压后多了一级目录，设备环境变量时目录要指定到包含 node_modules 这一层第三步：修改环境变量在计算机上右键->属性，并点击更改设置：在设置高级中找到环境变量并打开：新建用户变量，名称为 Path ，地址为解压后node的绝对路径第四步：检查安装结果在PowerShell 输入 node -v 能够显示所安装node版本，即大功造成。问题汇总如何跨域将桌面上的Chrome快捷方式CP一份，右键在目标后添加如下参数 --disable-web-security --user-data-dir ，使用新的Chrome快捷方式打开即可。来源： CSDN 作者： Rigel_Xu 链接： https://blog.csdn.net/rigel_xu/article/details/104159361

订阅前端开发