- 博客(24)
- 收藏
- 关注
RSS订阅
原创 Element源码系列——Row以及Col组件
Element源码系列——Row以及Col组件Element源码系列——Row以及Col组件序言RowCol总结序言官网中对Layout 布局的定义是: 通过基础的 24 分栏，迅速简便地创建布局. Element中的栅格系统也与Bootstrap类似,组件开发的目的都是为了解决基本布局定位的问题.Layout主要组件为Row与Col,其中...
2018-08-06 13:43:02
17082
2
原创 Element源码系列——Form以及Form-item组件
Element源码系列——Form、Form-item组件Element源码系列——Form、Form-item组件序言控件组成数据收集校验数据提交数据总结序言Element团队将组件主要分为Basic、Form、Data、Notice、Navigation、Others几大类.如果您跟我一样学习到Form大类的时候,先看Form组件绝对没...
2018-08-02 13:56:06
36882
原创 Element源码系列——Vue加载Markdown格式组件上篇
Element-ui源码学习系列三——Vue加载Markdown格式组件上篇Element-ui源码学习系列三——Vue加载Markdown格式组件上篇序言安装vue-cli安装相关依赖编写Webpack配置文件编写组件总结序言文档是如何工作的 – vue-markdown-loader 当初写 Mint UI 时就遇到了要用 Vu...
2018-07-17 22:45:40
14036
10
原创 Element源码系列——buildfile命令
Element-ui源码系列——build:file命令build:file是一个组合命令,它由四个子命令构成.命令大致都是通过解析配置文件,生成最终文件.那么下面,让我们来一个一个具体的看看每个命令是做什么的.1.icon图标初始化 node build/bin/iconInit.js该子命令的作用是读取icon的样式表,通过解析样式表.最终生成一份所有可用的icon清单...
2018-07-17 22:42:56
1730
原创 Element源码系列——搭建开发环境
Element源码系列——搭建开发环境序言由于其中涉及的知识点比较多,为了尽可能写的更详细,将会有一些文章间的跳转.如有带来困扰,实在抱歉.个人觉得在搭建之前,角色互换一下,设身处地的想一下如果让您做一个这样的产品应该怎么去开发? 既然咱们开发的是一个UI框架,那么一个美观的教程网站肯定是必须的,并且网站至少要有展示效果+代码+API这种组合来呈现内容.那么我们首先要解决的...
2018-07-17 22:41:44
4103
原创 Element源码系列——搭建Karma测试环境及Eslint语法检测
Element-ui源码学习系列二——搭建ESlint语法检测及Karma测试环境 先介绍下背景,这件事发生在我们团队的开发过程中,这件事也是我们团队为什么要坚定不移使用Eslint的导火索.事情是这样,项目在稳定版本后进行分支继续开发,新人同事无意中将之前的一个Web Worker文件里的半角)改成了圆角）,Webpack编译一直报错并无法定位到错误,只能一片一片代码去注释来定位错误,...
2018-07-16 22:29:55
1757
原创 Element源码系列——初识框架
Element-ui源码系列——初识框架Element-ui源码系列——初识框架序言目录结构package.json1.基础信息2.依赖关系3.Scripts对象总结序言现在前端的技术越来越杂,也越来越细了,以至于每次看完文档都会有个错觉,就是自己差不多会了.真正去做项目的时候又是重复之前的步骤.之前写Java的时候，会习惯性的看看源...
2018-07-16 22:26:31
10631
2
原创 基于Webpack的Cesium+Vue应用
介绍这是一篇关于如何通过Webpack的配置快速将Vue-cli脚手架与Cesium库整合，最终目的是可以使用Vue+Cesium进行组合编写代码，并可以正确打包Cesium的代码。Cesium.js是一个渲染三维地球的JavaScript库。它可以实现非常丰富的地理空间可视化，比如矢量几何、三维模型、倾斜摄影、粒子效果和模型动画等等。这些对象都可视化在一个带有地形和影像的三维地球上。并且...
2018-03-31 20:55:53
27915
56
原创 从服务器接收到响应报文到解析页面
输入URL到页面加载——从服务器接收到响应报文到解析页面HTML解析，构建DOMHTML到构建出DOM的过程简述如下Bytes(字节流) → characters(字符流) → tokens(次元) → nodes(节点对象) → DOM(文档对象模型)整个过程大致为:1.Conversion转换: 浏览器将获得的HTML内容(Bytes)基于定义的编码格式进行转换为单个字符(cha...
2019-01-29 00:00:44
2584
原创 从服务器接收到请求到对应后台接收到请求
输入URL到页面加载——从服务器接收到请求到对应后台接收到请求负载均衡对于大型的项目，由于并发访问量非常大，所以往往一台服务器是吃不消的，一般会有若干台服务器组成一个集群，然后通过配合反向代理实现负载均衡。这里实现负载均衡的方式有很多种，我们以比较熟悉的方向代理负载均衡为例，先来看看它的调度算法：1.weight(轮询) 接收到的请求按照顺序逐一分配到不同的后端服务器，即使在使用过程中...
2019-01-27 22:40:37
4770
原创 开启网络请求线程到发出一个完整的http请求
输入URL到页面加载——开启网络请求线程到发出一个完整的http请求解析URLURL一般包括几大部分：protocol：协议头，比如https、htpp、ftp等host：主机域名或IP地址port：端口号path：目录路径query：查询参数，比如 a=1&&b=2fragment：即#后的hash值，一般用来定位到某个位置网络请求都是单独的线程每次网络请...
2019-01-27 22:39:05
1497
原创 浏览器接收URL开启网络请求线程
从输入URL到页面加载——浏览器接收URL开启网络请求线程浏览器是多进程的浏览器是多进程的浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)每打开一个页面，就相当于创建了一个独立的进程根据浏览器的优化策略，有时多个页面的进程会被合并浏览器包含哪些进程Browser进程：浏览器的主进程（负责调度），只有一个。负责浏览器的界面显示，与用户交互。如前进，后退等...
2019-01-27 22:36:45
795
原创 防抖与节流
函数防抖与函数节流为什么会有函数防抖我们现在有一个input框，需要实现一个类似搜索引擎的功能，当输入文字时进行模糊查询业务。<input type="text" id="debounce"><script type="
2019-01-18 00:06:49
1393
1
转载 BFC是什么
BFC是什么BFC(Block formatting context)直译为"块级格式上下文"。它表示一个独立的渲染区域，只有块级元素(Block-level)参与其中，它有一套渲染规则，这套规则决定了内部的块级元素如何布局，并且这个区域与外部完全隔绝。BFC布局规则内部的Box会在垂直方向，一个接一个的放置Box的垂直方向的距离由margin决定,并且属于同一个BFC中的两个相邻的Bo...
2019-01-17 00:32:11
304
原创 CSS实现图片自适应布局
CSS实现图片自适应布局最轻松的写法<div class="container"> // 这里图片尺寸为440X440像素， <img src="./images/medium.jpg" alt="test"></div><sty
2019-01-14 21:36:12
16084
原创 IEEE-754标准与浮点数运算
序言本文主要简述了计算机中数字的表示方式，以及IEEE-754标准的由来及具体规定，最后简单的叙述了浮点数的运算规则。阅读这篇文章之前，最好有关于有关于机器数中的原码、反码、补码三种形式的一些概念。计算机"眼中"的数字计算机内数据和指令都是由晶体管和门电路等元件完成的，对于这些元件来说，开或者关是其唯一的状态，这种状态的表现就是二进制的理念。就像黑客帝国世界中漫天飞的0和1一样,计算机世界使...
2018-11-29 00:02:55
26571
9
原创 机器数中的原码、反码、补码三种形式
机器数与编码文章目录机器数与编码计算机"眼中"的数字数字的“单位”小数点的“位置”带符号的整数整数的大小计算机"眼中"的数字计算机内数据和指令都是由晶体管和门电路等元件完成的，对于这些元件来说，开或者关是其唯一的状态，这种状态的表现就是二进制的理念。就像黑客帝国世界中
2018-11-27 23:57:11
8393
1
原创 JavaScript数据类型
JavaScript数据类型文章目录JavaScript数据类型序言数据类型的重要性JavaScript是弱类型，动态类型检查语言JavaScript中的数据类型原始类型特殊的Object类型总结序言数据类型往往是学习一门编程语言的第一节课，数据类型的重要程度首当其冲。本文试图给各位初学JavaScript的看官讲明白这门语言中的数据类型，并且尽可能丰富内容，让已经学过这门语言的同行们可以查...
2018-11-20 09:59:22
392
转载 如何更好的使用BEM
如何更好的使用BEMBEM是由Yandex团队提出的一种CSS Class 命名方法，旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定，有些人认为这些规定很冗余，但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章，是我在假设你对BEM和Sa...
2018-07-06 23:20:05
1208
转载 正则掌握程度测试题
正则掌握程度测试题1、分组提取/非捕获组分组，是正则里一个非常重要的概念，我们需要针对某个区域提取数据，往往需要依赖分组。而分组，其实就是正则里()括住的部分。1.1分组提取需求:再分组1中匹配meta中author属性的值源串:<meta author="Zjmainstay" />another author="Zjmainstay too"预期:分...
2018-07-04 22:35:47
1319
转载 深入理解正则表达式高级教程
深入理解正则表达式高级教程一、按字符匹配正则里面的数据都是按照单个字符来进行匹配的，这个通过数值区间的例子最容易体现出来，比如：我要匹配0-15的数值区间，用正则来写的话，便是[0-9]|1[0-5]，这里，便是把[0-9]这种单字符的情况，和10-15这种多字符的情况拆分开了，使用分支|来区分开，表示要么是0-9,,要么是10-15上面是两位数的情况，现在延伸至1-65535...
2018-07-04 22:31:09
430
转载 正则表达式入门教程
正则表达式入门教程一、入门:正则字符1..匹配不包括换行的任意字符如果需要匹配包括换行的任意字符,可以使用[\s\S]代替.2.\s匹配空格、tab、换行[\s\S]表示匹配任意字符,\S是\s的反义注意区分[\s\S]与.的区别3.*匹配零个或更多个,即0~N4.+匹配一个或更多个,即至少一个,1~N5.,\转义一个特殊字符前加\就表示转义,说明把它...
2018-07-04 22:29:44
273
2
原创 如何在Webpack打包的项目中使用Web Worker
如何在Webpack打包的项目中使用Web Worker因为项目中涉及到大量的计算,传统的JavaScript中计算的话会阻塞浏览器.使用Web Worker势在必得! 主要使用教程非常简单，共分为三个部分:安装项目工程目录下安装loader,目地是让Webpack识别worker文件npm install -D worker-loader配置webpack文件...
2018-05-24 23:03:31
8705
2
翻译 Web性能优化之CSS性能优化篇
非常感谢原文作者的分享,个人觉得非常有用.所以将原文进行翻译,如果有错误,麻烦回复指出 附上原文地址 什么是高效的CSS?不同的选择器对性能的影响如何?是花括号里的属性重要还是选择器重要?.选择器测速这意味着这什么?原因与结果删除未使用的样式括号内的性能什么是”昂贵”的样式?结论什么是高效的CSS?不同的选择器对性能的影响如何?是花括号里的属性重要还...
2018-05-18 23:55:22
2235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人