酸奶的博客

文章目录一、面向对象1. 编程思想2. ES6类和对象3. 类的继承4. 面向对象案例：Tab对象二、构造函数和原型1. 构造函数2. 实例成员与静态成员3. 原型1）构造函数存在的问题2）原型3）对象原型4）constructor属性5）原型链6）原型对象的应用4. 继承5. 类的本质：function三、ES5新增方法1. 数组方法1）forEach遍历数组2）filter筛选数组3）some查找数组2. 字符串方法1）trim() 去除字符串两边空白3. 对象方法1）Object.defineProp

本文以思维导图的方式总结常用的JS数组方法。文章目录1. 数组转化为字符串【原数组不变】2. 添加/删除元素【原数组改变】3. 数组排序【原数组改变】4. 反转数组【原数组改变】5. 查找元素【原数组不变】6. 过滤器【原数组不变】7. 数组映射【原数组不变】8. 拼接数组【原数组不变】9. 截取数组【原数组不变】10. 强大的splice【原数组改变】11. 数组循环【原数组不变】12. 累加器【原数组不变】1. 数组转化为字符串【原数组不变】2. 添加/删除元素【原数组改变】3. 数组排序【

文章目录一、什么是Node.js1. Node.js运行环境2. Node.js可以做什么二、Node.js内置API模块1. fs模块：读写操作文件2. path模块：处理路径3. http模块：创建web服务器三、模块化与npm1. 模块化2. npm四、Node.js第三方API模块1. express2. CORS3. mysql五、Web开发模式六、身份认证1. Session认证机制2. JWT认证机制一、什么是Node.jsNode.js是一个基于"Chrome V8"JS解析引擎的JS运

目录一、客户端与服务器1. 基本概念2. 客户端与服务器通信过程：请求-处理-响应3. 资源请求：XMLHttpRequest对象二、Ajax概念及应用场景1. Ajax(Asynchronous JS And XML)2. Ajax应用三、jQuery封装请求方法四、接口测试工具Postman1. 数据接口2. 接口文档3. 接口测试工具【以Postman为例】五、表单form1. 表单作用2. 表单组成3. 表单属性：规定如何把采集到的数据发送到服务器4. Ajax提交表单数据六、XMLHttpRequ

一、防抖(debounce)1. 基本概念高频事件触发，延迟n秒后回调函数执行一次，在n秒内事件再次被触发则重新计时。借助setTimeout和clearTimeout实现，只有最后一次触发生效。2. 应用1）输入框查询请求，连续输入一串字符后才执行查询请求。有效减少请求次数，节约请求资源。3. 示例// 计时器var timer = false;window.onscroll = function(){ clearTimeout(timer); timer = set

一、通信1. 通信是信息的传递和交换。2. 通信三要素通信主体、通信内容、通信方式。3. 通信协议通信协议是通信双方完成通信所事先约定好的、必修遵守的通信规则。通信双方采用规定好的格式发送和接收消息。二、HTTP1. HTTP(HyperText Transfer Protocol)超文本传输协议。客户端与服务器之间网页内容（超文本）的传输协议。采用【请求-响应】的交互模式。2. HTTP发展版本产生时间内容HTTP/0.91991年不涉及数据包传输；规定客

1. 模版引擎根据程序员指定的模版结构和数据，自动生成一个完整的HTML页面。原理：利用正则表达式对字符串进行替换。2. 模版引擎优点减少了字符串的拼接操作代码结构更清晰代码更易于阅读和维护3. art-template一个简约超快的模版引擎。官网：http://aui.github.io/art-template/zh-cn/index.html4. art-template使用步骤1）导入art-template<script src="./lib/template-

1. 数据可视化可以把数据从冰冷的数字转换为图形，揭示蕴含在数据中的规律和道理。目的是借助于图形化手段，清晰有效的传达与沟通信息。2. 常见的数据可视化库**D3.js**（目前Web端评价最高的JS可视化工具库，入手难）**ECharts.js** （百度出品的一个开源JS数据可视化库）**Highcharts.js** （国外的数据可视化库，非商用免费，被许多国外公司所用）**AntV** （蚂蚁金服全新一代数据可视化解决方案）

