20181013 前端开发日报

作者:编程技术

图片 1

js 数组详细操作方法及解析合集;Sucrase:超快速的 Babel 替代品;20180531 前端开发日报;一个 API 友好的 vuepress 主题;一步一步的了解webpack4的splitChunk插件;HTML5 : Drag Drop;使用React、 Redux 和 SVG 开发游戏;10个为您的下一个web应用程序使用Nuxt.js的理由

Next.js 7发布,构建速度提升40%;前端入门-day2;Vue番外篇 vue.nextTick()浅析;不可错过的react 面试题 「务必收藏」;vue的状态管理模式—vuex;WebSocket是时候展现你优秀的一面了;js实现移动端图片预览:手势缩放, 手势拖动,双击放大;可自定义化的PC-React组件库Yoshino

深度介绍 Vue DevTools 5.0 新特性;如何构建大型的前端项目;谈,前端框架的『御剑之道』;HTML5 Drag and Drop 的一些总结;JS:对“this”的学习;处理 JavaScript 复杂对象:深拷贝、Immutable Immer;JavaScript 的继承方式及优缺点;实现无缝兼容ajax/websocket网页应用和服务

图片 2

  1. 使用 Array.includes 来处理多重条件 举个栗子 :chestnut:: // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'cherry') { console.log('red'); } } 复制代...构建大型 Redux 应用的五个建议 本篇译文的原文:Five Tips for Working with Redux in Large Applications 译者序 为什么翻译这篇文章,是因为本文中给出的建议和我在实际项目中的实践不谋而合,更彻底也更优秀。所以特别想分享给大家。 当项目规模逐JavaScript—ES6 元编程 几年前 ES6 刚出来的时候接触过 元编程的概念,不过当时还没有深究。在应用和学习中不断接触到这概念,比如 mobx 5 中就用到了 Proxy 重写了 Observable 对象,觉得有必要梳理总结一下。 本文并非是一篇传统意义上的教程,总结的是自己学习 ES6 元编程相关知识(Symbols Proxy Reflect...出来混总是要还的-JS正则常用的有四种操作: 验证、切分、提取、替换 前言:能看到这篇随笔的朋友肯定, 多多少少接触过正则( 不过还记得多少, 只有天知道 ), 基础语法知识咱先扔一边, 先从实际编程入手去, 验证浏览器中正则的四种常规操作: 验证、切分、提取、替换 使用正则的目的就三个 表单校验( 查找字符串中是否有在格式化的场景下,React input 的光标的处理办法今天要来说的是有关于有数值格式化的场景中,React input 光标的一些异常的表现和对应的处理办法。故事要从一个 issue 说起,有用户反映在使用 NumberField 组件输入时安卓下会出现光标位置异常,导致连续输入会...JS垃圾回收机制笔记 直到不久之前,对于JS的垃圾回收机制,还停留在‘所分配的内存不再需要’的阶段。 问题来了,浏览器是怎么确定‘所分配的内存不再需要’了呢? 内存简介 垃圾回收简介 内存简介 MDN :像C语言这样的高级语言一般都有底层的内存管理接口,比如 malloc()和free()。另一方面,JavaScript创建变量(对象,字符...Vue.JS 开发常见问题集锦由于公司的前端开始转向 Vue.JS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。Git Tag在软件版本发布中的实践 前言 在当前公司的软件发布流程中,发现原来使用git-flow的分支发布方式存在诸多弊端,于是我们寻求一种相较更好的发布流程,于是就盯上了tag发布。本篇文章旨在介绍tag的使用基础,以及我们是如何将tag应用到正常的软件发布迭代中去。该方案仅供参考。当 JS 大猪蹄子遇到 HTML 小姐姐 阅读文本大概需要 5 分钟。JS 都是大猪蹄子昨天读者群有位水友发了这么一条消息,说这样的网站页面信息要如何提取 td 的内容,聊天截图显现的页面是在浏览器上看到的代码。那时候我刚下班,日常水下群。然后看到这条消息,心里就想这个简单啊,写个 xpath、写个JavaScript 原型精髓,读完这篇就够了 一篇文章让你搞清楚 JavaScript 继承的本质、prototype、__proto__、constructor 都是什么。 很多小伙伴表示不明白 JavaScript 的继承,说是原型链,看起来又像类,究竟是原型还是类?各种 prototype、__prreact深入 - 手写实现react-redux apiProvider store把store放在context里,所有子组件可以直接拿到store数据关于Ajax和websocket的区别以及使用场景 在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又是什么?它们分别的使用场景有哪些? Ajax是什么? Ajax,即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术。通...层次和约束:项目中使用vuex的3条优化方案 问题描述 使用vuex的store的过程中,发现了一些不是很优雅的地方: store层module太多,找state、getter、mutation、action对应的module比较慢。 组件里面mapGetters、mapActions、mapMu数字图像处理-前端实现 源码地址:github.com/weiruifeng/… 数字图像处理(Digital Image Processing)是指用计算机进行的处理。说起数字图像处理大家都会想到C 有很多库和算法,MATLAB的方便,但自从有了Canvas,JavaScriptReact应用下的单元测试 本文作者:昔夜 前言 目前,越来越多的web应用使用 react 来进行界面UI开发,而与之配套的官方测试工具 react-addons-test-utils 用起来则比较繁琐,写出来的测试代码也不易维护。 相比之下,Airbnb开源的react测试类库 Ecss:touch-action导致安卓无法滚动页面 前言 相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程中的一些探索经历。 之所以写,是因为单独去学知识点或者单独看一篇文章其实很简单的,难的是在自己实践中,因为一个问题找一个方案,然后又引起另外一个问题,而这个使用Vue做一个购物车 本人最近在个人博客写一个小型的Vue实战文章,努力中,欢迎各位前往查看,指导点评!地址: cyixlq.top/ 前言 本人刚大三,现在到了下学期,学校不让我们回去,赶我们出去实习。嗯。。。我是大专狗,不过一直热爱技术。只怪当初高中研究手机刷机包等技术荒废了学JavaScript 模块化解析 作者: zhijs from 迅雷前端 原文地址:JavaScript 模块化解析 随着 JavasScript 语言逐渐发展,JavaScript 应用从简单的表单验证,到复杂的网站交互,再到服务端,移动端,PC 客户端的语言支持。JavaScript

