- 博客(81)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 微前端入门及例子
英文原版链接：原文链接引言把前端做好很难，让多个团队同时开发大型前端应用，就更难了。目前有一种趋势是将前端应用拆分成更小、更易于管理的小应用。这种体系结构是如何提高前端团队的效率的呢？本文将对这些问题进行阐述。除了讨论利弊，我们还将介绍一些可用的例子，并深入研究一个完整的示例应用。近年来，微服务已迅速普及，许多组织都使用这种体系结构样式来避免大型单体应用的局限性。尽管有很多介绍微服务的文章，但还是有许多公司局限于单体式前端应用。假设你想构建一个渐进式的Web应用程序，但是你很难将新的功能
2021-05-06 17:19:22
1060
原创 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
1086
转载 一分钟看懂对象存储和CDN之间的关系
我们通常会将对象存储与CDN配合使用，为什么对象存储要和CDN配合使用呢，cdn和对象存储有什么关系?对象存储的核心是存储，以及计算能力(图片处理)，cdn的核心是分发，本身不会给用户提供直接操作存储的入口，所以一般是两者配合使用。现在小编为大家具体介绍一下对象存储和CDN和它们之间的关系。图片1 百度云对象存储与CDN配合使用图对象存储：鱼与熊掌兼得的存储方式对象存储将数据通...
2020-04-30 13:58:16
2621
原创 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
4505
2
原创 react源码流程图—— ReactChildren
本文阅读react16.8.6版本ReactChildren.js文件。下面从mapChildren函数入手，给出React.Children.map的流程图。请参考React源码阅读本文。mapChildren遍历每个子节点调用函数并摊平子节点。摊平子节点，即，把['a', ['b'], [['c'], 'd']]摊平成['a', 'b', 'c', 'd'...
2019-10-17 16:29:43
1297
3
转载 import、require、export、module.exports 混合使用详解
前言自从使用了 es6 的模块系统后，各种地方愉快地使用 import export default，但也会在老项目中看到使用commonjs规范的 require module.exports。甚至有时候也会常常看到两者互用的场景。使用没有问题，但其中的关联与区别不得其解，使用起来也糊里糊涂。比如：为何有的地方使用 require 去引用一个模块时需要加上 default？ requir...
2019-10-16 11:30:29
831
原创 react中ref使用函数或字符串的区别：String类型的Refs有什么问题
摘自：https://zh-hans.reactjs.org/docs/refs-and-the-dom.html上面一文说「不建议使用它（指String类型的ref属性），因为string类型的refs存在一些问题。」我们跳转链接来到github，来看gaearon的回复。举例：说明：使用string类型的refs存在一些问题：首先，由于它无法知道this，所...
2019-10-15 18:04:15
1989
原创 关于javascript中的void
void接收一个参数，返回值永远是undefined。那么，为什么不直接用undefined呢？undefined并不是JS的保留字。局部的undefined是可以被篡改的。如下：...
2019-10-15 10:14:04
347
转载 javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和...
2019-06-21 10:58:05
219
原创 react圆柱轮播图
写在前面最近需要做一个移动端轮播图，以达到下图的效果：本来使用swiper，但效果不尽如人意。因为使用swiper实现的轮播图是水平排列的。比如Slide6是中间的图，那么我希望整个页面只显示Slide5，Slide6，Slide7，但若使用swiper，Slide5的左边仍会显示出一点Slide4，Slide7的右边也仍会显示出一点Slide8。而且在同事的手机微博中打开，动画效果十...
2019-06-17 13:37:34
581
原创 application/x-www-form-urlencoded
请求头Content-Type为application/x-www-form-urlencoded顾名思义，即这个url是被编码（encoded）过的。那么传参Form Data必须要encodeURIComponent(参数值)。如果在前端未执行编码操作，那么后端将获取不到传过去的参数如果在前端执行编码操作，那么后端将可以准确地收到传过去的参数至于此时为什么后端可以准确地...
2019-05-29 16:51:55
28993
转载 SOA架构和微服务架构的区别
1.SOA架构和微服务架构的区别首先SOA和微服务架构一个层面的东西，而对于ESB和微服务网关是一个层面的东西，一个谈到是架构风格和方法，一个谈的是实现工具或组件。1.SOA（Service Oriented Architecture）“面向服务的架构”:他是一种设计方法，其中包含多个服务， 服务之间通过相互依赖最终提供一系列的功能。一个服务 通常以独立的形式存在与操作系统进程中。各个服...
2019-04-09 21:08:32
218
原创 用D3.js(React) 画一个纵向条形图
我们接着上篇博文保持render方法不变，修改componentDIdMount componentDidMount () { const width = 300, height = 300; // 画布的宽高 const dataset = [ 34, 23, 54, 73, 88, 4 ]; const rectWidth = width / d...
2019-04-02 11:24:26
839
原创 用D3.js(React) 画一个超简单的图表
我们把上一篇博文里的架构再拿过来用。第一步清空src/App.js里的className为App里的内容和componentDidMount方法初始src/App.js如下：import React, { Component } from 'react';import * as d3 from 'd3';import './App.css';class App exten...
2019-04-01 11:33:03
763
原创 第一个D3.js(React) 程序
第一步使用npx指令创建react项目，项目名为d3-demo。npx create-react-app d3-democd d3-demonpm start此时你可以在浏览器中看到：此时的文件目录如下：第二步安装d3 node包。npm install --save d3第三步在js中引入d3。找到src/App.js，文件头部加入：...
2019-03-29 17:18:51
1424
转载 next.js getInitialProps
我们已经知道了服务器端渲染的原理，你只需要搭建一个 Express 服务器，在服务器端手工打造『脱水』，在浏览器端做『注水』，完成某个页面的服务器端渲染并不难。不过，服务器端渲染的问题并不这么简单，一个最直接的问题，就是怎么处理多个页面的『单页应用』（Single-Page-Application）？所以单页应用，就是虽然用户感觉有多个页面，但是实现上只有一个页面，用户感觉到页面可以来回切...
2019-03-12 17:00:11
2118
原创 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
1805
转载 加快Webpack打包构建的几种方法
Webpack是个很流行的打包工具，但其打包速度却一直被吐槽着如果不用上一些打包的优化建议，单单打包两三个文件就能花上好几秒，放上几十个入口文件依赖几百上千个包的话，几分钟十几分钟妥妥的本文整理了常见的一些方法，部分使用之后就看到了很大改善，部分没什么明显的变化，也可能是项目规模还不够大，先记录一下方法也好一、使用监听模式或热更新热替换webpack支持监听模式，此时需要重新编...
2019-02-25 11:36:26
781
原创 mac上利用brew安装和启动mongoDB
目录前期准备开始第一步：安装mongodb第二步：创建/data/db文件夹，用于存放数据库数据第三步：启动mongo此时我遇到的问题是原因解决重新执行开启mongodb的命令前期准备：本机必须已经安装homebrew开始：第一步：安装mongodbbrew install monogdb第二步：创建/data/db文件夹，用于存放数据...
2019-01-28 11:47:13
1993
原创 最简单的three.js demo
文件目录：代码：main.html ↓<!DOCTYPE html><html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height:...
2019-01-07 16:46:22
1975
1
原创 React首屏加载性能优化方案整理
以下内容整理自React项目加载性能优化：页面加载过程及优化方案具体参见： https://blog.csdn.net/huangpb123/article/details/81490046以下内容整理自react博客开发记录之首屏优化：首屏优化方案：通过webpack的UglifyJsPlugin插件对代码进行压缩 提取第三方库 通过webpack实现按需加载 通过...
2018-11-26 16:19:37
4975
转载 require.context
目录webpack的官方介绍：解释：1）入参 2）返回3）用法webpack的官方介绍：require-context官网介绍地址解释： 通常我们可能会在多个页面require同一个组件，数量少还行，多了的话就很蛮烦，维护起来也费劲。这个时候require.context 就排上用场了，一次性引入。1）入参 1. 你要引入...
2018-11-20 17:03:12
1076
原创 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
6183
14
原创 redux入门
背景交代举个例子。有个内容编辑的页面，如下图。它由不同的子组件（输入框组件A、图片上传组件B、富文本编辑组件C等）组成。不同的子组件负责页面中的不同的数据。点击【保存草稿】、【预览提交】按钮，将所有数据传送到后端。原来对数据的处理是：A、B、C等子组件在每次value发生变化时，使用this.props.callback(xxx, xxx, xxx)的形式，将自己所包含的数据传出。...
2018-10-31 16:16:10
703
转载 windows nginx安装 配置
nginx功能之一可以启动一个本地服务器，通过配置server_name和root目录等来访问目标文件一. 下载http://nginx.org/ 下载后解压 二. 修改配置文件nginx配置文件在 nginx-1.8.0\conf\nginx.confhttp { gzip on; #静态文件 server { listen 80; ...
2018-06-29 16:11:58
288
转载 使用webpack引入sass全局变量
使用webpack引入sass全局变量 sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。傻瓜式引用 ...
2018-06-09 04:43:21
8528
2
转载 inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。1. 问题现象我们先给出一个在线实例：http://w...
2018-06-04 20:43:30
680
转载 windows下git显示文件被修改，实际没有改动的问题解决办法
不少开发者可能遇到过这个问题：从git上拉取服务端代码，然后只修改了一处地方，准备提交时，用diff软件查看，却发现整个文件都被修改了。这是git自动转换换行符导致的问题。 原因不同操作系统使用的换行符是不一样的。Unix/Linux使用的是LF，Mac后期也采用了LF，但Windows一直使用CRLF【回车(CR, ASCII 13, \r) 换行(LF, ASCII 10, \n)】作为换行符...
2018-05-30 16:01:53
10485
5
转载 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
277
原创 正则的\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
593
转载 Flex 布局教程：语法篇
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。F...
2018-04-20 11:49:28
189
转载 vue-router 之 keep-alive
本文基于 Vue2.0keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：<keep-alive> <component> <!-- 该组件将被缓存！ --> </component></keep-alive>propsinclude -...
2018-04-14 09:48:26
653
转载 运行mongodb出现计算机丢失api-ms-win-crt-runtime-|1-1-0.dll
命令行运行mongod.exe结果如下：错误原因：官方最新版的mongodb需要： VC++2015 RC x64的支持，否则会报出下载网址：https://www.microsoft.com/zh-cn/download/details.aspx?id=48145可以通过命令： msinfo32 产看自己电脑的版本等系统信息。转自：https://blog.csdn.net/mblhq/a...
2018-04-14 08:55:40
1117
原创 自己实现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
684
原创 JavaScript按插入顺序遍历对象
for ... in... 于对象来说，是无序的；于数组来说，是有序的。此处按照插入顺序即有序，不按照插入顺序即为无序。解决：插入对象的时候，也将key插入到某个数组中。var hash = {};var arr = [];while(一些条件) { if (hash[key]) { do something; } else { hash
2018-03-27 19:05:09
2795
原创 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
267
转载 setTimeout第二个参数是0
JavaScript 是单线程执行的，也就是无法同时执行多段代码，当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列，一旦当前任务执行完毕，再从队列中取出下一个任务。这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是 Ajax 请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。假如当前 Ja...
2018-03-24 16:57:50
1109
原创 Oracle获取每分钟、每10分钟、每小时、每天、每周、每月、每年的时间或日期
-- 获取某天的每分钟时间SELECT TO_DATE('2018-03-23', 'YYYY-MM-DD') + (ROWNUM - 1) / (24 * 60)FROM DUAL CONNECT BY ROWNUM <= 24*60;-- 获取某天的每10分钟时间SELECT TO_DATE('2018-03-23', 'YYYY-MM-DD') + (ROWNUM - 1) / (
2018-03-23 15:25:33
2579
转载 前端常见跨域解决方案（全）
转自：https://segmentfault.com/a/1190000011145364什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame&g...
2018-03-23 08:55:56
284
原创 Webpack4.x安装与使用入门
安装在全局安装webpacknpm install -g webpack创建项目创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。npm init然后根据项目情况配置选项或直接回车。此时发现在该文件夹内新增了一个package.json文件。安装webpack依赖包npm install --save-
2018-03-20 21:47:23
1485
Dll-Files Fixer 3.1.81.2919注册版
2015-01-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人