祭月M的博客

原创 JS中forEach循环不能break或return跳出循环

JS中forEach（）方法无法在所有元素都传递给调用的函数之前终止遍历。也就是说使用forEach对数组进行遍历时，不能使用break或return跳出循环，使用return只能跳过本次循环，相当于continue。

原创 nodeJS解决跨域（同源策略）的简单三种方法（jsonp,cors，服务器代理）

产生跨域请求问题的原因因为在浏览器中有一个同源策略，这是浏览器最基本的安全功能，但是只在浏览器中有，在服务器中没有这个问题。同源就是指：协议，域名，端口号都相同，任意一个不满足，就触发了同源策略，我们把触发了同源策略的请求叫做跨域请求。jsonp <script src="http://domain/api?name=xujie&pwd=123456&callback=jsonp""></script><script> //函数名与地址的c

原创 SyntaxError: Unexpected identifier If the above error is not helpful, you may want to try EJS-Lint解决

一般是你写的js代码部分有错误，这个是很难检查出来的，因为用模板中间件写的时候，它不会检查js语法，所以建议限制js文件里写完需要的js代码再复制到你要用到的地方去。还有就是可能您的模板标签写错了如源代码<% include head %> //这里<ul> <% articles.forEach((article) => { %> <li> <a href="/articles/<%= article.id

原创 Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher. Setting the NODE_SKIP_P

出现 Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher.Setting the NODE_SKIP_PLATFORM_CHECK environment variable to 1 skips thischeck, but Node.js might not execute correctly. Any issues encountered onunsupported platforms will n

原创 npm 安装里的-S和-D的区别

如果使用-S，用于生产环境，就是会一直要用到，是不能删除的如果使用-D,只用于开发环境，就仅仅开发是需要用到，相当于临时的。比如gulp包，用于压缩代码。用-D 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而-S会将包的名称及版本号放在dependencies里面。...

原创 浏览器无法添加携带cookie的问题

最快的解决方法：只有谷歌浏览器有这个问题，所以最好的方法是不要用谷歌浏览器，换其他的浏览器。问题根源：因为谷歌浏览器在升级到80版本之后，Cookie的SameSite属性默认值由None变为Lax，Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。程序员解决方法：1.打开谷歌浏览器 输入 chrome://flags/ 搜索 SameSite将关于sameSite的属性全部设置为disabled2.在chrome浏览器的桌面快捷方式右键——属性—

原创 GULP详解 自动化打包压缩工具（怎么打包压缩js，怎么打包压缩css，怎么打包压缩html，怎么打包压缩sass等）

GULPgulp 是一个项目开发的 自动化打包构建工具基于 node 环境来运行的什么是自动化打包构建工具比如我们在开发的过程中，会写到 js 文件，css 文件，等等我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好而我们在写 js 文件的时候，会有很多 换行/空格 之类的东西这些 换行/空格 都是占文件体积的一部分那么我们在上线之前就要吧这些 换行/空格 尽可能的删除掉我们又不能一个文件一个文件的去删除就要用到一个自动化工具来帮助我们把这些多余的东西干掉这个

原创 SASS使用详解 （安装环境，编译，语法）

SASSSASS官网世界上最成熟、最稳定、最强大的专业级CSS扩展语言！sass 是一个 css 的预编译工具也就是能够 更优雅 的书写 csssass 写出来的东西 浏览器不认识依旧要转换成 css 在浏览器中运行这个时候就需要一个工具来帮我们做安装 sass 环境以前的 sass 需要依赖一个 ruby 的环境现在的 sass 需要依赖一个 python 的环境但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以需

原创 前端JS node详解 （导入导出，fs模块，http模块，npm详解，nrm详解）

node简介node.js是浏览器的js引擎。浏览器中有一个js引擎用来解析js代码，只能解析js代码中的ECMAScript。dom和bom的解析依赖的是浏览器本身。将这个js引擎单独拿出来，就是node了。node.js和js的关系node.js和js的关系要让这个引擎运行起来，有人将他做成了一个软件，安装在电脑上，js代码就不用依赖浏览器运行了，在电脑的命令行也能运行js代码。为什么要这么做？因为这样的话，js就能写后台了。官网：https://nodej

原创 jQuery的使用重点超详解（三）集训版（ajax请求，jQuery的多库共存，jQuery的插件扩展）

jQuery发送 ajax 请求发送 get 请求// 直接使用 $.get 方法来发送一个请求/* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型*/$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')发送 post 请求// 直接使用 $.post 方法来发送一个请求/* 参数一： 请求地址 参数二： 请求时携带的

原创 jQuery的使用重点超详解（二）集训版 （创建元素、获取元素属性、获取元素位置、绑定事件、动画）