深度介绍 Vue DevTools 5.0 新特性 原文: Deep Dive Into The New Vue Devtools v5.0 作者: Brandon Lyons 发表时间 :Oct 5, 2018 译者:西楼听雨 发表时间: 2018/10/10 ( 转载请注明出处 ) 译注:下面这段为原文的开头语,除了“Vue DevTools 5.0 是这个月月初发布的”这个信息外,没什么有用的信息,暂不翻译,请直接看下文的干货。 Earl...如何构建大型的前端项目一般新开发一个项目时,我们会首先搭建好一个脚手架,然后才会开始写代码。一般脚手架都应当有以下的几个功能:谈,前端框架的『御剑之道』 你在使剑,是的,但是你的目的是杀人,直追你的目标,忘记手中长剑,才能使出最高的剑法... 而这世上又有多少剑客, 拘泥于手中快剑而落入俗套,终究无法到达登峰造极的境界... ----阿莱克西斯 剑,是剑客的武器,而现代前端工程师的剑可以理解为前端框架(当然不止是前端框架,但今天我们 只谈前端框架 )。 所谓御...HTML5 Drag and Drop 的一些总结 参考 本机 HTML5 拖放 HTML Drag and Drop API Beautiful react dnd from egghead Demo Demo Link Drag and Drop Life Cycle 注 1: onDragExitJS:对“this”的学习 更多笔记,请参看IT老兵驿站。 有半个多月没有更新博客了,这半个多月一直在加班,实在没有精力更新,现在到了调整期,可以将前一段时间的工作进行一下整理。 之前对JS的this的理解一直有点模糊,这次总结一下,因为在工作中总遇到this的问题,如果一直这么模模糊糊,将会在以后的工作中带来麻烦,而对于这种躲不...处理 JavaScript 复杂对象:深拷贝、Immutable Immer 我们知道 js 对象是按共享传递的,因此在处理复杂 js 对象的时候,往往会因为修改了对象而产生副作用———因为不知道谁还引用着这份数据,不知道这些修改会影响到谁。因此我们经常会把对象做一次拷贝再放到处理函数中。最常见的拷贝是JavaScript 的继承方式及优缺点JavaScript 原本不是纯粹的 “OOP” 语言,因为在 ES5 规范中没有类的概念,在 ES6 中才正式加入了 class 的编程方式,在 ES6 之前,也都是使用面向对象的编程方式,当然是 JavaScript 独有的面向对象编程,而且这...实现无缝兼容ajax/websocket网页应用和服务 为了让用户体验更好,页面前端往往是通过ajax来进行数据处理;由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制,因此websocket的应运而生。由于websocket是后期提供的升级协议,所以现有很多web服务逻辑无法同时兼容两种协议处理...vue路由history模式刷新页面出现404问题vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题。但是history模式会出现刷新页面后,页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改CSS魔法堂:那个被我们忽略的outline 前言 在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline,由于之前对其印象确实有些模糊,于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的 作用 用从一个 bug 看 javascript 的精度丢失的问题后端返回 { spaceObject: { objectId: '1049564069045993472' } }像 vuejs 一样,watch React组件props变化 A higher-order component that adds watch props features to the react component Install npm i --save watch-props基于NodeJS的HTTP server Plus 6:加密 加密简介加密是以某种算法改变原有的信息数据,使得未授权用户即使获得了已加密信息,因不知解密的方法,无法得知信息真正的含义,通过这种方式提高网络数据传输的安全性,加密算法常见的有哈希算法、HMAC 算法、签名、对称性加密算法和非对称性加密算法,加密算法也分为可逆图解一下啥是CSS堆叠上下文,啥是CSS堆叠层叠顺序,让你对css的疑惑少一点?CSS 堆叠上下文是啥? 我们有一个基本样式的 div,样式如下: {代码...} 效果如下: 这边有个问题是: border 和 background是什么关系 ? 这边有两个选项: 平行的 border 更靠近用户 background 更靠近用户 你...webpack loader和plugin编写 1 基础回顾 首先我们先回顾一下webpack常见配置,因为后面会用到,所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 ouES6关于Promise的用法摘录自:[链接]最近学习完ES5,又抓紧开始了ES6的学习,只为自己尽快踏进前端大神的行列,哈哈。ES6更新了不少东西,最近学习到Promise这里卡住了自己,拜读了一下大神的文章觉得很有用,转过来给大家分享。JavaScript线程机制与事件机制 一、进程与线程 1.进程 进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管理器查看进程(如下图)。同一个时间里,同一个计算机系统中允许两个或两个以上的进程处于并行状态,这是多进程。比如电脑同时运行微信,QQ,以及各种浏览器等。浏览React HOC高阶组件详解 High Order Component,是React开发中提高组件复用性的高级技巧。HOC并不是React的API,他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法 con从 Dropdown 的 React 实现中学习到的 Demo Demo Link Note dropdown 是一种很常见的 component,一般有两种: 展开 dropdown menu 后,点击任意地方都应该收起 menu。 展开 dropdown menu 后,点击 menu 内部,不会收起 mJavaScript也能玩机器学习――5个开源 JavaScript 机器学习框架 3个月前,公司AI团队给我们分享了关于如何利用机器学习帮助我们分析图片、视频中的明星以及地标等。作为一名Web的前端开发者,我很好奇 机器学习 是如何工作的。我并没计划要系统学习关于 机器学习 、 神经网络 、 NLP自然语言处理 之类的知识,不过光看到这些概念就觉得很有意思,简直是打开了一个新的世界。 ...前端每日实战:153# 视频演示如何用 CSS 和 VanillaJS 创作一组 tooltip 提示框效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 [链接] ...《如果非得了解下 git 系统 实践篇》本文旨在通过实践来介绍.git文件夹中的目录及文件功能,属git基础知识。但在此基础上可解决各git使用过程中可能遇到的问题,如.git文件夹占用空间大,git如何找回丢失的对象(提交),git diff 对比依据是什么等。 ​​​Next.js踩坑入门系列 —— 再次重构目录 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd amp;amp; CSS (三) 目录重构amp;amp;再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux (六) 再次重构目录 (七) 其《渐进式Web应用程序的深入概述》本文将深入概述渐进式Web应用程序的实现原理,以及它们在现代Web开发中的重要程度。 ​​​浅析Vue源码——VirtualDOM与path 今天来讲讲VirtualDom与path之间到底存在什么关系? VNode (VirtualDom) 在未出现双向绑定之前,我们需要在各个触发事件方法中直接操作DOM节点来达到修改相应视图的目的。但是当应用一大就会变得难以维护,reflow(回流)很影响性能的一篇帮你彻底弄懂NodeJs中的Buffer 前言:遇见前端,应该是今年最幸运的事情了。然而,幸运并未就此打住。 5月自己的第一份实习与唯品会邂逅 7月自己在掘金的两篇文章点赞数过千 10月自己拿到了腾讯的offer 现在,我在准备自己的毕设,准备下一个阶段的到来。掘金社区的确是一个让人成长的地方,我也愿

