前端
关注
分享
扫一扫
前端
IT_10-
我爱编程 编程爱我❤️
展开
-
彻底理解Redux和React-Redux工作原理以及运用
redux 是 JavaScript 状态容器，提供可预测化的状态管理。 可以用在React、Vue等前端库中。react-redux是react中的redux插件，简化了redux的用法，使开发者更方便地使用redux来管理状态。为什么要有redux？我们知道，react中的数据流是单项传递的，即状态只能从父组件传递给子组件，虽然可以用ref在父调中调用子组件的方法从而返回子组件的状态给父...原创 2019-09-08 15:10:18 · 5500 阅读 · 0 评论 -
React中的Context理解和使用------跨多级子组件传属性
React中数据流是自上而下单向流动的，即父组件->子组件->子组件的子组件…，可以通过组件的props属性一级一级地传递和接收。下面的示例中，MessageList 为父组件，Message 为子组件，Button 为子组件的子组件，通过props一级一级地传递和接收属性：class Button extends React.Component { render() {...原创 2019-09-05 19:52:14 · 1416 阅读 · 0 评论 -
super()和super(props)的区别以及为什么要写super(props)
一般，我们在写自定义类组件的时候会写上构造函数如下：class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isOn: true }; } // ...}当然，也可以像下面这样写：class Checkbox extends React...转载 2019-09-04 22:58:25 · 2036 阅读 · 0 评论 -
理解react中的高阶组件和高阶函数
高阶组件ES6中使用关键字class来使它的语法有和 类 相似的写法和功能，但是它的本质还是一个函数。因此，高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件，返回一个新的组件。比如下面这个Login组件，在该组件中使用了Form组件，由于需要用到form对象的getFieldDecorator 方法，因此Login组件中通过this.props要能访问到form对象，使用Form....原创 2019-08-29 22:52:06 · 2218 阅读 · 0 评论 -
如何理解React组件中的this
在读这篇文字之前建议先理解JavaScript中作用域链的概念，戳这里：JavaScript中的执行环境、作用域链和闭包详解，以及理解JavaScript中的this关键字，戳这里：JavaScript中的this关键字如何理解原生的JavaScript中只有对象，没有类的概念。其对象是基于原型链实现的。如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：...原创 2019-06-12 12:00:06 · 2889 阅读 · 0 评论 -
JavaScript字符串不是对象，为什么会有属性呢？（理解JavaScript中的包装对象）
实例1：var s = "hello javascript!"; //定义一个字符串var world = s.substring(s.indexOf(" ")+1, s.length); //使用字符串的方法实例2：var s=""test"; //创建一个字符串s.len=4; //给字符串设置一个属性var t=s.len; //查询这个属性结果：在实例1中，可以正常使用...原创 2019-12-16 10:04:54 · 319 阅读 · 0 评论 -
JavaScript数据类型及其存储方式
数据类型JavaScript是弱类型语言，定义变量的时候无需指定变量的类型，JavaScript引擎在运行代码的时候会自动判断变量的类型。JavaScript数据类型有8种：类型描述Booleantrue、falseNUllnull值Undefined未赋值的变量默认值为undefined， 变量提升时的默认值也是undefinedNumber数...原创 2019-12-06 19:30:11 · 1482 阅读 · 0 评论 -
HTML、CSS、JavaScript是如何变成页面的？
从输入HTML、CSS、JavaScript到浏览器渲染出我们预期的效果，渲染流程分为这几个子阶段：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。以下面这段html举例讲解这几个过程：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...原创 2019-12-02 11:33:02 · 1512 阅读 · 0 评论 -
JavaScript函数级作用域、块级作用域实现原理和实例
在另一篇博文《JavaScript中的执行上下文、作用域链、原型链和闭包详解》中，讲解了执行上下文的概念以及通过一个例子讲解了用全局执行上下文和函数执行上下文，下面将这个例子的调用栈图再次放到这里：var a = 10;function add(b,c){ return b+c;} function sum(b,c){ var d = 2; var result = add(b,c)...原创 2019-12-05 10:24:22 · 885 阅读 · 1 评论 -
JavaScript---必看的8个高频笔试题 覆盖JS大部分知识
== 1. 浏览器控制台上会打印什么？==var a = 10;function foo() { console.log(a); // ?? var a = 20;}foo();转载 2019-07-28 13:50:30 · 720 阅读 · 1 评论 -
JavaScript 数组去重的8种方法
一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', ...原创 2019-07-23 00:23:38 · 178 阅读 · 0 评论 -
a标签中href="javacript:;" href="javacript:void(0);" href="#"区别
href="javacript:;"当触发a标签的onclick事件时，会出现浏览器访问“javascript:;”这个地址的现象，所以不建议使用。href="javacript:void(0);"表示点击这个链接后执行一条javascript语句：void(0); 这条语句表示什么也不做，是个空语句。当绑定了onclick()事件并且点击后，页面会停留在原处。href="#"这个是HT...原创 2019-07-19 22:04:43 · 927 阅读 · 0 评论 -
同源策略及跨域解决方法
定义同源：两个站点同协议、同域名、同端口则认为是同源，只要有一项不同，就认为是非同源。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。同源策略是浏览器最核心、最基本的安全策略，现行的web安全策略很多以同源策略为基础。为什么要有同源主要是为了保护cookie，因为http协议无状态的特点，想要服务器端记住客户端，则可以通过cookie和session机制，这样，...原创 2019-09-22 14:31:19 · 2147 阅读 · 0 评论 -
jQuery的 $.fn.extend和 $.extend的区别和使用
jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object)和jQuery.extend(object)jQuery.extend(object)：用于扩展jQuery类本身，为jQuery类添加新的方法，即可以通过 $.functionName()调用的方法。还可以将两个或更多对象的内容合并到第一个对象。jQuery.fn.extend(object)：用于...原创 2019-06-28 21:57:43 · 615 阅读 · 0 评论 -
JavaScript中的函数节流和函数防抖
事件频繁触发可能造成的问题一些浏览器事件：window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题。如果向后台发送请求，频繁触发，对服务器造成压力。** 如何限制事件处理函数频繁调用**函数节流函数防抖函数节流（throttle）在函数需要频繁触发时：函数执行一次后，只有大于设定的执行周期后才会执行第二次。场景适合多次事件...原创 2019-08-31 22:56:01 · 270 阅读 · 0 评论 -
ES6------箭头函数详解
前言在JavaScript中，每个函数都有不同的变量上下文和作用域，每个function内的上下文中的this指向该function的调用对象。当函数当做普通函数使用时，函数内的this指向window对象或者undefined（严格模式下）下面这段代码中的函数test有window调用，因此，函数内的this指向window对象。在严格模式下"use strict";，该函数内的thi...原创 2019-09-05 22:06:54 · 529 阅读 · 0 评论 -
$.each()和$.map()的区别
forEach和map无法遍历伪数组，而$ . each和$.map可以遍历伪数组$ .each默认的返回值是当前遍历的数组值，$.map默认返回值是空数组$ .each和$.map不支持对在回调函数中对当前正在遍历的数组值进行修改$ .each不支持在回调函数中return新的值，而$.map支持第二点示例：var a = [1, 2, 3];var b = $.each(a, ...原创 2019-09-06 14:26:32 · 801 阅读 · 0 评论 -
JavaScript：call、apply、bind详解
call、apply、bindapply、call在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。function fruits() {} fruit...转载 2019-09-09 21:19:42 · 175 阅读 · 0 评论 -
Promise简介
简介Promise是异步编程的一种解决方案，从语法上看，它属于构造函数，通过new的方式可以生产一个Promise对象，promise构造函数自身有all，reject，resolve等方法，原型链上有then，catch，finally等方法。Promise用于发送一个异步请求，在特定时间后返回结果。从它执行到返回结果有三种状态：pending（等待），fulfiled（成功），reject（...原创 2019-09-20 19:26:51 · 170 阅读 · 0 评论 -
《JavaScript语言精粹》笔记（内附《JavaScript语言精粹》百度云下载链接）
章节：3.4 引用 【P22（页码）】 知识点：对象通过引用来传递，它们永远不会被传递 var a_obj={a:1}; var b_obj=a_obj;//b_obj是a_obj的引用 b_obj.a=2; console.log(a_obj.a);//2章节：3.5 原型 【P22】 知识点：每个对象都连接到一个原型对象，并且它可以从中继承属性。原型连接在更新时是不起作用的，...原创 2018-07-31 16:04:21 · 9940 阅读 · 5 评论 -
动态选择datagrid可编辑的列
需求：当点击新增的时候，testOne和testTwo列均为可编辑的，修改的时候，只能修改testTwovar operates = { getRowIndex: function (target) { var tr = $(target).closest('tr.datagrid-row'); return parseInt(tr.attr('datagrid-row-index')...原创 2019-06-28 21:18:50 · 719 阅读 · 0 评论 -
设置当datagrid无数据时显示空白行
//参数为填充总数function showBlankRow(number) { $.extend($.fn.datagrid.methods,{ fillRows: function (jq) { var datacounts = number; var grid = $(jq); var pag...原创 2019-06-28 20:39:18 · 2206 阅读 · 0 评论 -
设置datagrid列为下拉框
var operates = { getRowIndex: function (target) { var tr = $(target).closest('tr.datagrid-row'); return parseInt(tr.attr('datagrid-row-index')); }, addRow:function (index) { $(tableId).datagr...原创 2019-06-28 20:30:04 · 2860 阅读 · 2 评论 -
如何修改JavaScript对象的属性的访问权限
JavaScript对象有两种属性：数据属性和访问器属性1.数据属性数据属性包含一个数据值的位置，在这个位置可以读取和写入值。即数据属性限制使用者对对象属性数据值的读取和写入权限，有四种特性 （1）[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特...原创 2018-08-21 15:06:59 · 1756 阅读 · 0 评论 -
JavaScript中的空数组[ ]和空对象{ }的布尔值是什么？
1.空数组和空对象都是Object类型console.log(typeof []); // objectconsole.log(typeof {}); // object2.空数组[]转化为Number，得到0；空对象{}转化为Number，得到NaNconsole.log(Number([])); // 0console.log(Number({})); //NaN3...原创 2018-08-18 10:57:49 · 7742 阅读 · 2 评论 -
html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
先看结果截图（界面很丑，但是主要是为了贪吃蛇游戏算法设计和历史记录、排行榜功能的实现，希望以后不被产品经理打，哈哈） 功能描述： 1.开始游戏页面之前输入玩家姓名 2.历史记录：可以查看之前自己玩过的记录（历史记录存储在本机硬盘，所以即使电脑重新开启，下一次也能读取到之前的记录） 3.排行榜：历史玩家的记录 4.清除记录：清除所有存储在本机的记录 实现：<!doctype...原创 2018-08-03 10:02:50 · 5365 阅读 · 0 评论 -
postMessage跨文档通信（XDM）实例详解
html5引入message的API：postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 实例1：通过postMessage（）向同域和不同域窗口发送数据//send.html&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &a原创 2018-08-02 09:56:07 · 878 阅读 · 0 评论 -
jQuery事件函数中的this是什么？
当我们在使用jQuery的时候，给某个标签绑定事件，会发现事件函数里面有个“this”，比如如下代码：$("#a").click(function(){ $(this).hide();});这个this具体指什么了，我们不妨亲自动手检测一下，运行如下代码：<!DOCTYPE html><html lang="en"><head>...原创 2018-07-27 11:36:38 · 4477 阅读 · 1 评论 -
jQuery中的ready（）方法和JavaScript中的OnLoad（）方法的区别
传统的JavaScript写法：window.onload=function(){ //代码}jQuery写法：$(document).ready(function(){ //代码})//可以简写为如下形式$(function(){ //代码})区别： 1. 执行时间不同：后者在DOM模型加载完毕就会触发ready（），前者必须是页面中的...原创 2018-07-18 21:23:00 · 855 阅读 · 0 评论 -
Web存储-------localStorage和seccionStorage详解
使用场景： Web应用允许使用浏览器提供的API实现将数据存储到用户电脑上。这用客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据，而同一站点的不同页面之间是可以相互共享存储数据的，它为我们提供了一种通信机制，例如，一个页面填写的表单数据可以显示在另一个页面中。Web应用可以选择存储数据的有效期：临时存储可以让数据保存至当前窗口关闭或者浏览器退出；永久存储可以将数据永久存储...原创 2018-07-18 14:48:12 · 2593 阅读 · 0 评论 -
javascript中的_proto_、constructor和prototype详解
首先，在JavaScript中，任何对象都有一个proto属性；任何方法都有prototype属性，prototype本身也是一个对象 ，所以其中也有一个proto属性，另外还有一个constructor属性。&amp;amp;lt;script&amp;amp;gt; function myFunc() { } var a=new myFunc(); consol...原创 2018-07-23 10:04:30 · 358 阅读 · 0 评论 -
JavaScript变量提升原理详解和实例
函数作用域在C语言中，定义一个变量的作用域仅属于这个花括号内，即该变量在夸括号外是不可见的，我们称之为块级作用域。而JavaScript中没用“块级作用域”，而是“函数作用域”。顾名思义，以此类推：变量在声明他们的函数体内以及这个函数体嵌套的函数体内都是有定义的。 实例：function test(obj) //obj表示一个对象{ var i=obj; //i在整个函...原创 2018-07-04 16:16:11 · 1394 阅读 · 1 评论 -
JavaScript中的执行上下文、作用域链和闭包详解
执行环境执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个函数都有自己的执行环境。执行环境中定义的变量或函数保存在变量对象中。 例如，在web浏览器中，全局执行环境被认为是windows对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的，比如我们调用windows.load()方法。 某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的...原创 2020-01-12 09:46:45 · 2624 阅读 · 2 评论 -
JSON详解以及stringfy( )和parse( )的使用
前言：最早，XML是是互联网上传输结构化数据的事实标准，但是XML使用繁琐，为了解决这个问题，JSON应运而生。JSON是JavaScript的一个严格子集，利用了 JavaScript中的一些模式来表示结构化数据。 JSON 并不从属于 JavaScript，而且，并不是只有 JavaScript 才使用 JSON，毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列...原创 2018-08-29 13:19:36 · 1220 阅读 · 0 评论 -
easyui-datagrid加载数据load、reload、loadData的区别
load加载并显示第一页的行，如果指定 ‘param’ 参数，它将替换 queryParams 属性。通常情况下，通过传递一些参数进行查询，该方法被调用来从服务器加载新数据。当表格有分页时，它传给后台的分页信息是从第一页开始的，也就是说，如果你现在在第二页点击了查询，则查询的结果会从第一页开始显示。$('#dg').datagrid('load',{ code: '01', ...原创 2018-09-13 22:48:50 · 4173 阅读 · 0 评论 -
JavaScript事件循环机制讲解
**同步：**发送一个请求之后阻塞等待返回结果，得到结果后再发送下一个请求。**异步：**发送一个请求，等待返回，但是也可以再发送下一个请求，而不用阻塞等待结果。有关JS的两点：1.JS是单线程的。2.JS的Event Loop是JS的执行机制。**JS是单线程的原因：**假如现在有两个进程process1，process2操作同一个dom，JS是多线程的，process1正在删除这个d...原创 2019-06-04 14:39:02 · 570 阅读 · 0 评论 -
JavaScript执行机制和内存管理机制
JavaScript执行机制编译器和解释器编译器/解释器可以用它处理的语言或者其他语言来编写。**解释器：**一行一行的快速读取和翻译文件，这就是JavaScript最初的工作原理。**编译器：**编译器提前运行并创建一个文件，其中包含了输入文件的机器码转换。有两种途径可以将JavaScript代码转换为机器码：（1）编译代码时，机器对代码开始运行前将要发生的事情有更好的理解，这将加快...原创 2019-06-18 20:51:13 · 296 阅读 · 0 评论 -
JavaScript中的var、let详解
1 变量作用域ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。var变量作用域只有函数作用域和全局变量。{ var i = 9;} console.log(i); // 9{ let i = 9; // i变量只在花括号内有效} console.log(i); // Uncaught Ref...原创 2018-12-25 18:05:25 · 1382 阅读 · 0 评论 -
dialog如何向其href指定的页面传递参数？
//A页面打开的dialog uploadFile:function (title) { var param=100; $("#InfoAnalysisAnalysis-dialog").dialog({ title: title, width:750, height:400, ...原创 2018-11-28 22:42:41 · 2038 阅读 · 0 评论 -
JavaScript实现链表（单链表，双向链表）
单链表 <script> //单链表 function Node(element) { this.element=element; this.next=null; } function LList() { this.head=new Node("he...原创 2018-10-08 21:12:35 · 565 阅读 · 0 评论