学习记录

一、什么是Webpack？webpack是一个现代的Javascript应用的静态模块打包工具二、前端模块化2.1、打包是如何理解呢？就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）并且在打包的过程中的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成Javascript等等操作但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？2.2、和grunt/gulp的对比

一、为什么需要模块化随着ajax异步请求的出现，慢慢形成了前后端的分离为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护比如全局变量同名问题：如下的例子 <script> // aaa.js文件中，小明定义了一个变量，名称是flag,并且为true flag = true; // bbb.js文件中，小红也定义了flag这个变量,为false flag = false; //

一、父子组件的访问方式：$children有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件父组件访问子组件：使用$chilren或$refs reference（引用）子组件访问父组件：使用$parent我们先来看下$children的访问this.$children是一个数组类型，它包含所有子组件对象我们这里通过一个遍历，取出所有子组件的message状态...

一、全局组件和局部组件当我们通过调用Vue.component（）注册组件时，组件的注册是全局的这意味着该组件可以在任意Vue示例下使用如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件 <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <div id

一、JavaScript的高阶函数//编程范式：命令式编程/声明式编程//编程范式：面向对象编程（第一公民：对象）//函数式编程（第一公民：函数）//filter/map/reduce//filter中的回调函数有一个要求：必须返回一个Boolean值//true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中//false:当返回false，函数内部会自动过滤这次的nconst nums = [10, 20, 111, 222, 444, 40, 50];let tot

一、哈希表查找定义散列技术：在记录的存储位置和它的关键字之间建立一个确定的对应关系f，使得每个关键字key对应一个存储位置f（key）哈希表：采用散列技术将记录存储在一块连续的存储空间中，这块连续存储空间称为散列表或哈希表散列地址：散列函数得到的存储位置，即散列函数值称为散列地址。冲突在构造散列表时，不同的关键字可能得到同一个散列地址，这种关键字不同而散列函数值相同的现象称为冲突。二、哈希函数的定义方法两个原则：计算简单散列地址分布均匀1、直接定址法取关键字

一、v-for遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成v-for的语法类似于JavaScript中的for循环格式如下： item in items 的形式我们来看一个简单的案例：如果在遍历的过程中不需要使用索引值v-for=“movie in movies”依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？语法格式：v-for=（it

一、let/var1、块级作用域js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题<script> //ES5中的var是没有块级作用域的(if/for) //ES6中的let是有块级作用域的(if/for) //ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决应用外

一、插值语法1、mustache语法 <div id="app"> <h2>{{message}}</h2> <h2>{{message}},李银河！</h2> <!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 --> <h2>{{firstName+lastName}}</h2> <h2

一、认识vuevue是一个渐进式的框架，渐进式

