20190617 前端开发日报-前端开发博客

JavaScript混淆安全加固；typescript 高级技巧；如何提升JSON.stringify()的性能？；精读 vue-hooks；《你不知道的JavaScript》– 精读（二）；混子前端所知道关于JS的六种继承方式；JavaScript 简明代码 —— 最佳实践；webpack入门学习笔记02 —— 初始化一个webpack项目

JavaScript混淆安全加固在安全攻防战场中，前端代码都是公开的，那么对前端进行加密有意义吗？可能大部分人的回答是，毫无意义，不要自创加密算法，直接用HTTPS吧。但事实上，即使不了解密码学，也应知道是有意义的，因为加密前和解密后…
typescript 高级技巧用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。
如何提升JSON.stringify()的性能？1. 熟悉的JSON.stringify() 在浏览器端或服务端，JSON.stringify()都是我们很常用的方法：将 JSON object 存储到 localStorage 中； POST 请求中的 JSON body；处理响应体中的 JSON 形式的数据；甚至某些条件…
精读 vue-hooks vue-hooks 源码解读。
《你不知道的JavaScript》– 精读（二）词法作用域就是定义在词法阶段的作用域。简单说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下）。 // 全局作用域，只有一个标识符:foo function foo(a){ // foo所创建的作用域，三个标识符：b,a,bar var b = a * 2; function bar(…
混子前端所知道关于JS的六种继承方式继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。 —本文摘选《JavaScript高级程序设计(第3版)》由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScirpt只支持实现继承，而且其实现继承主要依靠原型…
JavaScript 简明代码 —— 最佳实践如果你不只是担心你的代码是否能生效，还会关注代码本身及其如何编写，那你可以说你有在关注简明代码并在努力实践。专业的开发者会面向其未来和其他人而不仅是为了机器编写代码。你写的任何代码都不会只写一次，而是会待在那等待未来维护代码的人，让他痛苦不堪。希望那个未来的家伙不会是你。基于上述情况，简明…
webpack入门学习笔记02 —— 初始化一个webpack项目现在我们就开始正式学习 webpack 了，webpack是帮助我们打包编译项目的，所以在正式开始之前，我们需要初始化一个基于webpack的项目。在本篇博客中，将会涉及到以下的知识点：初始化一个基于webpack的项目体会webpack的默认打包设置自定义webpack的打包配置文件 2. 初始化一个基于webpack的项目这…
前 npm CTO：JavaScript 软件包管理的未来是去除中心化 JSConf EU 是欧洲一个专业、非营利的 JavaScript 社区会议。该会议每年在 6 月初举行为期两天的活动，届时，会邀请很多技术专家来分享最新的前端技术。一路走来，成为开发者关注的最重要的技术会议之一，今年正好是它的 10 周年纪念日（JSConf EU 2019 于 6 月 1 日在柏林举行）。本月初的柏林 JSConf EU 2019 会议 …
Vue Function-based API RFC
Three.js 学习笔记 – 实现跳一跳小游戏中的棋子明确一下需要画的棋子的形状：它的整个组成是这样的：在开始之前先去创建如下文件 coordinate_config.js是坐标的配置，因为棋子的初始坐标和第一个块的坐标是相同的，所以把这些重复的坐标提取出来，方便以后的维护 piece.js 就是棋子的类 coordinate_config.js ex…
手写webpack脚手架命令行工具本来想搭建一个webpack脚手架的，于是在搭建的过程中不断地搜集相关资料。可最终的结果是，webpack脚手架没有搭建成，却写出个 CLI 小工具。其实，这也并不是没有原因的。现在流行的框架都推出了自己的脚手架工具，比如，Vue CLI，Create React App 等。脚手架和CLI往往如影随形，这也导致了两者在概念上的混淆。标题为…
2019 前端面试 | Vue.js 专题本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！转载请注明出处，未经同意，不可修改文章内容。复制代码 :rocket:本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引，含未公开发布和写作中的文章，每日持续更新中。 :hammer:本文使用指南：收藏/点赞，方便查阅和全文搜索； …
揭秘 Vue-3.0 最具潜力的 API 工业聚讲解 Vue reactivity API 的文章。
webpack 配置多页面应用的一次尝试最近有一个项目，考虑到要进行 SEO，所以要做成多页面应用。为了保证开发速度和开发效率，所以决定使用 webpack 做一套模块化配置方案。下面主要针对一些重要的点提供思路，并不作详解。完整的代码，我会放在 github（项目地址）上供大家参考，如果有优化的地方，请在评论区指点出来，。目录 |– build …
什么是Javascript DOM? 文章转载自https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction 什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象…
JavaScript数据结构之-树树一种分层次的数据结构。它是由一个或者多个节点组成由层次关系的集合。之所以称之为树，是因为看它外形像一颗倒挂的树。根朝上，叶朝下。由若干个节点组成，没有父节点的节点称之为根节点。一个节点只有一个父节点，一个父节点由若干个子节点。 2、二叉搜索树（BST）节点的左子节点小于父节点，节点的…
使用 React，TypeScript 和 Webpack 开始一个项目我会通过这篇文章，为大家讲述，如何使用 React，TypeScript 和 Webpack 来构建一个项目。
用 Docker Compose 搭建 Node.js 应用（Nest.js）的本地开发环境在本地电脑上开发Node.js 应用，需要安装一个 Node.js，还有就是准备一个应用需要的数据库管理系统。在本地安装 Node.js 你可以直接下载使用安装包，这样你的系统里只会包含一个版本的 Node.js。如果想同时拥有多个版本的 Node.js，可以使用 NVM 这个工具来管理安装在电脑上的多个版本的 Node.js，你可以在不同版本之间…
JavaScript数据结构与算法-Sort-(leetcode原题)排序时间复杂度（运行次数）我们假设计算机运行一行基础代码需要执行一次运算。 {代码…} 那么上面这个方法需要执行 2 次运算 {代码…} 这个方法需要 (n + 1 + n + 1) = 2n + 2 次运算。我们把算法需要执行…
我所经历的前端开发变化大家都在说，前端的变化太快了。每当前端有新的进展，同行都会调侃，别更新了，学不动了。变化太快，快在哪里，那些发生了变化，我从自己说短不长的三年前端开发，来反映这些年的变化。虽然只有刚刚三年开发经验，但是因为有外包的经验，历经过大大小小的项目。这些项目中既有使用最新的技术，也有四五年前一路维护下…
LeetCode44.通配符匹配 JavaScript‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符串（包括空字符串）。两个字符串完全匹配才算匹配成功。
JS设计模式初识(八)-模板模式模板方法模式是一种只需使用继承就可以实现的非常简单的模式。模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方…
Vue源码浅析之异步组件注册Vue的异步组件注册 Vue官方文档提供注册异步组件的方式有三种: 工厂函数执行 resolve 回调工厂函数中返回Promise 工厂函数返回一个配置化组件对象工厂函数执行 resolve 回调我们看下 Vue 官方文档提供的示例: …
我永远也不懂 WebSocket 原理我永远也不懂WebSocket原理很多次面试、面试官说我太垃圾了，因为我不懂websocket的原理。我是不懂，我只是个农民，我怎么会懂那么高级的东西呢？ WebSocket只是一个协议而已；一个协议有原理吗？有狗屎原理吧，只有高级代码崽才会觉得一个协议有原理吧，就打比方我和你签了一个协议，你会问我我…
使用 Gitlab 的镜像仓库 Kubernetes 已经是事实标准，很多应用都会以容器镜像作为交付物。Gitlab 自然是不甘人后，也集成了容器镜像仓库的功能。在使用 Helm 安装 Gitlab 时，设置registry.enabled=true即可启用镜像仓库功能。该功能启用之后，就可以用 Docker 客户端进行操作了。我们使用项目root/sample作为示例： # …
JS的作用域作用域、作用域链是JavaScript中重要的组成部分和重点知识，是我们务必要掌握的内容。如果没有掌握，那么作为重点难点之一的函数的闭包将会难以理解、无从下手。二、作用域 1. 函数作用域 ] 规则：外部对内部可见内部对外部不可见内部优先 JS中，只有函数级别的作用域，没有块级作…
《极简JavaScript正则教程》 JavaScript中的正则内容说多其实也不多，但要全面彻底掌握，也需要花费一些精力。本文的内容不会详细全面讲解，那会是一个颇为庞大的工程。会试着从一些重要概念的角度，梳理一下正则中需要掌握的常用的知识点。一、正则中的基础概念 1.1元字符元字符是正则表达式中具有特殊含义的字符，这些字符无法用来代表它们自…
使用Compodoc生成angular项目静态文档 Compodoc是Angular应用程序的一个文档生成工具。它生成应用程序的静态文档，可帮助开发人员快速理解当前项目。可用于Angular、Nestjs、Stencil框架，包含8中内置主题，4种语言选项。示例 compodoc.github.io/compodoc-de… 下载 npm install -g @compodoc/compodoc npm install –save-dev @compodoc/…
《理解 IntelliJ IDEA 的项目配置和 Web 部署》IDEA 中最重要的各种设置项，就是这个 Project Structre 了，关乎你的项目运行，缺胳膊少腿都不行。
用Node.js爬取动态网页，这可能是最简洁的方式现在网页大多是动态网页，如果只是单纯地通过爬取网页HTML文件，根本爬取不到需要后续加载的商品价格或图片等重要信息，更别谈那些丧心病狂的登录限制，对于小爬虫来说，去分析那些复杂的脚本得不偿失，更别谈网站还会与时俱进地更新，好不容易破解了，人家一更新又得从头来，这都大大提高了小爬虫的难度。但幸好，在…
强烈推荐 GitHub 上值得前端学习的开源实战项目强烈推荐 GitHub 上值得前端学习的开源实战项目。 Vue.js vue-element-admin 是一个后台前端解决方案，它基于和 element-ui 实现基于 iView 的 Vue 2.0 管理系统模板基于 vue2 + vuex 构建一个具有 45 个页面的…
#前端技术#【JS 实现的算法合集：The Algorithms – JavaScript】详见：这个仓库汇集了 JS 实现的所有算法，涉及算法介绍，算法演示等内容。学算法的朋友，不要错过了。
Babel 插件起手式据圣经记载，曾经有一种很高很高的塔，是由一群说着同样语言、勤劳而又团结的人民兴修的，他们希望由此能通往天堂，上帝拦阻了人的计划，是出于爱和保护，让人依靠上帝认识上帝，于是将他们的语言打乱，让他们再也不能明白对方的意思，并把他们分散到了世界各地。因此曾经高耸入云的塔，被世人称作“巴别塔（Babel）”，也…
vue兄弟组件之间通信–eventBus eventBus 单独的事件中心,用来管理组件之间的通信。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。然后在组件中，可以使用 $emit , $on , $off 分别来分发、监听、取消监听事件。一. 创建 eventBus 其实就是创建一个 js 文件,默认导出一个 vue 实例 import …
最简单的vue消息提示全局组件简介实现功能自定义文本自定义类型(默认，消息，成功，警告，危险) 自定义过渡时间使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue {代码…} /src/toast/index.js {代码…} 全局注册 /main…
VueConf 2019 PPT VueConf 2019 PPT 放出来啦~