juzipchy-CSDN博客

原创什么是中台

没有中台的时代传统的IT企业中，有前台和后台的概念，无论项目内部的如何复杂，都可分为这两部分。前台。这里的“前台”和“前端”并不是一回事。所谓前台即包括各种和用户直接交互的界面，比如web页面，手机app。也包括服务端各种实时响应用户请求的业务逻辑，比如商品查询、订单系统等等。后台。后台并不直接面向用户，而是面向运营人员的配置管理系统，比如商品管理、物流管理、结算管理。后台为前台提供了一些...

2020-03-13 15:51:45 1185

原创 HTML5 WebSocket简介

为什么需要WebSocket客户端和服务器是通过http协议完成通信交换数据的，http具有一些特点。http是单向网络协议。在连接建立后，只许客户端向服务器端发送请求，建立连接后，服务器端才能发送数据，处于被动方。服务器端不能主动推送数据给客户端。http协议是无状态的。http经过三次握手后才建立一次连接，在三次握手时客户端向服务器发送连接请求中会包含 identity info（鉴别...

2020-02-28 16:27:46 269

原创前端路由原理

后端路由最初路由这个概念是后端提出来的。根据前端路由返回不同的页面，代表者是传统的MVC模式，模板引擎+node。比如我们请求这样的一个路由http://www.xxx.com/login会经过这样的流程：浏览器发出请求服务器解析请求，解析请求的URL服务器根据配置的路由信息，返回相应的信息浏览器根据服务器返回的信息决定如何解析数据一言概之，路由是前端与后端进行交互的一种方...

2020-02-14 16:52:04 354

原创多线程的浏览器、单线程的JavaScript和Event Loop

我们经常看到这样的说法，浏览器是多线程的，而js是单线程的，以及事件队列（event loop）和异步回调的概念，现在总结下多线程的浏览器和单线程的JavaScript。CPUcpu是整个计算机的核心，一直在运行，完成计算机的各种计算任务，相当于一个工厂。进程进程可以看作工厂里的车间。工厂有很多车间，CPU就有很多进程。多个车间可以同时工作，多个进程也可以互不干扰独立完成工作。线程线程...

2019-12-30 20:25:21 296

为什么会有Web Worker我们知道，浏览器中有两个线程：GUI 渲染线程和 JS 引擎线程。 JS线程需要操作DOM，GUI线程渲染界面，两个线程同时运行的话，那么渲染线程前后，页面的数据可能会有不同。因此，在浏览器中GUI 渲染线程和 JS 引擎线程是互斥的，不可同时执行。当JS引擎执行时GUI线程会被阻塞，GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。假设JS引擎正在...

2019-12-26 16:58:53 324

原创跨页面通信之postMessage

最近要写的一个页面内嵌了一个iframe，引入的页面是其他域名的页面。复页面需要获取子页面iframe里面的信息，这就需要子页面像父页面传值，首先想到了用iframe间的通信。// 子页面<div id='child'>i am a child</div> <script> window.onload = function() { ...

2019-12-25 16:53:44 893

原创算法之动态规划

在刷LeetCode时，遇到了一些动态规划的题。个人觉得动态规划属于算法中比较难的一部分了，出去面试的话，经常会问到一些经典的动态规划题，比如青蛙跳台阶、最长回文子串等。在此对动态规划做一些简单的研究和总结。动态规划的概念动态规划(DP，Dynamic Programming)是运筹学的一个分支，是求解决策过程(decision process)最优化的数学方法。20世纪50年代初美国数学家R...

2019-12-24 10:55:21 155

原创 mac OS命令行下打开vscode

一直想在item2命令行中打开vscode，在网上找了很多资源，基本都是更改.zshrc内容，但是不知道为什么，在我的item2中并未生效以下是我找到的生效的便捷操作方式1.打开vscode2.快捷键shift + command + p选择shell命令3.打开item2，确定要打开的文件夹，输入code .结束...

2019-04-09 15:40:41 2647

原创 void 0 与 undefined的区别