一、二叉排序树（又称为二叉查找树）它或者是一颗空树，或者是具有下列性质的二叉树若它的左子树不空，则左子树上所有结点的值均小于它的根结构的值；若它的右子树不空，则右子树所有的结点的值均大于它的根结点的值；它的左、右子树也分别为二叉排序树构造一颗二叉排序树的目的，其实并不是为了排序，而是为了提高查找和插入删除关键字的速度1、二叉排序树查找操作/* 二叉树的二叉链表结点结构定义 */typedef struct BiTNode /* 结点结构 */{ int data; /* 结点数据

一、ES6 的内置对象扩展1、Array 的扩展方法（★★）1）扩展运算符（展开语法）扩展运算符可以将数组或者对象转为用逗号分隔的参数序列let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3,相当于下面的代码 console.log(1,2,3);扩展运算符可以应用于合并数组// 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary

一、ES6相关概念1、什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。2、为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码二、ES6新增语法1、let（★★★）ES6中新增了用于声明变量的关键字1）let声明的变量只在所处于的块级有效 i

一、查找概论查找表由同一类型的数据元素（或记录）构成的集合关键字数据元素中某个数据项等等值，用它可以标识一个数据元素，也可以标识一个记录的某个数据项（字段）主关键字可以唯一地标识一个记录的关键字次关键字可以识别多个数据元素（或记录）的关键字查找就是根据给定的某个值，在查找表中确定一个其关键字等于给定值的数据元素（或记录）查找表按照操作方式来分为两大种：静态查找表和动态查找表静态查找表：只作查找操作的查找表。它的主要操作有：查询某个“特定的”数据元素是否在查找

一、开始GD扩展GD库是用来处理图片的。使用GD库，首先在php.ini中开启GD扩展extension=php_gd2.dll开启以后就可以使用image开头的函数了二、创建最简单的图片步骤创建画布给画布填充颜色（给画布分配的第一个颜色自动填充成背景色）显示图片<?php$img=imagecreate(200,100); //创建图片//var_dump($img); //resource(2) of type (gd) imagecolorallocate($i

一、如何组织工程结构本次demo的使用如下工程目录结构二、如何避免类样式冲突现代工程可以使用CSS Module、CSS in JS、Scoped CSS等方案解决传统工程可以考虑使用BEM规范global.css中的类样式必须以g_开头，其他模块文件中的类样式需以模块名_开头。例1，全局类样式中需要添加一个针对图标的通用样式，可以命名为g_icon例2，顶部菜单模块中的容器可以命名为top-nav_container 某些类样式是带有状态信息的，此类样式需要在样式名后添加后缀--

四、移动端常用开发插件4.1、什么是插件移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？JS插件是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小我们以前写的animate.js也算一个最简单的插件fastclick插件解决300ms延迟。使用延时Github官网地址4.2、插件的使用引入js插件文件按照规定语法使用fastclic

一、触屏事件1.1、触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有独特的地方。比如触屏事件touch（也称触屏事件）,Android和IOS都有touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔...

一、常见网页特效案例案例：网页轮播图

一、最小生成树构造连通网的最小代价生成树称为最小生成树一个连通图的生成树是一个极小的连通子图，它含有图中全部的顶点，但只有足以构成一棵树的n-1条边1.1、普里姆算法#define MAXVEX 20#define GRAPH_INFINITY 65535/* Prim算法生成最小生成树 */void MiniSpanTree_Prim(MGraph G){ int min, i, j, k; int adjvex[MAXVEX]; /* 保存相关顶点下标 */ int l

案例：仿京东放大镜案例分析：整个案例可以分为三个功能模块鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子的功能黄色的遮挡层跟随鼠标功能移动黄色遮挡层，大图片跟随移动功能功能实现黄色的遮挡层跟随鼠标功能把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子的坐标之后是数值给遮挡层做left和top值此时用到鼠标移动事件，但是还是在小图片盒子内移动发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半遮挡层不能超出小图片盒子的范围如果小于零

图是一种较线性表和树更加复杂的数据结构。在图形结构中，结点之间的关系可以是任意的，图中任意两个数据元素之间都可能相关一、图的定义图是由顶点的有穷非空集合和顶点之间边的集合组成，通常表示为：G（V，E），其中，G表示一个图，V是图G中的顶点的集合，E是图G中边的集合线性表中数据元素成为元素，树中称为结点，在图中称为顶点在定义中，若V是顶点的集合，则强调来了顶点集合V有穷非空在图中，任意两个顶点都可能有关系，顶点之间的逻辑关系用边来表示...

var str = “aaaa”; //想要匹配四个一样 xxxx 的var reg = /( a )/g;//这个括号还有一个子表达式的意思，正常来说括号写了没有用，也没影响，但是在特殊情况，当你把式子当特殊括起来以后，这个括号会记录里面匹配的内容，记录完以后利用\几可以反向引用出来，如下var reg = /( a )\1/g;//这个\1 意思是反向引用第一个子表达式里面的内容，这里的意思是匹配 a 和后面同样的 a如果换成 var reg = /( \w )\1/g;//意思就变成了\w .

一、补充例<script> var str = "abcdedf"; var str = "abcd\"edf";</script>会把\后面接的字符取消原来的意思，变成文本想打一个转义符合\文本，就用\就可以了\n是换行\n只在console.log里面有效，在document.write里面没有用，会变成一个空格\r是行结束符，但是写成\r\n才看的出来是回车了\t是table，缩进符\t是table

一、jsonJSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）JSON.parse()； string---->jsonJSON.stringify()； json---->string例：json的属性名必须加双引号（传的是二进制文本）...

一、事件分类1、键盘事件1、keydown，keyup，keypress2、触发顺序是 keydown > keypress > keyup3、keydown 和 keypress 的区别1）keydown 可以响应任意键盘按键，keypress 只可以相应字符类键盘按键检测字符类不准确，keypress 检测字符很准。但是 keydown 能监控所有，包括上下左右都能监控，但是 keypress 只能监视字符。用法：如果你想监控字符类按键，并想区分大小写，就用 keypr

五、事件处理模型 — 事件冒泡、捕获事件处理的两个模型：事件冒泡、捕获（不能同时存在）只点了黄色区域，但是出现了 box,content,wrapper，往下漏了，就是事件冒泡1、事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）结构上存在父子关系的元素，如果点击到子元素，会一级级向父元素传递这个事件（从代码的角度是自底向上一层层冒泡的）例：加了 margin，只点黄色的，还是出现了 box,content,wrap

一、事件（所有事件都是用的小写）交互是你对页面动一下，页面给一个反馈何为事件 —— 就是一个动作，没效果也是事件重要吗？—— 交互体验的核心功能演示 demo — 拖拽，和点击二、如何绑定事件1、ele.onxxx = function (event) {}1）兼容性很好，但是一个元素只能绑定一个事件处理程序div.onclick = function(){}div.onclicck 就叫做可以被点击的事件（绑定事件类型），function(){}是反馈，一旦事件被触发，就

一、脚本化cssdom不能操作css，是间接操作css，这一部分需要记下1、读写元素css属性（间接控制）1 dom.style.prop常用，只有这个可读可写，其余只能读1）可读写行间样式 ，没有兼容性问题，碰到float这样的关键字属性，前面应加css（行间样式以外没用）eg：float---->cssFloat2）符合属性必须拆解（建议），组合单词变成小驼峰式写法3）写入的值必须是字符串格式dom.style属性。能拿，能写（通过写间接改变了css属性）...

一、DOM/BOM基本操作这一部分都是实战用的，笔试面试一般不考，脚本化就是操作的意思1、查看滚动条的滚动距离1 window.pageXOffset横向/pageYOffset纵向滚动条IE8及IE8以下不兼容（IE9部分兼容）IE9以上能用例：滚动条往下滚动了400px，求浏览器最顶端到滚动条滚动的位置的像素答案 400px+首屏像素（此时这个屏幕的底端距离整个网页的最顶端也是这样算）2 IE8 及 IE8 以下的使用方法1）document.body.scrollLe

一、DOM基本操作1、Element节点的一些属性innerHTML==》可取，可写，课赋值innerText==》可取，可赋值textContent（火狐使用这个）例：div.innerHTML 可以改变 div 里面的 HTML 的内容 <div> <span>123</span> <strong>234</strong> </div> <script>

一、线索二叉树原理对于一个有n个结点，每个结点有指向左右孩子的两个指针域，所以一共是2n个指针域。而n个结点的二叉树一共有n-1条分支线数。所以存在2n-（n-1）=n+1个空指针域因此，我们可以把上图中存在的大量空指针域拿来存放结点的前驱和后继节点的地址。我们把这种指向前驱和后继的指针称为线索，加上线索的二叉链表称为线索链表，相应的二叉树就称为线索二叉树如上图所示，将所有空指针域的rchild改为指向它的后继结点。于是我们就可以知道H的后继结点是D，I的后继结点是B，J的后继结点是E

一、DOM接口dom结构树代表的是一系列继承关系例：Document和document的关系document 继承自 HTMLDocument.prototype。HTMLDocument.prototype 继承自 Document.prototype原型是不是一个对象？<script> HTMLDocument.prototype = { __proto__: Document.prototype.abc = "abc"

一、DOM 基本操作(大部分都是类数组)——方法类操作1.对节点的增删改查()括号里面都不用写.或#查查看元素节点document 代表整个文档（如果给 html 标签上面再套一层标签就是 document）document.getElementById()元素 id 在 Ie8 以下的浏览器，不区分 id 大小写，而且也返回匹配 name 属性的元素，通过 id 标识我们来选择这个元素，一一对应除了 id 以外，其余选择出来的都是一组，很少用 id 选择器.getEl

一、什么是DOM1、DOM---->Document Object Model （文档对象模型）2、DOM定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系）

一、自动加载类在项目开发中，因为一个文件中只能写一个类，并且在执行过程中会有很多的类参与，如果一个一个的加载很麻烦，所以，就需要一个机制实现在PHP执行过程中自动加载需要的类。1.1 类的规则一个文件中只能放一个类（必须）文件名和类名同名（必须）类文件以.class.php结尾（不是必须）1.2 手动加载类1、创建Goods.class.php页面<?php //商品类abstract class Goods{ protected $name; final pu

继承分为接口继承和实现继承ECMAScript只支持实现继承，这主要是通过原型链实现的一、原型链构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型...

一、try…catch防止我们报错try 花括号{里面会正常执行，但是遇到 b 报错时 b 就执行不出来，后面的代码 c 就不执行了，但是外面的代码 d 还能执行}catch(e)，这个 e 可以随便写，写 abc 都可以，也是个形参 <script> try { console.log("a"); console.log(b); console.log("c"); } catc

一、包装类引用值就是一种对象（泛泛的概括类对象），包括数组、函数、对象。在内存里面存储。原始值不能有属性和方法，引用值才可以有但是经过包装类，原始值就能有属性和方法通过原始值访问属性和方法，系统为了让语法好用，不报错，系统会帮我们进行一个js内部机制包装类<script> var str = "abc"; //new String("abc").length console.log(str.length); </s

一、二叉树的顺序存储结构二叉树的顺序存储结构就是用一维数组存储二叉树中的结点，并且结点的存储位置，也就是数组的下标要能体现结点之间的逻辑关系，比如双亲与孩子的关系，左右兄弟的关系等将上图存储在一维数组中，如下图所示：数组的下标代表结点的位置，比如E结点的数组下标是5，即代表它的位置是5。如果将如下的非完全二叉树存在数组中，该如何表示呢？上图是一棵非完全二叉树，其中该二叉树只存在ABCEGJ（即蓝色部分）结点，为了方便在数组中存储，需要将其补成完全二叉树，用^表示不存在的结点，如下图所