前端

「前端，有发展“钱”途」 前端发展随着互联网大时代如火如荼的进行着，Web前端技术依靠其自身在页面交互效果上强大的功能属性受到了众多企业的青睐。这不仅是在北上广，很多一二线城市都是如此。 无论是你使用的智能手机，还是iPad，还是pc电脑等等，前台的页面样式都需要前端开发工程师来编写实现，也因此市场上的移动应用Web前端岗位空缺有增无减，专业的Web前端工程师供不应求，前景广阔。 所以学好前端，是有前景可图的。 姑且不论BAT大厂校招时十几K的月薪，在广州普通的互联网公司前端程序员月薪七八千也是正常的。 因此大家其实并不太需要担心web前端开发的就业前景和工资待遇，需要在意的是自身水平够不够格。 「找工作，得有本事」 首先如果你不是小白，你是正准备找工作的应届生，那么你需要一个自我评估。 打开当前众人皆知的招聘网站进行职位查询，根据自身情况设置塞选。然后点进你想去的岗位，看看任职要求。 就比如：（资料来源于boss直聘） 1.设置塞选 条条款款，一看便知。 少什么差什么，就去补什么学什么。 你完全可以通过类如CSDN,GitHub等开源知识分享圣地，多去取经。 你也可以通过购买进阶类书籍为自己的专业知识充电等等。 并且一定要勤于动手，学到的知识点要运用到实处。 编程学习都是这样的过程，代码量还是要有的，而且在过程中也会出现一些预知外的错误，你也可以进行询问和学习

前端自动化构建是当下的热门，我记得2014年的时候，前端的自动化构建，大多是用在javascript的合并、压缩、语法检查、coffeescript,Sass,LESS转换上，构建工具也有很多，比如ant,grunt,gulp等，二次封装的工具也有很多，比如百度的FIS,国外的Yeoman。2016年以后，随着es6,es7,Node的兴起，前端又发生了翻天覆的变化，特别是移动端的H5最为明显，以前切个图，在PC上预览测试就可以发布的时代，在移动端就不灵验了,在手机端预览至少要搭建一个http服务器，比如http://192.168.0.2/index.html。在手机端输入网址不方全，通常会将网址做成一个二维码，然后用手机扫一下就可以打开预览。我们每改一下样式，就在手机上点一下刷新或电脑上按一下F5，这在最初的时候，也不觉得有什么问题，因为拿到我手上的静态页，通常由切片的同事做好了兼容性测试，需要一边刷新浏览器，一边改样式的机会不多。随着我们尝试用Less,stylus,这样的css工具，一方面，需要用到gulp这样的工具在后台自动监听我们的样式改动，另一方面，手动刷新的时候，gulp的脚本未必转换完了。这时候迫切需要浏览器自动刷新。 总的来说，需求就两点，一是需要一个http服务器，来供手机访问静态资源，另一个是监听代码的改动并自动刷新浏览器。要满足这两个需求的第三方工具

1.邮箱前端有三大产品线,包括免费邮箱,VIP邮箱,企业邮箱,使用的一套代码,在代码中进行的逻辑判断处理,根据不同的配置进行不同的业务操作.有很多逻辑是各产品线是不同的,需要仔细开发和判断才能不会影响到别的产品 2. webmail的前端是一套有悠久历史的自研前端js框架,差不多有十几年的历史,没有使用任何开源规范的前端库,全部都是自己实现.整个网络的请求,后端输出到页面中变量读取,前端DOM数据的处理和前端模板引擎的加载,业务交互特别多,逻辑非常复杂. 3. 前端的js和css会合并和压缩处理,这里的合并和压缩处理是用的一套PHP开发的工具,操作复杂,压缩后需要上传SVN版本库,获取到svn的版本号后,再上线上传到公司提供的静态CDN池资源里,资源池的路径中指定包含上一步的版本号,通过公司的静态资源域名对资源进行访问 4. 在webmail后端代码对前端资源路径中的版本号进行更换上线,整个上线流程才算结束非常复杂 5. 测试开发过程中,需要在本地机器配置apache环境,绑定前端域名到本地127.0.0.1,在apache虚拟主机中很多重写规则,当访问前端资源时,会把资源路径重写到一个file.php的文件中,该php文件进行合并js和css代码,达到直接本地开发的目的 来源： https://www.cnblogs.com/taoshihan/p/11544407.html

