20190516 前端开发日报

七个 JavaScript 技巧;如何写好一个vue组件,老夫的一年经验全在这了;vue组件间通信六种方式(完整版);JavaScript数据结构与算法-String;js函数柯里化;《图解 http》阅读笔记:web 及网络基础;JS之DOM和BOM;重学JavaScript深入理解系列

  1. 如何写好一个vue组件,老夫的一年经验全在这了 如果该组件有一个参数的时候,笔者习惯使用 v-model 将该参数传入组件,减少记忆成本(毕竟 vue 官方的语法糖,不用白不用) 组件具有自身状态,当没有相关 porps 传入时,使用自身状态完成渲染和交互逻辑;当该组件被调用时,如果有相关 props 传入,那么将会交出控制权,由父组件控制其行为 <my-component…
  2. vue组件间通信六种方式(完整版) 【51CTO.com原创稿件】 前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。 针对不同的…
  3. JavaScript数据结构与算法-String 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序。 示例 1: 输入: "Let’s take LeetCode contest" 输出: "s’teL ekat edoCteeL tsetnoc" 注意:在字符串中,每个单词由单个空格分隔,并且字符串中不会有任何额外的空格。 主要就是用到了数组的 …
  4. js函数柯里化 由于最近离职找工作的事情,好久不写文章了,就只好把2017年写的文章搬出来骗骗赞了hhh。 概念 用我自己的话来总结一下,函数柯里化的意思就是你可以一次传很多参数给curry函数,也可以分多次传递,curry函数每次都会返回一个函数去处理剩下的参数,一直到返回最后的结果。 实例 这里还是举几个例子来说明一下:…
  5. 《图解 http》阅读笔记:web 及网络基础 网络基础 TCP / IP 通常使用的网络(包括互联网)是在 TCP / IP 协议族的基础上运作的,而 HTTP 属于它内部的一个子集。Web 使用一种名为 HTTP(HyperText Transfer Protocol,超文本传输协议)的协议作为规范,完成从客户端(指通过发送请求获取服务器资源的 Web 浏览器等)到服务器端等一系列运作流程,而协…
  6. JS之DOM和BOM1.DOM是操作页面的接口,它将页面上的元素转化为节点后分为7种类型,这7种类型的节点对象除了继承了node,parentNode,childNode的属性和方法,还继承了EventTatget的属性和方法。
  7. 重学JavaScript深入理解系列 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文。 执行上下文(简称:EC) 以后出去要说EC因为够逼格:smirk: EC是个抽象的概念,ECMA-262标准中用它来区分不同类型的可执行代码。 标准中并没有从技术实现的角度来定义可执行上下文的具体结构和类型;这是现实标准的ECMAScript引擎所要考虑…
  8. html自动保存图片到本地Html自动保存图片到本地
  9. ES6-变量的结构赋值之应用 相信很多小伙伴都和我一样,虽然一直在学习ES6的新特性,但是却不能自如的将其应用到自己的代码中,这篇文章就来梳理下变量结构赋值的用途~ 交换变量的值 let x = 1 let y = 2 = 复制代码 上面的代码交换x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。 从函数返回多个值 函数只能返…
  10. 【javaScript基础】执行上下文 执行上下文栈,也就是 环境栈 。全局执行环境是最外围的一个执行环境。在Web浏览器中,全局环境被认为是window对象。 var a = 1; // 全局执行环境 function fn () {}; fn(); // fn执行环境 复制代码 每个函数都有自己的执行环境。当进入一个执行环境时,该执行环境就会被推入一个环境栈中。而执行完当前执行环境,…
  11. JavaScript如何工作二:在V8引擎中的五个代码优化技巧 Home Essay 【翻译】JavaScript如何工作二:在V8引擎中的五个代码优化技巧 文章目录 2 为什么要创建 V8 引擎 3 V8 曾经有两个编译器 5 隐藏类 Hidden Classes 6 内联缓存 inline caching 9 如何写出优化的 JavaScript 代码 几个星期前我们开始了旨在深度挖…
  12. 试试这么读preact源码(一)- createElement/h 函数 V10 的 preact 学乖了,总算在源码阶段就更贴近 react 了: function createElement(type, props, children) { //… } 复制代码 哈哈,仔细看 createElement 方法的三个参数,类 react ,就要从变量名开始! 形参的不同 我们来看下上个版本的h方法: function createElement(nodeName, …
  13. React Hooks 用法与原理思考 为什么需要React Hooks ? React Hooks 是 React16.7.0-alpha版本推出的新特性。在Hoooks发布之前React定义组件有两种方法,一种是类组件,一种是函数式组件。之前这两种定义组件的方式有什么不妥呢?为啥还需要Hooks?为什么需要类组件,只有函数式组件不行吗? 因为我们组件中需要 状态 然后我们还需要生命周期来执行不…
  14. CSS实现两个球相交的粘粘效果这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。
  15. 小实例: 用vue实现手风琴效果 目标: 通过手风琴的小实例,了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。 建议阅读时间: 3分钟 手风琴,涉及到两个组件, <collapse> 和 <collapse-item> , 要实现的功能无非两点: <collapse-item> 小知识: 每个Vue实例都会有一个递增的id,可…
  16. JavaScript进阶系列-类型转换、隐式类型转换 ECMAScript 的 Boolean 值、数字和字符串的原始值都是伪对象,这意味着它们可以使用原型对象上面的属性和方法。 ECMAScript 定义所有对象都有 toString() 方法,无论它是伪对象,还是真对象。 let obj = {name:’obj’}; obj.toString(); // let arr = ; arr.toString(); // "1,2" f…
  17. 通过HTTP Header控制缓存我们经常通过缓存技术来加快网站的访问速度,从而提升用户体验。HTTP协议中也规定了一些和缓存相关的Header,来允许浏览器或共享高速缓存缓存资源。这些Header包括:
  18. 快速入门 React hooks + 后端集成2019 年 2 月发布的 React 16.8 正式引入了 hook 的功能。它使得 function 组件也像 class 组件一样能维护状态,所有的组件都可以写成函数的形式,比起原有的以 class 的多个方法来维护组件生命周期的方式,简化…
  19. HTTP API 认证授权术 我们知道,HTTP是无状态的,所以,当我们需要获得用户是否在登录的状态时,我们需要检查用户的登录状态,一般来说,用户的登录成功后,服务器会发一个登录凭证(又被叫作Token),就像你去访问某个公司,在前台被认证过合法后,这个公司的前台会给你的一个访客卡一样,之后,你在这个公司内去到哪都用这个访客卡来开门,…
  20. SpringMVC中使用Ajax POST请求发现一个小问题排查过程 做一个积极的人 编码、改bug、提升自己 我有一个乐园,面向编程,春暖花开! SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一、问题demo展示 在开发新需求,调试代码的时候发现一个问题,就是HttpServletRequest 获取不到ajax pos…
  21. Go 处理 JSON 教程:如何创建和解析 JSON 数据 一、创建 JSON 使用 Go 标准库中的encoding/json,可以很方便从 struct、map、slice 等数据结构体来创建 JSON 数据。 1、从 struct 创建 通过json.Marshal,可以很方便的将一个struct转化为[]byte类型的 JSON 数据。 package main import ( “encoding/json” “fmt” ) type Perso…
  22. 浅谈 Webpack 如何处理图片 从 webpack book 的 Loading Assets 一章中延申出来。 改善前端项目体验中,很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。 静态资源中,又以图片最为典型。那么我们在开发中该如何处理图片呢? webpack 是前端较…
  23. 为什么 React 元素有一个 $$typeof 属性? 你觉得你在写 JSX: <marquee bgcolor=”#ffa7c4″>hi</marquee> 其实,你在调用一个方法: React.createElement( /* type */ ‘marquee’, /* props */ { bgcolor: ‘#ffa7c4’ }, /* children */ ‘hi’ ) 之后方法会返回一个对象给你,我们称此对象为React的 元素(element),它…
  24. utilscoreJS 前端业务代码工具库(不定时更新) 前端业务代码工具库( 不定时更新 ) 目的:高效率完成前端业务代码 业务开发过程中,会经常用到 String,Number,Array,Object,Function,Date扩展方法 、 浏览器类型判断 等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,并发布到npm,以提高开发效率。如果你也有常用的代码,欢迎为本项目提…
  25. 竞争激烈的互联网时代,是否需要注重一下WEB安全?一直以来自己对WEB安全方面的知识了解的比较少,最近有点闲工夫了解了一下。也是为了以后面试吧,之前就遇到过问WEB安全方面的问题,答的不是很理想,所以整理了一下!
  26. JavaScript数值千分位格式化的方法和性能 前端嘛,经常处理数值和时间。 所以数值和时间的格式化少不了。 最近一直在面试前端, 就出了一个如何给数值添加千分位的面试题。 至于答案,我一直都有一种标准, 一是基于你现有的知识可以实现, 二是超出你知识。 有人说, 不就一个千分位, 分分钟解决你, 正则万岁。 没错, 正则很帅, 那么性能呢? …

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流