一、jQuery基本概念1. 什么是jQueryjQuery是一个快速简洁的JS库，封装了JS常用的功能代码，优化了DOM操作、事件处理、动画设计、Ajax交互等。我们可以快速查询使用里面的功能函数。补充：常见的JS库有jQuery\Prototype\YUI\Dojo\Ext JS\移动端的zepto。这些库都是对原生JS的封装，内部是用JS实现的。2. jQuery的优点轻量级。核心文件几十kb，不会影响页面加载速度。跨浏览器兼容。基本兼容了现在主流的浏览器。

一、PC端网页特效1.offset系列1）offset(偏移量)：动态得到该元素的位置、偏移、大小等。【含边框】2）常用属性

一、Web API 1. APIAPI(Application Programming Interface,应用程序编程接口)：是一些预定义的接口(如函数、HTTP接口)。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源码或理解内部工作机制的细节。简单理解为：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

文章目录一、JS对象1. 创建对象（三种方式）2. 变量与属性、函数与方法的区分3. 遍历对象4. 内置对象二、数据类型分类一、JS对象1. 创建对象（三种方式）// 1）利用对象字面量{} // var obj = {}; 空对象 var obj = { // 属性或方法"键值对"形式，用"逗号"隔开 uname: '张三疯', age: 18, sex: '男',

一、JS三种书写位置1. 行内式直接写到元素的内部。```html<input type="button" value="唐伯虎" onclick="alert('秋香姐')">```2. 内嵌式写在script标签内部。```html<script> alert('沙漠骆驼');</script>```3. 外部式通过script标签引入外部js文件。

一、响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，能够根据不同的屏幕尺寸展示不同的样式。响应式布局原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。屏幕大致可以分为以下四类：超小屏幕（手机）：小于768px小屏设备（平板）：大于等于768

一、rem布局技术方案1： rem + 媒体查询 + less技术方案2： rem + flexible.js【推荐】二、rem是什么rem（root em）是一个单位。它可以实现：1）页面布局文字随屏幕大小变化而变化2）屏幕变化时，宽度和高度可以等比例缩放rem的优点就是可以通过修改html文字大小来改变页面中元素的大小，可以整体控制。<style> html { /* 设置html文字大小 */ font-siz

一、什么是flex弹性布局flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。为盒子模型提供更大的灵活性，任何一个容器都可以指定flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main star

一、移动端基础知识浏览器现状1）PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、IE浏览器、QQ浏览器、百度浏览器…2）移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器…国内的手机浏览器都是根据Webkit修改的内核，所以只需要处理Webkit内核浏览器即可。手机屏幕现状移动端碎片化比较严重，设备屏幕尺寸种类、分辨率种类繁多。开发时无需关注分辨率，使用的尺寸单位是px，常见移动端屏幕尺寸如下（物理像素比的含义在下方第5点进行解释）：

一、精灵图为了有效的减少服务器接收和发送请求的次数，把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，提高页面的加载速度。<!-- 1、设置盒子的高度和宽度 2、通过 background-position 移动精灵图x、y的位置，来显示图片的部分内容 3、背景图片默认左上角对齐的，要往上/左移动图片，是负的。--><style&

一、CSS三特性CSS三大特性：层叠性、继承性、优先级。层叠性相同的选择器下样式冲突：就近原则覆盖。样式不冲突：不影响。<style> div { color: red; font-size: 12px; } div { /* 文本颜色覆盖为粉色，字体大小不影响 */ color: pink; }</style&g

一、引入样式表的三种方式 1. 行内样式表 在指定标签中直接加入style属性，适合于修改简单样式。```html <!-- 在双引号里写样式！！ --><p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>``` 2. 内部样式表在html页面内部写样式,但是是单独写到style标签内部。理论上可以放在HTML文档的任何地方，但一般会放在head标签内。 【优点】可以方便控制当前整个页面中的元素样式设置；结构代码清晰。 【缺点

HTML1. HTML简介全称Hyper Text Markup Language超文本标记语言（超文本：文字、图片、音频、视频、动画等）1）HTML5：跨平台，世界知名浏览器对HTML5支持2）W3C万维网联盟：国际中立性技术标准机构。W3C标准包括：3）HTML基本结构<!--DOCTYPE文档类型声明标签：告诉浏览器使用什么规范，默认是html--><!DOCTYPE html><!--lang：en英文网页，zh-CN中文网页--><ht