- 博客(50)
- 收藏
- 关注
RSS订阅原创 Vue-Router使用与原理
路由指的是SPA（单页应用）的路径管理器。SPA（单页面应用）的核心之一是：更新视图而不重新请求页面。目前在浏览器环境中实现这一功能的方式主要有两种：利用 URL 的 hash(#)获取到 # 之后的值，并监听其改变location对象window 对象中onhashchange 事件监听hash的变化利用 H5 新增方法 History interfacevue-rout...
2019-03-20 19:26:22
772
原创 面试题：浏览器事件冒泡、事件捕获
昨天面试问到这个问题，不是回答不上来，而是面试官问我哪个浏览器不支持事件捕获/冒泡。确实忘了，回来记忆，顺便把一些和事件流有关的内容再梳理一遍。事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；从具体的元素到不确定的元素。事件捕获：从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根...
2019-03-20 16:42:06
2118
原创 基础SQL语句
SQL是结构化查询语言SQL对大小写不敏感SQL后面的分号看数据库要求才加不加SQL分为两部分 DML（数据操作语言）和DDL（数据定义语言）1、SELECT从名为 “Persons” 的数据库表获取名为 “LastName” 和 “FirstName” 的列SELECT LastName,FirstName FROM PersonsSELECT * FROM Persons ...
2019-03-13 19:08:49
348
原创 实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果(隐藏div)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&
2019-03-13 13:25:50
713
原创 用ajax封装一个函数（post、get）
原生：// 封装一个ajax请求库实现get和post方法function ajax(url,type,async,req,func) { // 也可以考虑将参数进行处理，比如大小写一致等转换 let xhr = getXHR(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) ...
2019-03-12 18:47:29
375
原创 JS引擎V8的内存回收机制与内存限制（标记清除法）
在Node中通过JavaScript使用内存时会发现只能使用部分呢内存（64位下位1.4GB，32位系统下位0.7GB），这样的限制使得Node无法操作大内存对象。造成这个问题的原因在于Node基于V8构建，所以在Node中使用的JavaScript对象基本上都是通过V8自己的方式来进行分配和管理的。在V8中，所有的JavaScript对象都是通过堆来分配的。当我们在代码中声明变量并赋值的时候，...
2019-03-12 13:48:37
1420
原创 ES6异步请求并行操作
// 在ES6中可以将多个Promise.all异步请求并行操作：// 1、当所有结果成功返回时按照请求顺序返回成功;// 2、当其中有一个失败方法时，则进入失败方法;let promiseUtil = (url)=>{ return new Promise(function (resolve,reject) { $.ajax({ "ty...
2019-03-11 21:39:20
1341
转载 如何设置、检测浏览器所支持的最小字体大小？
转载设置浏览器字体大小说明：小于12px字体的设计，我们很少接触到，因为pc端那么大的面积，没有必要设计那么小。要是接触到这种设计，一年前的 我往往会说：这个设计太搞笑了，pc端居然设计出来小于12培训的字体，有没有做过设计啊？但是近期我们项目有一个改动，设计 涉及到了9号字体，我看了一下，这次我就乖乖的去写一个能兼容的小于12px的了，因为设计成这样确实是有需求的。我们都知道：Chrome ...
2019-03-10 19:59:01
5428
原创 高清图片在不同移动端设备上的显示效果
今天看到一道前端面试题，是别人面试自己很喜欢的前端团队时出的题目：一张高清图片，怎么保证其在不同移动端设备上的显示效果？看到这个问题，我就一脸懵逼，实际上我连移动端那些像素都搞不清楚，这道题给我的话肯定会gg。以前虽然做过移动端的公司官网，但实际上都是胡乱调样式加上响应式布局做的，这样怎么能学好前端呢？索性，借着这道题目把css像素中那些事、viewport、响应式布局、移动端适配问题一起来了解...
2019-03-10 16:21:39
1130
转载 写一个css幻灯片
转载：https://blog.csdn.net/hope_It/article/details/82861754方法1:使用label<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
2019-03-10 15:53:03
400
原创 Mongoose+Node 写一个注册登录会话demo
MongoDB是一个面向文档的，schema无关（schema-less）的数据库，它非常适合Node.js应用以及云端部署。schema无关值得是可以将任意类型的文档数据存储到集合中。在MongoDB中，可以将数据都看作文档，设计非常灵活，MongoDB文档可以是任意深度的。MongoDB（ODM：Object Docummet Mapper）MongoDB 一个用户认证的例...
2019-03-10 10:33:12
1356
31
原创 函数柯里化&&反柯里化——小例子
假设我们要编写一个记录每月开销的函数。如果在每个月的前29天，我们都只是保存当天的开销，直到第30天才进行求值计算。var cost = (function(){ var args = []; return function() { if (arguments.length == 0) { var money = 0; ...
2019-03-10 09:01:31
211
原创 Node Error ： Cannot set headers after they are sent to the client
在请求时 ，出现这种问题，一定是因为，浏览器请求一次之后，服务器却返回两次及两次以上的响应。这种情况容易出现在回调中，例如我的代码：// 插入数据库函数function insert(res,req,name,psw,nick){ //数据格式 var user = new userSchema({ username : name, user...
2019-03-09 20:03:46
12680
1
原创 MongoDB &&Mongoose
在写一个登录会话demo的时候，使用mongodb.open总是打开失败，查了不少资料，最后open问题想彻底解决还是用Mongoose吧，所以开始丢弃使用Mongodb原生API了（溜了溜了MongoDB什么是MongoDB ?MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB 旨在为WE...
2019-03-09 18:33:16
395
原创 JavaScript——实现AOP
Function.prototype.before = function(beforefn) { var _self = this; // 保存对原函数的引用 return function() { // 返回包含了原函数和新函数的“代理”函数 beforefn.apply(this,arguments); // 执行新函数，修正this re...
2019-03-03 20:17:18
114
原创 模拟一个bind函数
Function.prototype.bind = function(context) { var self = this; // 保存原函数 return function() { // 返回一个新的函数 return self.apply(context,arguments); // 执行新的函数的时候，会把之前传入的context...
2019-03-03 17:09:50
206
原创 Node——Express实现简单天气查询
基于HTTP模块，Connect提供了开发Web应用常用的基础功能，而Express基于Connect为构建整个网站以及Web应用提供了简单方便的API。本文主要用于了解Express的用法和功能。1、创建模块，引入相关依赖2、创建app3、配置模板引擎4、定义路由5、监听ejs模板引擎将JavaScript代码嵌在<%和%>EJS标签中。另外，通过在<%之后加入“...
2019-03-02 22:21:41
664
原创 CSS3新增属性
CSS3新增属性：1、box-shadow（阴影效果）2、border-color（为边框设置多种颜色）3、border-image（图片边框）4、text-shadow（文本阴影）5、text-overflow（文本截断）6、word-wrap（自动换行）7、border-radius（圆角边框）8、opacity（透明度）9、box-sizing（控制盒模型的组成模式）10...
2019-03-02 16:41:34
204
原创 Node--Connect通过中间件实现代码复用
ConnectConnect是一个基于HTTP服务器的工具集，它提供了一种新的组织代码的方式来与请求、响应对象进行交互，称为中间件。中间件能够实现代码复用。为了说明通过中间件进行代码复用的好处，我们分别用HTTP和Connect来实现一个简单的网站。验证方式：访问网站的照片HTTP方法访问网站的照片1、创建模块{ "name": "A demo to compare HTTP...
2019-03-02 15:33:09
184
原创 Node-常用中间件及其使用（实现登录会话）
书写可重用的中间件这里以一个例子来说明重用的方法。一个用于当请求事件过长而进行提醒的中间件在很多情景下都非常有用。要求：在测试过程中，所有响应都在100毫秒（ms）内完成，确保能将响应事件大于100ms的请求记录下来。即：为一个名为request-time.js的独立模块中创建一个中间件。这个模块暴露一个函数，这个函数本身又返回一个函数。这对于可配置的中间件来说是很常见的写法。中间件本...
2019-03-02 15:32:16
1000
原创 Node--一个简单的HTTP客户端
目的：使用Nodejs向其他web服务器发送请求HTTP已经演变成并非仅用于交换最终渲染，展示给用户的标记文本（如HTML），而且它还是服务器在不同网络环境传递数据的一种方式。同时，JSON因其语法衍生自JavaScript线性对象，也快速成为了HTTP默认的标准数据格式，这也是Node.js在服务端的优势之一。创建模块// package.json{ "name": "twitt...
2019-02-28 17:13:44
896
原创 Node--一个简单的HTTP服务器（实现表单请求和响应）
先复习一下HTTP～HTTP超文本传输协议，又称为HTTP，是一种web协议，属于TCP上层的协议。HTTP协议构造在请求和响应的概念上，对应在Node.js中就是由http.ServerRequest和http.ServerResponse这两个构造器构造出来的对象。头信息HTTP协议和IRC一样流行， 其目的是为了进行文档交换。它在请求和响应消息前使用头信息（header）来描述不同...
2019-02-28 15:19:29
721
原创 Node-基于TCP的简易网络聊天室
写程序之前先回顾一下TCP～有关TCP传输控制协议（TCP）是一个面向连接的协议，它保证了两台计算机之间数据传输的可靠性和顺序。如今。网络应用都是用TCP/IP协议进行通信的。Node HTTP服务器是构建在Node TCP服务器之上的。从编程角度来说，也就是Node中的http.Server继承自net.Server（net是TCP模块）除了Web浏览器和服务器（HTTP）之外，很多我...
2019-02-28 09:56:31
486
原创 Node--简易文件浏览程序
定义需求程序在命令行运行。这就意味着程序要么通过node命令来执行，要么直接执行，然后通过终端提供交互给用户进行输入、输出。程序启动后，需要显示当前目录下列表。选择某个文件时，程序需要显示该文件内容。选择一个目录时，程序需要显示该目录下的信息。运行结束后程序退出。细分步骤1、创建模块2、决定采用同步的fs还是异步的fs3、理解什么是流（Stream）4、实现输入、输出5、...
2019-02-27 20:12:11
407
原创 Node入门——基础知识
安装Node网上教程比较多，就不赘述了。REPL工具mac环境下，在终端输入node就可以运行Node的REPL。可以方便地演这个一些Node API和JavaScript API 是否正确有时候忘了某个API的用法，可以用来测试创建一个简单的Node脚本const http = require('http');const serv = http.createServer(fu...
2019-02-27 16:36:23
270
原创 新建一个vue项目及部分使用（Vue-Cli）
MAC环境1、全局安装vue-cli包（注意旧版本名称是vue-cli而新版本@vue/cli）npm install -g @vue/cli2、创建一个项目vue create hello-world出现：意思是让你选择一个预先加载的配置，适合快速创建一个新项目的原型。直接回车，就会帮你预先配置好babel和eslint插件（预先配置会有点慢，耐心等等～）ps:不知道是不是网络...
2019-02-26 21:32:26
1185
原创 JavaScript--模块化:CommonJS、AMD、ES6的module
浏览器加载默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到&amp;lt;script&amp;gt;标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。&amp;lt;...
2019-02-20 14:57:44
265
原创 JavaScript学习--线程、资源下载与性能的关系，Web Worker如何解决JavaScript执行时间过长的问题
浏览器多线程&amp;amp;&amp;amp;JavaScript单线程我们可能都知道JavaScript是单线程的，却不知道浏览器是多线程的。由于浏览器的特性，浏览器在执行JavaScript代码的时候，并不能同时做其他事情。事实上，大多数浏览器都使用单一进程来处理用户界面（UI）更新和JavaScript脚本执行，所以同一时刻只能做其中的一件事情。JavaScript执行时间耗时越久，浏览器等待响应用户...
2019-02-16 16:16:00
1016
原创 JavaScript学习--作用域、原型链如何影响性能
作用域作用域链和标识符每个JavaScript函数都可以表示为一个对象，更确切地说是Function对象的一个实例。Function对象和其他对象一样，拥有可以编程访问的属性和一系列不能通过代码访问仅供JavaScript引擎存取的内部属性，其中一个内部属性就是[[Scope]]内部属性[[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域链，它决定了哪些数据...
2019-02-16 00:01:42
520
原创 JavaScript学习--DOM编程、回流重绘对性能的影响
DOM编程文档对象模型（DOM）是一个和语言无关的，用于操作XML和HTML应用程序API。DOM API主要用来访问文档中的数据。浏览器通常会把DOM和JavaScript独立实现，也就是说DOM和JavaScript在不同的文件中实现。这样的分离利于其他语言共享使用DOM及其相关函数。Chrome使用Webkit中的WebCore库来渲染页面，JavaScript引擎是V8。实际上DOM...
2019-02-16 00:00:39
373
原创 动态规划----0-1背包和最短路径问题
为了引出动态规划，先看看回溯法是如何解决经典问题的。用回溯法解决0-1背包问题假设有5个不同的物品，每个物品的重量分别是2，2，4，6，3，背包的最大承载量是9，目的是求在最大承载量下能够装入的物品的最大重量。如果我们把这个例子的回溯求解过程，用递归树画出来就是下面这个样子。f(i,cw)表示考虑第i个物品是否装入，如果装入，则cw为该物品的重量，如果不装入，则此时加入总重量的数值为0。 ...
2019-02-02 16:38:20
1830
原创 Webpack学习
参考：阮一峰老师的教程《深入浅出Webpack》接下来根据参考资料对多种情况的Webpack构建多个入口文件1、创建main1.js、 main2.js// main1.jsdocument.write('&amp;amp;amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;amp;amp;gt;Hello World&amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;a
2019-01-24 18:42:23
206
原创 CSS学习--position
position是一种定位方式。值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom”...
2019-01-23 22:45:07
144
原创 CSS学习--盒子模型
跟着学习布局和https://css-tricks.com一起学习css。盒模型概念css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边...
2019-01-23 21:52:25
286
原创 CSS学习--块级元素和行内元素
跟着学习布局和https://css-tricks.com一起学习css。块级元素和行内元素《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是...
2019-01-23 21:36:41
280
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人