Skip to content

Instantly share code, notes, and snippets.

View web-afei's full-sized avatar

web_afei web-afei

  • 河南-郑州
View GitHub Profile
@web-afei
web-afei / 敏捷软件开发流程
Created June 27, 2018 22:14
敏捷开发流程了解一下
[敏捷软件产品/项目开发管理流程](https://www.cnblogs.com/ddmacle/p/6136173.html)
[敏捷软件开发简述](https://www.cnblogs.com/wirehack/p/5988617.html)
转载自:博客园,作者:水哥驿站
博客园:作者:wirehack
@web-afei
web-afei / js事件监听与事件绑定的区别
Created June 15, 2018 04:06
addEventListener、onclick
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--普通事件中的onclick事件只支持单个事件,会被其他onclick事件覆盖,(重点!!!)
有两种写法:
@web-afei
web-afei / js中那些容易出错的部分
Last active June 15, 2018 03:46
js面试脱坑-精华文章收藏
[01->80% 应聘者都不及格的 JS 面试题](https://juejin.im/post/58cf180b0ce4630057d6727c)
[02->80% 应聘者都不及格的 JS 面试题-dom操作](https://juejin.im/post/58f558efac502e006c3e5c97)
@web-afei
web-afei / ECMAScript严格模式
Last active June 13, 2018 02:46
“use strict”
## 什么是js的严格模式
严格模式对正常的 JavaScript语义做了一些更改。
首先,严格模式通过抛出错误来消除了一些原有静默错误。
其次,严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷:有时候,相同的代码,严格模式可以比非严格模式下运行得更快。
第三,严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。
严格模式代码和非严格模式代码可以共存,因此项目脚本可以渐进式地采用严格模式。但是在合并js代码时,合并严格模式与非严格模式有可能出现问题
**使用严格模式的好处是可以提早知道代码中存在的错误,及时捕获一些可能导致编程错误的 ECMAScript 行为**
## 怎么开启严格模式
@web-afei
web-afei / ajax、jsonp的面试常问问题总结
Last active June 14, 2018 04:04
总结ajax、jsonp及跨域问题
# Ajax篇 #
## 一、什么是ajax
>ajax是一种通过XmlHttpRequest对象来向服务器发出异步请求,从服务器获得数据,然后用javascript来操作DOM,在不刷新整个网页的情况下对网页的某部分进行更新。**Ajax目的:提高用户体验,较少网络数据的传输量**
## 二、ajax原理
通俗的概括一下如下步骤:
1.浏览器让xhr对象去跟服务器要点数据
2.浏览器接着干别的事情(异步请求)
3.xhr接到指令去跟服务器请求数据
4.服务器接收请求返回数据给xhr
## 一、什么是SEO搜索引擎优化
搜索引擎优化是一种利用搜索引擎的搜索规则,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划来提高目前网站在有关搜索引擎内的自然排名、从搜索引擎中获得更多的免费流量的方式(技术手段)。
## 二、基本工作原理大致概括为三个阶段
1.爬行和抓取:搜索引擎通过跟踪链接访问网页、获得页面 HTML 代码并存入数据库
2.对获取到的内容进行分析,对优质页面进行收录
3.当用户检索关键词时,从收录的页面中按照一定的规则进行排序,并返回给用户结果
## 三、优化技术
SEO 优化可以分为站内优化和站外优化。
**站内优化又分为:网站结构优化和网站页面优化。**
**站外优化:外链。如友情链接**
@web-afei
web-afei / 如何实现多个标签页之间的相互通信
Created June 9, 2018 07:15
前端(本地存储:localstorage、cookie等) + 后端(轮询、SSE)
# 第一种——调用localStorage #
在一个标签页里面使用 localStorage.setItem(key,value)添加(修改、删除)内容;
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值,实现不同标签页之间的通信。
标签页1:
```javascript
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
@web-afei
web-afei / 浏览器渲染过程总结
Created June 8, 2018 12:49
浏览器渲染过程总结
[浏览器渲染过程知乎大神详解](https://zhuanlan.zhihu.com/p/29418126)
## 1.阶段一 需求产生 - 准备开发
这个阶段又可以分为如下三个小阶段:
**需求评审**
正常情况下,从需求产生到准备开发,应该有一个需求评审会,这时候相关开发和产品经理会聚集在一起,商讨需求是如何产生的(敏捷开发的需求通常是从客户的反馈中产生的),我们做的功能有没有解决客户的问题,我们对需求的理解有没有偏差和需求的优先级等。经过彻底充分的讨论之后,如果需求理解没有问题,并且需求确实可以解决客户的问题,我们会为工作安排时间和优先级,将task列到看板(同时列到系统和白板上),并每天追踪更新。
理解产品经理的真正意图,明白需求产生的背景
**拆分组件和模块**
前端目前比较推荐的工作方法是组件式开发,即将页面拆分成足够粒度的小组件和模块。由单独的人负责相关独立模块和组件的开发,做到组件和模块的复用。
**建立分支**
@web-afei
web-afei / js实现继承的三种方法
Last active June 8, 2018 12:33
扩展Object的prototype实现继承、使用call和apply实现继承、使用原型实现继承。
## 1.扩展Object的prototype实现继承
```javascript
function Parent(){}//定义父类
funtion Son(){}//定义子类
//通过原型给Object对象添加一个扩展方法。
Object.prototype.customExtend =function(parObj){
for(var i in parObj){
//通过for-in循环,把父类的所有属性方法,赋值给自己
this[i] =parObj[i];