• 前端中的二进制以及相关操作与转换
    为了数据的一致性,以及减少与后端通信的复杂度,工作量都在浏览器端。浏览器,或者前端更多处理的是 View 层,即 UI = f,状态至界面的转化。但是也有很多关于二进制的处理,如下载 Excel文档生成 PDF对多个文件打包下载图片的乱码问题本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如 ArrayBuffer,TypedArray,Blob,DataURL,ObjectURL,Text 之间的互相转换。原文链接见 http://shanyue.tech/post/binary-in-frontend/[1]二进制相关数据类型在此之前,首先简单介绍下几种相关的数据类型,更多文档请参考 MDNArrayBuffer && TypedArrayTypedArray 是 ES6+ 新增的描述二进制数据的类数组数据结构。需要转化为 TypedArray 进行操作。
  • 奇舞周刊第 330 期:别让自己“墙”了自己
    记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■别让自己“墙”了自己“井蛙不可以语于海者,拘于虚也;夏虫不可以语于冰者,笃于时也;曲士不可以语于道者,束于教也。”其它■ ■ ■GCanvas 渲染引擎的演进“ 遵循w3c标准的跨平台的轻量级图形渲染引擎。”深入浅出之 swrswr 源码解读。高德 APP 全链路源码依赖分析工程很棒。关于奇舞周刊《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。
  • 一个鲜为人知的高性能组件注册及实现组件排序技巧
    背景 在使用Vue的路途中,你一定知道如何去注册并调用一个组件通常我们会通过三个步骤来实现调用组件的一整个流程通过import引入组件在父组件的组件对象components中将导入的子组件注册在父组件中使用该组件<template> <div> <Child msg="Hello World!场景预设1 想象一下一个会员中心组件,有一部分区域用来展示会员与会员差异的相关展示模块,但是这两个只会展示其中一个,会员与非会员。根据 is 的值,来决定哪个组件被渲染。这并不是本次想介绍的。现有的两个模块组件,我们仍然必须先导入并注册才能完成调用。
  • 『 Vue小Case 』- Vue Prop中的 null vs undefined
    一直以来,笔者在使用Vue时,习惯于在需要表示prop属性未定义时,使用undefined,而不是null。目前,null和undefined基本是同义的,只有一些细微的差别。Object.getPrototypeOf// nullundefined表示缺少值,就是此处应该有一个值,但是还没有定义。调用函数时,应该提供的参数没有提供,该参数等于undefined。对象没有赋值的属性,该属性的值为undefined。vari;i// undefinedfunctionf{console.log}f()// undefinedvarobj=newObject();obj.p// undefinedvarret=f();ret// undefined三、Vue中的Prop校验好了,我们已经再次熟悉了一下null和undefined的区别。下面就让我们一起看下,Vue中是如何进行Prop校验以及如何对待null和undefined。当required:false时,null和undefined都会通过校验。
  • 使用 Hooks 优化 React 组件
    广告使用自定义组件渲染,使用 Intersection Observe API 实现广告曝光打点,监听 DOM 对应的点击时间实现广告点击打点。React 组件设计模式在具体讨论方案之前,我们先简单的了解一下常见的 React 组件设计模式。组合组件组合组件是通过模块化组件构建应用的模式,它是 React 模块化开发的基础。例如下面的组合方式就是利用类似 Vue 的 slot 方式将配置通过子组件的形式与 <Modal /> 组件进行组合,是的组件配置更优雅。同时将点击操作在 <Select/> 组件中直接传递下去方便了点击后直接修改选择状态。</Option></Select>继承模式继承模式是使用类继承的方式对组件代码进行复用。
  • A*搜索算法概述
    下面为A*搜索算法的主流程代码:// heuristicFunction,启发式函数functionaStar{// 带估算的节点集合,为一个优先队列,每次取f值最小的节点constopenSet=newPriorityQueue()openSet.add// 初始只有起点constcloseSet=[]// 已被估算过的节点集合constgScore={[start]:0}// g值consthScore={[start]:heuristicFunction}// h值constfScore={[start]:hScore[start]}// f值constcameFrom={}// 记录当前节点的上一个节点while(!openSet.includes||tentativeGScore<gScore[neighbor]){// 记录neighbor节点的前一个节点cameFrom[neighbor]=currentgScore[y]=tentativeGScorehScore[y]=heuristicFunctionfScore[y]=gScore[neighbor]+hScore[neighbor]openSet.add}}}}functionreconstructPath{constbestPath=[current]while{current=cameFrom[current]bestPath.unshift}returnbestPath}启发式函数启发式函数作为A*搜索算法的核心,对算法的行为有着重大的影响,具体有以下几种情况:当启发式函数$h$始终为0时,则将由从起点到任意顶点n的距离$g$决定,此时A*算法将等效于Dijkstra算法。当$h$完全等于顶点n到目标点的实际成本,则A*算法将以较快的速度找到最优解。可以看出,通过调节$h$可以控制算法的精度和速度。
  • TypeScript真香系列——接口篇
    写一个后端接口,我要特意封装一个工具类,来检测前端给我传递过来的参数,比如下图中的validate专门用来检验参数的函数但是有了 TypeScript 这个参数检验函数可以省略了,我们可以这样写: const goodParams: IGoodsBody = this.ctx.body;而GoodsBody就是对应参数定义的 interface,比如这个样子// -- 查询列表时候使用的接口interface IQuery { page: number; rows: number; disabledPage?接口的基础篇接口的定义和 java 语言相同,TypeScript 中定义接口也是使用 interface 关键字来定义:interface IQuery { page: number;}你会发现我都在接口的前面加了一个I,算是个人习惯吧,之前一直写 java 代码,另一方面tslint要求,否则会报一个警告,是否加看个人。
  • Vue友最爱的10个开箱即用的开源项目 | 建议收藏
    截至目前Vue在GitHub上的Star数已经高达152601,还有绝大数像笔者一样不经常star别人的Vue友们。Vue因其友好程度让更多前端爱好者加入到其中,开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习,因为如果想提高你的 Vue 开发技术,那么花些时间来了解开源项目是很值得的。今天推荐10个Vue开源项目,虽然不是最流行的开源项目,star数有的甚至只有两位数,但是实用性还是相对较强的。让广大Vue友快速使用相关button动效,让web呈现更加丰富。可用于纯JavaScript、React、Vue和Angular。
  • 奇舞周刊第 328 期:Design Token 是啥?
    记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■Design Token 是啥?“Design Token 是一些集中存储的 UI 元素信息,比如颜色、字体、间隔、动画等等。他们可以根据需要被转换为不同平台的代码,比如 Android、iOS 或 Web。”TiDB-Wasm 原理与实现TiDB-Wasm 项目是 TiDB Hackathon 2019 中诞生的二等奖项目,实现了将分布式关系型数据库 TiDB 编译成 Wasm 运行在浏览器里,打开浏览器,你可以直接创建数据库,对数据进行增删改查。本文由 Ti-Cool 队成员主笔,为大家详细介绍 TiDB-Wasm 设计与实现细节。郎玥萌推荐2019 TWeb 腾讯前端技术大会精彩回顾如题。我们一起学习 CSS image-set()哈哈哈……
  • 一名【合格】前端工程师的自检清单
    winter在他的《重学前端》课程中提到:到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。
个人资料

《奇舞周刊》是由奇舞团维护的前端技术周刊。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送周刊汇总内容。