学习记录

一、什么是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

一、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

一、如何组织工程结构本次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对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔...

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

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

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>

一、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定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系）

继承分为接口继承和实现继承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

一、 笔试真题例： <script> var x = 1, y = z = 0; function add(n) { return n = n + 1; } y = add(x); function add(n) { return n = n + 3; } z = add(x); </scri

一、命名空间（其实就是对象）管理变量，防止污染全局，适用于模块化开发多人开发，对象命名容易重复，就要解决命名空间的问题下面是命名空间的老旧解法用的时候，用下面的写法下面是现在公司最常见的方法：用闭包来解决（也可用webpack），返回方法的调用init是初始化，入口函数，入口名字init调用了这个函数的功能var name = "bcd"; var init = (function() { var name = "acb";

一、计算小数的bugtoFixed是保留两位有效数字有个bug，在控制台0.14*100出现14.0000000000002，是js开发精度不准向上取整Math.ceil(123,234)//124向下取整Math.floor(123.999)//123Maht.random()是产生一个0到1区间的开区间，随机数所以一般这种情况下，我们不用toFixed，因为精度不准确用这种方法取整更好,就不会精度不准确注意：之前js在小数点后面最多能容纳15-1

一、原型定义：原型是 function 对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。利用原型特点和概念，可以提取共有属性。对象属性的增删和原型上属性增删改查。对象如何查看原型 ==> 隐式属性__proto__。对象如何查看对象的构造函数 ==> constructor。例 person.prototype //原型（描述一种继承关系），出生时就被定义好了person.prototype ={}

一、克隆1、浅层克隆例：这个是做的浅层克隆var obj = { name: "abc", age: 123, sex: 'female' } var obj1 = { } function clone(origin, target) { for (var prop in origin) { target[p

一、类数组可以利用属性名模拟数组的特性可以动态的增长length属性如果强行让类数组调用push方法，则会根据length属性值的位置进行属性的扩充例：这个看着像数组，但是数组有的方法，他全部都没有，所以他是类数组function test() { console.log(arguments); arguments.push(7); } test(1, 2, 3, 4, 5, 6);类数组长得像数组，但

一、封装type方法定义对象方式：自变量构造函数自定义的构造函数Object.create定义数组的方式：var arr=[]；数组自变量；var arr=new Array()；系统调用。两者区别就只一位数的情况数组能用的方法来源于Array.prototype例：var arr = [1, , 1];数组不是每一位都有值，稀疏数组var arr = new Array();var arr1 = new Array(1, 2, 3, 4, 5);var a

目录：元素偏移量offset系列元素可视区client系列元素滚动scroll系列动画函数封装常见网页特效案例一、元素偏移量offset系列1.1 offset概述offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset系列常用属性：offset系列属性作用element.offsetParent返回作为

一、对象注意：undefined是函数的返回值，因为没有设置返回值，所以就是灰色的undefined改mrDeng.health为this.health，此处this指代的是自己，是第一人称，指的是mrDeng。因为this是在一个方法里面，所以指的是这个方法smoke : function (){ console.log(‘I am good’) this.health --;},二、属性的增、删、改、查=“”等号后面的引号里面需要有值才可以删除必须借助 delet

一、闭包当内部函数被保存到外部时，将会产生闭包。闭包会导致原有作用域链不释放，造成内存泄漏内存泄漏就是内存占用，内存被占用的越多，内存就变得越来越少了，就像内存被泄漏了一样return b 以后，就返回出去，再销毁 fn a答案：123因为没有b（）；此时b还是被定义的状态，和a执行的状态是一样的。function a(){}是在return b之后执行完，才销毁。return b 让a执行时的AO被保存在外面return b 是把 b（包括 a 的 AO）保存到外部了（放在全局）当 a

1、作用域精解<br<[[scope]]：每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链运行期上下文：当函数在执行的前一刻，会创建一个称为执行期上下文的内部对象，一个执行期上下文定义了一个函数执行

1、BOM概述1.1 什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性BOM缺乏标准，Javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分DOMBOM文档对象模型浏览器对象模型DOM就是把【文档】当做一个【对象】来看待把【浏览器】当做

一、作业域初探作用域定义：变量（变量作用于又称上下文）和函数生效（能被访问）的区域全局、局部变量作用域的访问顺序zuoyyu1函数外面不能用函数里面的。里面的可以访问外面的，外面的不能访问里面的，彼此独立的区间不能相互访问test{}和demo{}不能互相访问，但是可以访问外面的全局变量例：彼此独立的区间不能相互访问，全局变量都可以访问function test(){ var a =123; function demo(){var b = 234;document.write(a