swpu_lwf-CSDN博客

原创页面加载时，下方内容在上方图片位置闪现

如图，页面结构如下：开始的css如下： .section-home-carousel { width: 100%; height: 100%; img{ width: 100%; height: 100%; } }结果页面刷新时，下方白色区域要在图片位置闪现更改后的css：将img的父元素高度设...

2019-07-02 16:51:29 712

原创 input = file 实现上传文件

使用input = file实现文件上传功能，如果点击提交按钮，提交表单并上传选中的文件：<FormItem label="上传简历"> <div className="section-pushInChannel-fileInput"> <input id="file" onChange={this.handleFileChange} t...

2019-07-02 16:37:39 93971 1

原创将请求返回的图片转为Base64形式显示在页面上

情景：如图该请求返回一张图片，我该如何显示在页面上呢？代码如下：transformArrayBufferToBase64 (buffer) { var binary = ''; var bytes = new Uint8Array(buffer); for (var len = bytes.byteLength, i = 0; i <...

2019-07-02 16:11:47 6028

原创等间距布局

html： <ul class="clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> &amp

2018-06-28 11:46:43 507

原创圣杯布局和双飞翼布局

圣杯布局与双飞翼布局圣杯和双飞翼布局都是左右两边固定中间自适应，都是负margin的应用。圣杯布局 html: <div class="header"></div> <div class="content"> <div class="middle"></div>

2018-06-28 11:24:31 405

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

观察者模式定义了一种依赖关系，解决了主体对象和观察者之间功能的耦合，主要应用于大型项目的模块化开发中，解决团队开发中模块之间的通信问题，利用观察者模式还可以实现自定义事件。//观察者var Observer=(function(){ var _messages={};return{ //注册消息接口 register:function(type,fn){ ...

2018-06-17 11:55:55 346

原创数组的扁平化方法总结

数组的扁平化：将一个嵌套多层的数组转换为一个只有一层的数组比如有一个数组扁平化的方法flattenvar arr=[1,[2,[3,4]]];flatten(arr);//[1,2,3,4]实现数组扁平化的方法：（1）循环+递归function flatten(arr){ var result=[]; for(var i=0;i<arr.length;i...

2018-06-16 11:25:14 2191

原创 display:none 与 visibility:hidden opacity:0的区别

我们知道，我们可以用display:none 与 visibility:hidden opacity:0 等方法隐藏元素，那么他们有什么区别呢？（1）是否占据空间display:none 不再占据空间，会引起重排和重绘visibility:hidden 占据空间，仅引起重绘opacity:0 占据控件，引起重绘（2）是否可以被继承display:none 不会被子元素继承...

2018-06-15 14:00:26 800

原创 JavaScript内存泄漏及常见方式

一内存管理程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于JavaScript来说，有栈内存（stack）和堆内存（heap）。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言...

2018-06-14 21:42:52 235

原创伪类与伪元素的区别

W3C定义伪类：用于向某些选择器添加特殊的效果。伪元素：将特殊的效果添加到某些选择器上。明确两点： 1 都与选择器相关 2 特殊效果，这两者描述了其他css无法描述的东西种类伪类： :active、:focus、:hover、:link、:visited、:first-child（将特殊的样式添加到元素的第一个子元素）、:lang（允许创作者来定义指定的元素中使用...

2018-06-14 10:23:15 581

原创 JavaScript与C、C++、Java这几类语言的不同

从静态类型还是动态类型来看静态类型，编译的时候就能够知道每个变量的类型，编程的时候也需要给定类型，如Java中的整型int，浮点型float等。C、C++、Java都属于静态类型语言。动态类型，运行的时候才知道每个变量的类型，编程的时候无需显示指定类型，如JavaScript中的var、PHP中的$。JavaScript、Ruby、Python都属于动态类型语言。静态类型还是动态类型对...

2018-06-13 15:42:34 7922

原创 JavaScript引擎

什么是JavaScript引擎？ JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。什么是虚拟机呢？虚拟机（英语：virtual machine），在计算机科学中的体系结构里，是指一种特殊的软件，可以在计算机平台和终端用户之间创建一种环境，而终端用户则是基于这个软件所创建的环境来操作软件。根据虚拟机的运用和直接机器...

2018-06-13 14:02:21 4666

原创从js运行机制看setTimeout与setInterval

setTimeout：超时调用； setInterval：间歇调用调用时，代码是在全局环境中执行的，里面的this在正常模式下指向window，严格模式下指向undefined。参数：第一个参数为字符串或者函数（建议使用函数，传递字符串可能导致性能损失）第二个参数为以毫秒表示的时间，该时间表示多少毫秒后将当前任务加入任务队列。注意：对于定时器，是准时添加的，但不是准时执行的。...

2018-06-12 21:02:40 486

原创事件循环进阶：macrotask与microtask的应用

题目：setTimeout(()=&gt;{ console.log(0)},1000);new Promise((resolve,reject)=&gt;{ console.log(1); resolve();}).then(()=&gt;{ setTimeout(()=&gt;{ console.log(3) },0);...

2018-06-12 19:57:18 1293 1

原创 javascript中call和apply的模拟实现

call() call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。语法：fun.call(thisArg, arg1, arg2, ...)实例：var name="lee";var obj={ name:"lwf"};function foo(){ console.log(this.name);}foo...

2018-06-05 15:40:45 1772

原创 javascript中new的模拟实现

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。语法：new constructor[([arguments])]那么什么是构造函数呢？构造函数 constructor 是用于创建和初始化类中创建的一个对象的一种特殊方法。（1）我们来看一下new 和 constructor 的基本使用：function Person(name,ag...

2018-06-05 14:27:26 4446 2

原创 javascript中的深浅拷贝（非构造函数的继承）

首先，我们应该明确深浅拷贝是针对Array、Object这样的复杂类型的。一常见的深浅拷贝的方法（1）数组和对象的浅拷贝如果是数组，我们可以利用数组的一些方法比如：slice、concat 返回一个新数组的特性来实现拷贝。//新旧数组都改变，对象指向同一块地址var arr=['old',{"old":"old"},["old"],null,undefined];var ..

2018-06-04 21:32:45 391

原创 javascript中的动态集合——NodeList、HTMLCollection、NamedNodeMap

一、NodeList、HTMLCollection、NamedNodeMap的相同点与不同点（1）相同点 1. 三者都是类数组对象 2. 都有item()方法（2）不同点 1. NodeList是节点（12种）的集合、HTMLCollection是元素节点的集合、NamedNodeMap是属性节点的集合 2. NodeList有静态的、有动态的，HTMLCollection...

2018-06-03 14:14:24 972

原创牛客网_检查重复字符串

解答： 1、正则表达式的方向引用function containsRepeatingLetter(str) { return /([a-zA-Z])\1/.test(str);}\1涉及正则表达式中反向引用的概念，参考：正则表达式中的反向引用2、字符串方法function containsRepeatingLetter(str) { var reg=/[...

2018-05-27 18:18:15 377

原创牛客网_返回对象

我的答案：function createModule(str1, str2) { /*var obj={ greeting:str1, name:str2, sayIt :function(){ return this.greeting+", "+this.name; } }; ...

2018-05-26 21:04:48 217

原创牛客网_使用闭包

function makeClosures(arr, fn) { var result=[]; arr.forEach(function(item){ result.push(function(){ return fn(item); }) }) return result;}更简便的解法：func...

2018-05-23 21:42:16 187

原创牛客网_返回函数

function functionFunction(str) { return function(str1){ return str+", "+str1; };}console.log(functionFunction("hello")("world"));//hello, world如果不限制传递的参数的个数：function functionFu..

2018-05-23 21:20:05 256

原创牛客网_函数传参

解决： 1、ES5：使用applyfunction argsAsArray(fn, arr) { return fn.apply(this,arr);}2、ES6：使用扩展运算符...function argsAsArray(fn, arr) { return fn(...arr);}注意：这种方法需要babel编译后，才能在浏览器中运行。...

2018-05-23 20:51:17 670

原创 JQuery中事件绑定的四种方法及其优缺点

JQuery中事件绑定的方法有bind、live、delegate、on1、bind：bind(type [,data], fn).bind，监听器绑定到目标元素上，会将所有匹配的元素都绑定一次事件。因此，当元素很多时，后来动态添加的元素不会被绑定。例：$("#foo").bind('click',function(){ console.log("clicked");})...

2018-05-22 17:14:40 5439

原创 Error:options.query cannot be used with loaders

原代码： test: /(\.jsx|\.js)$/, loaders:["babel-loader","eslint-loader"] , options:{ cacheDirectory:true }, exclude: /node_modules/,报错：error：options.query cannot be used with loaders 如下：...

2018-05-21 10:59:27 1683

原创 fatal:refusing to merge unrelated histories

输入git pull origin master 后，出现fatal:refusing to merge unrelated histories 的错误，解决：输入git pull origin master --allow-unrelated-histories

2018-05-20 18:55:58 311

原创 TypeError: expect.createSpy is not a function

在使用Expect进行测试过程中，遇到TypeError: expect.createSpy is not a function 该问题，那是因为： This package has been donated to Jest. This means that all future development of expect v21+ will take place at facebook/...

2018-05-14 21:01:49 539

原创 TypeError:(0 ,jsdom.jsdom) is not a function

在使用Enzyme测试容器组件时，为了能使用mount方法递归渲染出所有DOM，不得不使用JSDOM在Node.js中模拟一个类似浏览器的环境。于是有了下面代码：import { jsdom } from 'jsdom';global.document = jsdom('&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&a

2018-05-14 17:07:54 2838

原创一次性卸载package.json中的所有依赖

npm uninstall `ls -1 node_modules | tr '/\n' ' '`更多内容请参考：https://github.com/npm/npm/issues/10187

2018-05-08 19:06:57 5078

原创 node环境：Error listen EADDRINUSE :::3000

错误：错误原因：其实是3000端口被其他应用程序占用了，只要找到占用该端口的应用程序，杀死它，就好了。netstat -o -n -a | findstr :3000taskkill /F /PID 115148注：15148换成你的占用3000端口的程序PID 参考：https://teamtreehouse.com/community/why-is-there...

2018-05-04 19:51:58 8483 2

原创 git pll 出现 fatal:refusing to merge unrelated histories 错误

解决方法：git pull origin master --allow-unrelated-histories

2018-05-01 22:24:18 413

原创使用Hexo+GitHub Pages搭建自己的博客过程遇到的问题

一、准备阶段：安装node注册GitHub账号安装Git二、本地创建目录，eg：“../DeskTop/Blog/Hexo”使用编辑器终端或者在Hexo目录下，右键=>Git Bash Here，进入Git命令框（最好用Git Bash Here，一直以为他们是一样的，原来有些命令终端是不能识别的，害得我踩了好多坑，呜呜呜~~~）安装hexo： npm insta...

2018-05-01 22:08:06 223

原创 git push 出现：error: failed to push some refs to...错误

在用git push -u origin master 命令把本地资源提交到远程仓库时，可能会出现这个错误：错误出现原因？远程repo有README.md文件，本地却没有如何解决？ git pull --rebase origin master，把远程README.md文件pull到本地，然后 git push -u origin master重新提交...

2018-05-01 18:31:26 429 1

原创 .gitignore 使用场景及书写规则

1、.gitignore文件的作用忽略不想提交到版本库的Untracked files注意，我们应该养成在项目开始前创建.gitignore文件的习惯。 .gitignore文件过滤掉的是我们用git status查看状态时，那些Untracked files...,如果已经在创建.gitignore文件之前已经push过，那么再创建的.gitignore文件的过滤规则将不再起作用...

2018-05-01 13:19:40 1495

原创学习React前ES5、ES6知识准备

1、map filter reducevar arr=[1,2,3];var arr1=arr.map(function(item,index,arr){ return item*2;})console.log(arr1);var arr2=arr.map(item=>item*2);console.log(arr2);var arr3=arr.filter((it...

2018-05-01 11:53:12 431

原创 JavaScript中的模块化

一、什么是模块（module）？前端领域的模块一般指JavaScript模块，往往表现为一个单独的js文件，对外暴露一些属性和方法。注意区分：“模块”和“组件” 组件往往是业务层面的，可以看成一个可独立使用的功能实现，往往表现为一个UI部件（并不绝对），如下拉菜单等。一个组件包含其所需要的所有资源，包括逻辑（JavaScript）、样式（CSS）、模板（HTML/Template），甚至...

2018-04-30 19:50:05 149

原创 react+webpack项目基本配置

1、npm-init 生成package.json文件 2、安装项目依赖npm intsall --save-dev react react-dom webpack webpack-clinpm install --save-dev webpack-dev-servernpm install --save-dev babel-core babel-loader babel-preset...

2018-04-27 17:33:37 712

原创 React调试工具：react-devtools

<!DOCTYPE html><html> <head <script src="../build/react.js"></script> <script src="../build/react-dom.js">&am

2018-04-22 12:15:16 5055

原创 webpack，extract-text-webpack-plugin报错：Use Chunks.groupsIterable and filter by instanceof EntryPoint

一、extrack-tex-webpack-plugin作用：为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象二、使用 1、npm install --save-dev extract-webpack-plugin2、webpack.production.config.js中const webpack=require("webpack");//...c...

2018-04-21 11:00:18 8680 5

原创如何实现同一浏览器多个标签页之间的通信（二）——cookie+setInterval

二、cookie （1）cookie是什么？ HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-CookieHTTP头作为相应的一部分，其中包含回话信息。浏览器会存储这样的回话信息，并在这之后，通过每个请求添加CookieHTTP头将信息发回服务器。（2）cookie怎么用？在JavaScript中，coo...

2018-04-21 10:46:35 5086

空空如也

空空如也