小bearBear-CSDN博客

原创 Webpack Loader 学习笔记

loaderloader就是集成到webpack的文件处理方法，这些loader在webpack打包过程中，可以对指定类型的文件进行相应的处理。loader优先级问题：（1）配置项module的rules中同一个test下的use中的loader的优先级：优先处理的loader放在配置数组的后面，见下面的对scss的处理。{ test: /\.scss$/, ...

2018-08-07 11:11:04 518

原创理解cookie、session、localStorage、sessionStorage之不同

平时经常会把前端浏览器的几种缓存方式拿来作比较， cookie localStorage sessionStorage 直接上一张图，一目了然这次主要来说说cookie和session的区别cookiecookie可以在前后端进行用户的身份认证，标记用户。说到为什么要使用cookie，那得说到http。话说，http是一种无状态的协议，它的无状态可以用翻脸不认人（浏览...

2018-08-03 19:41:19 40153 3

原创函数节流与函数防抖的区别

函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案，但是经常傻傻分不清楚。。。这不，在项目中又用遇到了，在此处记录一下函数防抖 debounce原理：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！！！！！！！！！！)。举个栗子：滚动scroll事件，不停滑动滚轮会连续触发多次滚动事件，从而调用绑定的回调函数，我们...

2018-08-03 17:56:26 22993 1

原创 vue生命周期钩子函数详解

先放一张官网生命周期图： vue有8种生命周期函数：钩子函数触发的行为在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。加loading事件 created vue实例的数据对象data有了，$el还没有结束loading、请求数据为mounted...

2018-07-26 11:12:03 92375 9

原创微信小程序：wx.navigateTo从子页面跳回父页面，页面不刷新的问题

先简要说说小程序的生命周期：应用的生命周期：App({…}) 用来注册小程序，指定小程序的生命周期页面的生命周期：Page({…}) 注册页面，指定页面的生命周期具体注册函数的内容见小程序官网API其中有三个生命周期函数的触发顺序：onLoad->onShow->onReady （页面加载->页面显示->页面初次渲染） onLoad和onReady每个页面...

2018-07-23 09:46:43 18565 6

原创微信小程序：scroll-view组件滑动多次触发scroll事件的bug解决

在项目开发过程中，组件是微信小程序提供给我们的一个分页器，一般滑动到底部时会触发scroll事件，scroll事件中往往包含对后端数据的请求；若是还未滑动到底部时频繁触发事件，则会频繁发请求，达不到想到的分页效果。先来说说的用法<scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold...

2018-07-23 09:29:13 12106

原创 git常用指令归纳及理解

git status 查看本地可提交的文件（做出了修改的文件） git add . 或git add 文件名将修改从工作区提交到暂存区（生成快照），等待被提交 git rm –cached 文件名将文件还原为未暂存状态 *只有在暂存区中的文件才可以被提交 Git在未进行commit操作之前，存在三种状态：Untracked files，Changes not staged for ...

2018-07-16 10:00:32 177

原创 webpack打包之框架代码与业务代码拆分

why框架代码与业务代码要拆分单独打包类库文件原因：框架代码稳定性比较高，而业务代码更新迭代快，希望浏览器尽可能长的时间对框架代码进行缓存来减少服务器流量，让用户加载速度更快。方法在entry中设置框架代码放置的文件config.entry = { app: path.join(__dirname, 'src/index.js'), ...

2018-07-14 11:15:13 2968

原创 webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack打包环境优化的一个点：将css样式代码抽离出来。若不抽离，可以在bundle.js中发现css代码被转化成节点样式插入到了body下；这个过程是：style-loader将外部css文件注入到html中，css内容使用css-loader进行解析，转化成js文件；因为webpack只能识别js文件。 css分离：使用extract-text-webpack-plugin插件...

2018-07-14 10:55:21 11075 4

前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...

2018-07-14 10:16:13 140273 14

原创 js设计模式——代理模式proxy

什么是代理模式代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。（可以想象一下明星与经纪人的关系，明星是请求的本体，经纪人就是代理proxy）如何实现代理模式代理对象内部含有对本体对象的引用，因而可以与调用本体的相关方法；同时，代理对象提供与本体对象相同的接口，方便在任何时刻代理本体对象。例子（上代码）代理模式的变体有很多，有：保护代理、虚拟代理、缓存代理、防火墙代理、远程代理、智能...

2018-04-14 12:10:05 6146

原创 js设计模式——发布订阅模式

什么是发布订阅模式发布订阅模式又叫观察者模式，定义的是对象间一对多的依赖关系。当对象A的状态发生改变时，所有依赖于对象A的其他对象都会收到通知，并触发他们各自的回调函数。其中，对象A就是发布者，其他对象就是订阅者，类似于A像其他对象推送消息。JS中的事件机制就是发布订阅者模式的体现。发布订阅模式的特点优点：（1）时间上的解耦（2）对象上的解耦缺点：（1）创建...

2018-04-10 22:00:28 1104

原创 js设计模式——单例模式

设计模式是针对面向对象而言的，如何封装类，实现复用、可扩展。最近学习了单例模式，记录一些自己的看法。单例的特点：（1）生成单例的类必须保证只有一个实例存在；（2）类本身要完成初始化工作；（3）通过类本身定义的静态方法getInstance()来获取唯一实例的引用。设计思路：一个类能返回唯一实例的引用和获得该实例的静态方法getInstance()；当调用该方法时，如果唯...

2018-04-09 16:38:28 219

原创仿豆瓣APP项目之二：Vue全家桶的使用

二、Vue全家桶的使用1、vue框架vue框架的重点在于组件化和可重用性。一般vue写的组件分为两类：（1）业务型组件（直接视图层）；（2）通用型组件一定要将组件挂载到根组件上。vue写组件根据组件最最重要的是直线组件间的通信，如何实现组件间的通信呢？？有四种方式：（1）通过props属性这一方法主要是实现父子间组件的通信直接在父组件的<子组件 props=''>这种方式给子组件传值p...

2018-02-26 21:44:40 1631

原创仿豆瓣APP项目之一：前后端交互

一、前后端的交互1.登录使用mock.js模拟登录数据以及登录时的请求网址，使用axios模拟登录请求过程。关于mock.js首先在项目的main.js根文件中引入自己写的mock文件夹import '@/mock/index.js' // 该项目所有请求使用mockjs模拟再在mock的index主文件中运入mockjsimport Mock from 'mockjs'import loginA...

2018-02-26 21:42:52 1199

原创静态网页制作的小技巧之一

作为一只刚入门不久的程序员菜鸟，在刷了百度前端学院的两个任务后，得出了一些学习心得。一下的内容是浅显的，若有不足的地方，希望大家能够批评指正；也希望下面的内容可以对刚入门的人有所帮助。关于div的使用：首先对网页要有一个宏观上的设计想法，将网页内容用div进行分块处理，有时为了处理方便，可以用div包裹div。关于无序列表ul li的问题：对ul使用disp

2017-05-25 10:17:18 1491 2

小熊的博客