在看《你不知道的JavaScript》的时候，看到了这个么一段代码. function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; }void 0 返回undefined，我们都知道的，但是为什么不直接...

2019-01-13 21:03:31 19087 4

原创 React总结13：PureComponent

怎么使用：React15.3中新加了一个 PureComponent 类，只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操...

2018-12-05 20:12:24 309

原创 CSS变量总结

文档https://drafts.csswg.org/css-variables/1.声明变量时，变量名前要加两根线（–）,声明的变量区分大小写var()函数用于读取变量:root { // 根元素 --header-color: #06c;}h1 { background-color: var(--header-color); }2.var()可以有两个参数，第一个参数是...

2018-12-05 17:54:14 340

原创 2019年秋季校招前端面经

19年秋季校招已经结束，因为一直在实习，参与笔试面试的公司并不多，错过了很多公司面试。已经拿到百度，腾讯，拼多多等offer，面筋如下，希望对大家能有帮助：阿里天猫 8.31.垂直水平居中越多越好2.vue data的实现原理3.react的生命周期4.在小米中碰到最大的的挑战5.实习前是如何学习的6.自己未来的职业规划7.对前端架构师是怎么理解的，自己行动了吗8.自己封装...

2018-10-14 17:44:15 1111

原创 extract-text-webpack-plugin配置问题：Tapable.plugin is deprecated. Use new API on `.hooks`instead

在webpack4中配置extract-text-webpack-plugin时，npm run build后报错DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead查找了下原因，是当前的extract-text-webpack-plugin版本不支持webpack4，更新到最新版...

2018-10-14 17:31:57 3851

原创异步action和redux-thunk

