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

一见不知可钟情 npm script；jQuery源码解析之click()的事件绑定；vue cli3.0 引入eslint 结合vscode使用；vue项目前端错误收集之sentry；关于 webpack 的一些坑和面试题必学；深入浅出node.js总结-模块机制（2）；从底层看JS执行机制；为什么选择 npm script

一见不知可钟情 npm script 本文已同步在我的博客: ruizhengyun.cn/blog/post/7… 在看的各位都是老司机或者即将成为老司机的鲜肉们都知道 package.json 了（别皮了，别说不知道啊），不过老司机的我还是要说下如何科学用它。如果你是科学用的可以跳过本章。快速创建项目 npm script 依赖于文件 package.json。npm 为我们提供了快速创建 …
jQuery源码解析之click()的事件绑定前言：这篇依旧长，请耐心看下去。一、事件委托 DOM有个事件流特性，所以触发DOM节点的时候，会经历3个阶段：（1）阶段一：Capturing 事件捕获（从祖到目标）在事件自上（document->html->body->xxx）而下到达目标节点的过程中，浏览器会检测针对该事件的监听器（用来捕获事件），…
vue cli3.0 引入eslint 结合vscode使用它的目标是提供一个插件化的javascript代码检测工具。官网地址最近一个项目里，最开始使用 cli3.0 搭建的时候没有默认选用 eslint ，导致现在有的人使用其他编辑器，就会出现格式错乱的情况。所以引入 eslint 做代码检测第一步（安装） npm install eslint eslint-config-airbnb-base eslint-plugin-import…
vue项目前端错误收集之sentry sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。 sentry官网： https://sentry.io/ sentry安装 sentry 是一个开源的工具…
深入浅出node.js总结-模块机制（2）由纯c/c++编写的部分统一称为内建模块，如Node的buffer、ctypto、evals、fs、os等由c/c++编写内建模块的优势：本身由c/c++编写，性能上优于脚本语言文件编译时，编译成二进制文件，Node一旦执行，它们会被直接加载进内存，故而加载速度最快（还有一大段有关c/c++核心模块和c/c++扩展…
从底层看JS执行机制先从一个简单的例子出发（先不涉及异步），看看自己是否大致了解浏览器的执行机制： console.log(a); var a=1; function foo(a){ console.log(a); var a=2; console.log(a); } foo(a); 复制代码执行结果： undefined 1 2 如果你的预测结果不一样，那你可以看看下面几个常见的误区： var a=1…
为什么选择 npm script 本文已同步在我的博客: ruizhengyun.cn/blog/post/6… 前端开发体系中，已经有 grunt、gulp 等，不是挺好的么，为嘛使用 npm script？作为一名开发者，一个要具备的素养就是理性。拿 gulp 来说，之前做过 n 多个项目，因为如前端这个职场还比较早，依赖工具和插件两者的升级管理还不是很完美，所以维护两者…
JavaScript-CORS 跨域在web浏览器中，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如果两个页面的 1. 协议 2. 端口（如果有指定） 3. 域名三者都相同，则两个页面具有相同的源。举例说明…
还学不会webpack？看这篇Webpack已经流行好久了，但很多同学使用webpack时还是一头雾水，一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态。但是想要继续…
原生JS实现data方法在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。这里将用原生的JS对data方法进行实现。使用setAttribute: <div id="test-data"></div> <p class="test-data-list"></p> <p class=&qu…
vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇）接上篇 vue全家桶+Echarts+百度地图，搭建数据可视化系统 1 前言 1.1 业务场景实现数据监控的系统。有线图、柱状图、地图，并具有定时刷新的功能。 1.2 业务分析上一篇分析的步骤大致有： vue-cli vuex vue-router 上一篇介绍了 1-6 部分。本篇将介绍一下剩下的 7-10 部分。 :joy::joy: 主…
如何成为一个bilingbiling的前端炼金师前端的技术点众多，其中不乏抽象且晦涩的知识点，它们用文字无法很直观的表述出来，所以众多开发者对这些知识点的理解都是是而非，如果我们通过图画来展示，就会很容易理解。因此Diagram项目希望开发者能通过这种…
Angular DI 是怎么工作的？这又是一篇短命的（short-lived）描述当下技术框架的博客文章。 DI（依赖注入、Dependency injection）是一种设计模式，常用来提升代码的可复用性、健壮性和可测试性。 DI 在前端的流行很大程度上归功于它在 Angular1.x 中的应用。 Angular 2 以后借助 TypeScript 的类型分析，可以干脆省去了 Angular1.x 中冗余的依赖声…
从vue2.6.10源码看vue是怎么跑起来的先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="…
如何用原生js来写一个swiper滑块插件（上）原理嗨~ 这里是芝麻，今天我们一块来做一个“滑块插件”。那么啥是滑块插件呢？滑块插件能干嘛呢？请看下图：是不是有点印象了，没错，他的最基本的用法就是左右滑动，插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果，不过你完全可以组合各种元素来适应不同的场景。当然插件我已经写好了，咱…
【2019年4月GitHub上最热门的Python开源项目】四月份最热门的Python开源项目排行也出炉，一起来跟着我们看看都有哪些项目上榜吧。详见
webpack4手动搭建Vue开发环境实现todoList项目（2）在上篇教程中，我用webpack4手动搭建了Vue的开发环境，包括了生产环境和开发环境，不知道能否帮助到大家学习（捂脸）。。。拖更很久，不好意思，最近辞职了忙于找工作，生活还是有点烦躁的，但是在这里就没必要把负能量传给你们了！！好了，按照约定，这篇文章我会用上次搭建好的Vue开发环境去实现todoList项目，…
用JS解析GBK编码的中文在很久远的VM页面代码（2014年的代码）中进行落数，需要传一个keyWord（搜索关键词）参数，后端数据中没有返回，其他地方也无从获取，前端考虑从页面url中获取，通过一般前端方法进行解析后，并没有什么卵用。问题剖析看了下页面的编码格式是gbk，返回的是gbk的编码，这种编码js是无法直接解析的，只能创建一个htm…
js 将线性数据转为树形在日常开发工作中，我们经常碰到将线性的数据转换成树的需求，今天给大家分享一个简单的转换算法。数据结构下面是我们转换前的数据： [ { "id":1, "parent_id":0, "name":"四川省" }, { "id":2, "…
深入解析 Node.js 的 console.log当你开始用 JavaScript 进行开发时，可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 JavaScript，会发现数百篇博文和 StackOverflow 文章都会简单的告诉你用 console.log。…
Web API 开发实践之前在公司负责了一个项目，进行了前后端分离，笔者负责了整个项目的基本结构的搭建，在此总结一些经验。本文主要介绍后端web api的设计与实现。demo代码链接：github代码
威胁快报|新兴挖矿团伙借助shodan作恶，非web应用安全再鸣警钟近日，阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu，因为该团伙使用这个字符串作为挖矿时的用户名。
JavaScript：十大排序的算法思路和代码实现本文内容包括：(双向)冒泡排序、选择排序、插入排序、快速排序(填坑和交换)、归并排序、桶排序、基数排序、计数排序(优化)、堆排序、希尔排序。大家可以在这里测试代码。更多 leetcode 的 JavaScript 解法也可以…
Go语言:xterm.js-websocket Web终端堡垒机从google上可以了解到xterm.js是一个非常出色的web终端库,包括VSCode很多成熟的产品都使用这个前端库.使用起来也比较简单.
《项目优化却体现不出自己的价值？》项目优化却体现不出自己的价值？可能你的方式不对？（by 金炳）
NJSD 2019 开幕倒计时，最后报名阶段精彩内容安排 ▼ 60+位技术大拿和领域专家的实践经验分享，NJSD全球大会最新议程发布！这些技术演讲都值得你去听 | NJSD全球大会精彩议题一览来听硬核干货 | 两天、十大专题论坛，速来约见NJSD全球软件大会吧！！ …
Vuex使用(实战记录) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能多个视图依赖于同…
JavaScript异步机制（二）之任务队列和事件循环 GUI渲染线程负责渲染浏览器界面HTML元素,当界面需要重绘 (Repaint)或由于某种操作引发回流 (reflow)时,该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的,也就是说被”冻结”了。 JavaScript引擎线程 Javascript引擎，也可以称为JS内核，主要负责处理Javascript脚本程序，例如V8…
隔壁小孩也能看懂的7种Javascript继承实现因为我在学校接触的第一门语言是cpp，是一个静态类型语言，并且实现面向对象直接就有class关键字，而且只讲了面向对象一种设计思想，导致我一直很难理解javascript语言的继承机制。 JavaScript没有”子类“和”父类“的概念，也没有”类“（class）和”实例“（instance）的区分，全靠” 原型链 “（prototype chain）实现继承…
#开源项目#【极简 CSS 框架：Water.css】详见： Water.css 是一款不需要使用任何 Class 的极简 CSS 框架。它具备响应式、轻量级、高质量代码等特点，帮助你打造简易的网站。
Monorepo——大型前端项目的代码管理方式最近我接手了一个项目，代码量比较大、有点复杂。仓库 clone 下来代码有 50+ MB，npm install 安装完体积飚到了近 2GB …… 熟悉了一下，这个项目比较复杂，采用了 monorepo 的方式进行代码的管理。折腾几天后，对 …