20190807 前端开发日报

vue在混合开发中应用的思考;检验原生JS功底的时候到了–纯JS实现贪食蛇;从零开始,采用Vue的思想,开发一个自己的JS框架(三):update和diff;webpack4从零搭建vue项目;vue中的nextTick;js 面试官想了解你有多理解call,apply,bind?;(译文)JavaScript中的执行上下文和执行栈;给大家介绍一个自己开发的JavaScript工具库

  1. vue在混合开发中应用的思考 我目前在做的一个项目,前端这块虽然说使用的是CS架构,但其实是 C# 提供了一层 Chrome 内核来运行app的。也就是混合开发的一种。现在的工作是将以前的 jquery 一把梭的开发模式转移到 vue 上来,这就带来了 vue 在混合开发中应用的思考。 二、混合开发 像 Android , WPF 和 IOS 等等这些原生(或桌面)应用…
  2. 检验原生JS功底的时候到了–纯JS实现贪食蛇 前言 以前读书学习C语言的时候,总是想着要完成贪食蛇这款游戏,但是那时候我的编程基础和编程思维还不够扎实和成熟,所以导致怎么折腾都写不出来,但是现在工作了,就想着要完成读书时候的小心愿,就开始动手写了,写着写着,就还真是写出来了,哈哈,看来我也是成长了不少。。。 贪食蛇这款游戏,相信大家一定都不…
  3. 从零开始,采用Vue的思想,开发一个自己的JS框架(三):update和diff 本章节我们的主题是update和diff,这一章节可能理论部分会比较多。在开始这一块内容前,我觉得有必要先大致看一下Vue和React实现这一部分的流程的:update->diff->patch->updateDOM。在开始更新后,会进行diff算法的比对,比对后会生成一个patch补丁包,然后再根据这个补丁包进行DOM的更新。补丁包中会通过id(…
  4. webpack4从零搭建vue项目 新建一个项目文件夹 npm init -y 初始化package.json 安装webpack依赖包 npm install –save-dev webpack webpack-cli webpack-dev-server devServer: { contentBase: path.join(__dirname, ‘./dist’), host: ‘localhost’, // 可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去…
  5. vue中的nextTick js的执行是单线程,基于事件循环(event loop),事件循环大致分为以下几个步骤: 所有的任务都会被放到调用栈(call-stack)等待主线程(main thread)执行, 主线程的执行过程就是一个 tick 。 JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出…
  6. js 面试官想了解你有多理解call,apply,bind?函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的API,这次让我们来彻底掌握它…
  7. (译文)JavaScript中的执行上下文和执行栈 本文将深入探讨JavaScript中最重要的基础知识之一: 执行上下文 。通过对此篇文章的阅读,对以下几个方面的知识你将会有更加清晰的认识: 解释器的执行机制 为何函数和变量可以在声明前使用以及它们的值究竟是如何确定的 什么是执行上下文? 当代码在JS中运行时,代码的执行环境非常重要,JavaScript中…
  8. 给大家介绍一个自己开发的JavaScript工具库 大家好。今天很高兴能向大家介绍一个全新的JavaScript工具库。它的名字是 webstorage-proxy.js 。这也是我第一次开发JavaScript工具库,期间遇到不少问题,当然更多的是收获。下面由我来为大家分享下这个js库的由来和使用,以及开发过程遇到的问题和总结的经验吧。 WebStorageProxy简介 引入webstorage-proxy.js,w…
  9. WebRTC:一个视频聊天的简单例子在前面的章节中,已经对WebRTC相关的重要知识点进行了介绍,包括涉及的网络协议、会话描述协议、如何进行网络穿透等,剩下的就是WebRTC的API了。
  10. vue生成canvas海报图一个通过 css 属性画 canvas 图片的轻量级的 vue 组件(A lightweight vue components use canvas draw image by css properties.)
  11. JavaScript变量定义和作用域的可视化指南(入门级) 我们常讨论var,let和const之间的作用域的差异。但更多的时候,我看到不少初学者仍然在尝试着理解这个观点。我认为这可能是因为这个概念很少被可视化。 让我们一起来看一看。并不是所有的作用域看起来都是一样的。 注意:我并不建议大家死记作用域变量定义和每种类型的作用域的值可见性规则。相反,你们可以试着找…
  12. Babel 你太美。。 Babel 的本意是 “通天塔”。 西方神话故事里,以前的人语言相同,决定建立有个能直达上天的塔,神后面惧怕人们语言相通就打乱它,让他们不能明白对方的意思,并把他们分散到各地。 为了解决上古时代浏览器对新语法不支持、不兼容情况下。发明了 Babel ,能够将 ES6 代码 转为 ES5 代码, 从而在现有环境执行。 安装环境…
  13. 深入理解 call, apply 和 bind(JS) 作者:一像素 链接:https://www.cnblogs.com/onepixel/p/6034307.html 在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。…
  14. CSS 是如何影响浏览器元素在文档中的排列 之前在项目的过程中遇到了一个问题,某个div希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了z-index也没有效果,不知道什么原因,因此找了一下CSS相关资料,解决了这个问题的同时,也学习了很多知识,特此和大家分享一下。 屏幕是一个二维平面,然而 HTML 元素却是排列在三维坐标系中,x为水…
  15. Riot.js riot.mixin源码解析 有时候不知道真相,不了解本质的人,是快乐的。而能够假装不知道真相,不了解本质的人,却是幸福的。《七月与安生》 介绍 riot.mixin() 功能介绍: 方法一 方法二 demo 写个很简单的demo: import riot from ‘riot’; import ‘./mixin.tag’; window.necooIndex = 0; var OptsMixin = { …
  16. 抓 TCP 报文诊断 HTTP Content-Length 问题 本文分享一个 HTTP Content-Length 有误时场景,以 tcpdump 抓包来做真实演示,同时结合TCP状态进行分析。关于 Content-Length 的场景,比如提供文件下载的服务,需要设置好 Content-Length 以及断点下载的一些参数。 小例子 下面是 Spring Boot 应用中一段代码,设置 Content-Length 为100字节,实际…
  17. Webpack 插件 — SplitChunksPlugin 开箱即用的 SplitChunksPlugin 应该对大多数用户都很好用。 默认情况下,它只影响随需应变的块,因为更改初始块会影响运行项目时包含的应有脚本标记 HTML 文件。 webpack 将根据以下条件自动分割块: node_modules 当试图满足后两个条件时,更大的块是首选。 配置 webpack为希望对该功能有更多控制的开发人员提…
  18. promise-polyfill 梳理分析【三:内置函数的实现】 经过上两节的梳理, promise 的基本流程和原理也已经理解了,这一节就来看看我们经常使用 Promise 提供的函数是怎么实现的。 第二节 Promise.resolve 可以看到这个函数是直接放在 promise 对象上的,而不是放在原型链上。 Promise.resolve = function(value) { if…
  19. promise-polyfill 梳理分析【二:reject决策】 紧接着上一节梳理完了 resovle 决策的流程和原理,现在就来梳理 reject 的流程和原理了。建议先看 上一节 ,然后结合结合 源码 阅读。 第一节 reject 被调用的情景 我尝试在源码的页面去搜索 reject ,排除一些声明和一些原型链上的方法,也就是 all、race 这些等调用的场景,匹配到的还存在四个地方。…
  20. js中的二叉树以及二叉搜索树的实现及应用 接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) 和树…
  21. jQuery之extend方法深入分析–deep copy extend方法在jQuery中有较多的应用,平时写代码时也会用到,主要是利用其提供的deep copy的功能 以下是jQuery中的代码详情 点击查看代码详情 jQuery.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments || {}, i = 1, length = arguments.length, deep = …
  22. NodeJs 实现简单WebSocket 即时通讯服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,…
  23. Promise/A+ 实现 Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一。 Promise/A+ 是 Promise 最小的一个规范。包括 – Promise 状态 – then 方法 – Promise 解析过层 只有一个 then 方法, 没有 catch 、 race 、 all 等方法 ECMAscript 6 Promise 是符合Promise/A+ 标准之一。 …
  24. Go 实现百万 WebSocket 连接 大家好!我是 Sergey Kamardin,是 Mail.Ru 的一名工程师。 本文主要介绍如何使用 Go 开发高负载的 WebSocket 服务。 如果你熟悉 WebSockets,但对 Go 了解不多,仍希望你对这篇文章的想法和性能优化方面感兴趣。 1. 简介 为了定义本文的讨论范围,有必要说明我们为什么需要这个服务。 Mail.Ru 有很多有状态系…
  25. 为什么会出现React Hooks?原文:[链接] 译者:前端技术小哥当你要学习一个新事物的时候,你应该做的第一件事就是问自己两个问题 1、为什么会存在这个东西? 2、这东西能解决什么问题? 如果你从来没有对这两个问题都给出一个令人信服的答案…
  26. Web Components尝鲜——polymer组件封装之date组件 先来说个题外话。很多技术开发可能只知道php和python。polymer是个什么鬼!话不多说,进入正题。 Web Components是什么? 首先我们需要知道,Web Components 包括了四个部分: Custom Elements Custom Elements 顾名思义,是提供一种方式让开发者可以自定义 HTML 元素,包括特定的组成,样…

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

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


关注我

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

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

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