- 博客(45)
- 收藏
- 关注
RSS订阅
原创 项目模版封装优化及管理（vant,element,antdV,小程序）
1.模板管理1.1 yeoman-environment插件基于yeoman-generator 、yeoman-environment插件，将各类基础模板（vant、antdV、element、eapp）等做成基础模版，并可将该模版上传至npm进行管理。参考链接：https://www.npmjs.com/package/generator-yo-template2.模板生成2.1 平台创建项目（前置条件--未完成）通过平台（类钉钉DBase）录入项目信...
2020-07-09 09:46:06
946
原创 vue-cli4 && webpack高效框架（开箱即用vant版，打包仅28kb）
git demo地址：github地址element版本传送门本项目采用vue-cli 4 搭建 使用全局样式库 全局api 全局工具库####空框架打包gzip之后约为25kb（包含换肤功能，element版本仅15kb）请花费十分钟阅读说明 提高你的开发效率 提高项目的可维护性1. 目录说明 ├─assets # 静态资源 │ └─img ├─components # 组件库 │ └─global # 全局组件
2020-05-14 09:56:01
552
原创 vue-cli4 && webpack高效框架（开箱即用element版，打包仅17kb）
本项目采用vue-cli 4 搭建 使用全局样式库 全局api 全局工具库请花费十分钟阅读说明 提高你的开发效率 提高项目的可维护性1. 目录说明 ├─assets # 静态资源 │ └─img ├─components # 组件库 │ └─global # 全局组件 <放入后不需要注册也不需要引入> ├─decorator # 装饰器 ├─filter # 过滤器
2020-05-11 16:30:50
1940
1
原创 巧用ES7装饰器 从重复的逻辑代码中解放
1. 什么是装饰器java 中称之为注解 javascript 中装饰器的作用更加强大 装饰器是 方法 或者 类 的重定义 实现原理是 Object.defineProperties 装饰器 在运行前 并不是真实的可用代码 而是对代码的描述与修改 装饰器 不是 runtime2. 我们使用了哪些装饰器 装饰器 目前有 类装饰器 与 方法装饰器不可以对属性使用装饰 不可以对函数...
2020-05-06 16:38:40
257
转载 微前端如何落地？
【CSDN 编者按】只听过“微服务”，“微前端”又是什么硬核技术？它正是借鉴微服务的概念来应用在前端上，将一个巨大的前端工程拆分成一个的小工程，这些小工程具备独立的开发和运行能力，而整个系统就由这些小工程协同合作。这个理念很好，可在实际开发中，又该如何落地？如何拆分呢？涉及何种技术？在本文中，作者将从浅入深，逐步为大家讲解。随着 Martin Fowler 博客上，那篇 Cam Jackson 写的微前端的文章发布，到处都在讨论 Microfrontend。作为一个微前端 “专家”，我也分享一下：如.
2020-07-20 16:06:13
211
转载 浅谈vue中provide和inject 用法
provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide 选项应该是一个对象或返回一
2020-07-10 15:45:59
762
转载 彻底弄懂原型链
写在前面对于初学者而言，原型链是一个比较难懂的概念，而且百度上解释原型链的五花八门，看得越多就越觉得不懂，我就是这样，看得越多，就越觉得原型链这个概念深不可测，...
2020-07-10 15:44:11
184
转载 JavaScript中Function和Object的原型和原型链
我们之前写了原型和原型链的文章，但是后面发现比较特殊的一种情况：Function和Object的原型和原型链的关系比较复杂，所以这篇专门来讲两者的关系。主要参考...
2020-07-10 15:40:09
386
转载 通过 Webpack 的 compiler 对象的 Hooks 学会编写 Webpack 插件的编写
webpack 的 HooksWebpack 的 Compiler 对象主要有以下 Hooks：entryOptionwebpack 处理完 entry 配置项后触发，这是一个同步串行的 SyncBailHook 钩子，只要监听函数有一个函数的返回值不为undefined，则直接跳过剩下逻辑无参数afterPlugins处理完初始化插件后触发，这是一个同步的 SyncHook 钩子，不关心返回值参数是 compiler 对象afterResolversResolve 安装完成后
2020-07-09 16:16:56
3320
转载 webpack打包原理 ? 看完这篇你就懂了 !
前言[实践系列] 主要是让我们通过实践去加深对一些原理的理解。[实践系列]前端路由[实践系列]Babel 原理[实践系列]实践这一次,彻底搞懂浏览器缓存机制[实践系列]你能手写一个 Promise 吗？Yes I promise。有兴趣的同学可以关注 [实践系列] 。 求 star 求 follow~本文通过实现一个简单 webpack,来理解它的打包原理,看完不懂直接盘我 !!!什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序
2020-07-09 15:48:14
450
转载 【超级长文】从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言原文篇幅过长，本文仅摘录了提纲，可参考完整全文链接大纲 对知识体系进行一次预评级 为什么说知识体系如此重要？ 梳理主干流程 从浏览器接收url到开启网络请求线程 多进程的浏览器 多线程的浏览器内核 解析URL 网络请求都是单独的线程 更多 开启网络线程到发出一个完整的http请求 DNS查询得到IP tcp/ip请求 五层因特网.
2020-05-09 14:17:20
199
转载 Lottie - 让复杂动画如此简单（基础篇）
动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展和动效输出方式的优化。因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要...
2020-05-09 14:00:11
1801
转载 结合源码(Observer Dep Watcher)解析vue数据劫持 响应式原理
1、vue响应式原理流程图概览2、具体流程（1）vue示例初始化(源码位于instance/index.js）import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lif.
2020-05-09 13:55:16
163
转载 结合源码解析vue2.0的diff算法
目录 前言 virtual dom 分析diff 总结 前言vue2.0加入了virtual dom，有向react靠拢的意思。vue的diff位于patch.js文件中，我的一个小框架aoy也同样使用此算法，该算法来源于snabbdom，复杂度为O(n)。了解diff过程可以让我们更高效的使用框架。本文力求以图文并茂的方式来讲明这个diff的过程。virtual dom如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应
2020-05-09 10:21:52
103
转载 前端模块化的演变历程（CommonJs、AMD/require.js、CMD/sea.js、ES6 Module）
前言Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了，随着前端发展对模块需求越来越大，模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现，再到ES6发布，目前已经可以很方便的在Javascript中使用"类"和"模块"了。一、以前的写法1、原始写法function m1(){ //... } ...
2020-05-09 09:42:45
196
转载 前端安全之 xss 攻击
什么是 xss？XSS 攻击指通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的代码。危害有什么？跳转到广告页面，页面注入广告等等。 导致公司域名被其他平台拉黑，从而使业务受损。 用户的财产受到威胁，他注入的代码可以在网页中任意请求接口。注入代码http://upcdn"'></script><scriptsrc="//www.lilnong.top/xss.js"></script><script>aler.
2020-05-09 09:42:36
311
转载 HTTPS连接过程以及中间人攻击劫持
HTTPS连接过程https协议就是http+ssl协议，如下图所示为其连接过程： 1.https请求 客户端向服务端发送https请求； 2.生成公...
2020-05-08 18:59:14
423
转载 JS数组循环的性能和效率分析（for、while、forEach、map、for of）
前言前端开发中经常涉及到数组的相关操作：去重、过...
2020-05-08 15:38:24
1491
转载 vue-lottie动画效果（进阶篇）
vue-lottie动画效果个人见解：优点：简单高效，动画文件小，丝滑流畅，动画可控性强缺点：依赖包非常重，对动画要求不高的项目不太建议使用仓库地址模仿demoblog掘金vue项目 用到了vue-lottie动画效果分析官方demo先来一个简单的尝尝鲜vue-lottie仓库vue-lottie demo打开仓库可以看见很多很棒的效果（n...
2020-05-08 15:26:12
1697
3
转载 深入理解javascript闭包
前面提到的上下文环境和作用域的知识，除了了解这些知识之外，还是理解闭包的基础。至于“闭包”这个词的概念的文字描述，确实不好解释，我看过很多遍，但是现在还是记不住。但是你只需要知道应用的两种情况即可——函数作为返回值，函数作为参数传递。第一，函数作为返回值如上代码，bar函数作为返回值，赋值给f1变量。执行f1(15)时，用到了fn作用域下的max变量的值。至于如何跨作用域取值，...
2020-05-08 15:18:48
86
转载 JS正则表达式入门，看这篇就够了
前言在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个浏览器可以识别的规则，有了这个规则，浏览器就可以帮我们判断某些字符是否符合我们的要求。但是，我们为什么要使用正则表达式呢？下面我们就看一下下面这个业务场景。验证QQ号的合法性/***合法qq号规则：1、5-15位；2、全是数字；3、不以0开头*///1.在不使用正则表达式的时候，我们...
2020-05-08 14:02:14
237
转载 Performance — 前端性能监控利器
最近在写一个监控脚本，终于有机会接触到了这一块，整理后写下了本文。Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。属性timing （PerformanceTiming）从输入url到用户可以使用页面的全过程时间统计，会返回一个Perfo...
2020-05-08 13:58:19
181
转载 看看这些被同事喷的JS代码风格你写过多少
一、变量相关二、函数相关三、尽量使用ES6，有可以能的话ES7中新语法 现在写代码比以前好多了，代码的格式都有eslint,prettier,babel(写新版语法)这些来保证，然而，技术手段再高端都不能解决代码可读性（代码能否被未来的自己和同事看懂）的问题，因为这个问题只有人自己才能解决。我们写代码要写到下图中左边这样基本上就功德圆满了。注：由于个人水平与眼界的原因，这篇文章...
2020-05-08 13:54:51
129
转载 原型，原型链，原型和class的继承
原型每个函数（构造函数）都有一个 prototype 属性，指向该函数（构造函数）的原型对象。实例没有 prototype 属性，但是有 __proto__ 属性。函数同时有 prototype 和 __proto__ 属性。function Person(name) { this.name = name;}let person = new Person('xiaoming'...
2020-05-08 13:54:33
255
转载 Promise实现原理（附源码）
本篇文章主要在于探究Promise的实现原理，带领大家一步一步实现一个Promise, 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。接下来，带你一步一步实现一个Promise1.Promise基本结构new Promise((resolve, reject) => { setTimeout(() =...
2020-05-08 13:53:30
189
1
转载 ajax和axios、fetch的区别
1.jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技...
2020-05-07 18:01:20
112
转载 可取消的 Promise
const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCanceled_ ? reject({isCancele...
2020-05-07 17:59:58
484
转载 js之内存泄漏
一、JavaScript 的垃圾收集机制javascript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中的使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手动跟踪内存的使用情况，这是造成许多问题的一个根源。在编写javascript程序时候，开发人员不用再关心内存使用的问题，所需内存的分配 以及无用的回收完全实现了自动管理。JavaScript中最...
2020-05-07 17:58:25
127
转载 JavaScript BOM
什么是BOMDOM是一套操作HTML标签的API（接口/方法/属性）BOM是一套操作浏览器的API（接口/方法/属性）常见的BOM对象window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器Location： 代表浏览器当前的地址信息，通过Locat...
2020-05-07 17:56:34
88
转载 bind函数实现
一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一系列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )由此我们可以首先得出 bind 函数的两个特点：返回一个函数 可以传入参数返回函数的模拟实现从第一个特点开始，我们举个例子：var foo = { valu...
2020-05-07 17:53:42
651
转载 vue修饰符--可能是东半球最详细的文档（滑稽）
为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符（实在不知道叫啥名字）表单修饰符填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的.lazy<div> <input t...
2020-05-07 14:07:42
100
转载 ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理，学习笔记)
ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段...
2020-05-07 14:05:20
286
转载 性能优化之DNS预解析--dns-prefetch
当浏览器请求一个URL的时候，通过firebug我们可以发现大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关，本文重点说说前两个。1、阻挡：解决方案——提高浏览器并发连接数 阻挡：不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1协议下，IE6的并...
2020-05-06 17:06:47
746
原创 前端jenkins自动化部署
浏览器从地址栏输入网址之后发生了什么？大家可能很快就能说出答案：DNS解析得到服务器ip 服务器接收到请求并返回相应结果 浏览器拿到返回结果渲染页面所以我们如何发布我们的代码到服务器上呢？大致流程是这样：本地执行打包命令生成静态文件包 将得到到文件包发送到目标服务器替换旧版本文件这样就会带来很多的问题本地打包多人协作很难保证代码的一致 本地环境可能大不相同 每次改...
2020-05-06 16:55:13
214
转载 前端性能优化 24 条建议（2020）
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末（有些参考资料可能要梯子才能观看）。1. 减少 HTTP 请求一个 HTTP 请求过程：一个 HTTP 请求需要经...
2020-05-06 16:29:14
233
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人