![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 76
Winne_Shen
想要光着脚丫~在树上唱歌~~
展开
-
微前端入门及例子
英文原版链接:原文链接引言把前端做好很难,让多个团队同时开发大型前端应用,就更难了。目前有一种趋势是将前端应用拆分成更小、更易于管理的小应用。这种体系结构是如何提高前端团队的效率的呢?本文将对这些问题进行阐述。除了讨论利弊,我们还将介绍一些可用的例子,并深入研究一个完整的示例应用。近年来,微服务已迅速普及,许多组织都使用这种体系结构样式来避免大型单体应用的局限性。尽管有很多介绍微服务的文章,但还是有许多公司局限于单体式前端应用。假设你想构建一个渐进式的Web应用程序,但是你很难将新的功能转载 2021-05-06 17:19:22 · 1004 阅读 · 0 评论 -
next.js getInitialProps
我们已经知道了服务器端渲染的原理,你只需要搭建一个 Express 服务器,在服务器端手工打造『脱水』,在浏览器端做『注水』,完成某个页面的服务器端渲染并不难。不过,服务器端渲染的问题并不这么简单,一个最直接的问题,就是怎么处理多个页面的『单页应用』(Single-Page-Application)?所以单页应用,就是虽然用户感觉有多个页面,但是实现上只有一个页面,用户感觉到页面可以来回切...转载 2019-03-12 17:00:11 · 2052 阅读 · 0 评论 -
JS displayName
顾名思义,displayName是用来表示显示名称的。如上所示,当方法a报错时,控制台展示的是该方法的displayName.参考文章:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayNamehttps://www.jiansh...原创 2019-03-07 17:36:30 · 1732 阅读 · 0 评论 -
加快Webpack打包构建的几种方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的本文整理了常见的一些方法,部分使用之后就看到了很大改善,部分没什么明显的变化,也可能是项目规模还不够大,先记录一下方法也好一、使用监听模式或热更新热替换webpack支持监听模式,此时需要重新编...转载 2019-02-25 11:36:26 · 730 阅读 · 0 评论 -
npx报错(...npm-cache\_npx...)
问题使用npx时,出现类似下面的报错。npm ERR! code ENOLOCALnpm ERR! Could not install from "Files\AppData\Roaming\npm-cache\_npx\14184" as it does not contain a package.json file.npm ERR! A complete log of this...原创 2018-11-03 14:11:32 · 5923 阅读 · 14 评论 -
使用webpack引入sass全局变量
使用webpack引入sass全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。傻瓜式引用 ...转载 2018-06-09 04:43:21 · 8446 阅读 · 2 评论 -
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如下所示:那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。1. 问题现象我们先给出一个在线实例:http://w...转载 2018-06-04 20:43:30 · 645 阅读 · 0 评论 -
NodeJS、NPM安装配置步骤(windows版本)
1、windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮,直接点击就会自动下载安装了。2、安装过程基本直接“NEXT”就可以了。(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C:\Program Fi...转载 2018-05-22 14:47:00 · 222 阅读 · 0 评论 -
正则的\1 \2 ?= ?:
单独斜杠的 \1 , \2 是反向引用。例:’(\d)(a)\1’ 匹配第一是数字第二是字符a,第三\1必须匹配第一个一样的数字重复一次,也就是被引用一次。如9a9 被匹配,但9a8不会被匹配,因为第三位的\1必须是9才可以。‘(\d)(a)\2’ 匹配第一个是一个数字,第二个是a,第三个\2必须是第二组()中匹配一样的,如,8aa被匹配,但8ab,7a7不会被匹配,第三位必须是第二组字符的复制版...原创 2018-04-20 14:43:51 · 538 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。F...转载 2018-04-20 11:49:28 · 166 阅读 · 0 评论 -
vue-router 之 keep-alive
本文基于 Vue2.0keep-alive 简介keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。用法也很简单:<keep-alive> <component> <!-- 该组件将被缓存! --> </component></keep-alive>propsinclude -...转载 2018-04-14 09:48:26 · 583 阅读 · 0 评论 -
自己实现parseInt
function _parseInt(str, radix) { if (!radix) { radix = 10; } if (!str || typeof str !== 'string' || typeof radix !== 'number' || radix < 2 || radix > 26) { return NaN; } let result = 0;...原创 2018-03-28 11:44:59 · 644 阅读 · 0 评论 -
JavaScript按插入顺序遍历对象
for ... in... 于对象来说,是无序的;于数组来说,是有序的。此处按照插入顺序即有序,不按照插入顺序即为无序。解决:插入对象的时候,也将key插入到某个数组中。var hash = {};var arr = [];while(一些条件) { if (hash[key]) { do something; } else { hash原创 2018-03-27 19:05:09 · 2732 阅读 · 0 评论 -
setTimeout第二个参数是0
JavaScript 是单线程执行的,也就是无法同时执行多段代码,当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列,一旦当前任务执行完毕,再从队列中取出下一个任务。这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是 Ajax 请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 Ja...转载 2018-03-24 16:57:50 · 1075 阅读 · 0 评论 -
前端常见跨域解决方案(全)
转自:https://segmentfault.com/a/1190000011145364什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame&g...转载 2018-03-23 08:55:56 · 258 阅读 · 0 评论 -
Webpack4.x安装与使用入门
安装在全局安装webpacknpm install -g webpack创建项目创建新文件夹webpack-study,用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。npm init然后根据项目情况配置选项或直接回车。此时发现在该文件夹内新增了一个package.json文件。安装webpack依赖包npm install --save-原创 2018-03-20 21:47:23 · 1443 阅读 · 0 评论 -
同源策略
含义同源即协议、域名、端口相同。http://www.example.com/login/index.html协议:http://域名:www.example.com端口:80(默认端口)只要保证以上3个数据相同就是同源。同源策略限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。当涉及同源策略时,IE有两点不同:授信范围:两个相互之间高度互信...原创 2018-03-19 11:23:56 · 436 阅读 · 0 评论 -
ECMAScript this
默认绑定function foo() { console.log(this.a);}var a = 2;foo(); // 其实就是this.foo()输出:2。函数调用时应用了this的默认绑定,因此this.a其实就是全局变量中的a变量。严格模式下,不使用默认绑定。因此foo方法里的this会绑定到undefined。function foo() { "use strict";...原创 2018-03-27 18:32:38 · 224 阅读 · 0 评论 -
事件冒泡、事件捕捉和事件委托
写在前面<button>Display video</button><div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.原创 2018-03-16 16:51:39 · 370 阅读 · 0 评论 -
cookie,sessionStorage和localStorage的区别
介绍cookie:会话cookie(随浏览器的关闭而销毁)和持久cookie(到了过期时间才销毁);在客户端和服务端来回传递。sessionStorage:针对一个session的数据存储(html5)localStorage:没有时间限制的数据存储(html5)最大容量比较cookie最大容量(约4090+个字节)IE:50个cookie/个域名Firefox:50个cookie/个域名Oper...原创 2018-03-16 15:45:29 · 255 阅读 · 0 评论 -
Javascript优化后的加减乘除(解决js浮点数计算bug)
访问http://qinshenxue.com/article.aspx?id=1查看最新文章说明众所周知,js在计算浮点数时候,结果可能会不准确。比如:(在chrome中的运算结果) 2.2 + 2.1 = 4.300000000000001 2.2 - 1.9 = 0.30000000000000027 2.2 * 2.2 = 4.840000000000001转载 2017-09-11 16:38:45 · 374 阅读 · 0 评论 -
Javascript模块化编程(三):require.js的用法
作者: 阮一峰日期: 2012年11月 7日这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文转载 2017-06-08 16:28:09 · 347 阅读 · 0 评论 -
解决ie下ajaxsubmit上传文件提示下载文件问题
springmvc后端:[java] view plain copy @RequestMapping(value="scoreFileUpload",produces = "text/html; charset=utf-8") @ResponseBody public String upload(HttpSession转载 2017-04-27 15:19:29 · 1421 阅读 · 0 评论 -
收集IE6下的坑
div设置了overflow:auto,在IE6下没有出现滚动条。解决办法:overflow:auto !important; 参考链接IE6下,position:fixed无效。解决办法:参考链接IE6,IE7下浏览器不支持Base64显示图片,IE8对这种方式显示图片有大小限制。解决办法:参考链接原创 2016-12-28 15:56:28 · 287 阅读 · 0 评论 -
ES6中实现class私有属性
私有属性,即仅在当前class中有访问和修改权限,子类无法继承父类的私有属性。下面为思考过程,若要看结果,直接跳到方案四方案一:(错误示范)let ClsA = (function(){ let _x class Cls { setX = (x) => { _x = x } getX = () => { return _x } } return Cls})()let clsA = new ClsAconsole.log(clsA)// 输出原创 2020-10-12 18:15:05 · 1006 阅读 · 0 评论 -
js中(0, function)是什么意思
查阅react组件type时发现下面这种写法。(0, function),这种表达式可看做(true && function)或(0 ? 0 : function)这种间接调用的function保证了其在全局范围内执行。var x = 'outer';(function() { var x = 'inner'; eval('console.log("di...原创 2019-10-23 14:37:40 · 4307 阅读 · 2 评论 -
import、require、export、module.exports 混合使用详解
前言自从使用了 es6 的模块系统后,各种地方愉快地使用 import export default,但也会在老项目中看到使用commonjs规范的 require module.exports。甚至有时候也会常常看到两者互用的场景。使用没有问题,但其中的关联与区别不得其解,使用起来也糊里糊涂。比如:为何有的地方使用 require 去引用一个模块时需要加上 default? requir...转载 2019-10-16 11:30:29 · 799 阅读 · 0 评论 -
关于javascript中的void
void接收一个参数,返回值永远是undefined。那么,为什么不直接用undefined呢?undefined并不是JS的保留字。局部的undefined是可以被篡改的。如下:...原创 2019-10-15 10:14:04 · 320 阅读 · 0 评论 -
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和...转载 2019-06-21 10:58:05 · 195 阅读 · 0 评论 -
application/x-www-form-urlencoded
请求头Content-Type为application/x-www-form-urlencoded顾名思义,即这个url是被编码(encoded)过的。那么传参Form Data必须要encodeURIComponent(参数值)。如果在前端未执行编码操作,那么后端将获取不到传过去的参数如果在前端执行编码操作,那么后端将可以准确地收到传过去的参数至于此时为什么后端可以准确地...原创 2019-05-29 16:51:55 · 28922 阅读 · 0 评论 -
react圆柱轮播图
写在前面最近需要做一个移动端轮播图,以达到下图的效果:本来使用swiper,但效果不尽如人意。因为使用swiper实现的轮播图是水平排列的。比如Slide6是中间的图,那么我希望整个页面只显示Slide5,Slide6,Slide7,但若使用swiper,Slide5的左边仍会显示出一点Slide4,Slide7的右边也仍会显示出一点Slide8。而且在同事的手机微博中打开,动画效果十...原创 2019-06-17 13:37:34 · 530 阅读 · 0 评论 -
require.context
目录webpack的官方介绍:解释:1)入参 2)返回3)用法webpack的官方介绍:require-context官网介绍地址解释: 通常我们可能会在多个页面require同一个组件,数量少还行,多了的话就很蛮烦,维护起来也费劲。这个时候require.context 就排上用场了,一次性引入。1)入参 1. 你要引入...转载 2018-11-20 17:03:12 · 1049 阅读 · 0 评论