前端开发

比较推荐的学习过程应该是以兴趣为驱动的，用搜索做辅助： 1. 我想做一个个人网站，或者给我们团队或者小组做一些介绍页面。怎么做？搜索发现要学习：HTML、CSS。 2. 发现一个网站设计的好漂亮，交互真赞，动画效果真好。我想在我自己网站上也放上，可是我看不懂它的代码？搜索发现要学习：交互视觉、CSS3 动画等。 3. 他们网站上都有那种点击弹出浮层的功能，还有一些其他的更复杂的交互效果。怎么实现的？学习JavaScript。 4. 有小学同学说我的个人网站错位了，问了下他用的是 IE7 访问的，怎么办？搜索了解一些浏览器兼容性问题（不是很必要）、学习使用 jQuery。 5. 我想在微信朋友圈分享一下我的网站，结果缩放的好小，而且有错位。怎么解决这个问题？搜索发现要学习响应式相关。 6. 分享了之后，发现打开速度好慢啊，要等十几秒才能打开。怎么办？学一下前端性能优化相关。 7. 网站交互功能和效果越来越多，写的 JS 和 CSS 代码越来越多，感觉写起来好慢，出了 bug 很难定位问题。怎么办？搜索发现要学习：Emmet、Less、SCSS 等辅助工具用法，JS 模块化require.js、sea.js 以及对应的 AMD、CMD 以及 CommonJS 模块化规范等。 8. JS 更复杂了，而且要与其他同学合作开发。发现需要学习一些前端框架来提高开发效率，比如React

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件 现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端开发的工作是要如何将自己的设计应用在网络上。它不同于网页设计,更关注于该网站将如何交互和浏览。前端开发布局,按钮和主要界面，使得它适用与网络。前端开发人员使用的开发平台如JavaScript、CSS和HTML，根据设计师所设计的雏形来编写代码。他们工作,以确保前端没有bug和错误,确保在不同的平台和浏览器都可以正常浏览。作为一个合格的前端开发者，有一些重要的技能是必须具备的，下面就一一为大家介绍： 1.JavaScript JavaScript在网页设计中是至关重要的,因为它有助于为网站提供功能。事实上,它是最流行的编程语言,因此,即使不为了web开发，它仍然是一个有用的语言学习。JavaScript可以帮助你做一些互动元素并添加到你的网站地图的实时更新,在线游戏,互动电影等。使用JavaScript,可以确保你会有一个容易理解,交互的网站,可以接受任何类型的用户。 2.Front end frameworks CSS将帮助你更快的开发。目前,Bootstrap是可以使用的最受欢迎的前端框架。知道这些框架是如何工作的,以及如何使用它们才能在web开发节省时间，这十分重要。 3.CSS preprocessors 每个web开发人员都需要CSS预处理器的一些经验,因为他们将有助于加快CSS编码

1.1 介绍 Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。 中文官网： http://www.bootcss.com/ 官网： http://getbootstrap.com/ 推荐使用： https://v3.bootcss.com/ 1.2 使用 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发 Bootstrap使用四部曲： 1.2.1 创建文件夹结构 在https://v3.bootcss.com/下载bootstrap的压缩文件，解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下： 1.2.2 创建html骨架结构、引入相关样式文件 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--[if lt IE 9]> 解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题

