
前端
Bright's Dream
计算机专业本科生,web技术爱好者
展开
-
HTTP缓存和jQuery中的cache详解
之前面试的时候有被文档jquery ajax中cache选项的问题,面试的时候没有能够答出来,面试结束以后查了一些HTTP、jquery缓存相关方面的内容,自己做了一些测试和总结。参考博客:彻底弄懂HTTP缓存机制及原理jQuery中的cache : false到底有什么用?直入主题:HTTP中的缓存属性HTTP中的缓存是指客户端或者代理服务器上的缓存,浏览器在获取到数据之后会将数据缓存...转载 2019-02-22 20:36:14 · 617 阅读 · 0 评论 -
每日JavaScript设计模式:Day 7 代理模式
代理模式由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用实例跨域问题,在不同的域之间是不能直接访问的,这时候我们就需要一个对象来作为中间桥梁让两个对象能够相互访问。一类解决思路就是通过代理的思想,比如JSONP,ajax脚本不能够直接访问数据库,但是script标签可以,这时候script标签就可以充当代理的角色,让浏览器脚本和另一个域下的服务器进行通信...原创 2019-04-08 19:19:23 · 165 阅读 · 0 评论 -
每日JavaScript设计模式:Day5 外观模式
外观模式为一组复杂的子系统的接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更加容易,在JavaScript中有时也会用于对底层结构兼容性作统一封装。举个例子,我们想吃一顿美味的炖排骨,一种方式是我们自己做,买好排骨、萝卜、玉米、调料等,然后按照一定的步骤炖好排骨汤,然后品尝美味;另一种方式就是点个外卖,直接来一份排骨汤。对于第二种方式,我们是用户,需求是排骨汤,那么对于我们...原创 2019-04-03 17:52:51 · 106 阅读 · 0 评论 -
数据结构与算法:迪杰斯特拉和prim TypeScript实现
迪杰斯特拉算法迪杰斯特拉算法用于求图中的单源最短路劲,所谓单源最短路劲,是指从图中的某一个顶点出发,这个顶点到图中的其它节点的最短路劲。迪杰斯特拉算法的主要思想如下:将图中的节点分成两个集合:一个集合表示已经求出最短路劲的顶点集合,另一个集合表示还未求出到起点最短距离的顶点集合,初始未求出集合为空。从未求出集合中选取一个距离最小的节点,并将其加入到已求出集合中更新未求出集合中顶点到起点...原创 2019-04-16 13:55:59 · 384 阅读 · 0 评论 -
每日JavaScript设计模式:Day 8装饰者模式
装饰者模式在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户的更复杂需求。实例假定我们现在有一个方法及调用,如下:function changeData(target, key, newV) { target[key] = newV;}function callChangeData(){ let target = { a: 1 } ch...原创 2019-04-09 22:32:47 · 141 阅读 · 0 评论 -
LeetCode题解:Merge Intervals
题目描述Given a collection of intervals, merge all overlapping intervals.Example 1:Input: [[1,3],[2,6],[8,10],[15,18]]Output: [[1,6],[8,10],[15,18]]Explanation: Since intervals [1,3] and [2,6] overla...原创 2019-05-02 10:06:14 · 158 阅读 · 0 评论 -
LeetCode 题解:Unique Path
题目描述A robot is located at the top-left corner of a m x n grid (marked ‘Start’ in the diagram below).The robot can only move either down or right at any point in time. The robot is trying to reach t...原创 2019-05-03 12:19:46 · 209 阅读 · 0 评论 -
LeetCode 题解:Minimum Path Sum
动态规划算法,代码如下,解释查看我的另一篇博客,两个题非常相似:/** * @param {number[][]} grid * @return {number} */var minPathSum = function(grid) { if(grid.length == 0) return 0; var a = new Array(grid.length); var m = ...原创 2019-05-03 12:44:57 · 151 阅读 · 0 评论 -
LeetCode题解:Edit Distance
题目Given two words word1 and word2, find the minimum number of operations required to convert word1 to word2.You have the following 3 operations permitted on a word:Insert a characterDelete a char...原创 2019-05-04 10:50:07 · 219 阅读 · 0 评论 -
LeetCode题解:Sort Colors
题目Sort ColorsMedium1550148FavoriteShareGiven an array with n objects colored red, white or blue, sort them in-place so that objects of the same color are adjacent, with the colors in the ord...原创 2019-05-04 12:31:04 · 121 阅读 · 0 评论 -
JavaScript设计模式:桥接模式
桥接模式桥接模式的主要形式提取代码中的公共的部分并抽象,达到代码复用和解耦的目的。举例var spans = getElementByTagNames('span');span[0].onmouseover = function(){ this.style.color = 'red'; this.style.background = '#ddd';}span[1].onmouseo...原创 2019-05-05 14:48:59 · 104 阅读 · 0 评论 -
JavaScript设计模式:组合模式
组合模式又称部分整体-模式,将对象合成树形结构以表示“部分整体”的层次结构。简单来说,就是将一个复杂的系统,拆分成功能相对独立的个体,然后通过这些个体的组合形成一个新的整体。举例class News { constructor() { this.children = []; this.element = null; } init() { throw new Error('...原创 2019-05-06 10:33:38 · 189 阅读 · 0 评论 -
在centos nginx中配置ssl证书实现https访问
1 申请证书首先需要申请证书,申请成功后可以下载证书。在云服务平台比如腾讯云可以免费申请和下载。2 上传证书利用ftp工具将证书上传到服务器,有两个文件,一个crt结尾,一个key结尾,两个文件都需要上传。这里我利用ftp命令行工具上传(因为自己用的也是linux系统)。输入:ftp如果提示没有ftp命令,则需要安装ftp,输入:yum install ftp安装完成后输入:...原创 2019-05-24 15:35:35 · 1094 阅读 · 0 评论 -
JavaScriptV8引擎1:v8引擎简介
这一系列的文章翻译自:https://v8.dev/docs这是这一系列文档翻译的第一篇,之后会陆续翻译所有的文档,取决于个人的空余时间。文档V8是google开源的高性能JavaScript和WebAssembly引擎,使用c++编写。它被用于chrome和node.js,以及其他的浏览器。这篇文档的目标读者是希望再他们的应用程序中使用V8引擎的C++开发者,以及其他对V8引擎的设计和性...翻译 2019-05-16 11:27:31 · 1002 阅读 · 0 评论 -
Babel入门和配置
Babel是什么Babel是一个javascript编译器,是一个工具链,主要讲ECMAScript2015+版本的代码转换为向后兼容的javascript语法。是其能够运行在旧版本的浏览器或者其他环境中。Babel能做事情:语法转换通过Polyfill能够在添加目标环境缺失的特性(@babel/polyfill模块提供)源码转换Babel尽可能用最少的代码并且不依赖太大量的运行环境...原创 2019-05-11 23:27:36 · 366 阅读 · 0 评论 -
webpack4, babel-loader8, babel7综合使用
安装npm install --save-dev babel-loader @babel/core @babel/preset-env webpack使用安装上面所示的插件,其中babel-loader是webpack的loader,用于打包时处理js文件,@babel/core是babel的核心功能,@babel/preset-env是babel预置的一系列转换ECMAScript...原创 2019-05-12 08:48:15 · 843 阅读 · 0 评论 -
每日JavaScript设计模式 Day3 原型模式
原型模式其实就是基于JavaScript的原型继承,对于一些共有的方法,我们将其放到基类的原型对象中。通过对象的方法或者属性调用时查找原型链的,这样可以实现对父类方法的重写。如下例:// 实例 图片轮播类var LoopImages = function(imgArr, container) { this.imagesArray = imgArr; this.container = c...原创 2019-03-28 16:34:54 · 134 阅读 · 0 评论 -
TypeScript 装饰器(decorators)
介绍类似与Java中的注解,可以用于类、域、以及方法或者方法的参数上。在typescript中目前是一项实验性的特性,通过修改配置文件支持:{ "compilerOptions":{ "experimentalDecorators": true }}装饰器使用装饰器使用@expression这种形式,expression求值后必须为一个函数。也就是说,@后面可以接一个表达式,...原创 2019-04-10 17:44:09 · 598 阅读 · 0 评论 -
XMLHttpRequest进行异步请求(包括文件上传)详解
Ajax是一种用脚本来发起HTTP请求与服务器进行通信的技术,能够在不刷新窗口的前提下(原始的表单提交需要刷新窗口),完成与服务器之间的交互。概览浏览器实现了XMLHttpRequest对象来进行异步HTTP请求,jQuery ajax是对XMLHttpRequest对象的封装。浏览器的同源策略是Ajax一个主要约束,可以同CORS、JSONP等方案来实现跨域请求。jQuery也封装了json...原创 2019-02-23 10:39:15 · 6185 阅读 · 0 评论 -
jQuery Ajax异步请求详解
jQuery的Ajax API是对XMLHttpRequest对象的抽象,解决了浏览器之间的兼容性问题,同时提供了一些方便的方法。这篇博客的撰写参考了jQuery官网,jQuery Ajax API关于XMLHttpRequest对象请参照我的另一篇博客:XMLHttpRequest进行异步请求(包括文件上传)详解核心概念GET or POSTGET用于从服务器获取数据POST用于向服...原创 2019-02-23 15:14:32 · 6286 阅读 · 0 评论 -
Vue中的自定义指令
参考了Vue官方文档同时给出了一些自己的理解。指令的作用以下均为个人理解:使用指令可以操作原生DOM指令绑定、插入父元素、VNode更新均会触发事件回调,这用这些来实现例如双向数据绑定的功能。指令的值可以是任意JavaScript表达式简介Vue允许注册自定义指令。在Vue2.0中,代码复用和抽象的主要形式是组件。然而有的情况下,你仍然需要对普通的DOM元素进行底层操作,这时候...原创 2019-02-23 15:56:08 · 107 阅读 · 0 评论 -
npm中的package.json
管理本地安装的包的最好方法是创建一个package.json文件。一个package.json文件:列举你的项目中所依赖的所有包允许你明确你的项目中可用的包的版本使你的构建可复制,并且更加容易地分享给其他的开发者要求一个package.json文件必须有:“name”所有字母小写一个单词没有空格-和_是允许的“version”用x.x.x格式表示遵循semv...翻译 2019-02-24 09:15:52 · 319 阅读 · 0 评论 -
每日JavaScript设计模式:Day4 单例模式
单例模式又指单体模式,是指只允许实例化一次的类,也就是对于某一个类型,该类型用于只能有一个实例,如果要获取该类型的实例,获取到的实例都是同一个。在JavaScript中单例模式一般用于创建命名空间,利用对象字面量,也可以利用闭包创建静态变量的单例和延迟创建的单例。实例:命名空间var Ming = { css: function(name, value){}, addClass: fun...原创 2019-03-30 12:21:56 · 139 阅读 · 0 评论 -
每日JavaScript设计模式:Day1 工厂模式
1 简单工厂模式又叫静态工厂方法,由一个工厂方法决定创建某一种产品对象类的实例,主要用来创建某一类对象// 实例:体育商品店var BasketBall = function(){}var FootBall = function() {}var Tennis = function() {}/** * 运动工厂 */var SportsFactory = functi...原创 2019-03-26 16:59:12 · 338 阅读 · 1 评论 -
position:absolute和position:fixed元素位置和宽度高度的问题
绝对定位或者固定定位的元素可以用left、right、top、bottom四个属性指定,那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢?left、right、top、bottom四个属性全部指定代码如下:html和css<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-03-26 17:43:43 · 4488 阅读 · 0 评论 -
基于Promise/A规范实现Promise,采用ES5语法
前言Promise是异步操作中最常用的一种模式,这篇文章我们探讨一下如何基于Promise/A规范实现一个Promise,完整实现采用ES5语法,运行环境为Node.js,使用process.nextTick实现推迟then指定的回调函数的执行。简化后的Promise/A规范查阅了一下Promise/A规范,总结出来了一下几个要求,Promise的功能基于以下几个要求来实现使用new P...原创 2019-03-23 18:26:31 · 698 阅读 · 0 评论 -
函数柯里化
/** * 函数柯里化就是将多个参数变成能够多个部分参数的函数调用,可以解决完成一项任务,但是参数不是一次性给出的情况 */function curry(a) { return function(b) { return a + b; };}console.log(curry(2)(8));let add = curry(2);console.log(add(10));...原创 2019-03-23 19:40:39 · 117 阅读 · 0 评论 -
JavaScript中的面向对象
概述我们知道在JavaScript中是原型继承,对象从原型对象上继承属性和方法,原型对象也可以有原型对象,这样就形成了原型链。我们可以直接将构造函数的prototype属性设置成另一个对象,那么这个构造函数创建的所有对象都可以访问原型对象上的属性和方法,同时对原型对象的修改也会反应到所有继承自这个原型对象的对象上。比如下面,我们可以使用这样的方式实现继承。function Shape(typ...原创 2019-03-23 22:06:14 · 86 阅读 · 0 评论 -
git常用操作一览表
安装git下载并安装git使用git config对git进行配置2.1 配置用户信息在初次使用时必须对下面进行配置,下面的两条信息会写道每一次提交中Git config --global user.name =Git config --global user.email =--global选项表示这些配置会写到全局中2.2 查看配置信息Git config -...原创 2019-03-24 10:49:43 · 203 阅读 · 0 评论 -
Web安全的攻与防——XSS
1 XSS攻击XSS攻击,指黑客通过“HTML”注入篡改了网页,插入了恶意的脚本,从而在用户浏览网页时,控制用户浏览器的一种攻击行为。接下来通过一个简单的示例展示XSS攻击的一种方式,服务器使用nodejs假设我的web服务器上提供了这样一个网页,读取url中用户提交的名字,然后输出到页面中var server = http .createServer(function(req, re...原创 2019-03-31 12:03:40 · 257 阅读 · 0 评论 -
Nodejs中的事件循环、定时器、nextTick()以及与EventEmitter的关系详解
参考资料:The Node.js Event Loop, Timers, and process.nextTick()什么是事件循环?事件循环允许nodejs完成非阻塞的IO操作(尽管JavaScript是单线程的)。简单来说,在nodejs中,遇到IO操作或者网络连接等阻塞性的行为的时候,将这个操作交给nodejs底层的线程池去处理,而不会阻塞主线程。当线程池中的任务完成之后,会将结果和回...原创 2019-04-10 14:24:37 · 527 阅读 · 0 评论 -
每日JavaScript设计模式:Day 6 适配器模式
适配器模式(adapter)将一个类(对象)的接口(方法或属性)转化成另外一个接口,以满足用户需求,使类(对象)之间的接口不兼容问题通过适配器得以解决。简单来说就是通过一个中间的接口,让两个格式不兼容的类/函数/数据等能够相互兼容。举个生活中的例子,mac电脑一般没有dvi接口(就是连台式显示器的接口),只有usb接口,那这个时候我们要连显示器怎么办呢?买一个usb转dvi的转换插头,这样就能...原创 2019-04-06 11:55:19 · 110 阅读 · 0 评论 -
node js实现文件夹的复制、清除
let fs = require("fs");// 将将源文件路劲拷贝到目的路劲function cpyFile(target, source) { let sdata = fs.readFileSync(source, { flag: "r" }); fs.writeFileSync(target, sdata, { flag: "w" });}// 递归删除某一个文件夹下的...原创 2019-04-06 11:59:27 · 448 阅读 · 0 评论 -
centos 启动了nginx但是浏览器访问是ERR_CONNECTED_REFUSED
这种情况下有两种可能,一种是该端口没有对外开启,可以使用:netstat -anp|grep :80来查看80端口是不是对外开启了,如果是127.0.0.1则说明没有对外开启,如果对外开启了一般是0.0.0.0,如下图:另一种可能是该端口被防火墙拦截了centos 7中的防火墙是firewalld,查一下开放的端口就能解决问题了。还有一种是iptables,我遇到的问题就是ipta...原创 2019-05-24 11:08:27 · 4543 阅读 · 0 评论