React组件传值方式总结 1. 子组件向父组件传值父组件Header:import Nav from 'Nav.js';class Header extends React.Component { constructor(props) { super(props); this.state = { } this.callbackForNav = this.callback...
npm包的发布 假设该待发布包在你本地的项目为 project1包的本地安装测试在发布之前往往希望在本地进行安装测试。那么需要一个其他的项目来本地安装待发布项目。假设该其他项目为project2。假设project2和project1在同一级目录下。1. 创建指向待测试包的符号链接包cd project1npm link2. 本地安装cd project2npm install '.....
React组件性能优化总结 性能优化的思路影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow)。React的Virtual DOM就是尽可能地减少浏览器的重排和重绘。从React渲染过程来看,如何防止不必要的渲染是解决问题的关键。性能优化的具体办法1. 尽量多使用无状态函数构建组件无状态组件只有props和context两个参数。它不存在state,没有生命周期方法,组件本身即有...
插入排序的JavaScript实现 思想每次在现有已经排好的数组的基础上排入一个新的数组项。先把第一项看做是已经排好的,第二项应该排在第一项之前还是之后呢?当前两项排好后,第三项应该排在这已排好的两项的之前还是之后还是中间呢?当前三项排好后,第四项应该排在这已排好的三项中的什么位置呢?...以此类推。在把新的一项排入已排好的数组项中时,将已排好的项从后往前依次与新的一项比较,如果比新的一项大,那么就依次往后挪一个位...
float和clear 简介float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动中移除,尽管仍然保持部分的流动性。浮动元素是float值不为none的元素。可能值:left: 表明元素必须浮动在其所在的块容器左侧right: 表明元素必须浮动在其所在的块容器右侧none:元素不进行浮动特点1. 块布局float意味着使用块布局。f...
归并排序的JavaScript实现 思想这是一种分治算法。将原始数组切分成较小的数组,直到每个小数组只有一项,然后在将小数组归并为排好序的较大数组,直到最后得到一个排好序的最大数组。代码function mergeSort(arr) { const length = arr.length; if (length === 1) { //递归算法的停止条件,即为判断数组长度是否为1 ret...
选择排序的JavaScript实现 思想原址比较的排序算法。即首先找到数结构中的最小值并将其放置在第一位,然后找到第二小的值将其放置在第二位...以此类推。代码function selectionSort(arr) { const length = arr.length; for (let i = 0; i < length - 1; i++) { let minIndex = i; ...
冒泡排序的JavaScript实现 1. 普通冒泡思想假设有n个数,按从小到大排序:进行n-1次外循环,每次外循环会排好当前处理的数中的最大数,即进行第一次外循环排好所有数中的最大数,进行第二次外循环排好所有数中的次大数....直到第n-1次外循环,排好第n-1大的数,也就是倒数第二小的数,那么剩下的那个就是最小的数在第i+1次外循环中,只需要处理前n-i-1个数,因为后面的i+1个数已经排好。即此时内循环需要比...
XSS与CSRF攻击 一、XSSCross Site Script,跨站脚本攻击。是指攻击者在网站上注入恶意客户端代码,通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。1.容易发生的场景(1)数据从一个不可靠的链接进入到一个web应用程序。(2)没有过滤掉恶意代码的动态内容被发送给web用户。2.XSS攻击的共同点将一些隐私数据如co...
浅拷贝与深拷贝 问题缘起如果给一个变量赋值一个对象,那么新变量和原对象变量将会是同一个引用,其中一方改变,另一方也会改变。该问题可以用浅拷贝来解决。但是浅拷贝只能解决对象的第一层的引用问题(或数组的第一维),如果接下去的属性还是对象的话那么还是同一个引用。这就需要引入深拷贝。对象的深浅拷贝1. 浅拷贝: Object.assign({},sourceObj) 或 {...sourceObj}当...
CSS动画复习 一、css动画相关的几个属性属性含义理解transform一种CSS属性。用于修改CSS视觉格式模型的坐标空间。使用它,元素可以被移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。变形translate()CSS属性transform的一种可能值。用于移动元素。平移的变形transition一种CSS属性。...
JavaScript正则常用知识总结 一、JavaScript正则相关方法str.match(regexp)与regexp.exec(str)功能类似。str.search(regexp)与regexp.test(str)功能类似。1. String.prototype.match()检索匹配项,并返回匹配的第一个完整子串及其下捕获组捕获结果构成的数组(无g),或返回匹配的所有的完整子串(有g)语法str.mat...
JavaScript实现继承的几种重要范式 一 原型链1. 代码示例function SuperType() { this.superProperty = true;}SuperType.prototype.getSuperValue = function() { return this.superProperty;}function SubType() { this.subProperty = fal...
原型与原型链. 一、创建对象的重要模式: 原型模式面向对象的语言可以通过类创建任意多个具有相同属性和方法的对象。ECMAScript中没有类的概念(在ES6的class之前),但是它的 对象是基于引用类型创建的,可以在一定程度上充当"类“的角色。JavaScript创建对象最常用的方法是使用 Object构造函数(即通过new Object())或 对象字面量。但它们有个明显缺点:如果创建的一堆对象...
JavaScript创建对象的几种重要模式 一、工厂模式1. 代码示例function person(name, age) { var p = new object(); p.name = name; p.age = age; p.sayName = function() { console.log(this.name); }; return p;}var person1 = person...
同源策略与跨域技术 一、同源策略浏览器的同源策略限制了 从一个源加载的文档或脚本与来自另一个源的资源的交互。它是隔离潜在恶意文档的关键安全机制。具体限制:不能通过ajax的方法去请求不同源的资源。浏览器中不同域的框架之间是不能进行js的交互操作的。1. 同源的定义如果两个页面具有相同的协议、域名和端口(如果有指定),则这两个页面具有相同的源。Tips:http协议默认端口是80,http...
节点操作易混点 一、NodeList vs HTMLCollection1.NodeListNodeList是一个 节点的集合, 是由 Node.childNodes 和 document.querySelectorAll 返回的。特点(1) 类数组它是一种类数组对象,用于保存一组有序的节点,可以通过位置(childNodes[index]或childNodes.item(index)) 来访...
数据结构-二叉搜索树的js实现 一、树的相关概念1.基本概念子树一个子树由一个节点和它的后代构成。节点的度节点所拥有的子树的个数。树的度树中各节点度的最大值节点的深度节点的深度等于祖先节点的数量树的高度树的高度等于所有节点深度的最大值森林若干课互不相交的树的集合。任何一棵树,删去根节点就变成了森林。2. 二叉树二叉树的定义(1)二叉树中每个节点的度不大于2(2)二叉树是有序的,其子树有...
原型 一、原型模式面向对象的语言可以通过类创建任意多个具有相同属性和方法的对象。ECMAScript中没有类的概念(在ES6的class之前),但是它的 对象是基于引用类型创建的,可以在一定程度上充当"类“的角色。JavaScript创建对象最常用的方法是使用 Object构造函数(即通过new Object())或 对象字面量。但它们有个明显缺点:如果创建的一堆对象中都含有相同的方法,那...
cookie与web Storage 一、cookie1. http头与cookiecookie是HTTP Cookie的简称。该标准要求:(1)服务器的HTTP响应头包含 Set-Cookie字段响应头Eg:HTTP/1.1 200 OKContent-Type: text/htmlSet-Cookie: name=value该HTTP响应设置了一个名为name,值为value的cookie。服务器将它们...