自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Carol的小星球

这是一个正在努力的程序媛的博客,记录一些学习前端的日常。

  • 博客(23)
  • 收藏
  • 关注

原创 移动端适配之脚本的加载控制

我在写项目的时候,会把一些特效用script脚本加载进来,这样在网页上看起来就非常漂亮,但是放在移动端,不仅消耗性能,而且非常的丑。于是我经过学习,发现可以这样来控制是否加载script。拿我用的CDN上的蜂窝特效举例:<script src="canvas-nest.min.js" type="text/javascript"></script>这是一开始我的写...

2018-12-29 16:54:52 100

原创 记一次项目上线过程

以前嫌麻烦,自己写了很多小demo,却从未考虑过上线给其他人使用。后来有一个面试官告诉我,你身为开发,做出来的项目就是要给别人用的。于是后来我买了一个阿里云的学生服务器,也很便宜,一个月9.5。然后为我的博客买了一个域名,开始了学习上线之路。1.首先记得要把前端项目里面的baseURL加入线上环境的URL,这个操作可以用webpack提供的功能实现比如我的:const baseUrl = p...

2018-12-28 16:36:33 131

原创 如何在Vue项目中实现吸顶元素

我的思路就是判断合适的时候将这个元素的position设为fixed,那么这个合适的时机如何判断呢?我们可以计算页面滚动的距离。监听页面滚动状态在mounted回调中加入以下代码:mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll); },在destr...

2018-12-26 15:13:00 1747

原创 图的最短路径-Dijkstra算法和Floyd算法

Dijkstra算法单源点最短路径问题Dijkstra算法主要用来解决单源点最短路径问题。给定带权有向图G=(V,E),其中每条边的权是非负数。另外,还给定V中的一个顶点,称为源。现在要计算从源到所有其他各顶点的最短路径长度,这里路径的长度是指路径上各边权之和。这个问题通常称为单源最短路径问题(Single-Source Shortest Paths)。应用实例——计算机网络传输:怎样找到...

2018-12-26 15:02:00 493

原创 图的BFS和DFS算法

图图是一种灵活的数据结构,一般作为一种模型用来定义对象之间的关系或联系。对象由顶点(V)表示,而对象之间的关系或者关联则通过图的边(E)来表示。图可以分为有向图和无向图,一般用G=(V,E)来表示图。经常用邻接矩阵或者邻接表来描述一副图。在图的基本算法中,最初需要接触的就是图的遍历算法,根据访问节点的顺序,可分为广度优先搜索(BFS)和深度优先搜索(DFS)。下文都是对该例图进行操作:...

2018-12-26 11:25:54 209

原创 基于Vue.js+Koa+MySQL开发的个人博客

我的博客一直以来都想自己做一些个人项目, 于是想到了先做一个博客项目练练手。在GitHub上找了很多大神的开源博客项目来学习,慢慢的自己也完成了一个简单版本的博客,并部署上线。目前项目已经全部部署到服务器,但域名还在备案,因此只能先通过IP地址访问。线上地址前端项目后端项目因为我做的这个项目功能并不复杂,所以非常适合大家用来练手哦,如果觉得有帮助欢迎给个star,感谢!设计参照了h...

2018-12-23 00:49:41 925

原创 TypeScript总结

TypeScript主要是为了解决JavaScript的弱类型和没有命名空间的特点。JS作为弱类型语言,好处就是编译的时候更简洁更灵活,但对于大型项目,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误。在语法上,TypeScript并没有摒弃JS语法,而是做成了JS的超集,因此任何JS语句在TypeScript下都是合法的。安装通过npm安装npm install -g type...

2018-12-18 10:39:35 236

原创 浏览器内核总结

