CurryCoder的个人博客

es6-cheatsheet这是一个 ES2015(ES6) 的Cheatsheet，其中包括提示、小技巧、最佳实践和一些代码片段，帮助你完成日复一日的开发工作。Table of Contentsvar 与 let / const 声明代码执行块替换立即执行函数箭头函数字符串解构模块参数类SymbolsMapsWeakMapsPromisesGeneratorsAsync AwaitLicensevar versus let / const除了 var 以外，我

技术交流 QQ 群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder 的程序人生1.数据库概述及环境搭建1.1 为什么要使用数据库动态网站中的数据都是存储在数据库中。数据库可以用来持久存储客户端通过表单收集的用户信息。数据库软件本身可以对数据进行更高效的管理。1.2 什么是数据库数据库即存储数据的仓库，可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件，可以通过 API 去操作它。常见的数据库软件有：mysql、mongoDB、oracle

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.Node.js异步编程1.1 Node.js中的异步API如果异步API后面的代码执行依赖当前异步API的执行结果，但实际上后续代码在执行的时候，异步API还没有返回结果，这个问题该怎么解决呢？如下所示：fs.readFile('./demo.txt',(err, result) => {});console.log('文件读取结果');需求：依次读取A文件、B文件、C

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.服务器端基本概念1.1 网站的组成网站应用程序主要分为两大部分：客户端和服务器端。客户端：在浏览器中运行的部分，就是用户看到并与之进行交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。1.2 Node网站服务器能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求作出对应的响应。

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.第三方模块GulpGulp：基于node平台开发的前端构建工具。前端构建工具：将机械化操作编写成任务，想要执行机械化操作时，执行一个命令任务就可以自动执行了。用机器代替手工，提高开发效率。2.Gulp能做什么项目上线，将HTML、CSS、JS文件压缩合并；语法转换(ES6、less…)；公共文件抽离；修改文件浏览器自动刷新；3.Gulp使用使用npm install

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.Node开发概述1.1 为什么要学习服务器端开发基础能够与后端程序员更加紧密的配合；网站业务逻辑前置，学习前端技术需要后端技术支撑(Ajax)扩展知识视野，能够站在更高的角度审视整个项目1.2 服务器端开发要做哪些事实现网站的业务逻辑数据的增删改查1.3 为什么选择Node使用JavaScript语法开发后端应用一些公司要求前端工程师掌握Node开发生态系统活跃，

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.什么是ES6ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。ES6实际上是一个泛指，泛指ES2015及之后的版本。2.为什么使用ES6？每一次标准的诞生都意味着语言的完整，功能的加强。JavaScript语言本身也有一些令人不满意的地方：变量提升特性增加了程序运行时的不可预测性。语法过于松散，实现相同的功能，不同的人可能会写出不同

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.什么是正则表达式正则表达是(regular expression)是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表达式通常被用于检索、替换那些符合某个模式(规则)的文本，例如验证表单：用户名表单只能输入英文字母、数字或下划线，昵称输入框中只能输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中一些敏感词(替换)，或从字符串中获取我们想要的特定部分

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.jQuery插件jQuery功能比较有限，想要更复杂的特效功能，可以借助于jQuery插件完成。注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。jQuery插件常用网站：jQuery插件库：http://www.jq22.com/jQuery之家[推荐]: http://www.htmleaf.com/2.jQue

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.jQuery拷贝对象如果想要把某个对象拷贝(合并)给另外一个对象使用，此时使用$.extend()方法。语法：$.extend([deep], target, object1, [objectN])deep:如果为true表示深拷贝，反之为浅拷贝。target:要拷贝的目标对象。object1:待拷贝的第一个对象。浅拷贝把被拷贝对象中的复杂数据类型的地址拷贝给目标对象，修改目标

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.jQuery事件注册单个事件注册语法：element.事件(function(){})// 例如 $("div").click(function(){ // 事件处理程序 })其他事件与原生JS基本一致。例如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。2.jQuery事件处理2.1 事件

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生主要是遍历、创建、添加、删除元素操作。1.遍历元素jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。语法1：$("div").each(function(index,domEle){xxx;})each()方法遍历匹配的每一个元素。主要用DOM处理，each每一个元素。里面的回调函数有2个参数：index是每个元素的索引号，domE

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生主要针对元素的内容还有表单的值操作。1.普通元素内容html()[相当于原生innerHTML]获取元素的内容语法规范：html() // 获取元素的内容设置元素的内容语法规范：html("内容") // 设置元素的内容2.普通元素文本内容text()[相当于原生innerText]获取元素的文本内容语法规范：text() // 获取元素的文本内容设置元素

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.设置或获取元素固有属性值prop()所谓的固有属性就是指元素本身自带的属性。如<a>元素里面的href，<input>元素里面的type。获取属性语法：prop("属性名")设置属性语法：prop("属性名", "属性值")2.设置或获取元素自定义属性值attr()用户自己给元素增加的属性，称为自定义属性。比如给div添加index="1"属性。a

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.jQuery基础选择器原生JS获取元素的方式很多、很杂，而且兼容性情况不一致。因此，jQuery给我们做了封装，使获取元素统一标准。语法格式：$('选择器') // 里面选择器直接写CSS选择器即可，但是要加引用2.jQuery层级选择器3.jQuery隐式迭代jQuery设置样式：$('div').css('属性','值');隐式迭代：遍历内部DOM元素(伪数

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.JavaScript库JavaScript库：即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show、获取元素等。简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样，我们可以快速高效的使用这些封装好的功能了。比如jQuery就是为了快速

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.浅拷贝与深拷贝浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。深拷贝拷贝多层，每一级别的数据都会被拷贝。Object.assign(target,sources)，es6新增方法可以实现浅拷贝。<script> var obj = { id: 1, name: 'CurryCoder', msg: { // 更深层次的

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.递归如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解：函数内部自己调用自己，这个函数就是递归函数。递归函数的作用和循环效果一样，由于递归很容易发生栈溢出错误，所以必须要加退出条件return。2.利用递归求某个数的阶乘```javascript<script> var str = prompt('请输入一个整数: '); var nu

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.变量的作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会被销毁。2.什么是闭包闭包是指有权访问另一个函数作用域中变量的函数。简单理解就是一个作用域可以访问另外一个函数内部的局部变量。局部变量所在的函数就称为闭包函数。闭包的主要作用：延伸了变量的作用范围。3.闭包案例循环

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.高阶函数高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。function fn(callback){ callback&&callback();}fn(function(){alert('hi)}) // 此时fn就是高阶函数 function bar(){ return function(){ }}ba

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.什么是严格模式(strict model)JavaScript除了提供正常模式外，还提供了严格模式。ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行JS代码。严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的JavaScript语义做了一些更改：消除了JavaScript语法的一些不合理、不严谨的地方，减少

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.函数内this指向问题函数内部的this指向是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同。一般情况下，this指向我们的调用者。2.改变函数内部的this指向JavaScript为我们专门提供了一些方法帮我们更优雅的处理函数内部的this指向问题，常用的有bind()、call()、apply()三种方法。2.1 call()方法call()方法调用

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.函数的定义方式函数声明方式function关键字(命名函数)function fn(){};函数表达式(匿名函数)var fun = function(){};new Function(‘参数1’, ‘参数2’, …, ‘函数体’)。注意：Function中的参数必须是以字符串的格式输入。这种方式创建函数执行效率低，也不方便书写，因此很少使用。所有函数都是Function的实例(

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.ES5新增方法概述ES5中给我们新增了一些方法，可以很方便的操作数组或字符串，这些方法主要包括：数组方法字符串方法对象方法2.数组方法(迭代(遍历)方法：forEach()、map()、filter()、some()、every()。// forEach()：遍历数组var arr = new Array(1, 2, 3);var sum = 0;arr.forEa

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.概述ES6之前并没有给我们提供extends继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。2.call()作用：调用这个方法，可以调用这个函数并且修改函数运行时的this指向。语法格式:函数名.call(thisArg, arg1, arg2, ...)thisArg:当前调用函数this的指向对象；arg1,arg2:传递的其他参数；3.借用构

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.概述在典型的OOP语言中(如Java)，都存在类的概念。类就是对象的模板，对象就是类的实例。但是在ES6之前，JS中并没有引入类的概念。ES6全称是ECMAScript6.0，2015.06发布。但是，目前浏览器的JavaScript是ES5版本，大多数高版本的浏览器也支持ES6，不过只实现了ES6的部分特性和功能。在ES6之前，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定

技术交流QQ群:1027579432，欢迎你的加入！欢迎关注我的微信公众号：CurryCoder的程序人生1.面向对象面向对象的思维特点：a.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板)；b.对类进行实例化，获取类的对象；面向对象编程考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。2.对象现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着的事物。在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事

技术交流 QQ 群:1027579432，欢迎你的加入！1.动画实现原理核心原理：通过定时器setInterval()不断移动盒子位置。实现步骤：a.获得盒子当前位置；b.让盒子在当前位置上加一个移动距离；c.利用定时器不断重复这个操作；d.加一个结束定时器的条件；注意：此元素需要添加定位，才能使用element.style.left。2.动画函数简单封装注意函数需要传递2个参数：动画对象和移动到的距离。3.动画函数给不同元素添加不同定时器如果多个元素都使用一个动画函

技术交流 QQ 群:1027579432，欢迎你的加入！1.元素 scroll 系列属性使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。2.页面被卷去的头部如果浏览器的高(或宽)度不足以显示整个页面时，会出现滚动条。当滚动条向下滚动时，页面上面会被隐藏掉的高度，就称为页面被卷去的头部。滚动条在滚动时触发 onscroll 事件。3.仿淘宝固定右侧侧边栏案例功能需求：原先侧边栏是绝对定位；当页面滚动到一定位置时，侧边栏改为固定定位；页面继续滚动，会让

技术交流 QQ 群:1027579432，欢迎你的加入！1.client 概述使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。2.淘宝 flexible.js 源码分析立即执行函数:不需要调用，立即能够自己执行的函数。创建一个独立的作用域，避免了命名冲突问题。(function(){})()或者(function(){}());立即执行函数也可以传递参数，如下例所示：(functi

1.仿京东放大镜案例功能需求：鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，鼠标一离开隐藏2个盒子功能// 当页面全部加载完毕，因此需要load，执行里面的js代码window.addEventListener("load", function() { var preview_img = document.querySelector(".preview_img"); var mask = document.querySelector(".mask"); var big =

1.模态框拖拽案例模态框也称为弹出框。功能需求：点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层，可以按住鼠标拖拽模态框在页面中移动鼠标松开，可以停止拖到模态框移动整体思路：点击弹出层，模态框和遮挡层就会显示出来display:block;点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;// 获取元素var login = document.querySelect

技术交流QQ群:1027579432，欢迎你的加入！1.history对象window对象提供了一个history对象，它与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的url。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G6NldZGG-1590398189149)(https://upload-images.jianshu.io/upload_images/13407176-05dc0e3cbd9864ea.png?imageMogr2/aut

技术交流QQ群:1027579432，欢迎你的加入！1.navigator对象navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent的头部值。下面的前端代码可以判断用户哪个终端打开页面，实现跳转。if((navigator.userAgent.match(/(phone|pad|pod|Phone}iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrow

技术交流QQ群:1027579432，欢迎你的加入！1.什么是location对象window对象给我们提供了一个location属性用于获取或设置窗体的url，并且可以用于解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。2.url统一资源定位符(url)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。url的一般语法格式为：protocol://host[:port]/pa

技术交流QQ群:1027579432，欢迎你的加入！1.JS是单线程JavaScript语言的一大特点是单线程，即同一时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。例如对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。单线程意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染和加载

技术交流QQ群:1027579432，欢迎你的加入！1.两种定时器window对象给我们提供了两个非常好用的方法-定时器。setTimeout()：用于设置一个定时器，该定时器在定时器到期后执行调用函数。注意：window可以省略；这个调用函数可以直接写函数，或者写函数名或者采取’函数名()'三种形式，第三种方式不推荐；延迟时间的单位是毫秒，默认的0；因为定时器可能有很多，所以经常给定时器赋值一个标识符(自定义的定时器名字)；window.setTimeout(调用函数,[延迟的毫秒

技术交流QQ群:1027579432，欢迎你的加入！1.window对象的常见事件窗口加载事件：window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、JS脚本文件、CSS文件等)，就调用的处理函数。window.onload = function(){};或者window.addEventListener('load', function(){});注意：有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页

技术交流QQ群:1027579432，欢迎你的加入！1.BOM概述什么是BOM：BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。DOM与BOM的对比：DOM文档对象模型DOM就是把文档当作一

技术交流QQ群:1027579432，欢迎你的加入！1.注册事件(绑定事件)注册事件概述：给元素添加事件,称为注册事件或绑定事件。注册事件有两种方法：传统方式方法监听注册方式传统方式：利用on开头的事件onclick，如下例所示：特点：注册事件的唯一性；同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；<button>传统注册事件方式</button><button>方法监听注册事件</butto