好久没写博客了，上次写还是2月份，一眨眼就过去4个月了，真是懒出翔了。- - 最近在看代码，看到一个奇怪关于redux中dispatch(action)的奇怪的用法dispatch(fetchSkill());export const fetchSkill = () => (dispatch, getState) => { dispatch(requestL...

2018-06-03 22:07:11 2629 1

原创 css权威指南（13）:用户界面样式

系统字体 css2定义了6个系统字体关键字，如下： 1.caption 由标题控件使用的字体样式，如按钮和下拉控件 2.icon 操作系统图表标签使用的字体样式，如硬盘驱动器，文件夹和文件图标 3.menu 下拉菜单和菜单列表中文本使用的字体样式 4.message-box 对话框中文本使用的字体样式 5.small-caption 对话框中文本使

2018-02-04 21:48:05 294

原创 css权威指南（12）:列表和生成内容

2018-02-04 20:20:35 261

原创 css权威指南（10）:浮动和定位

浮动 float 值：left | right | none | inherit 1.css允许浮动任何元素浮动元素 1.会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局 2.一个元素浮动时，其他内容会“环绕”该元素 3.浮动元素周围的外边距不会合并。即入如果其他元素与此图像相邻，而且这些元素也有外边距，那么这些外边距不会与浮动图像的外边距合并浮动的详细内幕 1

2018-01-28 20:21:06 474 1

原创 css权威指南（9）:颜色和背景

前景色 color 值： color> | inherit 1.要设置一个元素的前景色，可以使用此属性 2.color值可以影响元素周围的边框 3.此属性可以继承背景色 background-color 值： color> | transparent | inherit 1.可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值. 2.不

2018-01-28 17:38:45 290

原创 css权威指南（8）:内边距、边框和外边距

宽度和高度 1.一个元素的width被定义为从做内边界到右内边界的距离，height被定义为上边界到下边界的距离。 2.这两个属性很重要的一点是：它们不能应用到行内非替换元素。 3.如果在行内非替换元素声明了width和height,浏览器会忽略。外边距 margin 值：length> | precentage> | auto | inherit 1.浏览器对许多元素已经提供了预定

2018-01-22 23:14:06 620

原创 css权威指南（７）:基本视觉格式化

块级元素水平格式化１．水平格式化的7大属性：margin-left,border-left,padding-left,width,margin-right,border-right,padding-right.这些属性与块级框的水平布局有关．这7个属性的值加在一起必须是元素包含块的宽度．这往往是块元素的父元素的width值．２．这7个属性中，只有３个属性可以设置为auto：width,

2018-01-20 18:47:47 270

原创 css权威指南（6）:文本属性

text-indent 值：　＜length＞ | ＜percentage＞ | inherit 1．通过使用此属性，所有元素的第一行都可以缩进一个给定的长度，该长度甚至可以是负值． 2．可以为所有块级元素使用text-indent，但无法将这个属性应用到行内元素，图像类的替换元素也无法应用text-indent属性．３．text-indent可以使用所有长度单位（包括百分数值）．但是百

2018-01-20 14:56:35 319

原创 css权威指南（5）:字体

css字体处理中最复杂的部分是字体系列的匹配和字体加粗的匹配，其次是字体大小的计算。字体系列我们大多数人以为字体就是某一种字体，实际可能是一个字体系列。常见的字体系列有Times,Serif,Sans-serif等有时候我们指定了某种特定字体，但是不可用，可能显示为用户代理的默认字体只有当一个字体名中有一个或多个空格（如New York），或者如果字体名包括#或$之类的符号，才需要

2018-01-14 18:48:48 256

原创 css权威指南（４）:值和单位

颜色用RGB指定颜色　　有两种颜色值类型使用函数式RGB记法，而不是16进制记法．这种类型颜色值的一般语法是rgb（color），其中color是一个百分数或整数三元组．百分数值在０％～１００％,整数范围为０～２５５.如：　　rgb(100%,100%,100%)rgb(191,253,45)值得注意的点是１．百分数计数法可以使用分数和小数，但是如果用户代理忽略小数点

2018-01-13 16:33:05 207

原创 css权威指南（３）:结构和层叠

特殊性　　上一章介绍了用不同的选择器选择元素，假设一个元素可以用两个或多个规则选择，每个规则都有自己的选择器，那应该应用哪一个选择器呢？　　显然每一对规则只能有一个胜出．应该选哪个呢？答案就在每个选择器的特殊性，对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明．如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出．选择器的特殊性由选择器

2018-01-13 13:49:35 286 1

原创 css权威指南（2）:选择器

类选择器：类选择器的用法很简单，个人最常用的写法如下：.warning{ color: red;}今天看了书，发现还有这种写法：p.warning{ color: red; //其class属性包含词warning的所有段落}选择器会匹配class属性包含warning的所有p元素，其他任何类型的元素都不会匹配，不管是否有此class属性

2018-01-10 22:50:47 199

原创 css权威指南（1）：css和文档

替换元素替换元素指用来替换元素内容的部分并非由文档内容直接表示。在XHTML中，我们最熟悉的替换元素是img元素。它有文档本身之外的一个图像文件来替换。实际上，img并没有具体的内容。 <img src='xxx.png'/>这个标记片段不包含任何具体内容。只有一个元素名和属性名。除非将其指向一个具体内容，否则这个元素没有意义。input元素类似，取决于input元素的类型。替换元素显示

2018-01-07 21:58:49 261

原创 JavaScript栈内存和堆内存区别

和栈这两个字我们已经接触多很多次，那么具体是什么存在栈中什么存在堆中呢？就拿JavaScript中的变量来说：首先JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。1、基本类型基本类型有Undefined、Null、Boolean、Number 和S

2017-12-03 16:19:10 1909

原创关于变量提升的易错点

一个简单的面试题：var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name);

2017-10-28 18:31:08 389 2

原创 this易错点

1.如果不是用new调用，在函数里面使用this都是指代全局范围的this。foo = "bar"; function testThis() { this.foo = "foo"; } console.log(this.foo); //logs "bar" testThis(); console.log(this.foo); //logs "foo"除非你使用严格模式，

2017-10-28 12:13:53 306

原创 webpack(1):什么是webpack模块

模块(Modules)在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。

2017-09-17 15:50:14 676

原创 webpack(2):Loader

webpack 的目标是，让 webpack 聚焦于项目中的所有资源(asset)，而浏览器不需要关注考虑这些（明确的说，这并不意味着所有资源(asset)都必须打包在一起）。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 自身只理解 JavaScript。webpack loader 在文件被添加到依赖图中时，其转换

2017-09-17 15:47:29 397

原创什么是异步

通常，代码是由上往下依次执行的。如果有多个任务，就必需排队，前一个任务完成，后一个任务才会执行。这种执行模式称之为：同步（synchronous）。新手容易把计算机用语中的同步，和日常用语中的同步弄混淆。如，“把文件同步到云端”中的同步，指的是“使…保持一致”。而在计算机中，同步指的是任务从上往下依次执行的模式。比如：例 1A();B();C();在上述代码中，A、B、C 是三个不同的函数，

2017-09-14 20:13:17 734

转载函数式编程（3）：函数式编程特性

诞生50多年之后，函数式编程（functional programming）开始获得越来越多的关注。不仅最古老的函数式语言Lisp重获青春，而且新的函数式语言层出不穷，比如Erlang、clojure、Scala、F#等等。目前最当红的Python、Ruby、Javascript，对函数式编程的支持都很强，就连老牌的面向对象的Java、面向过程的PHP，都忙不迭地加入对匿名函数的支持。越来越多的

2017-09-13 20:05:32 1105 1

原创函数式编程（2）：Applicative编程

Applocative编程定义：函数A作为参数提供给函数Bvar nums = [1,2,3,4,5];function doubleAll(array){ return _.map(array,function(n){ return n*2; })}doubleAll(nums)// [2,4,6,8,10]function average(array){ var

2017-09-07 23:23:04 584

原创函数式编程（1）：高阶函数

高阶函数的定义：一个高阶函数应该可以执行下列至少一项操作 1.以一个函数作为参数 2.返回一个函数作为结果_.each(['whiskey','tango','foxtort'],function(word){ console.log(word.charAt(0).toUpperCase+word.substr(1));})// 'Whiskey'// 'Tango'// '

2017-09-07 22:36:23 273

原创 React总结12：context

先看个代码：class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}> {this.props.children} </button> ); }}class Message exte

