Elementsboy的博客

原创 阿里巴巴笔试+面试

阿里面试考查知识点安全方面:XSS: 跨站脚本攻击（通过input框或者地址栏注入js脚本）CSRF：跨站请求伪造（通过浏览器请求自动携带cookie）SQL注入：路由相关:路由模式（hash，browser）路由传参（url，state, path+query, name+params）路由监听（beforeEach, afterEach, subscribe）路由原理（hashChange + popState）webpack:entryoutputmodules

原创 前端必看面试(CSS/JS/ES5/ES6等等)

CSS篇：盒模型：怪异模式：box-sizing = border-box, width = content+padding+border标准模式：box-sizing = content-box, width = content垂直居中方法：// 不定宽高{ position: fixed; top: 0; bottom: 0; left: 0; right: 0;}{ display: flex; align-items: ce

原创 插入排序

原创 快速排序

原创 mixin（公共样式定义）

minxin公用样式src/scss/_mixin.scss//宽高@mixin wh($width, $height) { width: $width; height: $height; display: block;}//超出一行变成...@mixin ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: norm

原创 PWA(渐进式 web 应用)

Progressive Web Application背景PWA 全称是渐进式 web 应用，它是用一系列前端技术来实现的，目标是提供类似原生APP一样的体验。解决的问题：Web 的用户体验首屏加载速度网页离线无法访问用户留存Native App 安装完毕桌面上有一个入口Native App 能够通过发送通知让用户再次回到应用中来Web App需要记住URL并输入地址Device API 的不完善Native App 更方便访问设备硬件和设备上的数据WebAPI

原创 JS线程__详解

JS线程很多文章在介绍线程以及线程之间的关系，都存在着脱节的现象。还有的文章过于广大，涉及到了内核，本文希望以通俗易懂的话去描述晦涩的词语，可能会和实际有一丢丢的出入，但是更易理解。我们都知道JS是单线程的，即js的代码只能在一个线程上运行，也就说，js同时只能执行一个js任务，但是为什么要这样呢？这与浏览器的用途有关，JS的主要用途是与用户互动和操作DOM。设想一段JS代码，分发到两个并行互不相关的线程上运行，一个线程在DOM上添加内容，另一个线程在删除DOM，那么会发生什么？以哪个为准？所以为了避免

原创 常见兼容问题

