前端开发

目录 学习源 Less为什么出现？ 了解Less Less注释符 编译模式 延时加载特性 变量 变量用作属性名 变量用作类名 变量用作链接 定义多个变量 混合 混合（带选择器） 混合（带参数） 混合（多个参数） arguments变量 匹配模式 得到混合变量的返回值 嵌套规则 父元素选择器& 改变 & 顺序及生成所有可能的选择器列表 运算 命名空间 引入 Less函数 学习源 博主：王佳斌 https://blog.csdn.net/weixin_44198965/article/details/90240858 感谢 (〃‘▽’〃) Less为什么出现？ 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 Less有助于你学习Sass。 了解Less 它是一门CSS预处理，扩充了CSS，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，Less 也可以运行在 Node 或浏览器端。 总结： 让CSS更具维护性、主题性、扩展性！

项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改，自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现（1） 17.导航条实现（2） 18.导航条实现（3） 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式（1） 38.footer布局和样式（2） 39

什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 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.demo.com/a.js http://www.demo.com/b.js 同一域名，不同文件或路径 允许 http://www.demo.com/lab/c.js http://www

JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,( Brendan Eich) 在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript. 为了统一三家,ECMA( 欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范 　　　　　　　　　　　　　　　　　　 ECMAScript 尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM）

1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的 “切图（FE）->套模板（RD）” 的开发模式，这种模式下的前端开发虽说不是刀耕火种的原始状态，但是效率非常低下。 前端的工程化问题与传统的软件工程虽然有所不同，但是面临的问题是一样的。我们首先回顾一下传统的软件开发流程模型： 上图中的运行和维护并不是串行关系，也并非绝对的并行关系。维护贯穿从编码到运行的整个流程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是 面向编码 的，那么工程化要解决的是如何提高整个系统生产效率。所以，与其说软件工程是一门科学，不如说它更偏向于管理学和方法论。 软件工程是个很宽泛的话题，每个人都有自己的理解。以上是笔者个人的理解，仅供参考。 具体到前端工程化，面临的问题是如何提高 编码->测试->维护 阶段的生产效率。 可能会有人认为应该包括需求分析和设计阶段，上图展示的软件开发模型中，这两个阶段具体到前端开发领域，更恰当的称谓应该是 功能需求分析 和 UI设计 ，分别由产品经理和UI工程师完成。至于API需求分析和API设计，应该包括在编码阶段。 2. 前端工程化面临的问题

学习前端前言 1.学习前端，你要认识前端是干什么的！ 前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。 HTML、CSS、JavaScript 这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。 HTML 指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML

HTML和HTML5的区别: 其实说白了，就是ES5和ES6的区别，HTML是前端搭建页面的必须品，但是随着人们开发的需求和速度，后期维护和代码可读性，各个方面的需求不断增加，会发现HTML里面的一些标签满足不了，所以就更新换代，不断的更具需求整合添加了一部分新的元素标签进来，其中常用的有如下这些，如有不全请谅解，仅供参考: 新增的结构标签： 1、header元素 表示页面中一个内容区块或真个页面的标题。 2、hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。 3、article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。 4、aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。 5、footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。 还有以下一些也会经常用到，如新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素 ，这些都是新增的一些非常强大的标签，多多研究对我们的提升有非常大的帮助的。 css和css3的区别: 同理,其实和上面讲的HTML区别一样，都是升级版，在原来的基础上添加了一些常用的新属性，下面列举了一些

vue.js高仿饿了么（1-13章全） 链接：https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw 提取码：25z9 Vue.js 2.5 + cube-ui 重构饿了么 App 链接：https://pan.baidu.com/s/1UZyLkzYMvhUhhX3GH5ITvA 提取码：bx53 Vue2.0 + Node.js + MongoDB全栈打造商城系统 链接：https://pan.baidu.com/s/10Jm22uzp4p2NMMRlNac7Rg 提取码：uns3 Vue 2.0 高级实战-开发移动端音乐 WebApp 链接：https://pan.baidu.com/s/1RvF1KziTgq4HEaIVnCvz1w 提取码：v0vb vue去哪儿无密APP 链接：https://pan.baidu.com/s/1vQMWuSNJJ8OrxoGVcZTgtw 提取码：u3yz Vue全家桶+SSR+Koa2全栈开发美团网 链接：https://pan.baidu.com/s/1KTzsYSB5-Ua47r-jArSgJw 提取码：qwen 7天搞定Node.js微信公众号开发 链接：https://pan.baidu.com/s/1Aw6be7tp8ysDs0N1H7Kf_Q 提取码：gf6q Vue + Node +

常见浏览器内核介绍 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核（理解） 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。 JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 （1）Trident(IE内核) 国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10

原文地址： http://www.cnblogs.com/fish-li/archive/2013/01/13/2858599.html 阅读目录 开始 第一代技术：生成客户端代理脚本调用服务端 新技术的改进方向 第二代技术：jQuery直接调用WebService 第三代技术：更简单的数据格式 第四代技术：直接提交表单 多submit按钮的提交（用jQuery.form实现） 批量输入控件的提交（用jQuery.form实现） 提交复杂表单（用jQuery.form实现） 各种AJAX开发方法的对比与总结 相关链接 AJAX技术经过这么多年的发展，出现了一些框架或类库用于简化开发工作，不同的框架类库的使用方法也各不相同。 现在，再回头看看这些技术，看看这些框架类库，我们能感受到技术在不断地发展，AJAX开发越来越容易了。 本文收集了 在ASP.NET平台上 ，一些具体代表性的AJAX开发方法，我将用实际的示例代码来演示如何使用它们， 让您感受AJAX的进化历程，同时也希望将一些优秀的AJAX开发方法介绍给您。 为了方便地介绍这些AJAX开发方法，我将它们划分为四代技术。 注意：按代划分AJAX技术纯属我个人的观点，只为了更好了区分它们。 此外，一些不借助任何框架类库的原始AJAX开发方法，本文将不讨论它们。 回到顶部 第一代技术：生成客户端代理脚本调用服务端