此篇我们来瞅一瞅SPA，啥是SPA啊，实际上一点也不神秘，就是单页应用，可能有的同学又会问了，啥是单页面应用，别着急，我们慢慢来看 首先我们先来了解一下单页应用出现背景 背景： 在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表单提交，超链接跳转都可以用来重新请求新的 HTML 页面，从而达到给用户展示新的页面的目的。在这种方式中，你可以感觉到 页面总是在不停的刷新 ，一个点击可能都需要等待很久，这是因为，当页面变化时，所有资源都需要重新请求。这些问题导致了用户体验不佳，也浪费了资源。单页应用便很好的解决了这些问题 概念： 什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 前端模块通常叫做 "类库" pycharm导入jQuery统一模板 注：此处使用CDN内容分发网络( https://www.bootcdn.cn/ )，也可以在本地使用文件，需要每次拷贝文件在文件夹中 原生js对象和jQuery对象的区别与转换 两个对象之间方法不能混用！ $()[0]　　　　转化为原生js对象 $(js对象)　　 转化为jQuery对象 JQuery基本语法结构 $(选择器).action{属性值} 原本的写法 jQuery() <===> $() 使用jQuery注意事项：你一定要先通过script标签引入jQuery代码才能使用它的一系列方法 查找标签: 1.基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签 所有元素选择器： $("*") 组合选择器： $("#id, .className,

要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST -- REpresentational State Transfer，英语的直译就是“表现层状态转移”。如果看这个概念，估计没几个人能明白是什么意思。那下面就让我来用一句人话解释一下什么是RESTful:URL定位资源，用HTTP动词（GET,POST,PUT,DELETE)描述操作。 Resource：资源，即数据。 Representational：某种表现形式，比如用JSON，XML，JPEG等； State Transfer：状态变化。通过HTTP动词实现。 所以RESTful API就是REST风格的API。 那么在什么场景下使用RESTful API呢？在当今的互联网应用的前端展示媒介很丰富。有手机、有平板电脑还有PC以及其他的展示媒介。那么这些前端接收到的用户请求统一由一个后台来处理并返回给不同的前端肯定是最科学和最经济的方式，RESTful API就是一套协议来规范多种形式的前端和同一个后台的交互方式。 RESTful API由后台也就是SERVER来提供前端来调用。前端调用API向后台发起HTTP请求，后台响应请求将处理结果反馈给前端。也就是说RESTful 是典型的基于HTTP的协议。那么RESTful API有哪些设计原则和规范呢？ 1，资源。首先是弄清楚资源的概念

1.web开发应用模式 在开发Web应用中，有两种应用模式： 1.1 前后端不分离 所谓的前后端不分离，就是前后端数据都在同一个服务器中，前端的样式以及页面渲染都由后端一次性渲染出来在前端浏览器中展示出来。 1.2 前后端分离 所谓的前后端分离，就是前端数据在单独的一个服务器中，前端浏览器先行请求前端样式文件然后根据前端样式的请求在向后端请求特定的数据即可，这样不在像以前安卓，IOS以及web浏览需要分别都需要自己的后端服务器，这样多个客户端只要请求统一的API接口，即可请求到指定的数据。节省后端开发的压力。 2.API接口 2.1 API接口分类 为了在团队内部形成共识、防止个人习惯差异引起的混乱，我们需要找到一种大家都觉得很好的接口实现规范，而且这种规范能够让后端写的接口，用途一目了然，减少双方之间的合作成本。 目前市面上大部分公司开发人员使用的接口服务架构主要有：restful、rpc。 rpc: 翻译成中文:远程过程调用[远程服务调用]. http://www.lufei.com/api post请求 action=get_all_student&params=301&sex=1 接口多了,对应函数名和参数就多了,前端在请求api接口时,就会比较难找.容易出现重复的接口 restful: 翻译成中文: 资源状态转换. 把后端所有的数据/文件都看成资源. 那么接口请求数据

一 什么是vue? Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。---vue.js官网 对于vue,相信就算不了解vue的话，也听说过vue的名字,作为去年上升势头最猛烈的前端框架，能在短时间内赢得大量的关注，我觉得了解学习一下是很有必要的。 官网： https://cn.vuejs.org/index.html github: https://github.com/vuejs/vue 官方的长篇大论我就不再赘述了，说下我对vue的理解，首先他是一个js框架，也可以看作是“轻量”的前端渐进式框架。 我觉得vue最显著、最重要，也是最特殊的一个地方，就是“轻量”，在越来越重视前端体验以及组件化模块化的思想下，像往常一样比较复杂臃肿的前端应用逐渐变得轻量、简洁、实用。前端经历了这几年的快速发展，各种框架工具类层出不穷，在摒弃了很多以往旧的开发模式之下，可以迅速开发、降低学习成本、可以迅速迭代成为了vue现在接受程度比较高的原因之一。 二 vue的特点 2.1 双向绑定 当然

在前端开发中，提到动画，我们可以： 直接利用DOM实现动画。 利用canvas实现动画。 利用svg实现动画。 直接用一张gif动图。 利用图片实现帧动画。 ... 所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。 图片帧动画 当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果： 可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。 gif图的动效是没有办法暂停的 。这个时候，可以考虑采用图片帧动画。 图片帧动画可以看做是：把gif图的原理在前端用代码实现了一遍。 上面个那个动效，(假设)可以分成100帧，即100张图片，然后用代码控制100张图片依次显示。并且，可以随时在中途暂停。为了节省http请求，把100张图片合成一张雪碧图，然后用background-position去控制显示哪一张图。推荐一个很不错的图片生成工具：GKA 我把100张图片生成了一个竖直的雪碧图。 在代码里，只需要更新DOM元素的background-position即可实现动画。 首先第一个点需要注意：background-position设置的是 背景图片相对于DOM元素 的起始位置。

前端页面的指定局部刷新，一看就懂。 项目需要，页面有个div内容要做定时刷新，百度了半天，最后总结出一个超级简单的方法 用setInterval做一个简单的定时刷新，内部使用 $("#autore").load(location.href + " #autore"); 双引号内部的是要定时刷新的指定局部的id，后头一定要双引内开头一定要留一个空格，不然有意外情况，好奇心重的朋友可以试试。 重新刷新之后如果局部有使用到js.一定要重新加载js，不然刷新了，不会引用js的，我这用了 $.getScript(“url”); 这个是重新引用一个js ，url是你要引用的js的路径！ （如果没有引用js。 $.getScript(“url”);,这行可以不要） 这样就完成了一个局部定时刷新了。 第一次写，如果有好的建议，给我留言。 来源： CSDN 作者： Sina-S 链接： https://blog.csdn.net/weixin_45418120/article/details/103743799