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

前端必看的书籍（附：码农长寿指南）；重学JavaScript深入理解系列（四）；【前端词典】Vuex 注入 Vue 生命周期的过程；每个前端工程师都应该了解的图片知识；JavaScript数据结构与算法-Array-(leetcode原题)；php只能做网站？基于swoole+websocket开发双向通信应用；优化JavaScript总结分享（上）；用于业务的精炼js工具函数（浏览器环境）

前端必看的书籍（附：码农长寿指南） README.md fe-necessary-book 前端开发者必读的精品pdf集合(小声逼逼: 附精品开发工具) 前置书不在多, 读了才灵些许资源以链接形式给出, pdf均为网上搜集而来, 如果侵犯到作者的利益, 请联系我删除(WeChat: dzy13538391627). …
重学JavaScript深入理解系列（四）在第二章变量对象的时候，已经介绍过执行上下文的数据是以变量对象的属性的形式进行存储的。还介绍了，每次进入执行上下文的时候，就会创建变量对象，并且赋予其属性初始值，随后在执行代码阶段会对属性值进行更新。本文要与执行上下文密切相关的另外一个重要的概念——作用域链（Scope Chain）。定义 …
【前端词典】Vuex 注入 Vue 生命周期的过程这篇文章是【前端词典】系列文章的第 13 篇文章，接下的 9 篇我会围绕着 Vue 展开，希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提是默认你对 Vue 有一定的基础。如果一点基础都没有，建议先看官方文档。第一篇文章我会结合 Vue 和 Vuex 的部分源码，来说明 Vuex 注入 Vue 生命周期的过程。说到…
每个前端工程师都应该了解的图片知识随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。
JavaScript数据结构与算法-Array-(leetcode原题)例如：1 ^ 1 = 0 、 2 ^ 2 = 0、 0 ^ 1 = 1 、1 ^ 1 ^ 2 ^ 3 ^ 2 ^ 4 ^ 3 = 4
php只能做网站？基于swoole+websocket开发双向通信应用众所周知，PHP用于开发基于HTTP协议的网站应用非常便捷。而HTTP协议是一种单向的通信协议，只能接收客户端的请求，然后响应请求，不能主动向客户端推送信息。因此，一些实时性要求比较高的应用，如实时聊天、直播应用、在线网页游戏等，就不适合采用HTTP协议。即使采用客户端主动轮询的方式来间接实现双向通信，也会较大…
优化JavaScript总结分享（上）本来想整理一篇完整的JavaScript优化知识点出来跟大家讨论分享一下的，但是由于最近个人的时间比较少，所以先整理了两个知识点，之后有时间了再继续整理后面的。不喜欢勿喷，有错误的欢迎大佬指点。
用于业务的精炼js工具函数（浏览器环境） github : github.com/Javison666/… 引用库，后续 $fn 直接当作全局进行使用 import $fn from ‘jj-browser-fn’ 复制代码 js工具函数（浏览器环境）默认处理非数值的内容为0 默认处理空字符串为’–‘ 将编…
用 JavaScript 实现链表单链表是表示一系列节点的数据结构，其中每个节点指向链表中的下一个节点。相反，双向链表具有指向其前后元素的节点。
前端VUE：开发环境搭建在安装目录创建如下文件夹: node_cache node_global 环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径;cmd 执行如下命令： npm config set prefix "D:Developnodejsnode_global" npm config set cache "D:Developnodejsnode_cache" 复制代码 …
详细精确阐述jsBridge执行流程的文章 jsBridge是在webclient的shouldOverrideUrlLoading方法拦截url，通过解析url内的伪协议来实现Native与JS之间的数据传输。通过更改Html 的iFrame标签的src触发一个url请求。 Native端被直接触发的方法 a、handlerReturnData(url)：处理JS返回处理结果到Native的方法，此方法会解析url内的handlerName和Message。 …
9012年，当我们讨论js深浅拷贝时我们在说些什么？前言：本文主要阅读对象：对深浅拷贝印象模糊对初级前端，想对js深浅拷贝聊一聊的中级前端。如果是对这些有完整对认知体系和解决方法对大佬，可以不用再浪费时间了复制代码正文：讨论深浅拷贝，首先要从js的基本数据类型说起：根据 JavaScript 中的变量类型传递方式，分为值类型和引用类型，值类型变量包括 …
itops代码优化之前端代码压缩系统介绍基于Python + Django的AD管理系统，系统主要提供以下功能: 丰富的API接口，便于内部系统的集成在线邮件流查询常规AD、Exchange操作的WEB化，更友好的交互体验 2FA认证登陆，角色权限分层。增强系统安全性的同时，提升HelpDesk同学解决问题的效率丰富的报表功能和批量操作功能详细的…
AS 负责人说不必用 Kotlin 重写，但 OkHttp 拿 Kotlin 重写了一遍，就发了 OkHttp 4.0 虽然 Android Studio 的负责人 Jeffery 已经澄清，只是 Kotlin-First 而不是 Kotlin-Must，并不需要将 App 用 Kotlin 重写一遍。但是 OkHttp 已经开始用 Kotlin 重写的工作，我们来看看这次重写后带来的差异。一. 序在今年的 Google I/O 大会上，Google 宣布将以 Kotlin 作为 Android …
Node.JS在命令行中检查Chrome浏览器是否安装，并打开指定网址使用Windows命令行cmd可以指定浏览器打开网址。在node.js中使用start即可：比如分别用Chrome和IE打开网址 start chrome http://www.google.cn start iexplore http://www.google.cn 但是当用户没有安装Chrome时使用start则会报错，并会弹出错误对话框： chrome [Con…
nuxt.js基于ssh的vue通用框架 Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织， Nuxt.js 主要关注的是应用的 UI渲染。 SSR ，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。 Nuxt.js是特点（优点）：基于 Vue.js 自动代码分层服务端渲染强大…
vue源码阅读之数据渲染过程一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点“追究”vue的’思路’。总体来说vue模版渲染大致流程如图1所示：图1:v…
webpack4 sideEffects实战轻松搞懂函数副作用是指函数在正常工作任务之外对外部环境所施加的影响。具体地说，函数副作用是指函数被调用，完成了函数既定的计算任务，但同时因为访问了外部数据，尤其是因为对外部数据进行了写操作，从而一定程度地改变了系统环境。函数的副作用也有可能是发生在函数运行期间，由于对外部数据的改变，导致了同步运行的外部…
【请停止学习框架】我们了解的现代开发工具越多越好，比如Angular，React，Riot，Vue，Ember，Knockout，和这些新技术保持同步真是一件很有意思的事情。但是….我们却是在浪费时间！全文=>
怎样阅读 ECMAScript 规范？Ecmascript 语言规范 The ECMAScript Language specification（又名：Javascript 规范 the JavaScript specification 或 ECMA-262）是学习 JavaScript 底层工作原理的非常好的资源。然而，这是一个庞大的专业文…
ServerlessNode.js Puppeteer 渗透测试爬虫实践参考 CNCF 的定义，Serverless 是指构建和运行不需要服务器管理的应用程序的概念；而 AWS 官方对于 Serverless 的介绍是：服务器架构是基于互联网的系统，其中应用开发不使用常规的服务进程。相反，它们仅依赖于…
前端每日实战 167# 视频演示如何用 1 个 dom 元素创作两颗爱心，祝大家 520 节日快乐效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
TypeScript 中使用 React Hook TypeScript 中使用React Hook 从 React V 16.8.0 和 React Native 0.59.0 版本开始, 引入了React Hook的概念。React Hook 在开发支持就考虑到了类型，所以很多Hook函数可以直接推断出他们的参数、返回值等类型，但也有一些场景需要我们显示声明类型。阅读本文前你需要了解React Hook 的基本用法，参考这里。下…
Nginx http运行状况健康检查配置对于被动健康检查，NGINX 和 NGINX Plus 会在事件发生时对其进行监控，并尝试恢复失败的连接。如果仍然无法恢复正常，NGINX 开源版和 NGINX Plus 会将服务器标记为不可用，并暂时停止向其发送请求，直到它再次标…
ThreeJs 图形绘制基础和其他 GUI 系统一样，web 也提供了一个使用 canvas 来绘制图形的基础环境。利用 canvas 我们可以绘制矩形，三角形，直线，圆弧和曲线等比较复杂的图形。具体可以参考使用canvas来绘制图形 WebGL 本质上也是在 canvas 上作画，只不过它基于是一个 3D 的场景。而在 ThreeJs 中，提供了一个套 Shape 和 Curve 相关…
用node.js写一个jenkins发版脚本在 jenkins 设置里获取 API TOKEN 。把 host 和账号密码拼接起来就可以通过鉴权。 const token = { user: ”, password: ”, } const host = ‘jenkins.xxx.cn’; const basicUrl = `http://${token.user}:${token.password}@${host}`; 复制代码 BUILD 调用 jenkins 提供的 jenkins.job.build() 方法…
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景原文地址，排版更好 [链接] [链接] CSS3 中有很多表示元素序号的选择器，有以下几种 :first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-ty…
浅谈JSONP 同源政策很简单，它的含义是指两个网页：协议相同域名相同端口相同一旦以上三点中有任意一点不同，两个网站都不能称为同源。举例： http://www.example.com/xxx http://www.example.com/yyy 以上两个网站是同源的，满足协议,域名,端口都相同(http协议默认端口为80) ————————— …
解密JavaScript执行上下文上面这张图来自于mdn，分别展示了栈、堆和队列，其中栈就是我们所说的执行上下文栈；堆是用于存储对象这种复杂类型，我们复制对象的地址引用就是这个堆内存的地址；队列就是异步队列，用于event loop的执行。
深入理解 Webpack 打包分块（上）
简单梳理Redux的源码与运行机制前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的…
❤520，就用CSS给你的她（他）送颗心❤今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的…