2017-09-06 22:19:13 292

原创 Redux总结4：bindactioncreators的用法

今天看官方redux中的todomvc这个实例，找不到在哪里调用store.dispatch这个方法，最后在containers中的App.js文件中的mapDispatchToProps中发现，我看看一下他如何调用：有代码我们可以看到是调用了bindActionCreators方法把action绑定到了connect方法中，其中connect方法的作用是连接react组件和redux st

2017-08-28 23:08:30 8556 3

原创懂点网站交互（5）：导航栏和面包屑

我们首先要明白的是：如果在网站上找不到方向，人们不会使用你的网站。从你作为web用户的体会就可以知道这一点，如果到了一个网站，却找不到你要的内容，或者不知道这个网站是怎么组织的，你不太可能在那里呆很长时间——或者还会回来。那么，怎么创建那种公认“明确”、“简单”、“一致”的导航呢？网络导航101法则我们浏览网站，通常是遵循以下过程： 1.进入网站通常是为了寻找某个目标。 2.用户会决定是先浏

2017-08-13 22:29:03 4009

原创什么是单页面应用（SPA）

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现U

2017-08-07 22:33:50 5134

原创懂点网站交互（4）：省略多余的文字

有力的文字都很简洁。句子里不应该有多余的文字，段落里不应该多余的句子。当我们浏览网页时，发现页面上的大部分文字都在占地方，因为没人去阅读他们。所有多余的文字都在暗示你可能真的需要阅读他们来理解到底是怎么回事，这是的页面的理解难度提高了。去掉多余的文字有以下几个好处： 1.降低页面噪声。 2.让有用的内容更加突出。 3.让页面更简短，让用户在每个页面上都能看见更多的内容，而不必滚屏。欢迎词必须消

2017-08-06 20:45:17 387

空空如也

空空如也