js 数组详细操作方法及解析合集 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的 api /相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个 api ,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大...Sucrase:超快速的 Babel 替代品 Try it out Sucrase is an alternative to Babel that allows super-fast development builds. Instead of compiling a large range of JS features down to ES5, Sucrase assumes that you're targeting a modern JS runtime (e.g. Node.js 8 or latest Chrome) and focuses on compiling non-standard langu...JavaScript中的this指针 理论化this指针的定义;基于蚂蚁金服「如何管理好10万行代码」搭建了 Vue 项目架构;前端配置工程师;你知道我们平时在CSS中写的%都是相对于谁吗?;React 中的 dumb 组件和 smart 组件;使用v...详情 ​​​一个 API 友好的 vuepress 主题 A api-friendly theme for VuePress. Inspired by zeit. Live demo一步一步的了解webpack4的splitChunk插件 本文大约1500字,看完本文大概需要10分钟,动手尝试需要1小时,如有错误,请指正。 初衷 webpack4出了两个月,发现大家包括我对splitChunk的使用都还是在摸索阶段。我也看了挺多别人的配置demo,都觉得不太满意或者没得到太好的解惑,issueHTML5 : Drag Drop Drag amp; Drop Drag amp; Drop是HTML5中的拖放,即抓取对象后拖放到指定的位置。 设置元素为可拖放draggable lt;div class=drag draggable=truegt;lt;/divgt使用React、 Redux 和 SVG 开发游戏 使用React、 Redux 和 SVG 开发游戏 本文翻译自:Developing Games with React, Redux, and SVG - Part 2 转载英文原作请注明原作者与出处。转载本译本请注明译者与译者博客 关于安装npm包 译10个为您的下一个Web应用程序使用Nuxt.js的理由 如果你是一个Vue开发者,可能你听说过Nuxt.js。但是你可能不太知道关于它的所有炒作。你可能会问,为什么我要在一个框架里面再用一个框架,Vue已经让开发JavaScript应用变得很容易了,Nuxt.js背后的想法是什么? 这篇文章,我们将讲述为什[vue] 表单输入格式化,中文输入法异常 v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。当控件是lt;inputgt;输入框时,v-model 监听其 input 事件。如下所示,这两种写法有什么区别吗? lt;input :vaES6 系列之模板字符串 基础用法 let message = `Hello World`; console.log(message); 如果你碰巧要在字符串中使用反撇号,你可以使用反斜杠转义: let message = `Hello ` World`; console.log(mPromise.prototype.finally() • 探索 ES2018 和 ES2019 本章主要解释由Jordan Harband提出的Promise.prototype.finally提案。 它是如何工作的? .finally()工作如下: promise .then(result =gt; {...}) .catPromise 源码:同步执行 resolve 前言 在上一篇《Promise 源码:实现一个简单的 Promise》当中,我们实现了一个可以简单可用的 Promise。但它实际上还是有不少的缺陷的,比如: Promise 构造函数里直接同步 resolve,则执行不到 then。 只有 resolve,构建你自己的 redux-saga 知乎上已经有不少介绍 redux-saga 的好文章了,例如 redux-saga 实践总结、浅析 redux-saga 实现原理、 Redux-Saga 漫谈。本文将介绍 redux-saga 的实现原理,并一步步地用代码构建 little-anujs1.4.0发布 经过三个月的埋头苦干,终于完成Fiber版的anujs。 主要特性有: * 测试全部改成jest, 迁移官方测试用例。有许多迷你React吹得怎么天花乱坠,但是生命周期钩子的执行顺序无法与官方保持一致,那么就很难共享React庞大的资源。像深

