lord_of_war-CSDN博客

原创 nodejs文件系统之遍历目录

遍历目录是操作文件时的一个常见需求。比如写一个程序，需要找到并处理指定目录下的所有JS文件时，就需要遍历整个目录遍历目录时一般使用递归算法，否则就难以编写出简洁的代码。递归算法与数学归纳法类似，通过不断缩小问题的规模来解决问题function factorial(n) { if (n === 1) { return 1; } else { return n * factorial(n - 1); }}上边的函数用于计算N的阶乘（N!）。可以看

2020-12-22 20:48:12 416

原创 nodejs文件系统之目录操作

创建【fs.mkdir(path[, mode], callback)】参数如下：path - 文件路径。mode - 设置目录权限，默认为 0777。callback - 回调函数，回调只有一个可能的异常参数var fs = require('fs');fs.mkdir('./1',function(err){ console.log(err);//null})【fs.mkdirSync(path[, mode])】fs.mkdir(path[, mode], callba

2020-12-22 20:33:53 369

原创 nodejs文件系统

前言fs文件系统用于对系统文件及目录进行读写操作，本文将详细介绍nodejs中的文件系统。概述文件 I/O 是由简单封装的标准 POSIX 函数提供的。通过 require(‘fs’) 使用该模块。所有的方法都有异步和同步的形式。异步形式始终以完成回调作为它最后一个参数。传给完成回调的参数取决于具体方法，但第一个参数总是留给异常。如果操作成功完成，则第一个参数会是 null 或 undefined。//异步示例var fs = require('fs');fs.unlink('/tmp

2020-12-15 20:33:03 219 1

原创 TypeScript

TypeScript 简介:1、TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。超集：如果一个集合S2中的每一个元素都在集合S1中，且集合S1中可能包含S2中没有的元素，则集合S1就是S2的一个超集，反过来，S2是S1的子集。 S1是S2的超集，若S1中一定有S2中没有的元素，则S1是S2的真超集，反过来S2是S1的真子集。2、TypeScript 由微软开发的自由和开源的编程语言。3、TypeScript 设计目标是开发大型应用，它可以编译成纯

2020-12-08 20:57:18 108

原创 Nodejs之express

Node.js 是运行在服务端的 JavaScript，也是一个基于Chrome JavaScript 运行时建立的一个平台。这个平台包含了许多的模块，express就是其中之一。什么是express？Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具，使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性：1、可以设置中间件来响应 HTTP 请求。2、定义了路由表用于执行不

2020-12-08 20:32:38 91

原创 Promise

Promise是异步编程的一种解决方案Promise状态状态的特点Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。const p1 = new

2020-12-01 20:43:52 56

原创 ES6新增关键字let&const以及新增数据类型Symbol

let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。let基本用法：{ let a = 0; a // 0}a // 报错 ReferenceError: a is not defined代码块内有效let只在代码块内生效，var是在全局范围生效{ let a = 0; var b = 1;}a // ReferenceError: a is not definedb // 1不能重复

2020-12-01 20:38:21 193

原创 http的状态码

http状态码HTTP状态码（英语：HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。所有状态码的第一个数字代表了响应的五种状态之一。所示的消息短语是典型的，但是可以提供任何可读取的替代方案。除非另有说明，状态码是HTTP / 1.1标准（RFC 7231）的一部分。HTTP状态码的官方注册表由互联网号码分配局（

2020-11-24 20:37:31 188

原创 ajax

AjaxAjax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如

2020-11-24 19:52:02 71

原创 HTML的布局方式

静态布局:最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。布局特点：不论屏幕的大小，页面宽高始终不变，始终维持最初设计时的样式大小来显示；常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。设计方法:PC :居中布局，所有的元素样式都使用绝对的宽高（px），设计一个布局，当屏幕大小进行变化时，使用滚动条进行查阅被遮挡的部分。移动端：另建立一个移动网站，单独设计一个布局，使用不同的域名（wap.

2020-11-17 20:49:27 687

原创 web移动端布局

一、移动端适配提起移动端适配，大家想到的肯定是rem、flexible.js，本文要分享的方案是 vw + rem对移动端适配不熟悉的同学，可以看看：使用Flexible实现手淘H5页面的终端适配再聊移动端页面的适配如何在Vue项目中使用vw实现移动端适配vw 是什么？vw 是基于视图(Viewport)的长度单位，而与Viewport相关四个单位有：vw：Viewport’s Width 简写，1vw 等于 window.innerWidth 的 1%vh：Viewport’s Heig

2020-11-17 20:36:23 161

原创 jquery callback&chaining&fade

fade在jQuery中，fade方法有着让元素淡入淡出的效果，在jQuery中有着四种fade方法：fadeIn() ：用于淡入已隐藏的元素。fadeOut()：用于淡出可见元素。fadeToggle() ：可以在 fadeIn() 与 fadeOut() 方法之间进行切换。fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）。fadeIn()jQuery中的fadein()方法能让隐藏的元素以一种慢慢显现的动画的方式展示出来。语法：$(selector).fadeI

2020-11-10 20:22:26 98

原创 jquery选择器和自定义动画

自定义动画语法：$( selector ).animate({ params }, speed, callback);selectot 必需的参数，一般使用某个选择器，用来寻找到执行动画的元素。params 必需的参数，元素执行动画时改变的css样式。speed 可选参数，元素执行动画所需时间。callback 可选参数，元素动画完成后所执行的函数名称。$("div").animate({left:'250px'}); //将div距左移动250像素默认情况下，所有 HTML 元素都有

2020-11-10 20:13:25 182

原创贝塞尔曲线

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。原理和简单推导（以三阶为例）：设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点，在P02点的切线交P0P1和P2P1于P01和P

2020-11-03 21:06:50 2748 1

原创 Bootstrap CSS

Bootstrap CSS 概览在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。HTML 5 文档类型（Doctype）Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一

2020-11-03 20:57:50 1035

原创 Flex Box

CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或

2020-10-27 19:57:53 92

原创 2d转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。浏览器支持Internet Explorer 10, Firefox, 和 Opera支持transform 属性.Chrome 和 Safari 要求前缀 -webkit- 版本.注意： Internet Explorer 9 要求前缀 -ms- 版本.translate() 方法<style> div{ width:100px; height:75px; background-color:red; borde

2020-10-27 16:58:28 212

原创 js与百度地图

如何调用百度地图打开百度api文档-申请秘钥-添加域名白名单-引入api。<script src="http://api.map.baidu.com/api?ak=填写你自己的产品秘钥&v=2.0&services=false"></script>然后我们就可以开始使用了，根据地图api文档我们就能实现想要的效果了。使用地图首先需要H5定位，geolocation 这个方法是H5新增特性，专门用来实现客户端地理定位的。//判断是否支持获取本地位置

2020-10-27 16:54:17 135

原创 CSS3新增属性

css3新增边框属性border-color：为边框设置多种颜色div { border-style:solid; border-color:#ff0000 #0000ff; }border-image：图片边框border-image:url(border.png) 30 30 round;注意：Internet Explorer 不支持 border-image 属性；border-image 属性规定了用作边框的图片。border-radius：圆角比如使

2020-10-20 21:00:59 299

原创 SVG

什么是SVGSVG 指可伸缩矢量图形 (Scalable Vector Graphics)；SVG 用于定义用于网络的基于矢量的图形；SVG 使用 XML 格式定义图形；SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；SVG 是万维网联盟的标准；SVG的优点SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被搜索、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 可在图像质量不下降的情况下被放大；绘制圆形<!

2020-10-20 20:15:49 147

原创震惊！这就是H5的新特性吗？又学到了许多

新语义化标签H5中新增了很多新的语义化标签，让我们大致来看一下<header>标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。<footer>标签一般配合address标签(显示地址)，包含作者信息、相关链接等。<nav> 导航在H4中导航栏一般用ul-li标签，H5中可以直接用标签<hgroup> 页面上得一个标题组合（一个标题和一个子标题）<section> 用来划分页面上的不同区域<article>

2020-10-10 18:45:50 63

原创这就是canvas吗？学到了许多

绘制矩形1.快速创建矩形rect()方法ctx.rect(x, y, width, height);解释：x, y是矩形左上角坐标， width和height都是以像素计rect方法只是规划了矩形的路径，并没有填充和描边。2.创建描边矩形ctx.strokeRect(x, y, width, height);参数跟rect(x, y, width, height)相同，注意此方法绘制完路径后立即进行stroke绘制。3.创建填充矩形ctx.fillRect(x, y, wi

2020-10-09 19:23:32 1902

原创 new关键字的执行过程

在使用JavaScript开发过程中，经常会用到new关键字，从字面意思来看，就是新建一个对象，那么在我们看不见的数据之间的操作到底发生了什么呢？使用new的这个过程执行了哪些操作？function Person(name) { this.name = name;}var zhangsan = new Person('张三');上述代码中new了一个Person，这其中的过程如下：第一步：创建一个空对象object，let obj = new Object()—创建对象新对象，就是指在栈

2020-10-09 00:49:51 996

原创 HTML5新增元素——语义化标签篇

figure元素figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption。<figure><img src="logo.png" alt="图片"><figcaption>标志</figcaption></figure>details元素:dtails提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法.<details><summary

2020-09-27 19:46:50 269

原创 HTML5新增元素及使用——表单篇

form相关的元素form属性在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向目标表单（form属性值设为目标表单id）即可。formaction属性HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。<input formaction="new.html" type="submit" value="提交到new.html">formmethod属性用法同formaction。pl

2020-09-27 18:28:58 538

原创开心摇摇乐（定时器的应用）

定时器定时器分为两种一种是一次性的，时间到就执行var timer=setTimeout(function(){},触发的时间(单位毫秒));清除的方法clearTimeout(timer)第二种是周期性的，根据设定的时间周期进行var timer=setInterval(function(){},触发的时间(单位毫秒));清除的方法clearInterval(timer)下面写一个简单的关于定时器的小案例——开心摇摇乐（随机点名系统）开心摇摇乐话不多说，上代码<!DOCTY

2020-09-20 21:34:10 189

原创何为防抖，何为节流 in JavaScript

刚听到这两个词的时候，我是一脸萌的，这啥啊这是，js还有这玩意，直到我认真了解了一下之后，哇哦，原来是这个样子的呢，今天就来给大伙们讲讲何为防抖何为节流。下面，正片开始：函数防抖(debounce)当做随着输入框输入不同内容展示不同的结果列表类似需求时，一般会绑定input的change事件，该事件在用户输入过程中会多次被触发，这时可以用防抖处理一下 debounce(fn,time)，可以保证在用户输入完time时间后才触发fn。这里不用 throttle，因为debounce更加符合举个栗子：

2020-09-20 21:19:37 89

原创 DOM事件（表单事件）

onblur元素失去焦点时触发。输入你的名字: <input type="text" id="fname" onblur="myFunction()"><p>当你离开输入框, 函数将被触发将输入文字转换成大写。</p>function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase();}输入aaan之后失去焦点，aaan被转化为了AA

2020-09-13 19:47:43 249

原创 DOM事件（对象事件）

onabort图像的加载被中断时，执行JavaScript。onabort 事件在用户中止加载 <img> 或 <input type="image"> 元素时触发。onbeforeunload在即将离开当前页面(刷新或关闭)时执行 JavaScript 。定义和用法onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “

2020-09-13 18:23:24 164

原创 DOM 事件（键盘事件）

onkeydown事件onkeydown 事件会在用户按下一个键盘按键时发生。提示：与 onkeydown 事件相关联的事件触发次序:onkeydownonkeypressonkeyuponkeydown事件在很多小游戏上应用较多，比如需要控制上下左右的很多游戏，如2048，贪吃蛇，俄罗斯方块等等。 keyDown: function () { document.onkeydown = function (e) { //键盘按下后，判断

2020-09-06 22:12:46 666

原创 DOM 事件（鼠标事件）

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行。鼠标事件onclick 事件onclick 事件会在元素被点击时发生。<p>单击按钮触发函数。</p><button onclick="myFunction()">点我</button><p id="demo"></p>function myFunction(){ documen

2020-09-06 21:37:04 1237

原创什么是DOM

众所周知，javascript由三部分组成：ECMAScript 构成了js核心的基础语法BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象DOMDocument Object Model 文档对象模型，用来操作网页中的元素今天我们就来讲讲什么是DOMDOM是什么DOM的全称是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。如果没有DOM，JavaScript将是另外一种脚本语言；而有了DOM，它将成为

2020-08-30 21:56:46 408

原创 BFC（块级格式上下文）

BFC的定义BFC 全称为块格式化上下文 (Block Formatting Context) 。定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。BFC的布局规则1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。2）Box垂直方向的距离有margin决定。属

2020-08-30 21:28:41 241

原创 js浅克隆和深克隆

深克隆和浅复制的基本定义浅复制(浅克隆)：直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址深复制(深克隆)：就是把数据赋值给对应的变量，从而产生一个与源数据不相干的新数据(数据地址已变化)。深拷贝，是拷贝对象各个层级的属性。基本数据类型的赋值（String）let a = "hello world";let b = a;alert( b ); // 'hello world'a = "changed";alert( b ); // '

2020-08-22 14:09:34 228

原创原型与原型链

原型Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象（原型链上面的）。prototype(对象属性)的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变(公用)的属性和方法，直接定义在prototype对象属性上。prototype就是调用构造函数所创建的那个实例对象的原型（proto）。prototype可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。原型的继承所有

2020-08-22 11:54:53 114

原创 Math.random()

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。Math 用于 Number 类型。它不支持 BigInt。与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。ceil()Math.ceil() 函数返回大于一个数的最小整数，即一个数向上取整后的值

2020-08-15 10:44:44 350

原创 js错误类型

JavaScript中的错误类型大体分为两类：第一种是语法错误，众所周知JavaScript在执行之前实际上分为了三个步骤，首先语法分析，如果有语法错误就会直接报错，阻止整个程序执行，然后是预编译，最后才开始解释一行执行一行，所以如果检测到了有语法错误，程序就会直接报错，阻止整个程序执行。第二种是逻辑错误，这一类的错误不会影响所有代码，只会在自己那一行报错，会影响之后的代码不能执行。SyntaxError：语法错误// 1. Syntax Error: 语法错误// 1.1 变量名不符合规范va

2020-08-15 09:49:41 327

原创 JavaScript作用域&作用域链

作用域作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。某个执行环境中所有的代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出时，如关闭浏览器或网页，才会被销毁）每个函数都有自己的

2020-08-09 18:52:09 83

原创正则表达式

正则表达式正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。普通字符普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。非打印字符非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列：特殊字符所谓特殊字符，就是一些有特殊含义的字符，简单的说就是表示任何字符串的意思

2020-08-09 18:33:01 84

原创 JavaScript之数组去重

数组去重是一道经典的手写面试题，在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能会被问到。这篇内容接下来会写出js中数组去重的几种方法：双重循环遍历数组定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 function unique(arr) { var newArr = []; for (let i = 1; i < a

2020-08-01 21:23:09 212

空空如也

空空如也