TridentMicrosoft公司浏览器内核,IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0)及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。GeckoFirefox内核,Netscape6开始采用的内核,后来的Mozilla FireFox(...

2018-12-15 01:05:37 47

原创 vue的生命周期

就是vue实例从创建到销毁的过程。创建前/后:beforeCreated:此时vue实例还没有挂载元素$ el,data也是undefinedcreated:vue实例的data有了,但是$ el没有。载入前/后:beforeMount:vue实例的$el和data都初始化了,但是还挂载在之前的虚拟DOM节点上,data.message还未替换。mounted:vue实例挂载完成,da...

2018-12-13 18:55:43 115 1

原创 vuex的使用详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理。简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。vuex的五个对象state:存储状态。也就是变量;定义new Vuex.Store({ state: { allProducts: [...

2018-12-13 18:39:51 114

原创 MVVM、MVC、MVP之间的区别

MVC、MVP及MVVM都是一种架构模式,都是用来解决界面呈现和逻辑代码分离而出现的模式。MVC实线表示调用,虚线表示事件通知。Model:是程序需要操作的数据以及数据的处理方法。View:它是提供给用户的操作界面。Controller:页面的业务逻辑,接收View层传递过来的指令,选取Model层对应的数据,进行相应操作。MVC是单向通信的。用户对View的操作交给了Contro...

2018-12-13 17:37:55 127

原创 JavaScript中各种遍历方法的总结

for最基础的循环for…in可以用来遍历对象var o ={ name:"jack", age:20, city:"beijing"};for (var key in o){ alert(key) //"name","age","city"}for…of可以遍历所

2018-12-13 16:52:53 73

原创 ES6中的Set和Map

SetSet是ES6中提供的一种新的数据结构。类似于数组,但是成员值都是唯一的,不会重复。它本身是一个构造函数,生成Set数据结构。var s=new Set();属性:Set.prototype.constructor:指向构造函数SetSet.prototype.size:返回set实例的成员总数方法:add(value):添加value,并返回Set结构本身delete(...

2018-12-13 16:32:10 38

原创 CSS三列布局总结

三列布局就是左右两栏定宽且不一定相等,中间一栏自适应。有以下几种方法:1.圣杯布局2.双飞翼布局3.弹性布局4.绝对布局

2018-12-13 15:26:22 82

原创 CSS两列布局总结

两列布局是左边一栏定宽,右边一栏自适应的布局。有以下几种实现方法:1.左边向左浮动,右边设margin-left2.左边绝对定位,右边设margin-left3.加一个父级flex容器,右边flex:14.左边向左浮动,右边触发BFC...

2018-12-13 14:37:34 471

原创 webpack详解

webpack是什么现在的web应用都拥有着复杂的代码和一大堆依赖包,为了简化开发,也出现了很多好的应对措施:模块化可以让复杂的程序细化为小的文件,还有TypeScript、Sass、less这类预处理语言可以简化编写。但是这些方法都不能直接被浏览器识别,这时webpack这类工具就提供了帮助。Webpack是一个模块打包器,他可以递归的打包项目中的所有模块,将项目中的一些浏览器不能直接运行的...

2018-12-13 01:23:35 89

原创 CSS盒模型及边距重叠

盒模型由content,padding,border,margin组成。两种模型W3C标准模型和IE模型。在标准模型中,盒的宽高只是内容的宽高。在IE模型中宽高是content+padding+border的宽高。如何设置通过设置box-sizing:content-box/border-box;边距重叠两个box都设置了边距,垂直方向上两个box的边距会重叠,以绝对值大的为最...

2018-12-13 00:20:03 167

原创 JavaScript数组扁平化

数组扁平化,也就是把包含几个嵌套数组的数组转化成一个一维数组。有以下几种方法:1.reduce遍历数组每一项,若值为数组就递归遍历,否则cancatfunction flatten(arr) {return arr.reduce((result, item)=> {return result.concat(Array.isArray(item) ? flatten(item) : ...

2018-12-13 00:06:56 191

原创 JavaScript柯里化

柯里化就是分批接受参数,不会立刻求值,而是到了需要的时候才去求值。主要用于数据量非常大的情况。在形式上,柯里化就是把接收多个参数的函数变为接收单一参数的函数(需要柯里化的函数的第一个参数),并且返回一个接收剩下的参数并返回结果的新函数。本质上,柯里化利用的是闭包。例如一个加法函数:function add(x,y){ return x + y;}add(3,4);//5将它...

2018-12-12 23:49:49 120

原创 防抖和节流

防抖(debounce)和节流(throttle)是针对响应跟不上触发频率这类问题的两种解决方案。防抖(debounce)当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作(用于搜索输入)function debounce(fn, delay) { // 维护一个 timer,用来记录当前执行函数状态 let timer = null;...

2018-12-12 23:45:15 53

原创 bind()的原生实现

bind()方法创建并返回一个新的函数,当被调用时,将其this设为bind()的第一个参数。自己实现一个bind()1.因为bind方法不会立即执行函数,需要返回一个待执行的函数(这里用到闭包,可以返回一个函数)return function(){}2.作用域绑定,可以使用apply或者call方法来实现3.参数传递,需要用apply或call传递数组this.value = 2va...

2018-12-12 22:58:54 51

原创 CSS3 Animation

关键帧(@keyframes)关键帧定义动画不同阶段的状态。当我们在定义不同关键帧,元素属性的个数是一个变化的值。如果一个关键帧的属性,没有出现在其他关键帧的时候,那么这些属性将会使用上一帧的默认值。区别在于,缺省之后的渐变效果是不会出现的。@keyframes dropdown { 0% { top: 0; } 30% { top: 300px; } 50% {...

2018-12-04 23:04:21 38

原创 koa2+MySQL搭建

搭建koa2项目安装koa脚手架命令行运行npm install --save koa-generator生成koa项目koa my-koa2安装依赖cd my-koa2npm install启动项目npm start配置数据库信息在config文件夹新建default.js,用于配置数据库信息const config = { //启动端口 port: 808...

2018-12-04 19:51:38 1722

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除