如何处理兼容问题在JS代码里使用对象检测，判断该特性是否支持 eg:‘XMLHttpRequest’ in window‘WebkitMask’ in document.documentElement.style使用postcss做样式的后处理样式问题清除浏览器默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式;Ios滑动卡顿问题body {-webk

原创 React生命周期

React生命周期1、componentDidMount() // 组件挂载完成之后触发的生命周期 相当于vue的mountedcomponentDidMount(){ setInterval(()=>{ // 修改state的唯一方法 // @param 要修改的数据 // @param 修改完成之后的回调函数 this.setState({ index:this.state.index++

原创 什么是BFC?(CSS)

前言（BFC 神奇背后的原理）BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本

原创 网络安全

网络安全重要性随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求，但是随之而来的就是各种网络安全的问题。了解常见的前端攻击形式和保护我们的网站不受攻击是我们每个优秀fronter必备的技能。分类XSS攻击CSRF攻击网络劫持攻击(运营商劫持)控制台注入代码虚假网站钓鱼XSS攻击XSS是一种经常出现在web应用中的计算机安全漏洞，为了和 CSS 区分，这里把攻击的第一个字母改成了X，于是叫做XSS，它允许恶意web用户将代码植入到提供给其它用户使用的页面中

原创 项目优化

项目优化为什么需要项目优化在互联网快速发展的今天，在实现完功能之后，项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化，就是为了让页面尽可能早的到达用户，提高交互的流畅程度。在系统可利用系统资源有限的大背景下，3秒呈现内容的原则下，项目优化显得格外重要。每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃；每减少100K的内容请求可能会给你带来几千甚至几万的的服务端费用；每提高10%的交互流畅度可能给你带来几万甚至几十万的销售额。于情于理，我们都需要去

原创 前后端是如何交互的

前后端是如何交互的iOS，H5，安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什

原创 开发流程

开发流程图解需求评审召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工 明确需求目的，考虑当前需求设计是否可满足目的 整理流程中如果涉及的其他人员，则召集商讨 如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审注意事项业务流程同步：评审后重新梳理流程，存在疑问处及时找产品沟通 周边需求依赖：评审功能与依赖功能并行开发，由于前置需求未完成导致当前需求时间成本被压缩 埋点需求：提前与产品明确是否需要埋点 造数据：提前了解测试数据制造的困难程度，

原创 浏览器的缓存

浏览器的缓存概念：浏览器缓存主要是指http请求的缓存，作用是不言而喻的，能够减少资源请求，极大的改善网页性能，提高用户体验。浏览器第一次获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。同时当相应header里没返回cache-control和expires的时候，浏览器可以根据LM-Factor算法计算出一个试探性最大使用期。图解：资源请求分类对比分析从上面分类很容易看出缓存分为强

原创 linux日常操作

linux日常操作善用tab健，帮我们补全命令和路径切换文件夹: cd查看当前路径：pwd查看当前文件夹下的文件： ls+ll创建文件夹：mkdir移动文件：mv复制文件：cp删除文件及文件夹：rm -rf(禁止使用)编辑文件：vim查看历史命令：history...

原创 上传头像源码（JS）

文件上传formData文件上传://源码<input type="file">//支持文件上传,用post方式提交formData对象,键为文件名,值为文件eg:var ele = document.querySelector('input');ele.onchange = function(e){ console.log('e...', e); let files = e.target.files; // 创建一个formData let f

原创 单页面应用开发_详解(MPA/SPA)

单页面应用开发MPA与SPA简介：MPA (Multi-page Application)MPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计，早期的网站都是这样的设计，所之称为「网页设计」。使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面，浏览器会不停的重载页面 (Reload)，整个操作也常感觉卡卡。如果使用这样的设计在 Web App 中，使用者体验比较差，整体流畅度扣分。但进入门槛低，简单套个 jQuery 就可以完成。

原创 前端规范总结

1> 目录规范前后端不分离项目css目录可用于存放css资源文件（包含less，sass等动态样式表语言）。css文件后缀名 必须(MUST) 为.css，less文件后缀名 必须(MUST) 为.less。需要单独区分字体css├── build│ ├── build.js│ └── webpack.dev.js├── src│ ├── assets│ ├── js│ └── css│ ├── componets│ └──

原创 React项目build之后资源文件路径 问题解决 背景图片

React项目build之后资源文件路径 问题解决 背景图片1. 找到node_modules -> react-scripts -> config -> paths.js修改function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(

原创 Async函数_详解(ES7)

Async / awaitPromise的Async/awaitasync/await是es7推出的一套关于异步的终极解决方案，为什么要说他是终极解决方案呢？因为他实在是太好用了，而且写起来还非常的简单。什么是async/await呢？可以总结为一句话：async/await是一对好基友，缺一不可，他们的出生是为Promise服务的。可以说async/await是Promise的进化版。这两个基友必须同时出现，缺一不可语法：1 async function (function re

原创 自动构建工具_详解（gulp）

gulp自动构建工具现在的前端开发不再是简单的使用HTML + CSS + JavaScript 这些技术去构建网页应用。我们要提高效率，就必须减少重复的工作。使用less之类预处理的css提供开发阶段更加便利，更加快捷gulp 就是一种可以自动化完成我们开发过程中大量的重复工作预处理语言的编译js css html 压缩混淆图片体积优化gulp是一个前端自动化构建工具。gulp类似的工具：grunt 、webpackgulp是基于node体系的。gulp优点：

原创 git+github操作总结

git+github操作总结GitHub：使用HTTPS协议时：需要输入github账户名和密码使用SSH协议时：不需要账户名密码，但是需要配置一次密钥。使用GitHUb 配置公钥秘钥在全局打开 命令提示符输入ssh-keygen （如何解决：提示ssh-keygen不是内部命令）找到生成秘钥的位置，复制文件以.pub结尾的秘钥。在github上“用户”——“settings”——“SSH and GPG keys”——“New SSH key”添加复制的秘钥,title随意取名

原创 什么是git

git 初识git 是什么Git是目前世界上最先进的开源的分布式版本控制系统。需要安装git点击安装（注意：安装目录不要在中文下）git config --global user.name xxx(英文用户名)git config --global user.email xxxx(邮箱地址)git config --list 查看全局的配置常用命令添加查看添加到本地仓库（版本库）1：git init2：git add .3：git commit -m “描述”4：

原创 代理和跨域JSONP区别

代理和跨域JSONP区别简介：跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据。http://www.a.com 与 https://www.a.com 是不同源的，它们协议不同http://www.a.com 与 http://www.b.com 是不同源的，它们域

原创 HTML5 拖放（Drag 和 Drop）

简介（Drag 和 Drop）拖拽(Drag/Drop)是个非常普遍的功能。在生活中，拖放物品其实是相当常见的一个动作。你可以抓住一个对象，并且拖动到你想放置的区域。HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素（地址-href）都默认设置了 draggabl

原创 原型链 解析(JS)

原型链 解析(JS)解读函数的 prototype 属性：每个函数都有一个prototype 属性（显示原型属性），它默认指向一个Object空对象（即称为：原型对象）每个实例对象（new 函数名()）都有一个__proto__，称为隐式原型属性。对象的隐式原型的值为其对应构造函数的显式原型的值（内存结构如图所示：）原型对象中有一个属性constructor，它指向函数对象给原型对象添加属性（一般都是方法总结：函数的prototype 属性：在定义函数时自动添加的，默认值是一个空

原创 多媒体_详解（audio/video）

多媒体(audio)audio该标签往页面插入音频标签语法:<audio src="song.mp3" controls loop autoplay>浏览器不支持audio标签</audio>浏览器对音频的兼容性大约有80%的浏览器支持HTML5的audio标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式兼容代码如下：<!--拥有两份源文件的音频播放器--&g

原创 什么是 JSON ？

JSON什么是JSON ?JSON : JavaScript Object Notation (JavaScript 对象表示法)JSON : 是轻量级的文本数据交换格式JSON : 独立于语言，支持不同编程语言（PHP，JSP，.NET）JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据由 键名/值 组成数据由逗号分隔大括号保存对象中括号保存数组JSON 数据的书写格式是：名称/值对。名称/值 包括字段名称（在双引号中），后面写一个冒号

原创 刮刮乐案例(canvas)

源代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>audio</title> <style type="text/css"> canvas { /* canvas 默认宽高 300*150 css设置的宽高，只能设置canvas对象在页面显示的大小。

原创 阻止冒泡和取消默认行为(JS)

冒泡和捕获是事件的两种行为使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。- 比如：在a标签href属性上的跳转，form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。我们可以通过js取消或更改这些默认事件。防止冒泡和捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble

原创 楼层/横向滚动/吸顶等(移动端-效果案例)

以下效果基于better-scroll插件实现效果演示：横向滚动源代码：<div class="wrapper"> <div class="content"> <ul class="ul"> <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jp

原创 面向对象总结（O O P）

面向对象编程 （Object Oriented Programming）面向对象基本特征：封装：也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。继承：通过继承创建的新类称为“子类”或“派生类”。继承的过程就是从一般到特殊的过程。多态：对象的多功能，多方法，一个方法多种表现形式。Javascript是一种基于对象（object-based）的语言。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（

原创 元素-居中+弹出框

实现元素垂直居中的方法很多，相信大家都能说出几种。相对于PC端，移动端的方法会更多点，平时在网上收集了一些，在此贴出来分享给大家，仅供参考。方法1:table-cellhtml结构<div class="box box1"> <span>垂直居中</span></div>CSS样式：.box1{ display: table-cell; vertical-align: middle;

原创 Hooks的原理/问题/以及注意事项

Hooks的原理- 单向链表通过next把hooks串联起来- memoizedState存在fiber node上，组件之间不会相互影响- useState和useReducer中通过dispatchAction调度更新任务Hooks的使用注意事项只能在顶层调用Hooks? Hooks是使用数组或单链表串联起来，Hooks顺序修改会打乱执行结果useState在多个组件中引入，彼此之间会不会有影响? 在React中Hooks把数据存在fiber node上的，每个组件都有自己的curr

原创 什么是Hooks

什么是HooksHooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特性（比如状态管理，生命周期），就用钩子把外部特性"钩"进来，通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加，在v16.8.0中正式发布Hooks产生的背景跨组件复用stateful logic十分困难 使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。复杂的组件

原创 Generator和async是什么?

GeneratorGenerator 函数是 ES6 提供的一种异步编程解决方案。Generator函数是一个状态机，它返回一个遍历器对象。Generator函数的两个特点：1>function关键字和函数名之间有个*2>函数体内部用yield表达式，定义不同的状态function* hello(){ yield 'hello1'; yield 'hello2'; return 'end';}let h = hello();console.log(h

原创 module

moduleES6之前javascript没有模块体系,无法将一个大型的项目拆分成互相依赖的小文件，再用简单的方式进行简单的拼接。社区制定了模块化开发的规范，最主要的两种模块化解决的方案：Commonjs，AMD两种。commonjs用于服务器端AMD用于浏览器端\ES6的模块完全可以取代commonjs和AMD两种规范。模块功能主要有两个命令构成：export和import。...

原创 观察者模式（发布订阅模式）

观察者模式（发布订阅模式）简介：观察者模式（又被称为发布-订阅（public/Subscribe））模式,属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象再状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。代码块：<button id="public">发布动态</button> &lt...

原创 什么是MVVM

MVVMm:model 数据层v:view 视图层vm: 数据双向绑定封装mvvm的思路1.实现一个Observer,对数据进行劫持，监听数据的属性变更，并在变动时进行notifyObject.defineProperty(vm,key,{ set(){}, get(){}})2.实现一个compile,对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更...