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

前端核心代码保护技术面面观；我在阿里云做前端；从零开始教你用vuepress搭建自己的博客（1）—基础篇；[Vue] slot详解，slot、slot-scope和v-slot；（实战）indexedDB + webSocket实现数据持久化保存数据；koa+mysql+vue+socket.io全栈开发之前端篇；停止滥用divHTML语义化介绍；JavaScript 前端性能优化之事件防抖

前端核心代码保护技术面面观 V2EX › 程序员前端核心代码保护技术面面观 zyEros · 1 小时 38 分钟前 · 367 次点击 1、前言 Web 的开放与便捷带来了极高速的发展，但同时也带来了相当多的隐患，特别是针对于核心代码保护上，自作者从事 Web 前端相关开发的相关工作以来，并未…
我在阿里云做前端今年是我毕业的第10个年头，半路出家做了前端，title一直是前端，你可以说我很专注，有时候也有些遗憾。一直以来，当别人问起你是做什么的，我说前端或者全栈，别人说：哦，做页面的啊！心里难免有些失落。前端是…
从零开始教你用vuepress搭建自己的博客（1）—基础篇最近公司是要重构一下我们的SDK文档，之前是用的gitbook来生成的，效果掺不忍睹，样式不好看就不好说了，之前的老哥写得东西语法很乱，改起来很费解，索性就干脆来个大换血。之前有用过各种的文章博客框架，比如：大名鼎鼎的hexo，比较流行的docsify，以及Docute。但是效果都不是很理想。想着既要样式好看，告别千篇…
[Vue] slot详解，slot、slot-scope和v-slot slot是什么 slot，也称插槽，可以类比为插卡式的FC游戏机，游戏机（子组件）暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容），游戏机会读取并加载磁条里的游戏。 Vue的slot，是组件的一块HTML模版，这块模版由使用组件者即父组件提供。可以说是子组件暴露的一个让父组件传入自定义内容的接口。 …
（实战）indexedDB + webSocket实现数据持久化保存数据前端为什么要实现数据持久化？（也就是保存数据到浏览器）。很多时候前端都是从后端接口获取数据，离开了网络，我们就没有办法和后台通讯，也就没办法拿到数据组装页面。为了解决这种尴尬的情况，将数据保存在浏览器，就算没有网络我们也能从浏览器拿到数据。复制代码二、实现数据持久化方法前端实现数据持久化的…
koa+mysql+vue+socket.io全栈开发之前端篇
停止滥用divHTML语义化介绍 DIVS该停止（滥用）了我们喜欢（使用） <div> 标签。它们已经存在了几十年，这几十年来，当需要将一些内容包裹起来达到（添加）样式或者布局目的的时候，它们成为首选元素。查看线上站点时，看到像下面这些内容的情况依旧很常见： <div class="container" id="header"> <…
JavaScript 前端性能优化之事件防抖定义：指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时，以新的事件的时间为准，n 秒后才执行应用场景：输入款搜索时，用户在不断输入值时，用防抖来节约请求资源。按钮点击：比如点赞，收藏防抖有两种实现方式：非立即执行：大概步…
Node.js 应用故障排查手册 —— 利用 CPU 分析调优吞吐量楔子在我们想要新上线一个 Node.js 应用之前，尤其是技术栈切换的第一个 Node.js 应用，由于担心其在线上的吞吐量表现，肯定会想要进行性能压测，以便对其在当前的集群规模下能抗住多少流量有一个预估。本案例实际上正是在这样的一个场景下，我们想要上线 Node.js 技术栈来做前后端分离，那么刨开后端服务的响应 QPS…
Js中substr,substring,slice截取字符串的异同今天在写程序的时候发现js中slice也能用来截取字符串，以前都是用substr或substring，于是想着拿它们来对比一下，它们都可以接受两个参数，第一个是开始截取的位置，默认为0，第二个下文具体介绍验证代码地址： github.com/fanxuewen/e… 一、只传第一个参数当第一个参数为正数，它们是没有区别的 let str=’好好…
javascript模块化简介 JavaScript 随着时间的推移所负责的责任越来越重从最开始的添加表单验证功能之类的脚本到angular 应用开发框架，随着js任务越来越重就急需模块化的解决方案。模块化的基础条件就是开辟一片独立的上下文,那些拥有模块化功能的语言或通过物理文件组织模块，或以抽象的 namespace package 组织模块，而JavaScript 并没这…
Vue页面级缓存解决方案feb-alive (下) Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前，希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对activated钩子差异性 keep-alive配合vue-router在动态路由切换的情况下==不会触发ac…
CSS 技巧（02）大漠老师良心总结。主要围绕着 CSS border 展开。
svg图标的webpack优化前言最近在做项目的优化升级，因为折腾了一下午的图标管理，所以就把自己的经验分享出来，希望可以帮助大家更快的解决自己的需求。我现在的项目，都是引入iconfont的图标库，真是的好用又方便。现在有三种模式，使用方法可以在官网的使用说明页查看。我们今天主要讨论的主要是第三种，也就是svg图标的优化。 …
如何理解vue的key属性如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。就地复用的弊端这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲…
深入剖析 React Concurrent
HTTP基本知识、跨域和调试技巧其实很多面试问HTTP的3次握手，4次挥手，我觉得价值不大，可以帮助你理解HTTP的原理，死背硬记的对于你开发没有作用，而是去理解它就行。前端只关心URL、headers和data，接下来也围绕着它们展开。了解HTTP请求可…
nodejs 解析 http 协议源码解析上篇文章讲到nodejs创建一个服务并且建立tcp连接的过程。接下来分析一下，在建立tcp连接后，nodejs是如何解析http协议的。我们首先看一下nodejs在建立tcp连接时执行net.js层的回调时做了什么操作。下面是核心代码。 // clientHandle代表一个和客户端建立tcp连接的实体 function onconnection(err, clientHandle) {…
中台微服务了，那前端呢？ “微前端是前端建设的一个非常重要的方向和关注点，通过微前端的集成模式可以减轻系统开发的复杂度，降低前端集成的难度。”
《jQuery 3.4.0 发布！全力准备 jQuery 4.0》4 月 10 日，jQuery 官博发文宣告 jQuery 3.4.0 正式发布。距离 2018 年 1 月发布 v 3.3.0 版已有一年多了。