jQuery元素操作创建一个元素var div = $('<div></div>')内部插入元素// 向 div 元素中插入一个 p 元素，放在最后$('div').append($('<p></p>'))// 把 p 元素插入到 div 中去，放在最后$('<p>hello</p>').appendTo($('div'))// 向 div 元素中插入一个 p 元素，放在最前$('div').prepe

原创 jQuery的使用重点超详解（一）集训版（选择器、筛选器、元素属性操作、元素样式操作）

jQueryjQuery 是一个前端库，也是一个方法库他里面封装着一系列的方法供我们使用我们常用的一些方法它里面都有，我们可以直接拿来使用就行了jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了优质的选择器和筛选器好用的隐式迭代强大的链式编程因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”接下来我们就来认识一下 jQueryjQuery 的使用jQuery官网官网是全英文的也没啥可看的，不过没事的时候可以看看了解一下jQuer

原创 前端 JS 中Set对象和Map对象详解（概率，创建，使用方法等）

Map 和 SetMap 和 Set 是 ES6 新增的两个数据类型都是属于内置构造函数使用 new 的方式来实例化使用Set使用方式就是和 new 连用const s = new Set()console.log(s)/* Set(0) {} [[Entries]] No properties size: (...) __proto__: Set*/就是一个数据集合我们可以在 new 的时候

原创 前端/JS Set数据集合对象和Map数据集合对象 思维导图（创建方式，操作方法）高清版

点击图片放大观看，更高清

原创 前端JS 设计模式 思维导图 --单例模式，组合模式，观察者模式（发布-订阅模式 或者 消息模式）

原创 前端JS 设计模式 详解 --单例模式，组合模式，观察者模式（发布-订阅模式 或者 消息模式）

设计模式设计模式是我们在 解决问题的时候，针对特定问题给出的简洁而优化的处理方案我们有很多的设计模式单例模式组合模式观察者模式…今天我们就聊一下这三个设计模式单例模式 / 组合模式 / 观察者模式单例模式什么是单例模式呢？我们都知道，构造函数可以创造一个对象我们 new 很多次构造函数就能得到很多的对象单例模式： 就是使用构造函数实例化的时候，不管实例化多少回，都是同一个对象也就是一个构造函数一生只能 new 出一个对象也就是说，当我们使用构造函数，每一

原创 前端JS 继承详解思维导图 高清

查看时请点击图片查看，更高清。

原创 前端JS闭包简单思维导图 高清版

查看时请点击图片查看，更高清。

原创 前端JS闭包和继承详解

闭包闭包是我们函数的一种高级使用方式在聊闭包之前我们要先回顾一下 函数函数的两个阶段我们一直说函数有两个阶段定义阶段调用阶段函数定义阶段开辟一个 存储空间把函数体内的代码一模一样的放在这个空间内（不解析变量）把 存储空间 的地址给变量函数调用阶段按照函数名的地址找到函数的 存储空间形参赋值预解析将函数 存储空间 中的代码拿出来执行（才解析变量）重新定义函数调用阶段按照函数名的地址找到函数的 存储空间形参赋值预解析在内存中开辟一个

原创 AJAX简单思维导图

**单击图片，可看高清大图，建议下载观看，更清晰**

原创 AJAX理解

AJAX概念一般情况下，前端和后台进行交互都需要页面跳转才能获取到新的数据，然后重新跳转到一个页面，将数据加载到页面上。这对资源的消耗很大，用户体验感也不是很好。所以js提供了一个不需要刷新页面就能加载后台数据的技术：AJAXAJAX，全称：async javascript and XML，是一个异步执行的和后台交互的技术。例：网易邮箱注册当我们输入用户名，再输入下一项的时候，会有提示说输入的用户名是否可用，但是页面是没有刷新的。京东的评论页面点击下一页的时候，评论列表的内容会改变，但

原创 PHP思维导图和PHP连接数据库思维导图

原创 HTTP和COOKIE详解

HTTPhttp 是我们前后台交互的时候的传输协议（即超文本传输协议）HTTP 的工作流程和服务器建立链接建立链接后，发送一个请求给服务器（请求）服务器接受到请求以后进行相应的处理并给出一个回应（响应）断开于服务器的链接和服务器建立链接怎么和服务器建立链接呢？需要保证客户端的接受和发送正常，服务器端的接受和发送正常这里就涉及到一个东西叫做 TCP/IP 协议建立链接的主要步骤叫做 三次握手客户端发送一个消息给到服务端此时： 服务端知道了 客户端可以正常

原创 PHP&服务器&数据库的简单了解