前端路由：在应用使用期间不会重新加载，提高用户体验，减低网速要求，界面展开快。前后端分离方便开发 目前前端路由有两种实现方法： 利用url的hash，当浏览器url的锚点部分发生改变，不会刷新页面的原理 利用h5中的history，通过监听opostate事件，利用pushstate或replacestate实现 原生router/hash版 html: 123456 <ul> <li><a href="#/home">home</a></li> <li><a href="#/about">about</a></li></ul><div id="routerView"></div> js: 1234567891011121314151617 var routerView=document.querySelector("#routerView");window.addEventListener("DOMContentLoaded",onchange);window.addEventListener("hashchange",onchange);function (){ switch(location.hash){ case "#/home": routerView.innerHTML="home"; return; case "#/about": routerView

jade是一款基于haml的html模板引擎，已改为pug 1.全局安装 npm install jade -g 新建一个jade文件夹，再建一个后缀名为.jade的文件 编辑.jade文件 jade -P -w index.jade 在文件夹jade下监听文件变化，即生成html index.jade文件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 doctype htmlhtml head meta(charset='utf-8') title 我的网站 body div |hehe a: img(src='#') div(style={width:"100px",height:"100px"}) 测试 div div(class='test') 我是类名位test的div .test 我是类名位test的div #myid 我是id名为myid的div .myclass#myids 我是有id也有class的div -var name='张三' div 名字是#{name} // 我是注释 // 我是注释一 我是注释二 //- 我是jade注释 /

什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个***对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式。 既然图形验证码是为了区分机器和人之间的操作，那么我们就可以在图形上绘制一个只有人可以解答的问题。比较常见的是在图片上生成文字验证码，然后用户输入图片上的文字吻合则验证通过。 虽然这种验证方法已经渐渐的被其他更先进的方法所淘汰了（图片上的文字依然可以被程序识别读取），并且前端生成验证码的方式相较于后端安全性不高，但我们的目的只是为了装x，提升程序的安全性只是附带的效果。 登录表单 首先我们需要在在登录表单上额外添加用于输入验证码的FormItem，并且给图形验证码提供一个canvas容器。有时候生成的验证码看不明白，因此需要给验证码添加点击事件用以切换验证码： web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

JSONP Hijackin的中文意思是JSON劫持，而能产生JSON数据劫持的原因在于前端被跨站攻击了。跨站=跨域，跨域从字面上理解的话，就是指超出了范围、领域。继续追问一下，那超出了什么范围？原来指的范围有多大？理解跨站攻击的基础在于理解这个域有多大。为了更准确的理解JSON Hijackin攻击，建议读者可以先了解一下如下几个背景知识： 域概念 （下文会介绍） JSON （搜索引擎查一下） 接口回调 （建议看我之前的文章： https://www.cnblogs.com/mysticbinary/p/11869181.html ） 域概念解释 在计算机领域里很多地方都会用到这个 域 ，而不同地方所包含的含义却是不相同的，比如说写代码定义的变量有作用域，在局域网建设中有网络域，Internet有一项核心服务是域名解析系统（DNS）。本文所讨论的域就是指DNS的域名。 DNS的工作原理： 在全球各地有众多服务器（分布式），在这些服务器里面都同步的保存着域名和IP的一一映射，这样人们就可以不用记住枯燥的IP地址，只记住有意思的单词域名就行了。 域介绍： 域通过一个点 . 来来分开一个域。域名不区分大小写，有唯一性，跟身份证号一样，是独一无二点。 域分类： 域名又分 顶级域名 和 其它域名 ，顶级域名就是如下这些，被预先定义好的， 可以理解为世界上有一个组织专门在管理

1:MVC模式首先不是框架！！（之前我公司新招聘进来的一个前端，刚毕业不久的，可能在学校学过Spring MVC，争论说MVC就是一个Java框架）。 2:其次，MVC也不是设计模式！！设计模式是使代码能够高复用的，减少重复搬砖工作的编写代码设计经验的总结；是具体到解决业务问题的（如单例模式，策略模式，桥接模式，观察者模式）。在菜鸟教程网也把MVC放在了设计模式左边那一栏；非常容易让匆忙学习了去面试的同学理解错误。 MVC模式其实准确来说是【框架模式】；框架模式在设计模式之上，也有利于提高代码的复用，而且是设计框架的思考和总结，框架模式会包含很多设计模式，例如MVC中就包含观察者模式，策略模式，组合模式，单例模式等等。在不同的代码模块会使用不同的设计模式达到最好的效果。 老生常谈，面试常备问题：什么是MVC，分别代表了什么？ 网上一搜索一大把。 M（models）：数据模型层；主要就是用来处理具体的业务逻辑，要加减乘除，割接拼接字符串，根据标志配状态什么乱七八糟业务处理都在这里；也在这里进行数据库的CURD增删改查操作，Spring 中还有种说法是持久层，其实就是数据持久化，也就是保存数据库；持久层框架就是类似于Mybatis和Hibernate之类那些。 V（view）：视图层；就是用来展示处理后的数据的页面。 C（controller）：控制器层；起到一个中介的作用

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最近遇到一些小萌新，他们经常会问到“Web前端是什么？它能做什么？与后端的关系是什么？”。下面，针对这些问题给大家解答一下。 Web前端工程师是干什么的？ 我们先了解Web前端工程师是干什么的，百度百科的解释： Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。 完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 得知这个之后，那么什么是Web前端相信各位也就有个大概了解了，就是浏览器和app界面的开发嘛。 Web是什么呢？Web就是万维网，要彻底的解释这个名词就需要些篇幅了，这里就用一句话总结，就是一种全球都公认的协议，一个信息系统，必须遵守这个协议才能上网。 Web前端其实就是前端，或者前端技术，前端开发，这几个名词其实意思都差不多的。 浏览器界面是什么呢，比如你打开百度网站： 以上这个界面全是利用Web前端技术做出来的，比如上方这些： 这些字根据您的上网常识，应该都知道是可以点击的，点击完会跳到一个新的界面，但是有些字又不能点击，这就是用了前端技术实现的。 接着看，这个百度的logo： 不难看出