- 博客(95)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Webpack4系列教程 --- 前言
写在前面在学习了webpack4一段时间后，个人感觉webpack4的知识点实在繁杂。所以这个教程我并不打算按照一个个知识点拆开来讲，而是按照相关性来讲解。参考教程慕课网 《四大维度解锁 Webpack3 前端工程化》董沅鑫大神webpack4系列教程序章Webpack4系列教程(一) 基础入门Webpack4系列教程(二) HTML相关Webpack4系列教程(三) CSS相...
2018-12-21 19:47:41
266
原创 Webpack4系列教程(七) 单页面解决方案
写在前面本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。优势通过代码分割和代码懒加载，我们可以让用户在更短的时间内去看到他想要的页面目前webpack针对此项功能提供 2 种函数：require.ensure(): 引入但...
2018-12-26 10:59:48
321
原创 Webpack4系列教程(六) 多页面解决方案
写在前面在这篇博客中，我将会你介绍多页面解决方案基本配置目录结构代码module.exports = { entry: { pageA: './src/pageA.js', pageB: './src/pageB.js' }, output: { filename: '[name].bundle.js', ...
2018-12-25 10:59:23
538
原创 Webpack4系列教程(五) 图片相关配置
写在前面在这篇博客中，我将会你介绍图片处理部分的相关配置基础配置CSS中引入图片需要使用file-loader首先我们把一些图片放在src/assets/imgs目录下，并且引入这些图片然后我们配置一条rule：图片文件交给file-loader处理{ loader: 'file-loader', options: { outputPath: '...
2018-12-24 14:41:49
620
原创 Webpack4系列教程(四) CSS相关配置
写在前面在这篇博客中，我将会你介绍CSS部分的相关配置基本配置我们先看一下目录结构然后，我们在入口文件index.js中引入base.less文件import './css/base.less';这样子是不行的。我们知道，webpack是只能识别JS的，对于Css及Less的处理，我们需要借助相应的loader我们安装这几个loadercnpm i -D less less...
2018-12-22 16:38:22
1350
原创 Webpack4系列教程(三) JS相关配置
写在前面在这篇博客中，我将会你介绍JS部分的相关配置基本配置我们先看一下目录结构打包时，根据entry配置entry: { index: './src/index.js' }并且我们在入口文件里引入了文件base.jsrequire('./common/base.js');console.log('我是入口文件');首先会执行base.js，然后执行index.js，...
2018-12-21 20:51:57
290
原创 Webpack4系列教程(二) HTML相关配置
写在前面在这篇博客中，我将会介绍webpack4中有关html部分的相关配置在上篇文章中，我已经介绍了output是打包的入口，但是我们知道打包后的文件是js文件，而我们访问网站的时候首先访问的是html文件。我们当然可以在打包后的文件夹里（这里是dist目录）创建一个html文件，然后把打包好的js挂载到html上。但我们不必这样做，借助一个html插件即可完成html-webpack...
2018-12-21 20:25:50
311
原创 Webpack4系列教程(一) 基础入门
写在前面在这篇博客中，我将会介绍webpack4的基本配置安装与配置首先我们要安装相关环境cnpm i -D webpack webpack-cli目录结构如下webpack.config.js 是默认的配置文件，我们写下最基本的配置module.exports = { entry: { index: './src/index.js' }, ...
2018-12-21 20:00:41
535
原创 JS基础 ---事件
事件分类a.窗口事件,只在body和frameset元素中才有效onload 页面或图片加载完成时onunload 用户离开页面时b.表单元素事件,在表单元素中才有效onchange 框内容改变时onsubmit 点击提交按钮时onreset 重新点击鼠标按键时onselect 文本被选择时onblur 元素失去...
2018-10-14 16:21:11
233
原创 JS设计模式（二）--- 单例模式
我们继续说小明那个例子上次说到小明买回了所有的东西，书院的先生一看账单：￥4386虽然觉得这钱花的有点多，但这一次的采购还是要交给小明去做先生说：小明啊，我给你一个账单，你每买一件商品都要在这个账单上写上，并让老板签字class Order { constructor() { this.goodList = []; this.total = 0;...
2018-10-06 10:48:51
267
原创 JS设计模式（一）--- 工厂模式
故事的开头是这样子的…在很久很久以前，有一个学生叫小明有一天，老师对小明，小明啊，你去给班上买一个篮球，一个足球，一套积木和一套乐高class Good { constructor(name, price) { this.name = name; this.price = price; } showInfo() { ...
2018-10-06 10:35:28
306
转载 JS基础 --- String方法大全
var str="panini";1.toLowerCase(): 把字符串转为小写，返回新的字符串str = "Panini";var str1=str.toLowerCase();console.log(str); // Paniniconsole.log(str1); // panini2.toUpperCase(): 把字符串转为大写，返回新的字符串str = "pan...
2018-09-19 15:22:41
292
原创 算法基础 --- 日常总结
二分查找function binarySearch(arr,value){ let left = 0; let right = arr.length - 1; let middle; while(left <= right){ middle = left + (right - left) / 2; if(arr[middle...
2018-09-15 17:13:34
183
转载 算法基础 --- 十大排序
排序算法导图 稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面； 不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面； 内排序：所有排序操作都在内存中完成； 外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行； 时间复杂度: 一个算法执行所耗费的时间。 空间复杂度: 运行完一个程序所需内存的大小...
2018-09-13 15:37:39
246
原创 算法基础 --- 从swap开始
需求： 输入a b 输出 b a常规交换 /* *临时交换 *优点：没有缺陷 *缺点：需要临时变量 */ function tpSwap(a, b){ let tmp = a; a = b; b = tmp; }加减交换 /* *算术交换 *优点：不需要借助临时变量 *缺点：a+b不能溢出 */ function...
2018-09-13 09:26:28
280
原创 前端性能优化 --- 懒加载&预加载
前端性能优化学习笔记四懒加载有些资源文件不需要在页面渲染时就缓存下来 在电商网站中，一个页面可能很长，需要加载很多张图片，这时候可以利用懒加载的策略来处理：只缓存可视区域的图片，当页面下拉时，再加载新的图片。预加载有些资源文件页面渲染时并没有引用到但是需要预先缓存下来 有这样一个情景：当某个图片hover时会变成另一张图片。而那张图片并没有被预先缓存下来，hover的一...
2018-08-29 18:56:36
533
原创 前端性能优化 --- css和js的装载与执行
前端性能优化学习笔记三一个网站在浏览器端是如何进行渲染的呢？HTML渲染过程的一些特点顺序执行、并发加载用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件，浏览器根据词法分析从上往下解析html 发现<head>标签内有一个<link>标签引用外部CSS文件，浏览器又发出CSS文件的请求，服务...
2018-08-29 16:20:09
409
原创 前端性能优化 --- 图片优化
前端性能优化学习笔记二图片的区别jpg：有损压缩，压缩率高，不支持透明 png：支持透明，浏览器兼容好png8 —— 256色 + 支持透明png24 —— 2^24色 + 不支持透明png32 —— 2^24色 + 支持透明 webp：压缩程度更好，在ios webview有兼容性问题 svg：矢量图，代码内嵌，相对较小，图片样式相对简单的场景CSS雪碧...
2018-08-29 13:38:55
316
原创 前端性能优化 --- 资源合并与压缩
前端性能优化学习笔记一资源压缩前端代码中，结构清晰，有一些空格换行符在开发时很有必要。但是浏览器是不需要结构清晰，而除去不必要的空格和注释可以减小代码量，减小资源请求。资源合并每个浏览器请求的过程都是非常耗时的，请求一个100KB的文件要远比请求两个50KB的文件来的快。 同时，浏览器每次的请求数是有限的，chrome是5个。 如果有6个请求，第一次请求队列的第二个请求...
2018-08-29 11:39:37
423
原创 CSS布局 --- 等宽&等高布局
网易云课堂学习笔记三：等宽&amp;amp;等高布局等宽布局float+box-sizingDOM结构&amp;lt;div class=&quot;row&quot;&amp;gt; &amp;lt;div class=&quot;col&quot;&amp;gt;1&amp;lt;/div&amp;
2018-08-25 17:44:41
2008
原创 CSS布局 --- 自适应布局
网易云课堂学习笔记二：自适应布局定宽+自适应&lt;div id="app"&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;div class="right"&gt;&lt;/di
2018-08-25 16:54:40
219
原创 CSS布局 --- 居中布局
网易云课堂学习笔记一：居中布局水平居中 子盒子的宽度由内容决定&lt;div class="sup"&gt; &lt;div class="sub"&gt;我是子盒子&lt;/div&gt;&lt;/div&gt;1.text-align+inline-block.s
2018-08-24 17:30:07
279
原创 日常总结 --- 视频播放按钮
设计 需求： 视频播放按钮居中，hover时样式变化结构.video_open { position: absolute; left: 50%; top: 50%; margin-left: -43px; margin-top: -43px; width: 86px; height: 86px; cursor...
2018-08-23 20:36:43
836
原创 日常总结 --- hover图片变化效果
设计 需求：hover时，背景层变化，同时文字层动态上移，出现箭头按钮结构&lt;ul&gt; &lt;li&gt; &lt;div class="bg"&gt;&lt;/div&gt; &lt;div class="txt"&a
2018-08-23 20:28:26
1735
转载 CSS进阶 --- BFC
BFC (Block formatting context) “块级格式化上下文” 它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。 转载自 前端精选文摘：BFC 神奇背后的原理触发条件根元素，即HTML元素 float的值不为none overflow的值不为visible display的值为inline...
2018-08-16 16:15:59
240
转载 JS进阶系列 --- 继承
继承分类先来个整体印象。如图所示，JS中继承可以按照是否使用object函数（在下文中会提到），将继承分成两部分（Object.create是ES5新增的方法，用来规范化这个函数）。其中，原型链继承和原型式继承有一样的优缺点，构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create, 同时优化了组合继承，成为了完美的继承方式。ES6 Class Extends的结果与...
2018-08-05 23:28:13
313
原创 JS进阶系列 --- ajax请求优化
写在前面 我们都知道，前端和后端沟通的桥梁是ajax请求接口，前台通过接口传给后台参数，后台根据参数通过接口返回数据给前台。 那么，这些接口要怎么设计才完美高效呢？场景一A页面有个登录的需求，我们给A页面造个接口：doUserLogin: function() { this.axios.get('user/login') .then(res =&gt; ...
2018-08-05 20:14:52
982
原创 React学习笔记
1.从hello，world开始&amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;reactContainer&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&a
2018-08-01 21:40:38
225
原创 Vue进阶系列 --- 页面架构优化
写在前面 玩vue已经快一年了，回首第一次遇见vue的时候，还是大二的暑假，一晃已经走完了大三。我们都知道编程的学习是分软功和硬功的。外练筋骨皮，内练一口气就是这个道理。 那么什么是硬功呢？硬功就是Vue语法的掌握，JS语法的掌握等等。 那么什么是软功呢？算法思想，编程思想，架构思想。 思想思想，对咯，软功就是思和想。一个没有思想的程序员，只知道重复搬砖，不知道造轮子，组...
2018-07-08 22:17:40
7369
2
原创 JS进阶系列 --- toString
写在前面在看这篇博客之前，以下几个知识点的学习有助于你的理解 JS进阶系列 — 原型 JS进阶系列 — call&amp;amp;amp;amp;apply我们知道，在JS世界中，站在最顶端的人是Object。他颁布了JS的两个法令：toString和valueOf，下面的人必须服从这两个法令。但是不同的区域不同的民情，每个区域的Boss又重写了这两个法令。我们这篇博客先看看第一个法令：toString直...
2018-06-09 21:35:51
326
原创 JS进阶系列 --- 特效
JavaScript-Magic这篇博客，是我总结的JavaScript特效demo，有相应的页面展示和页面代码。长期更新，欢迎收藏展示页面帕尼尼的JavaScript特效初级特效列表筋斗云导航栏 鼠标跟随 放大镜 滚动条 垂直滚动条 顶部栏固定 广告跟随中级特效列表待更新高级特效列表待更新...
2018-06-07 10:49:26
1130
1
原创 JS进阶系列 --- offset&scroll&client
Offsetoffset这个单词本身是–偏移，补偿，位移的意思。 js中有一套方便的获取元素尺寸的办法就是offset家族； offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent共同组成了offset家族offsetWidth和offsetHight （盒子盒模型的宽/高）这两个属性，他们绑定在了所有的节点元素上。获...
2018-06-03 19:55:11
258
转载 JS进阶系列 --- 严格模式
//f1.js'use strice'; //整个js文件都是严格模式下执行的var n = 1;var foo = function(){...};//...var n = 1;var foo = function(){ 'use strict'; //在foo函数内是严格模式 //some code...}严格模式下, delete运算符后跟随非法...
2018-05-31 10:23:42
272
原创 JS进阶系列 --- typeof&instanceof
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的 typeof用于判断值类型，instanceof用于判断引用类型typeof语法：typeof type 参数：type（要检测的类型）typeof 一般只能返回如下几个结果：”number”、”string”、”boolean”、”object”、”function” ...
2018-05-30 17:31:59
258
转载 JS进阶系列 --- this
在此再强调一遍一个非常重要的知识点：在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。this的取值，分四种情况。我们来挨个看一下情况1：构造函数所谓构造函数就是用来new对象的函数。其实严格来说，所有的函数都可以new一个对象，但是有些函数的定义是为了n...
2018-05-30 16:40:29
1004
转载 JS基础 --- 正则
为啥要有正则表达式呢？其实就是因为计算机笨（这话不是我说的），比如[email protected]，我们一看就是邮箱，可是计算机不认识啊，所以我们就要用一些计算机认识的语言，来制定好规则，告诉它符合这个规则的就是个邮箱，这样计算机就能帮我们找到对应的东西了。所以正则就是用来设置规则，来完成我们需求的一些操作的，比如登录验证啦，搜索指定的东西啦等等，说太多都是多余，直接看正题吧。
2018-05-08 21:02:23
268
原创 webpack3学习笔记
何为webpack webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。webpack初体验命令：webpack 被打包目录 打包目录本地安装webpack，创建两个文件夹：src开发目录，dist生产目...
2018-05-04 17:53:37
365
原创 帕尼尼的前端项目大全
写在前面 如果你和我一样是初窥前端的一个怀抱梦想的初学者，我希望我走过的这段路能对你有些许的启示，让你对前端收获一点感悟。 如果你是一个前端的大牛，也由衷的希望你能留下些许的指教。在这篇博客中，我会列出我目前已完成的前端项目的演示地址和git地址。欢迎start和fork 希望对你有所帮助，也请你提出指教项目列表vuejs+koa2+mysql全栈开发个人博客演...
2018-05-04 10:53:15
762
原创 vuejs+koa2+mysql全栈开发个人博客(四) —— 后台操作权限
在这篇博客中，我将会详细介绍这个博客搭建的第三个技术要点： 后台操作权限我们知道，有些api是游客可以使用的，比如查看一篇博客，根据分类查看博客等等，但是有些api是博主才能使用的，比如增删改一篇博客。那么我们如何区分开来呢？我们创建了两个axios对象const back = axios.create(); //后台axios实例const front = axios.c...
2018-04-28 16:37:18
1170
jquery+bootstrap 实现简单备忘录
2017-09-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人