- 博客(35)
- 收藏
- 关注
RSS订阅原创 《Webpack原理与实践》课程之如何使用Webpak实现模块化打包
打包概述Webpack 作为一个模块化打包工具，除了能实现模块化打包的问题，还能在打包过程中通过 Loader 机制编译代码解决兼容性问题以及不同类型的文件（如 css 图片 html等）的打包编译问题，另外，还具备代码拆分能力，将应用中所有的模块按需分块打包，不用担心全部的代码打包到一起，产生单个文件过大，导致加载慢的问题。Webpack 把应用初次加载所必须要用的模块打包到一起，其他的模块再单独打包，后续应用在运行过程中实际需要用到哪个模块再异步加载对应的包，实现增量加载（渐进式加载）。安装we
2021-06-03 17:53:45
313
原创 《Webpack原理与实践》课程之Webpack究竟解决了什么问题
要知道 Webpack 解决了什么问题， 先要对他解决的问题进行了解。先回答我：为什么模块很重要？答：因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！一、模块化演进过程阶段1：文件划分方式每一个功能及其数据状态存放到单独的 js 文件中，约定一个文件表示一个模块，在 html 中用 script 标签引入这些模块，就可以直接在全局使用这些模块中的成员了。缺点：
2021-06-02 19:24:56
347
原创 从源码角度来回答keep-alive组件的缓存原理
今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。01官方API介绍和用法<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在<keep-alive>内被切换，它的 activated 和 deactivated 这两个生命...
2021-01-17 11:31:29
320
原创 面试题：你有哪些性能优化方法
合理减少HTTP请求我们知道从URL输入到页面渲染是一个比较复杂且耗时的过程，这个过程就从HTTP请求开始，比如请求html、css、js和图片。一个完整的HTTP请求会经历DNS查找->TCP3次握手->浏览器发送HTTP请求->服务器接收请求->服务器处理请求并返回响应->浏览器接收响应。减少请求的场景：建立一个HTTP请求是很耗时的，如果传输数据的时间只占整个HTTP请求的比例很小时，可以适当减少请求次数单次请求内容很小的最好合并成一次请求：雪碧图输入查询和
2020-11-29 18:11:54
680
1
原创 一些数组方法的总结
参考MDNArray.from()Array.from() 方法从一个类似数组（伪数组）或可迭代对象创建一个新的，浅拷贝的数组实例。from() 的 length 属性为 1 ，即 Array.from.length === 1。// 从String生成数组Array.from('foo'); // [ "f", "o", "o" ]// 从Set生成数组const set = new Set(['foo', 'bar', 'baz', 'foo']);Array.from(set);
2020-09-13 17:41:34
137
原创 你应该知道的一些数组遍历方法
遍历数组的方法有很多种，传统的有：for、forEach、for-in、 for-of(ES6)，其他的还有：map、reduce、reduceRight、filter、every、some、find（ES6）、findIndex（ES6）参考MDN传统经典for适用于数组和字符串 let arrOrStr = [1, 2, 3, 4, 5, 6]; // let arrOrStr = 'abcdefg'; for(let i = 0, len = arrOrStr.length;
2020-09-06 16:20:34
259
原创 一些数组的操作技巧
工作中大多数情况下都是对数组的操作，熟练掌握数组操作的奇淫技巧，对数组运用自如也能提高工作效率。数组去重（改变原数组）先讲两个ES6时代简单的去重方法，都是用Set结构完成： let letters = ['a', 'b', 'c', 'd', 'c', 'b', 'a']; let uniqueLetter = Array.from(new Set(letters)); console.log(uniqueLetter); let uniqueLetter1 = [
2020-08-09 16:09:54
308
原创 什么是BFC？BFC有什么用？BFC怎么用？
本文首发于 https://lijing0906.github.ioBFC的定义BFC全称“Block Formatting Context”, 中文为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box和Formatting Context的概念。Box：css布局的基本单位Box是CSS布局的对象和基本单位，一个页面是由很多个Box组
2020-08-02 18:56:39
1275
原创 定义变量的var、let和const有什么区别
此文首发于 https://lijing0906.github.io入职两个月了，总结也迟到两个月了。因为疫情的原因，今年的面试大多是远程面试，所以几乎每次面试都有做相应的问题笔记。从这篇博客开始，把面试中问到的问题做个总结，一是复盘面试中自己的问题，二呢也是为以后的面试做准备。参考阮大大的let 和 const 命令作用域ES5只有全局作用域和函数作用域，就会出现内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(
2020-07-26 17:59:51
314
原创 vue源码入门
此文首发于我的个人博客最近工作很忙，终于抽空把一节讲vue源码的录播课看了几遍，跟着视频把笔记做了一部分。笔记放在ProcessOn上了，云笔记，方便查看和编辑。笔记地址...
2019-12-22 23:15:17
174
原创 Promise面试题
此文首发于 https://lijing0906.github.io前面的文章梳理了一下有关浏览器进程、事件循环机制、微任务和红任务、Promise的相关知识，这篇文章想讲讲有关这些知识的一些面试题。参考文章题目一const promise = new Promise((resolve, reject) => { console.log(1) resolve() ...
2019-12-01 20:56:47
285
原创 Promise
上一篇博客讲到浏览器的进程和线程、循环机制、微任务和宏任务，Promise在JS的循环机制中属于微任务,同时也是异步编程的一种解决方案。Promise简介Promise可以看成是一个容器，装着一个异步操作（某个未来才会结束的事件）的结果。Promise操作后返回的对象是一个新的Promise对象，所以支持链式调用，可以把异步操作的流程以同步操作的流程表达出来，避免回调地狱，便于理解和阅读。P...
2019-11-17 19:21:38
318
原创 浏览器进程、JS事件循环机制、宏任务和微任务
此文首发于 https://lijing0906.github.io本想写写Promise的，但是查阅相关博客的时候发现浏览器进程、JS事件循环机制、宏任务和微任务需要提前学习一下，于是有了这篇博客。参考链接区分进程和线程用个形象的比喻：进程是一个工厂，工厂有自己独立的资源工厂之间相互独立线程是工厂中的工人，多个工人协作完成任务工厂内有一个或多个工人工人之间共享空间...
2019-11-10 00:18:36
479
原创 Object.assign的原理及其实现方式
此文首发于 https://lijing0906.github.io上周在总结赋值和深浅拷贝的时候提到了Object.assign这种浅拷贝方式。这周谈谈它的原理以及实现方式。浅拷贝Object.assign上篇文章有讲到它的定义和用法，主要是将所有可枚举属性的值从一个或多个源对象中复制到目标对象，同时返回目标对象。语法如下：Object.assign(target, ...sourc...
2019-11-07 23:02:27
830
原创 赋值、浅拷贝和深拷贝的区别
此文首发于 https://lijing0906.github.io中秋快乐！今天放假，想总结一下赋值、浅拷贝和深拷贝的区别。赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分两种情况：基本数据类型：赋值，赋值后两个变量互不影响引用数据类型: 赋址，两个变量指向同一个地址，同一个对象，相互之间有影响对基本数据类型的赋值，两个变量相互不影响：var a = 1;var...
2019-11-07 23:01:34
247
原创 模拟实现bind()
此文首发于 https://lijing0906.github.io前面已经讨论过bind()的用法，这篇文章一步一步模拟实现bind()。bind特点可以指定this返回一个函数可以传入参数模拟实现第一步Function.prototype.bind2 = function(context) { var self = this; // this是调用bind2的对象 ...
2019-11-07 22:59:13
219
原创 模拟实现call()、apply()
此文首发于 https://lijing0906.github.io之前总结过call()、apply()的区别和应用场景，这次想总结如何模拟实现这两者，其实就是搞懂它们的原理。模拟实现call()var foo ={ value:1}function bar(){ console.log(this.value)}bar.call(foo); // 1call()的两个特...
2019-11-07 22:57:53
226
原创 JS闭包和作用域
此文首发于 https://lijing0906.github.io今天来啃闭包和作用域这块难啃的骨头。什么是闭包闭包是函数和声明该函数的词法环境的组合。 ----MDN闭包就是指有权访问另一个函数作用域中的变量的函数。 ----红宝书什么是作用域作用域是一个变量和函数的作用范围，JS中函数内声明的所有变量在函数体内始终是可见的，在ES6前有全局作用域和局部作用域，但是没有块级...
2019-11-07 22:55:45
243
原创 Object.create()、new Object()和{}的区别
此文首发于 https://lijing0906.github.io平时代码中必定会使用对象，通常是用最直接的字面量方法创建var obj = {}，最近在整理JS继承方式时遇到Object.create()也可以创建对象，另外，也可以用new Object()关键字创建。那这三种方式有差别吗？直接字面量创建var objA = {};objA.name = 'a';objA.sayN...
2019-11-07 22:54:21
3094
1
原创 原型和原型链
此文首发于 https://lijing0906.github.ioJavaScript是一门面向对象的设计语言，在JS里除了null和undefined，其余一切皆为对象，是对象就会有原型、构造函数、原型对象，就会有原型链。之前写javaScript的继承方案时，讲到继承依据的原理就是构造函数、实例对象、原型对象之间的三角关系，这只是原型链上的一小部分。今天详细梳理一下原型和原型链的知识。...
2019-11-07 22:53:16
167
原创 call()、apply()、bind()的区别
此文首发于 https://lijing0906.github.io这周讲讲call()、apply()和bind()的区别。参考链接在javascript中，call()和apply()都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。JavaScript的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改...
2019-11-07 22:50:50
160
原创 JS中的this指向问题
此文首发于 https://lijing0906.github.io在上篇JS继承中涉及到的好几个知识点都想写，比如call()、apply()从而牵出和bind()的区别，由Object.create()想到与new Object()、{}的区别，原型链以及作用域，然而在参考其他博客时发现，应该先把JS中的this指向弄明白。《你不知道的JavaScript》(上卷)第二部分讲到了this，...
2019-11-07 22:48:36
245
原创 javaScript的继承方案
此文首发于 https://lijing0906.github.io从创建这个博客开始，第一篇博客是2018.07.10，到今天2019.07.20已经整整一年了，回头看博客的数量才寥寥11篇，平均一个多月才一篇，汗颜！最近有换工作的想法，但又觉自己的一些基础知识不牢固，同时这些基础知识也是面试中会考察的，所以给自己定下一个小目标，每周总结一篇面试中会考察的知识点，一为巩固知识，二为准备面试，...
2019-11-07 22:36:41
145
原创 vue混入mixins用法小结
此文首发于 https://lijing0906.github.io距离上次更新博客将近半年了，因为年后开始做一个大项目，多个产品经理各自负责一个或多个模块，一个模块相当于之前项目的整体。这次我一个人做一个模块，压力有些大，每天只想着把功能做出来，没有时间总结。此次的一个大项目中用到了vue的混入（mixins），业余时间记录下来它的用法为什么要用混入（mixins）页面中频繁使用某一种功...
2019-11-03 10:59:10
426
原创 webpack3.x+vue2.x+sass项目中，sass提取全局引用
此文首发于 https://lijing0906.github.io接近年底，工作没有那么忙，业余时间就比较多了，就想着把小demo整合到一起，自己搭建一个项目。在网上找了两篇博客作为参考：在vue中使用sass的配置的方法、vue引入sass全局变量基础依赖包安装安装sass-loader和node-sass(sass-loader依赖于node-sass)。-D是–save-dev的缩...
2019-11-03 10:54:39
791
原创 EChartsLineBar
此文首发于 https://lijing0906.github.iooption.tooltip.formatter: function(params) { let res = `${params[0].axisValue}：<br>` for (let i in params) { res += `${params[i].marker}${param...
2019-11-03 10:47:12
217
原创 CSS3过渡和动画
此文首发于 https://lijing0906.github.io最近的一个项目的首页参考了两个网站的动画效果智能运维,圆球一直匀速旋转。百度智能运维,背景图片一直匀速来回移动，鼠标移入时标题和渐变小条分别往上和往下匀速移动到固定的某一位置，同时中间的简介显示，鼠标移出匀速回到初始状态。代码实现HTML<div id="testPage"> <div...
2019-11-03 10:41:24
258
原创 elementUI 2.0.11自定义表头
此文首发于 https://lijing0906.github.io目前所做的项目都是后台管理系统，前端框架用的VUE，为了开发速度快，我们都会选择合适的组件库。诶！饿了么团队开发的elementUI就被我们选中啦。用起来还是很顺手的，后台系统的基本功能都有示例代码，很方便，但是有些特殊的功能没有示例代码，只是文档中有简单的说明，这个只能去网上搜索一些大神的博客来帮忙啦。因为所用的版本是2....
2019-11-03 10:34:37
293
原创 vue的过渡小记（多元素、多组件）
此文首发于 https://lijing0906.github.io网页中，一般都存在切换的场景，vue提供了一个简单的切换过渡效果，用< transition>标签包裹要切换的部分即可。多元素过渡绑定keyvue官网上有写到：当有相同标签名的元素切换时，需要通过***key***特性设置唯一的值来标记以让vue区分它们，否则vue为了效率只会替换相同标签内部的内容。即使在...
2019-11-03 10:25:01
133
原创 vue2.x中的：is和is的区别
此文首发于 https://lijing0906.github.io最近，工作之余在翻阅vue.js的官方文档，在查看到动态组件和解析 DOM 模板时的注意事项的时候，讲到一个特殊的is特性，觉得很有意思，就来写一篇自己理解的总结。现场写栗子实践其实看过之后，其实是有点懵的，这两个有啥区别，怎么用呢？仔细分析，没那么难懂，参考这篇博客，我们也写一个栗子来试试我们平时用局部注册的情况...
2019-11-02 02:31:36
516
原创 JS字符串编码
此文首发于 https://lijing0906.github.io最近在工作中遇到一个bug:背景新增或者编辑标签时，输入框失焦时需要校验标签名是否与已有标签名重复，而标签名只有字数限制（1-10个字符）。问题校验的接口是get请求，当标签名以“#”、“&”结尾时，会出现一点小问题：比如已存在名为“aa”的标签，当输入“aa#”或“aa&”（这两个标签名不存在）失焦校验...
2019-11-02 02:25:01
576
原创 vue2.x的监听watch小爆料
此文首发于 https://lijing0906.github.io跟vue相爱相杀这么久了，今天第一次来爆点小料(主要还是为自己做笔记)------vue2的watch监听路由监听,也适用于普通变量（基本数据类型）的监听一、写法一,普通监听 watch: { $route(nVal, oVal){ console.log(nVal) //打印...
2019-11-02 02:22:51
300
原创 hexo主题更换以及怎么写博客
此文首发于 https://lijing0906.github.io默认的hexo主题我个人觉得不是很好看，必须得挑一款适合自己风格的主题写博客需要懂一些Markdown语法，so easy的啦，网上一搜一箩筐的语法博客(只能帮你到这儿了)主题修改一、找一个能折腾的主题hexo官网上有很多主题可供选择，个人建议，刚开始做的时候选择一些简单的主题来折腾，会没那么折腾我找了很久，找到一个简...
2019-11-02 02:18:45
943
原创 hexo+github搭建静态博客之初体验
终于把hexo静态博客搭好了，但这还只是第一步，革命尚未成功，妹子仍需努力呀！第一篇博客那当然要写写我是怎么搭建这个博客的，为了篇幅小一些，这篇只讲简单的搭建和部署到gitHub上。下面进入正题：看看移动端效果吧，下图是我修改了主题、写了两篇测试文章之后的效果：准备工作想必看到这篇文章的你一定也是代码的搬运工，准备工作以及一些命令或术语就不多赘述一、github & gitb...
2019-11-02 02:01:25
173
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人