前端
文章平均质量分 92
xxxspade
Always Coding
展开
-
Typescript类型实践的void与symbol
void in JavaScriptlet i = void 2; // i === undefinedwhy 为什么需要void?因为早期js里,人们可以重写undefined,然后赋予真正的值给它,而void总是返回真正的undefined。void在JS里是一个类似单目运算符的存在。void提供了一种立即执行函数的方式,可以不需要借助函数表达式。void function(...原创 2019-11-02 23:23:13 · 1243 阅读 · 0 评论 -
定位position详解(一)
0.简介首先记得p h1 div 等是称为块级元素,它们会生成”块框”。 而strong em span等是行内元素,它们生成“行内框”CSS 有3种基本的定位机制:浮动 绝对定位 普通文档流。 除非指定,否则所有框都在普通流中定位!普通流:块级框一个一个垂直排列,由元素在HTML中的位置决定。对于行内框: 水平padding 内边距,margin外边距,border可以调整他们的水平间距原创 2017-01-20 21:51:39 · 3694 阅读 · 0 评论 -
定位详解(二) Overconstrained
2.2 绝对定位前面一篇文章我们提到了 如果加入了right bottom width 的限制?也就是我们的绝对定位元素声明了尺寸,而且left top 是显式声明了的值,另外两个时auto,这时怎么处理?先看非替换元素非替换元素的放置和大小一般地,元素的大小和位置取决于其包含块。 各个属性的值都会有影响,不过最主要还是其包含块~!考虑一个定位元素的宽度和水平放置。 可以表示为一个等式: lef原创 2017-01-21 01:13:02 · 1155 阅读 · 0 评论 -
伪类和伪元素
简介 熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。原创 2016-12-29 14:59:17 · 404 阅读 · 0 评论 -
Vertical-Align的理解
Vertical-Align这是一个非常困扰人的属性。 CSS对于将元素在垂直方向上对齐提供了很多方法。取值: 用float解决:让元素的顶端对齐而且需要手动清除浮动。 float只能是让顶端对齐了。 用postion:absolute解决绝对定位让元素脱离了正常的文档流,这些元素不会再影响周围的元素。 在元素的padding marin固定的情况下,一点小的改变都很有可能对布局造成影响。ver原创 2017-01-10 17:38:22 · 608 阅读 · 0 评论 -
Session原理解释,为什么使用session
Cookie的作用之前的一篇博客已经介绍了Cookie是用来记录服务器和客户端的状态,或者说记录用户的登录信息。 我们的HTTP是无连接的,所以我们需要Cookie来进行用户和连接信息的记录。 利用cookie我们就可以跟踪用户了Cookie技术在HTTP响应报文中有一个cookie的首部行Set-CookieHTTP请求报文中有一个cookie的首部行,每次请求都会加上这个cookie原创 2017-02-25 23:35:44 · 9672 阅读 · 0 评论 -
了解Nginx以及配置反向代理
Nginx介绍定义:一个非常 轻量级的HTTP服务器, 是一个高性能的HTTP和反向代理服务器! 特性: 高性能,稳定性,丰富的功能,简单的配置和低资源消耗。 原理Nginx有一个主线程和几个工作线程。 主线程是加载和验证配置文件、维护工作线程。 工作线程处理实际的请求,Nginx 采用基于事件的模型和依赖操作系统的机制在工作线程之间高效地分发请求。工作线程的数量可配置,也可自动调整为服务器原创 2017-02-27 11:39:38 · 395 阅读 · 0 评论 -
基于Canvas的JS游戏引擎(一)
介绍这是一个非常精简的游戏引擎,它仅仅包含了一般游戏所必须拥有的功能。游戏引擎主要功能如下 1. 游戏循环 2. 绘制精灵 3. 基于时间运动 4. 碰撞检测 5. 帧速率更新 4. 暂停游戏 5. 事件处理 6. 图片加载动画循环 /游戏循环其实游戏循环就是依赖动画循环实现的。 window.requestAnimationFrame() 传统的是window原创 2017-03-14 01:41:05 · 5816 阅读 · 0 评论 -
基于Canvas和React极简游戏(一)
游戏设计思路游戏引擎:游戏循环,游戏原型 我把这个 miniGame的实现看作是业务逻辑的实现。 因为我希望我的react组件可以复用,而不是嵌入太多业务逻辑的代码。 所以import 这个miniGame中的某几个函数给我用就行了。定义精灵行为精灵行为 重力gravity行为, 二次弹跳, 上抛的行为。 底部矩形:矩形的主颜色作为 精灵的属性,这个属性是一个数组,当精灵与这个数组包原创 2017-03-19 11:13:37 · 5404 阅读 · 0 评论 -
基于Canvas和React极简游戏(二)
暂停处理游戏业务逻辑是与React组件联系比较紧的。 暂停处理的React组件如下所示: import React from 'react';import './Pause.scss';import * as MiniGame from '../../miniGame';//only divconst s={ toast:'pauseToast', toastOrigin原创 2017-03-22 14:57:19 · 1893 阅读 · 0 评论 -
Ajax XHR2详解
AJAX原生ajax的四个过程: 实例化,open,send,onreadystatechange,然后是req,readyState和status。 那么问题是通过哪个属性得到data? jquery里是success回调里面的形参。 responseText和responseXML,后者是XML解析了的。Ajax的定义Ajax是一种技术方案,不是一种新技术。 它依赖浏览器提供的XMLHt原创 2017-03-13 14:59:54 · 8071 阅读 · 0 评论 -
Canvas适配手机端
Canvas适配困境最近做了个H5小游戏,它的主页的html代码如下:<<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">原创 2017-03-13 22:46:34 · 18578 阅读 · 0 评论 -
React框架解释及组件间通信
生命周期hooks lifecycle hooks组件生命周期: 三个 状态 Mounting Updating Unmouting 把GetInitialState 换成 constructor Mounting:当一个组件的实例被创建和插入的DOM的时候被调用 constructor() //componentWillMount() render() componentDi原创 2017-03-14 16:12:38 · 1061 阅读 · 0 评论 -
今日头条血槽已空
小结今日头条的面试不是一般的难. 前面两面还好。一面JS基本数据类型说说ES6新规范,我说了 let const 箭头函数 还有promise, ES6 Module 。怎么实现ES6 Module,我说了用闭包实现一个模块。项目用到React,说说React。React性能优化算法 问题之前笔试 ,求两个整型数组的相同数,当时想到了用哈希表去扫描,然后比较下一个数组原创 2017-04-29 19:41:53 · 1314 阅读 · 0 评论 -
阿里前端笔试题
按面向对象实现数据的删除:注意splice(index,1) 第一个参数是第i个位置注意list删除后要重新更新lists数组面向对象,以类的形式抽象这个问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scal原创 2017-08-18 12:10:57 · 940 阅读 · 0 评论 -
基于Canvas的JS游戏引擎(二)
接着上一节,我们来讲一下引擎后面的部分碰撞检测碰撞检测分事前检测和事后检测: priori collision detection / posteriori collision detection 提前探知是否会发生碰撞 或 事发之后才检测到碰撞事前碰撞可能会失效,因为计算小球在下一帧的位置来检测碰撞,容易出错。它是根据当前速率估算的,而帧速率突然改变,估算的结果就不准了。 事前的准确度不原创 2017-03-17 14:36:28 · 4090 阅读 · 0 评论 -
跨域解决方案JSONP
什么是跨域老生常谈的问题了。下面列出一个表格: URL 说明 是否跨域 http://www.a.com/a.js http://www.a.com/b.js 同一个域名 否 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一个域名,不同文件夹 否 http://www.a.com:8080/a.j原创 2017-02-24 17:27:51 · 3318 阅读 · 0 评论 -
Web Storage
客户端存储历史最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。userData是IE的东西。现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用。再之后Go原创 2017-02-20 00:04:05 · 332 阅读 · 0 评论 -
WebUploader二次封装
spadesUploader对WebUploader的二次封装,其实是源于之前在一家公司实习的时候发现,做Java后台的上一个人对于后台管理系统的开发,前端基本是能用插件就用插件,能用库就用库,非常的暴力。以致于一开始接手的时候,看了一大堆库的用法。 当然像jQuery,Bootstrap都是必备的。然后就是插件如Boostrap validator jQuery的一堆plugin。后面接原创 2016-11-30 15:41:24 · 4278 阅读 · 0 评论 -
jQuery 源码解析(一)
Talk about jQueryjQuery优势更方便处理HTML events 动画效果 AJAX 成熟的插件。 使得用户HTML页面保持代码和html内容分离。 不用再在html里面插入一堆js调用命令,只需定义id。 兼容CSS3 兼容各种浏览器,这是jQuery为我们做的事情。兼容性:IE 6+ FF 1.5+ Safari 2.0+ Opera 9.0+ CSS3原创 2016-12-01 14:52:24 · 288 阅读 · 0 评论 -
HTTP学习-代理
WEB结构组件(也可以认为是WEB应用程序) 代理:位于客户端和服务器之间的HTTP中间实体(中间人)。 作用:WEB安全 应用集成 性能优化的重要组成模块。 缓存:HTTP的仓库(其实也可能是一个代理服务器,或浏览器缓存),使常用页面的副本可以保存在里客户端更近的地方。 特殊的HTTP代理服务器,可以经过代理传送常用文档复制保存起来。原创 2016-12-14 21:05:49 · 337 阅读 · 0 评论 -
前端框架及组件参考
框架原创 2016-12-01 15:05:17 · 553 阅读 · 0 评论 -
Git自动化部署
Git 自动化部署分两个部分:搭建自己的git服务器自动化部署原创 2016-11-22 23:23:06 · 6166 阅读 · 1 评论 -
Mongoose
Mongoose原创 2016-12-06 21:33:58 · 1058 阅读 · 0 评论 -
form-data/x-www-form-urlencoded/raw/binary
form-data http请求原创 2016-12-09 22:35:10 · 800 阅读 · 0 评论 -
Lazyload (I ) 元素尺寸位置等概念
图片懒加载 元素尺寸和大小前言懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。原创 2016-12-20 15:37:17 · 431 阅读 · 0 评论 -
LazyLoad(II) 实现及相关原理
0 . 文档和视口元素的X和Y坐标可以相对于文档的左上角或相对于其中显示文档的视口的左上角。文档坐标 和 大小:文档坐标在滚动的时候是不会改变的,它是X和Y坐标的绝对值,是包括了不可见的内容。文档的大小:原创 2016-12-21 11:08:21 · 444 阅读 · 0 评论 -
支持多语言页面(XML AJAX)
多语言这里的多语言页面是指 一个页面怎么支持多国语言。多国语言:如English 简体中文 繁体中文 等等。原创 2016-12-17 20:46:07 · 791 阅读 · 0 评论 -
WEB通信之 长连接、长轮询(long polling)
一、什么是长连接、长轮询?长连接:基于HTTP的长连接,是一种通过长轮询方式实现”服务器推”的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。 一般都是用socket实现长连接 http请求一般是短连接:一次请求结束,就会断开与服务器的连接,服务器不能 主动推送数据到客户端,而只能由客户端发起请求。a) AJAX短连接实现网页聊天原创 2017-02-19 00:43:01 · 5908 阅读 · 0 评论 -
WEB安全 CSRF/XSS
XSS定义跨站脚本攻击,网站应用程序的安全漏洞攻击,代码注入的一种。把恶意代码注入到网页上,使得用户在观看网页的时候受到影响。 XSS 跨站脚本攻击 Cross site Scipting原因 主要原因是多数用户的输入没有被转义,而直接执行。 XSS可以获取到用户cookie或隐私客户端信息。比如通过location.hash假设某个网站有一段脚本:$('#box').html(location原创 2017-02-28 17:17:34 · 966 阅读 · 0 评论 -
Storage事件无法触发解决
Web Storage 项目实践这段代码是从一个项目在摘出来的,主要实现了将一个图片利用canvas的toDataURL这个API转成BASE64编码的字符串(图片要先用drawImage画到canvas上),然后存储到localStorage中。 因为图片数据量大,经常加载会耗费时间,所以可以利用客户端存储缓存起来。 这几个图片主要是图标ICON。/*Canvas transfer img to原创 2017-02-20 00:15:19 · 6318 阅读 · 1 评论 -
document.write的问题
简介将输出流写入到网页的能力就是document.write,还有open() close() writeln()。方法都是接受一个字符串参数,即要写入到输出流中的文本。wirte原样写入,writeln在字符串末尾添加换行符。页面被加载过程中,可以使用这两个方法向页面中动态添加内容。用法...<p><script>document.write("<strong>"+(new Date()).原创 2017-02-21 15:55:11 · 2930 阅读 · 0 评论 -
MAC LAMP搭建
MAC Apache Mysql PhpMAC Apache我所用的是MAC OSX 10 在MAC中,Apache已经集成好了。 输入 apachectl start 就可以启动了。 访问 http://localhost 验证服务器是否启动了。 站点默认在系统路径下。 PHP现在修改一下Apache的配置。 cd /etc/apache2/cp http.conf httpd.conf原创 2016-11-03 14:52:42 · 730 阅读 · 0 评论