- 博客(32)
- 收藏
- 关注
RSS订阅原创 webpack性能优化策略
前端技术的发展真的可以用百（gui）花（quan）齐（zhen）放（luan）来形容，无论是技术栈的演进，技术框架的推新，还是各种模式，反模式的最佳实践都在不断的涌现。如今前端工程化的概念早已深入人心，那种直接在js中写脚本，通过src嵌入到页面，然后按F5刷新页面查看结果的开发方式已经渐行渐远。基本上选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多构建工具中，webpack以其丰富的功能和灵活的配置在诸多构建工具中大方光彩，React、Vue、Angular2等诸多知名项目也都选用
2020-12-21 23:42:42
275
原创 React - 虚拟DOM与DIFF算法
React是如何提升渲染性能获取state数据拿到JSX模板 <div id="abc"> <span>hello world</span></div>数据+模板结合，生成真实DOM来显示生成虚拟DOM（本质上是js对象，用它来描述真实DOM）— 损耗了性能['div', {id: 'abc'}, ['span', {}, 'hello world']]state发生变化数据+模板 生成虚拟DOM — 极大的提升了性能['
2020-11-10 22:19:54
304
原创 Algorithm — 排序
一、冒泡排序１、排序原理①从第一个元素开始，把当前元素和下一个索引的元素比较，如果当前元素大于下一个元素，则把当前元素和下一个元素互换位置，以此类推，直到比较到最后一个元素，此时，最后一个元素就是数组中的最大的元素。②循环①中的排序流程，但要注意的是第一轮排序之后，最后一个元素已经是最大的，所以第二轮排序时只用排序到第length-1个元素。③下一轮重复②中的操作，排序最后位置依次减１．...
2020-09-02 13:11:01
274
原创 项目中遇到的的兼容性问题及解决方法总结
一、页面布局1、元素与元素之间尽量少使用margin，可以给元素设置padding-top来达到想要的元素间间隔距离效果。否则各个浏览器渲染出来差别太大。2、使用h5的video标签在移动端播放视频的时候，视频总是浮在最上层，优先级最高遮盖所有dom操作，解决方法是（1）根据需求采用绝对定位固定上下位置。（2）操作dom的时候隐藏视频，操作结束显示视频，这样也不会影响视频的正常播放。3、h5...
2019-09-09 17:55:35
1499
原创 获取图片预览地址的方法
方法一：getPreUrl(file) { let windowURL = window.URL || window.webkitURL let src = windowURL.createObjectURL(file) return src }方法二：beforeUpload1(file) { let reader = new Fi...
2019-08-27 17:43:36
1243
原创 MVVM及Vue 中数据双向绑定实现原理
一、MVVM１、定义MVVM是Model - View - ViewModel的简写。即模型－视图－视图模型。① Model：指后端传递的数据，如Object、Array等。② View：指页面视图。③ ViewModel：是mvvm模式的核心，是链接model和view的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化为所看到的页面。二是将视图转化成模型，即通过DOM事...
2019-08-27 17:37:30
1382
原创 网站加速 — 前后端上传图片至七牛云
一、基础１、注册七牛云账号，申请存储空间。２、解析域名，获取七牛加速域名（七牛上新建域名－>在阿里云做cname）。阿里云cname:记录值为七牛加速域名，主机记录为二级域名前缀，比如主机记录为image，那么解析出来就是image.主机名。３、在个人中心获取秘钥，用来配置token。二、实现流程１、获取token（通过接口向后端获取）2、获取七牛云上的加速域名和存储空间名...
2019-05-09 14:11:36
877
原创 CSS —— 圣杯、双飞翼布局实现原理
一、圣杯布局1、什么是圣杯布局如下图，圣杯布局就是左右两个div宽度固定，中间div自适应的三栏布局。2、文档结构// 为了安全起见，给body设置一个最小宽度 body { min-width: 600px; }&amp;amp;amp;lt;div class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;amp;gt; &a
2019-03-09 00:47:19
1008
原创 CSS —— 元素水平、垂直、水平垂直居中
一、水平居中1、子元素宽度固定对子元素设置：margin: 0 auto;即可。2、子元素宽度未知①子元素为行内元素：对父元素设置：text-align: center;即可。②子元素是块级元素：a： 单个子元素，无需设置，子元素宽度自动铺满整个父容器。b：多个子元素，把子元素设置为行内块级元素inline-block，父容器使用text-align:center。如下：3、...
2019-01-26 00:05:41
385
原创 CSS —— 盒子阴影（box-shadow）
语法 box-shadow: h-shadow v-shadow blur spread color inset;注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。未加阴影效果如下：1、外阴影a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移...
2018-12-24 17:54:56
28069
原创 状态管理器
应用场景状态管理器是JavaScript中模块知识点的应用。当我们开发的项目越来越大、需要保存的数据和状态越来越多的时候，就需要一个专门的模块（状态管理器）来维护这些数据。实现原理实现原理直接看如下代码：//自执行创建模块(function (){ //states 结构预览 /*states = { a: 1, b: 2, ...
2018-12-10 22:22:20
384
原创 CSS —— rgba与opacity的区别
rgba和opacity都可以设置元素的透明度。两者的区别在于opacity会继承父元素的opacity属性，而rgba设置的元素，其后代元素不会继承父元素的不透明属性。opacity语法：opacity: value | inheritvalue取值为0~1,0为完全透明，1为完全不透明；inherit表示此属性默认为可继承属性，所以子元素会继承父元素的opacity属性值，从而...
2018-11-30 21:54:51
572
原创 CSS —— 背景图片填满DIV、鼠标滑过放大图片
1、让背景图片填满DIV应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下：（1）、background-size:coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪）示例：.case { backgr...
2018-11-30 00:22:04
9314
原创 JavaScript事件循环机制
JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列（task queue）来搞定另外一些代码的执行。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。macro-task大概包括：script（整体代码），...
2018-11-15 23:12:32
116
转载 HTTP协议
一、HTTP是什么？HTTP是数据传输协议（超文本传输协议）是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。二、HTTP主要特点1、支持客户/服务器模式。2、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有 GET、POST、HEAD。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的...
2018-08-29 01:02:48
199
原创 axios 学习笔记
一、什么是axios？axios是基于Promise的HTTP库，同时支持前端和Node.js。二、特点1、支持浏览器和node.js 2、支持Promise 3、能拦截请求和响应 4、能转换请求和响应数据 5、能取消请求 6、自动转换JSON数据 7、浏览器端支持防止CSRF（跨站请求伪造）三、浏览器支持四、安装npm安装npm install a...
2018-08-28 01:28:34
204
原创 CSS —— 盒子模型（Flexbox 布局方式）
目录传统盒模型Flexbox 布局方式Flexbox 核心概念Flex 容器属性flex-direction ：项目元素排列的方向flex-wrap ：项目元素排列方式justify-content ： 项目在主轴上的对齐方式align-items ：项目在交叉轴上的对齐方式align-content ：多行项目的排列方式Flex 项目属性order ：项...
2018-05-11 15:19:19
14921
2
原创 Sass 使用流程
Sass (Syntactically Awesome StyleSheets)Sass是对css的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。特色完全兼容 CSS3 ...
2018-05-03 11:13:27
457
原创 Vue 组件（三）非父子组件通信
在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景。非父子通信组件一般有两种，兄弟组件通信和跨级组件通信。实现非父子组件通信主要有以下三种方法：1、中央事件总线（bus） 使用一个空的 Vue 实例作为中央事件总线，轻量地实现了任何组件间的通信，包括父子、兄弟、跨级组件.示例代码如下：<div id="app"> {{message...
2018-04-16 23:25:56
463
原创 Vue 组件（二）子组件向父组件传递数据
子组件向父组件传递数据有一下两种方式：1、自定义事件子组件用”$emit()“来触发事件，父组件用”$on()“来监听子组件事件。父组件也可以直接在子组件的自定义标签上使用” v-on ” 来监听子组件触发的自定义事件。（因为” v-on “除了监听DOM事件外，还可以用于组件间的自定义事件。）示例代码：<div id="app"> <p&...
2018-04-16 22:48:16
4750
原创 es6 基础语法—set和map
1、set 数据集合 //1、创建一个集合 let set = new Set(['张三','李四','王五']); console.log(set); //2、一个属性 //size属性求集合长度 console.log(set.size); //3、四个方法 //add console.log(set.add('henry').add('buck'...
2018-04-16 17:48:05
430
原创 Vue 组件（一）父组件向子组件传递数据
1、父组件通过props向子组件传递数据组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种： （1）字符串数组我们...
2018-04-16 17:03:21
22215
2
原创 JavaScript 事件委托（event delegation）
事件委托 是将事件监听添加到父元素，而不是每个子元素单独设置监听器，当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：内存占用少，因为只需要一个父元素的事件处理程序，而无需为每个后代元素都设置事件处理程序。无需从已删除的元素中解绑处理程序，也无需为新元素绑定处理程序。例子1：<ul id="parent-list"> ...
2018-04-16 10:37:29
1147
原创 Vue 学习笔记（四）——vue的data选项使用注意
一、实例化组件时，挂载选项data 必须是函数，使用函数每次返回值都是一个新对象例如： <body> <div id="app"> <my-div></my-div> </div> <script type="text/template" id="my_div"&g
2018-03-30 12:28:29
4368
原创 Git学习笔记（三） —— 撤销修改、删除文件
1、 git checkout -- file 丢弃工作区的修改命令git checkout -- readme.txt意思就是，把readme.txt文件在工作区的修改全部撤销，这里有两种情况：一种是readme.txt自修改后还没有被放到暂存区，现在，撤销修改就回到和版本库一模一样的状态；一种是readme.txt已经添加到暂存区后，又作了修改，现在，撤销修改就回到添加到暂存区后的状态。总之，...
2018-03-14 23:07:43
207
原创 Git学习笔记（二） —— 版本回退 、管理修改
1、git status 命令查看工作区状态例如：当我们把readme.txt文件修改成如下内容的时候：Git is a distributed version control system.Git is free software.可以运行 git status 命令查看结果。上面的命令告诉我们，文件被修改了，但是还没有准备提交的修改。2、git diff 命令查看具体修改的内容可以从上面的命...
2018-03-14 23:01:03
196
原创 Git学习笔记（一）—— Git安装及版本库创建
一、安装Git在Windows上安装Git从Git官网直接下载安装程序，然后按默认程序安装即可。安装完成后打开Git Bash ,在命令行输入如下命令完成设置： git config --global user.name "Your Name" git config --global user.email "Your Email"例如：二、创建版本库1、在本地计算机上选择一个合适的地方，创建一个...
2018-03-14 20:55:24
156
原创 CSS —— 清除浮动的方法及其原理理解
一、为什么要清除浮动浮动会引起父容器塌陷，导致页面布局出错等问题。例子：<body> <div class="parent_Div"> <div class="float_Div">float left float left float left float left.....</div> <div class=...
2018-02-27 00:05:38
1180
原创 nodejs 在 windows 下的安装和环境变量配置
在学习es6的时候，需要用到express脚手架工具，而express脚手架的使用需安装nodejs，因为项目的前端环境构建和编译等都依赖于node环境。下面整理一下node安装和环境配置步骤：一、安装windows版nodejsnodejs官网：https://nodejs.org/en/download/ 下载安装。二、检查安装是否成功三、配置 npm 的全局模块的存放路径以及cache路径 ...
2018-02-25 22:50:33
1453
原创 JavaScript 面向对象编程学习笔记（一）：封装
最近在学习JavaScript面向对象编程，把学到的知识做一个归纳总结，方便以后随时复习，也希望帮助到学习这部分知识的小伙伴！一、创建对象的原始模式（通过对象字面量方式来创建对象）我们把狗狗看成一个对象，它有名字和颜色两个属性：接下来，我们需要根据上面这个原型对象的规格，生成两个实例对象：ok，以上就是简单的封装，把连个属性封装在一个对象里面。不过，这样的写法有两个缺点，一是...
2018-02-02 21:57:51
271
原创 PHP无限极分类技术（一）——递归无限分类原理
第一章：递归无限分类原理1.什么是递归？递归即程序调用自身的编程技巧称为递归。例如：Function getList($pid){ //定义一个函数..........if($row){getList($pid); //函数中又调用自身，注意:在调用的时候一定要有一个条件判断。}..........return $result;
2017-07-09 15:50:47
3307
原创 php+mysql实现分页
第一步：连接数据库conn.php文件$link=mysqli_connect("localhost","数据库用户名","数据库密码","数据库名");if(!$link){die('could not connect:' .mysql_error());//连接数据库失败}mysqli_query($link,'set names utf8');//设置数据库编
2017-07-05 16:52:17
754
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人