PHPPHP 一门后端语言为什么要学习一个后端语言呢？目前市场上的需求，要求前端人员掌握一个后端语言方便和后端开发人员进行交互基本组织架构在讲后端语言之前，我们简单的了解一下我们基本的组织架构我们是一个 前端开发工程师还有一个工作叫做 后端开发工程师我们一个网站的组织架构基本上由下面的步骤完成用户 => 前端 => 后端 => 数据库整个过程中用户向前端人员要一个网页前端人员准备一个网页给用户，但是网页中的数据是找后端人员要的

原创 js/JavaScript简单小项目小程序 贪吃蛇项目 期末 大作业 有注释

贪吃蛇项目，可暂停，有积分完整代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal.

原创 js/JavaScript简单小项目小程序--图片放大效果（放大镜）--期末-大作业

效果：可对图片进行放大，可以自己随意放大倍数，无限制。兄弟们都懂可以用来干什么把！自己复制代码时，记得改成自己的图片路径和js路径。完整代码如下：enlarge.html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Enlarge</title> <style> *{margin: 0;pa

原创 js/JavaScript简单小项目小程序--烟花效果--期末-大作业

效果如上所示。index.html 代码```javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.

原创 js/JavaScript小项目 很简单 信息管理系统

功能展示用户点击 删除 就可以删除对应的数据。也可以自己添加数据，只需要改改代码中的数组就行```javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten

原创 js/JavaScript 中原型对象的理解

每个函数都有prototype属性，构造函数也有，构造函数的prototype的属性指向原型对象。每个对象都要__proto__属性，实例化对象的__proto__属性也指向原型对象。所有构造函数的prototyprototype属性和实例化对象的__proto__属性指向的是同一个东西。原型对象自己有一个constructor属性，这个属性指向构造函数。而原型链的意思就是，原型对象也是个对象，所有他也有__proto__属性指向它的原型对象。像这样原型对象也有自己的原型对象一张循环下去，这就是原

原创 js/JavaScript 面向对象详解 培训版

面向对象首先，我们要明确，面向对象不是语法，是一个思想，是一种 编程模式面向： 面（脸），向（朝着）面向过程： 脸朝着过程 =》 关注着过程的编程模式面向对象： 脸朝着对象 =》 关注着对象的编程模式实现一个效果在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果例子 ????： 我要吃面条面向过程用多少面粉用多少水怎么和面怎么切面条做开水煮面吃面面向对象找到

原创 js/JavaScript面向对象思想 思维导图

原创 js/JavaScript 中ES5/ES6新增语法（JSON this 箭头函数 let/const 解构赋值 模板字符串 展开运算符）

原创 js/JavaScript 正则表达式 思维导图 高清大图

原创 js /JavaScript事件的传播和默认行为 思维导图

原创 input和change的区别

inputinput事件在输入框输入的时候会实时响应并触发，一旦改变就触发changechange事件在input标签失去焦点才会考虑触发，它的缺点是无法实时响应。与blur事件有着相似的功能，但与blur事件不同的是，change事件在输入框的值未改变时并不会触发，当输入框的值和上一次的值不同，并且输入框失去焦点，就会触发change事件。...

原创 keydown和keypress的区别

Js高级教程对三者的描述：keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；keypress：当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件；keypress区分字母大小写keydown不区分字母大小写就是keydown按任意键都触发，而keypress按字符键才触发（像alt , ctrl ,shift 等不会触发）...

原创 mouseout和mouseleave的区别

总结：当事件元素没有子元素时，两者没有区别不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果事件对象有子元素，那么当鼠标进入或移出子元素都会触发mouseout,而mouseleave不会。...

原创 mouseenter和mouseover的区别

先看看图总结当事件对象没有子元素时，两者没有区别不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave...

原创 JavaScript 常用事件详解（下） 精简培训版

EVENT（下）今天来聊一聊事件的执行机制什么是事件的执行机制呢？思考一个问题？当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件你点击里面的小盒子，外面的大盒子上的点击事件要不要执行事件的传播就像上面那个图片一样，我们点击在红色盒子身上的同时，也是点击在了粉色盒子上这个是既定事实，那么两个盒子的点击事件都会触发这个就叫做 事件的传播当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件就像上面的图片一样点击在

原创 JavaScript 常用事件详解（上） 精简培训版

EVENT（上）之前我们简单的了解过一些事件，比如 onclick / onload / onscroll / …今天开始，我们详细的学习一些 事件什么是事件一个事件由什么东西组成触发谁的事件：事件源触发什么事件：事件类型触发以后做什么：事件处理函数var oDiv = document.querySelector('div')oDiv.onclick = function () {}// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv//