2019年07月_jiaojsun

转载 JavaScript系列—简述JS中的事件委托和事件代理

JS中的事件委托和事件代理什么是事件委托？事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。我用取快递来解释这个现象：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要...

2019-07-28 20:53:13 1436

原创 JavaScript系列—script defer和async的用法和区别

1.script defer是什么HTML <script> 标签的 defer 属性示例<html><body><script type="text/javascript" defer="defer">alert(document.getElementById("p1").firstChild.nodeValue);&...

2019-07-28 20:42:58 331

原创 JS的33个概念—前端安全（跨站脚本攻击XSS和跨站请求伪造CSRF）

1.跨站脚本攻击(XSS)1）定义跨站脚本攻击是基于web应用中已知的漏洞，服务端，或者依赖的插件系统。利用其中一种方式，攻击者可以把恶意内容放进目标站点传输的内容中。当这种结合的内容到达客户端的浏览器中，它就已经变成从受信任的来源传输的，然后在系统授权下进行操作。通过寻找把恶意脚本注入web页面的方法，攻击者可以获取对敏感页面的访问权限，例如对session cookie和浏览器代表用...

2019-07-26 12:48:55 1180

转载 JS的33个概念—调用堆栈

[译] 理解 JavaScript 中的执行上下文和执行栈什么是执行上下文？简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。执行上下文的类型JavaScript 中有三种执行上下文类型。全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会...

2019-07-26 12:27:25 409

原创 nth-child和nth-of-type两个选择器的区别

CSS3 :nth-child()规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</...

2019-07-26 11:38:14 213

原创 JS的33个概念—toString和valueOf

写在前面 toString()：返回对象的字符串表示。  valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。3.4.7 Object类型Object 的每个实例都具有下列属性和方法。 toString()：返回对象的字符串表示。 valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toStrin...

2019-07-23 16:03:07 404

原创 JS的33个概念—设计模式

JavaScript设计模式设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案当然我们可以用一个通俗的说法：设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，我们可能会条件反射一样自然而然想到符合这种场景的设计模式。比如，当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖...

2019-07-23 11:30:19 280

原创 JS的33个概念—Object.assign()和Object.create()

1.Object.assign定义Object.assign()主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象，同时返回目标对象语法如下所示：Object.assign(target, ...sources)其中target是目标对象，sources是源对象，可以有多个，返回修改后的目标对象target。如果目标对象中的属性具有相同的键，则属性将...

2019-07-23 10:34:05 760

转载 JavaScript系列—Object.assign()介绍以及原理实现

Object.assign()主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象，同时返回目标对象语法如下所示：Object.assign(target, ...sources)其中target是目标对象，sources是源对象，可以有多个，返回修改后的目标对象target。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后来的源对象的...

2019-07-23 10:00:51 1474

原创 JS的33个概念—面向对象（封装继承和多态）

什么是面向对象编程生动描述面向对象概念先上一张图，可以对面向对象有一个大致的了解，然而什么是面向对象呢，用java中的一句经典语句来说就是：万事万物皆对象。面向对象的思想主要是以对象为主，将一个问题抽象出具体的对象，并且将抽象出来的对象和对象的属性和方法封装成一个类。面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整...

2019-07-19 20:08:45 285

原创 JS的33个概念—函数作用域和全局作用域,(局部)块级作用域,(静态)词法作用域

ECMAScript6之前只有全局作用域和函数作用域。函数作用域和全局作用域1.函数作用域在JavaScript中，用var申明的变量实际上是有作用域的。如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：'use strict';function foo() { var x = 1; x = x + 1;}x = ...

2019-07-19 16:36:56 490

转载 JavaScript 开发者应懂的 33 个概念

JavaScript开发者应懂的33个概念Fundebug一行代码搞定BUG监控：www.fundebug.com关注她356 人赞同了该文章摘要：基础很重要啊！原文：33 concepts every JavaScript developer should know 译文：每个 JavaScript 工程师都应懂的33个概念作者：stephentianFu...

2019-07-17 17:33:55 683

原创 vue面试题

1.vuex中异步在哪里写，可以在mutation里面吗，为什么？Mutation 必须是同步函数一条重要的原则就是要记住mutation 必须是同步函数。为什么？请参考下面的例子：mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) ...

2019-07-17 17:32:25 205

原创 react面试题

1. React 中 keys 的作用是什么？在React的Diff 算法中会借助元素的 Key来判断该元素是被修改的、还是被添加或者是被移除的。从而减少不必要的元素重渲染。render(){return(<ul>{this.state.todoItems.map(({item,key})=>{retur...

2019-07-17 11:07:34 917

原创 react文档阅读笔记（二）

1.State & 生命周期封装时钟function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div...

2019-07-16 15:12:21 141

原创 react文档阅读笔记（一）

1.Hello World一个简单的react的例子ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));它渲染了一个 “Hello, world!” 的标题。React是一个JavaScript库2.JSX简介下面是一个JSX，它是一种 J...

2019-07-16 11:41:21 172

原创 JavaScript系列—一道十面埋伏的原型链面试题

这道题是我面试的时候碰到的function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = { demo: 5 }; this.show = function () { console.log(thi...

2019-07-16 09:51:49 466

转载 JavaScript系列—内存管理+如何处理4个常见的内存泄漏

这篇文章摘抄自微信（https://mp.weixin.qq.com/s/RZ8Lpkyk8lz6z5H8Q8SiEQ）讲的挺好的，一目了然垃圾回收算法常用垃圾回收算法叫做**标记清除（Mark-and-sweep） **，算法由以下几步组成： 1、垃圾回收器创建了一个“roots”列表。roots 通常是代码中全局变量的引用。JavaScript 中，“window” 对象是一个...

2019-07-15 15:45:40 245

转载 JavaScript系列—性能优化之JavaScript内存泄漏（阮一峰）

JavaScript 内存泄漏教程作者：阮一峰日期：2017年4月16日一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory...

2019-07-15 11:47:13 889

转载 JavaScript系列—Js的内存模型

原文地址（https://zhuanlan.zhihu.com/p/62449359）摘要：从内存角度理解 let 和 const 的意义。原文：JavaScript 是如何工作的：JavaScript 的内存模型作者：前端小智// 声明一些变量并初始化它们var a = 5;let b = "xy";const c = true;// 分配新值a = 6;b = ...

2019-07-15 11:37:39 797

转载如何评价 TypeScript？

王泽Hello Egret338 人赞同了该回答怒答。TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。TypeScript 是 JavaScript 的超集，...

2019-07-15 10:07:59 922

转载 [翻译]React还是Vue：你该如何选择？

[翻译]React还是Vue：你该如何选择？松子在下头很硬关注他140 人赞同了该文章本文译自React or Vue: Which Javascript UI Library Should You Be Using?，原文需翻墙。如果想及时了解最新的优秀外文资料,可以参考某熊周刊系列:一周推荐外文技术资料(12.1)。2016年React巩固了它作为前端框架之王的地...

2019-07-15 10:01:01 146

转载 JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》

本篇博文来源于网络226 人赞同了该文章原文作者：IMWeb jerryOnlyZRJ原文链接：网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区史上最全面、最完整的网站性能监测与优化策略0.引言作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展...

2019-07-13 15:28:21 396 1

原创 HTTP系列—浏览器的缓存机制

前言最近在准备面试，发现浏览器的缓存机制是一个常考的点，也是作为前端开发工程师必须要掌握的，这篇文章结合几篇参考资料特意整理出来，方便记忆。以下是两篇博文。建议看第一篇，第二篇有点问题《精简的缓存机制》强制缓存（200）和协商缓存（304）的区别1. 什么是...

2019-07-10 20:55:05 222

转载 JavaScript系列—性能优化之一《网页性能管理详解》

为了加深记忆，这篇文章是我摘抄阮一峰的网络日志网页性能管理详解作者：阮一峰日期：2015年9月17日你遇到过性能很差的网页吗？这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，那么怎样才能提高性能呢？一、网页生成的过...

2019-07-10 09:45:14 382

原创 css系列—sass,scss,less,stylus的比较

这三种的直观比较可以参考这两篇博文https://www.jianshu.com/p/b2174b800e40（CSS 预处理的区别的深度比较 - Stylus/Sass/Less）https://www.oschina.net/question/12_44255（为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus）1.CSS预处理器CSS预处...

2019-07-08 20:46:38 6975 2

原创 JavaScript系列—宏任务和微任务

看这篇博文之前，先看一下下面的文章吧《JavaScript 运行机制详解：再谈Event Loop》http://www.ruanyifeng.com/blog/2014/10/event-loop.html本文有参考，微信搜索《重学前端 --- Promise里的代码为什么比setTimeout先执行？》关于宏任务和微任务先看几道题吧 var r = new Pro...

2019-07-07 22:25:28 7034 5

原创 web前端面试一从输入url到看到页面发生了什么

从输入url到看到页面发生了什么1.DNS解析2.发送tcp连接3.发送http请求4.服务器处理请求并返回http报文5.浏览器解析渲染界面6.连接结束DNS解析1.解析过程DNS解析是一个递归的过程。比如，你输入www.google.com网址后，首先在本地的域名服务器中查找，没找到就去根域名服务器查找，再没有去com顶级域名服务器查找，如此类推，知道...

2019-07-07 21:50:05 910

原创 vue-cli—03-webpack基本配置说明

下来我们一个一个介绍build文件夹下面的一些配置check-versions.js'use strict'const chalk = require('chalk') //输入终端的一些样式，红色或者绿色，可以通过这个模块来定义const semver = require('semver') // 处理版本号const packageConfig = require('../pa...

2019-07-06 15:29:56 251

原创 vue-cli—01vue-cli安装和启动

可以在这里面看教程npm install -g vue-clivue -V （查看是否安装成功，成功则会打印版本号）vue init webpack vue-example （一直回车）然后会生成一个vue-example的文件夹然后npm run dev可以打开项目1.分析src目录下面的文件main.jsApp.vuerouter/i...

2019-07-06 10:40:13 138

原创 vue-cli—02一级目录和文件介绍

build:webpack配置相关config:生产环境和开发环境的一些配置参数node_modules:安装的第三方依赖src:项目源码，这里面的东西会被webpack进一步处理static: 放置的一些第三方资源.babelrc:是因为很多浏览器不支持一些高级的语法，比如es6，所以需要安装babel这个编译器，当我们启动babel的时候，webpack会在项目目录里面...

2019-07-06 10:21:10 528

原创 JavaScript系列—cookie,session,token等

前言之前整理过cookie,session,token,但发现还是云里雾里，今天读了几篇经典的文章，彻底的弄清楚这个东西。首先我们需要知道，这三个东西的为了解决什么问题HTTP是一种无状态的协议，而服务器端的业务必须是要有状态的, 为了分辨链接是谁发起的，需自己去解决这个问题。不然有些情况下即使是同一个网站每打开一个页面或者 APP 每次进入也都要登录一下。而 Session 、...

2019-07-04 20:36:26 1191

原创 JavaScript系列—用户登录退出cookies—vue版

这篇文章我们结合vue和vue-router来说一下如何实现用户的登录，退出，和cookies先回忆一下之前《vue-router—14案例：模拟登录跳转》这篇文章1.vue-router—14案例：模拟登录跳转首先封装一下插件(关于为什么这么封装，为什么会有install，可以参考这篇博文https://www.cnblogs.com/mengfangui/p/9046525.ht...

2019-07-03 15:04:25 1408

原创 JavaScript系列—用户注册登录退出cookies—node版

关于用户注册，登录，以及使用cookie相关的内容其实还是比较重要的，在《nodejs个人博客》这个项目中已经完整的讲过了，今天再拿出来巩固一下1.注册ui<div id="registerBox" class="userForm" style="display: none"> <div>新用户注册</div> <ul>...

2019-07-02 20:00:08 915

原创 JavaScript系列—关于前后端通信在实际项目中的用法

在我们的项目，如何来通过前后端进行通信呢。下来我们分别介绍几种方法。1.reqwest方式reqwest简介It's AJAXAll over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A.reqwest的写法的ajax写法类似，看下面例子// 普通...

2019-07-02 16:41:57 742

jiaojsun的博客