- 博客(49)
- 收藏
- 关注
RSS订阅原创 js下载文件
背景：最近有需求需要根据后段返回内容生成一个txt文件（UTF-8编码）在前端可下载。尝试了几种方式，情况如下：1. a标签下载使用：<a href="url" download="fileName"> //url为要下载的内容地址，fileName为生成的文件地址问题：url同源的情况下：浏览器直接下载 url不同源：浏览器则会预览：打开它能打开的文件...
2020-03-02 19:17:43
432
原创 使用npx creact-react-app project 只生成了node_modules, package.json and packageloack.json
描述：想要用脚手架快速新建一个react app的时候使用 npx creact-react-app project 命令后查看文件夹，文件夹下只有 node_modules, package.json and packageloack.json 三个项目，其他如 src, public and scripts folder 都没有。命令行报错如下：A template was not pr...
2019-12-11 17:40:40
3015
4
原创 highcharts属性的配置
一个从官网粘贴的简单代码示例：<div class="main"> <div id="container" style="min-width:400px;height:400px"></div> <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"&...
2019-09-06 10:32:32
401
原创 js中sort方法的排序问题及localecompare方法
sort():对数组的元素先调用toString方法，再按照字符串的Unicode编码进行排序。 内部实现原理：插入和快排，数组元素<=22的时候，使用插入排序；再大的使用快速排序。（源码：v8实现array.js源码） 并且sort方法是会改变原数组的。localecompare():a.localeCompare(b);用本地特定的顺序来比较两个字符串，若a>...
2018-10-21 16:22:22
5148
1
原创 js算法
1. js实现大整数相加思路：就是我们算加法的思想，从后往前，逢十进一。如果不先reverse在循环里倒着加其实也是一样的，但是我觉得这么写更浅显易懂，但可能优化方面就不是很好，因为拿长数字做了基准。 var num1 = 999999999564569; var num2 = 666666666; function plus(num1, num2){ ...
2018-09-04 16:17:07
305
原创 input框的输入事件
要求：input框只能输入数字。问题：只判断e.keyCode的情况下，在中文输入法中出现了e.keyCode均为229的情况，不论输入数字还是其他。解决：修改input框的type为number，但会出现默认样式，并且并不能真的限制数字。（在中文输入法下还是能输入中文）1. 中文输入法在中文打出的字母没有真正的键入input框的时候是会触发事件的，但再点击回车d不...
2018-08-10 00:00:41
25264
原创 浏览器自带的滚动条样式
通常只适用于chrome：<div class="parent"> <div class="child"></div></div>.parent{ overflow: auto; width:100px; background-color: #ffcccc;...
2018-08-09 00:06:48
4007
原创 内部属性[[class]]
1. 对象的[[class]]属性所有typeof返回值为“object”的对象（如数组）都包含一个内部属性[[class]]，这个属性无法直接访问，一般通过Object.prototype.toString(..)来查看。 console.log(Object.prototype.toString.call([1,2,3])); //[object Array] console...
2018-06-12 10:10:44
1373
原创 正则的方法及常用正则
1.正则的写法：var re = /a/; //使用字面量，相比构造函数性能较好（加载脚本后编译） var re = new RegExp('a'); //使用构造函数，（运行时编译）当你知道正则表达式模式将会改变，或者你不知道模式，并从另一个来源，如用户输入时。2.正则的方法：方法描述exec一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。test一个在...
2018-04-22 17:47:23
622
原创 关于隐式类型转换
少数情况下，js会发生隐式类型转换，我们不注意就会引起错误，总结一下。1.运算符的转换：-，*，/，%会将操作数转换为数字去计算，但+不一样，两边纯数字会按数字相加，纯字符串会拼接，但数字和字符串也会将字符串和数字拼接起来。 console.log("1 - '2'"); console.log(1 - '2'); //-1 console.log("1 * '2...
2018-04-14 15:33:59
1169
1
转载 web socket
1.什么是WebSocket？WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。特点是服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息，属于服务器推送技术的一种。（1）建立在TCP协议之上，服务器端实现较容易。（2）与HTTP协议有良好的兼容性。默认端口也是80和443，且握手阶段采用...
2018-04-12 00:09:51
441
原创 css的各种单位
我常用的单位无非px，rem，deg等等，但今天看到了vw，vh，vm这样的单位，遂决定总结一下。关于单位的相关来自张鑫旭大神，在我的理解上做了些补充~单位含义em相对于父元素的字体大小，若父元素font-size为16px，那么1em就为16pxex相对于小写字母"x"的高度gd一般用在东亚字体排版上，这个与英文并无关系rem相对于根元素字体大小，若根元素font-size为16px，那么1em...
2018-04-09 23:05:01
1309
1
原创 脱离文档流，position与z-inex的关系
文档流：从上至下，从左至右的布局符合html中标签本身含义的布局，比如某些标签独占一行，有些标签属于行内元素等。脱离文档流：将元素从普通文档流中去掉，其他元素在排版的时候会当作这个元素不存在去排版。什么会导致元素脱离文档流：float：脱离文档流，但其他的元素文字会找到该元素的文字位置。position:absolute：脱离文档流，其他元素完全无视该元素。它的定位取决于它的父元素有没有定位（po...
2018-04-07 19:55:05
2418
原创 Node.js学习（一）之全局对象和全局变量
初处开始学习Node.js之路~以下的链接均来自Node.js中文网。全局对象：global：表示Node.js所在的全局环境，类似于浏览器的window对象，但区别在于：在模块文件中声明变量 var x = 1，该变量并不是global对象的属性，global.x = undefined。模块的全局变量都是该模块私有的，其他模块无法取到。Node.js中文网的解释：在浏览器中，顶层作用域就是全局...
2018-04-05 15:11:01
862
转载 CORS跨域与@crossorigin
在这之前只是知道两者各自是什么，但却一直不清楚两者的关系，如今总结为下：CORS，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。基本思想是：使用自定义的HTTP头部允许服务器和浏览器相互了解对方，从而决定请求或响应成功与否。处理简单请求： ...
2018-04-02 21:47:43
5354
原创 js的垃圾回收机制和内存分配
GC垃圾回收机制：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。不再使用的变量即指那些局部变量，全局变量的生命周期直到浏览器关闭页面才结束，这时会再清除一次。局部变量只在函数执行过程中存在，这个过程中会给它们分配内存去储存它们的值，然后在函数中使用，直至函数结束，而闭包是因为在函数外还有对这个变量的引用，所以并不会被垃圾回收机制清除。标记清除法（常用）：垃圾回收器在运行的时...
2018-03-29 13:29:04
453
转载 Highcharts的学习
简介：Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。Highsto...
2018-03-28 20:41:35
336
转载 pwa
1.pwa是什么：PWA的中文名叫做渐进式网页应用。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。...
2018-03-28 20:36:34
356
原创 vue与react的区别
1.创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（html in javascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。2.关于虚拟dom改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·Virtual DOM是一个映射真实DOM的JavaScri...
2018-03-27 19:08:26
1491
原创 使用Node.js的express框架搭建一个简单项目并且添加了一个路由
express简介：Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。...
2018-03-26 23:12:12
1033
转载 Node.js的浅浅学习
Node.js简介：简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node.js组成：引入 required 模块：我们可以使用 requir...
2018-03-23 19:46:17
141
原创 对浏览器缓存的一些知识
1.为什么要设置缓存：是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。2.浏览器依据什么去判断缓存： http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文 件，chrome控制台下的Frames...
2018-03-23 18:57:49
1288
原创 cookie，localStorage，sessionStorage的概念，使用及区别
cookie：存储在用户本地中端上的数据某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。Cookie 在计算机中是个存储在浏览器目录中的文本文件，当浏览器运行时，存储在 RAM 中发挥作用 （此种 Cookies 称作 Session Cookies），一旦用户从该网站或服务器退出，Cookie 可存储在用户本地的硬盘上 （此种 Cookies 称...
2018-03-21 17:13:54
339
原创 前端攻击之xss和csrf
被动攻击： 诱发用户触发陷阱启动发送。 利用用户身份攻击企业内部网络。主动攻击： 攻击者直接访问web应用，就能发起对web应用的攻击，比如sql注入（对数据运行非法sql产生的泄露机密信息）和os命令注入（通过程序运行非法操作系统指令，在能调用shell函数的地方，因为web通过shell来调用操作系统指令）。xss：（Cross Site Scripting，为了区别于c...
2018-03-19 17:41:15
726
原创 git的一些我不常用的命令
git fetch：获取远程分支git pull = git fetch + git merge；pull先获取远程分支，再与本地分支合并，并更新HEAD指针。git reset 后的参数：首先git提交的过程是这样的自己的代码，未经过git之前（working directory工作区）->add之后（暂存区对应stage/index）->commit之后（有了提交历史，提交到版本库...
2018-03-19 13:19:29
163
原创 gulp的介绍及gulpfile.js的配置
gulp是自动化的构建工具，处理的常见任务：（4个）搭建web服务器；优化资源；文件保存时自动重载；适用于处理器； //gulp创建项目 mkdir projet; cd project;//进入这个项目 npm init;//自动为你创建package.json文件（储存项目的相关信息） npm install gulp --save-dev//局部安装gulp，完成这...
2018-03-18 22:50:33
9167
原创 webpack简介及webpack.config.js的配置
基本信息：// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。// 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。var webpack = require('webpack');module.exports = { entry:'./en...
2018-03-18 20:43:17
1752
原创 this指向，作用域，闭包，原型链
this：关键字this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，严格模式下指向undefined。function a(){ var user = "白白"; console....
2018-03-17 19:53:29
378
原创 实现继承和创建对象的方法
面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。创建对...
2018-03-17 14:26:25
458
原创 各种的区别
1. jquery $(document).ready() 与window.onload的区别1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个，如果...
2018-03-17 14:02:01
300
原创 架构模式MVC，MVP，MVVM
MVC架构模式:通过Model&View完成数据从模型层到视图层的逻辑，通过控制器controller 定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户行为和数据上的改变。 MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进...
2018-03-17 13:40:08
218
原创 scss，less等css方案
目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。它们有个统一的名字——css预处理器。这些预处理器解决了css的一些缺憾：· 语法不够强大，不能够嵌套书写，不利于模块化开发· 没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复的样式，导致难以维护。css预处理器给出了非常可行的解决方案：1. 变量：就像其他编程语...
2018-03-17 13:39:07
1986
原创 !Doctype
!Doctype作用1.<!DOCTYPE>声明叫做文档类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在HTML 文档的第一行，这并不是一个HTML 标签。2.声明文档的解析类型(document.compatMode)为了避免浏览器的怪异模式。 严格模式和混杂模式的区别、以...
2018-03-17 13:37:42
900
原创 实现一个简单的坦克移动，主要是判断键盘输入
恩恩，真的是很简单的坦克移动，没有吃豆豆发射激光什么的~css：#div1{ width:200px; height:200px; background-color:red; position:absolute; left:0; top:0;}html： //初始坦克为向上js：var oDiv = document.getElementById("div1");
2018-03-17 12:32:24
1335
原创 自制一个视频播放控件
学习了html5新标签后自己尝试写了一个视频控件，虽然不是很好看，但基本功能都实现了。css：<style type="text/css"> body{ margin:0; padding:0; } #all{ position: relative; ...
2018-03-17 12:17:06
911
原创 canvas绘制一个简单钟表
css：<style> body{background: black} #c1{background: white;} span{color: white;}</style>html：<canvas id="c1" width="400" height="400"> <span>不
2018-03-17 11:55:24
1518
原创 js深复制浅复制
深浅复制主要是针对于js的引用数据类型的，因为他们不只一层，并且修改一个变量是不希望修改到另外一个变量。概念：浅复制：只复制指向某个对象的指针，新旧对象共享一块内存，修改新对象会改到原对象上。深复制：不共享内存，修改新对象不会改到原对象上。实现：浅复制实现：js 简单的赋值操作一般实现的都是浅复制。深复制实现的七种方法：1. 手动复制：var obj1 = {"name":"baibai", "a...
2018-03-15 16:16:01
181
原创 纯css画菱形，三角形，梯形，平行四边形
菱形： display: inline-block; width:100px; height:100px; background-color: #c685d9; transform: rotate(45deg); margin:50px;三角形： width: 0...
2018-02-26 15:24:21
14005
原创 target伪类实现tab选项卡
样式<style type="text/css"> #first{ background-color: #f00; } #second{ background-color: #0f0; } #third{ background-color: #00f; } ...
2018-02-25 00:10:04
596
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人