Next.js 7发布,构建速度提升40% Next.js团队发布了其开源React框架的 7版本 。该版本的Next.js主要是改善整体的开发体验,包括启动速度提升57%、开发时的构建速度提升40%、改进错误报告和WebAssembly支持。 Next.js是一个React框架,它的主要目标是在生产环境中提供出色的性能和良好的开发体验。为了提供这种良好的开发体验,Next.js支持...前端入门-day2今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解答啦~Vue番外篇 -- vue.nextTick()浅析 当我们在vue的beforeCreate和created生命周期发送ajax到后台,数据返回的时候发现DOM节点还未生成无法操作节点,那要怎么办呢? 这时,我们就会用到一个方法是this.$nextTick。 nextTick是全局vue的一个函数,在vue系统中,用于处理dom更新的操作。vue里面有一个watcher,用于观察数据的变化,然后...不可错过的react 面试题 「务必收藏」React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。vue的状态管理模式—vuex 如果你在使用Vue.js,肯定有很多组件之间相互传递参数的经历。当遇到父子组件需要通信的时候,我们经常用的方法是传递参数。其实除了传递参数的方式,我们还可以结合业务需要考虑是否用Vuex去解决。 Vuex是什么? 官方文档的定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所...WebSocket是时候展现你优秀的一面了 在工作中我们开发接触最多的协议莫过于HTTP协议了,近些年H5的很多API和技术已经如雨后春笋般开始渐渐发扬光大了,今天我们就来一起讨论下其中的一个比较有意思的API,WebSocket 首先,在介绍主角之前,总要有一个铺垫,那么我就来三言两语先说一下最常见的HTTP协议吧,以示区分 三言两语说说HTTP HTTP是客户端/服...js实现移动端图片预览:手势缩放, 手势拖动,双击放大...可自定义化的PC-React组件库Yoshino Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it! Englis前端跨域方法总结 为什么需要跨域 浏览器出于安全的考虑,引入了同源策略。这种策略会对我们页面上执行的js访问资源的时候进行限制,比如我们不能直接通过js访问不同源之下的页面DOM结构,同时在对不同源发送请求时也无法获取到服务器响应内容 (题图:from unsplash) 有朋友问最近看的哪两本关于前端的书籍——《前端架构设计》 《前端工程化:体系设计与实践》,一本重道,一本重术,道与术结合更具指导意义。希望了解前端的朋友推荐看一下。 接着上篇未完的话题,《前端工程化的个人思考》,前端工程化很庞大,涉及的点也比较多,笔...几个JavaScript 条件语句的小技巧 在使用 JavaScript 时,我们常常要写不少的条件语句。如何将我们的代码写的更加简洁和优雅,是我们需要一直思考的问题。

本文由美高梅4858官方网站发布,转载请注明来源

关键词: 数组 对象 框架 组件 进程