11 2020 档案

摘要:我们先来简单了解一下setTimeout延时器的运行机制。setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数。本质上是作用域的问题。 因此若是这样将不会得到想要的结果输出1.2.3.4.5,而会连续输出5个6。 for (var i=1; 阅读全文
posted @ 2020-11-28 22:23 浅笑· 编辑
摘要:1.如何构造? 先复习一下es5常用的构建类的方法:首先es5的写法使用原型进行对象的方法的,为什么不在构造函数里添加方法呢?因为实例化对象的时候,会重复的建立好多相同的方法,浪费资源。所以需要把对象的方法挂载到prtotype里。 关于new和this的绑定问题,可以大概简化为: 首先通过new生 阅读全文
posted @ 2020-11-28 22:19 浅笑· 编辑
摘要:在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束。这里的函数,同时包含 class 的构造函数,因此,一个类的声明部分,也可以使用泛型。那么,究竟什么是泛型?如果通俗的理解泛型呢? 什么是泛型 泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用 阅读全文
posted @ 2020-11-28 22:17 浅笑· 编辑
摘要:进程:process模块 process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API。从文档出发,管中窥豹,进一步认识和学习 process 模块: 如何处理命令参数? 如何处理工作目录? 如何处理异常? 如何处理进程退出? process 的标准流对象 阅读全文
posted @ 2020-11-28 22:15 浅笑· 编辑
摘要:进程:process模块 process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API。从文档出发,管中窥豹,进一步认识和学习 process 模块: 如何处理命令参数? 如何处理工作目录? 如何处理异常? 如何处理进程退出? process 的标准流对象 阅读全文
posted @ 2020-11-28 22:13 浅笑· 编辑
摘要:如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象。 那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析 阅读全文
posted @ 2020-11-28 22:12 浅笑· 编辑
摘要:1.什么是 Promise promise 是目前 js 异步编程的主流解决方案,遵循 Promises/A+ 方案。 2.Promise 原理简析 (1)promise 本身相当于一个状态机,拥有三种状态 pending fulfilled rejected一个 promise 对象初始化时的状态 阅读全文
posted @ 2020-11-28 22:10 浅笑· 编辑
摘要:众所周知, ES6 新增了一个全局、内建、不可构造的 Reflect 对象,并提供了其下一系列可被拦截的操作方法。其中一个便是 Reflect.apply() 了。下面探究下它与传统 ES5 的 Function.prototype.apply() 之间有什么异同。 函数签名 MDN 上两者的函数签 阅读全文
posted @ 2020-11-28 22:05 浅笑· 编辑
摘要:1. 可选链 从 v3.7 可用 这是当你尝试访问嵌套数据时的一个痛点,嵌套数据越多,代码就会变得越繁琐。 在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符 阅读全文
posted @ 2020-11-28 21:58 浅笑· 编辑
摘要:引言 ES6中允许使用箭头=>来定义箭头函数,是ES6中较受欢迎也较常使用的新增特性。本文将从箭头函数的基本语法,与普通函数对比,箭头函数不适用场景三个方面进行梳理。 基本语法 // 箭头函数 let func = (name) => { // 函数体 return `Hello ${name}`; 阅读全文
posted @ 2020-11-28 21:55 浅笑· 编辑
摘要:jsON.parse和jsON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换等等。 JSON.stringify()是将一个JavaScript值(对象或者数组)转换为一个js 阅读全文
posted @ 2020-11-28 21:54 浅笑· 编辑
摘要:Node.js 的出现使得前端工程师可以跨端工作在服务器上,当然,一个新的运行环境的诞生亦会带来新的模块、功能、抑或是思想上的革新,本文将带领读者领略 Node.js (以下简称 Node) 的模块设计思想以及剖析部分核心源码实现。 CommonJS 规范 Node 最初遵循 CommonJS 规范 阅读全文
posted @ 2020-11-28 21:52 浅笑· 编辑
摘要:前言 对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时绕不开的点。撇开ES6 class不谈,传统的继承方式你知道几种?每种实现原理是什么,优劣点能谈谈吗。这里就结合具体例子,按照渐进式的思路来看看继承的发展。 准备 谈到js继承之 阅读全文
posted @ 2020-11-28 21:45 浅笑· 编辑
摘要:JavaScript 使用原型继承:每个对象都从其原型对象继承属性和方法。在 JavaScript 中不存在 Java 或 Swift 等语言中所使用的作为创建对象 蓝图的传统类,原型继承仅处理对象。 原型继承可以模仿经典类的继承。为了将传统类引入 JavaScript,ES2015 标准引入了 c 阅读全文
posted @ 2020-11-28 21:42 浅笑· 编辑
摘要:引言 平时经常会逛 Github,除了一些 star 极高的大项目外,还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣,或是有不错的技术点,读起来都让人有所收获。所以准备汇总成一个「漫游Github」系列,不定期分享与解读在 Github 上偶遇的有趣项目。本系列重在原理性讲解,而 阅读全文
posted @ 2020-11-28 21:40 浅笑· 编辑
摘要:市价 vs 身价 程序员是否有必要持续不断的提高自身的技术水平? 政治正确的说法当然是: 学无止境,技术人员自然应该坚持不懈的提高自己的技术水平啦。 但是,一般情况下,一个技术岗位对于从业人员的要求会有两个方面: 技术能力和业务知识。大多数情况下,业务和技术是分离的,而且会争夺资源。 此处,我们先提 阅读全文
posted @ 2020-11-27 14:26 浅笑· 编辑
摘要:软件架构最佳实践、企业架构模式以及系统描述的正式方法都是非常重要且实用的工具,总会有合适的场景让它们发挥作用。但在设计系统时,请从简单始、以简单终,尽可能避免一切会无谓提高复杂度的架构与正式工具。 我的职责是设计和构建大型系统。我参与重写了 Uber 的 分布式支付系统 ,设计并交付了Skype o 阅读全文
posted @ 2020-11-27 14:25 浅笑· 编辑
摘要:Web应用架构受系统用户量、开发人员组织方式影响严重。过去二十年互联网迅速发展,Web架构也从单体式演进出微服务,背后还有比如 Martin Fowler 提出的理论支撑。虽然每个人都听说过微服务,但是很多人并不太清楚为什么要这么做,应该怎么做,怎么拆。要回答这个问题我认为需要从Web架构的演化历史 阅读全文
posted @ 2020-11-27 14:24 浅笑· 编辑
摘要:版本管理 概念:版本管理是软件配置管理的基础,它管理并保护开发者的软件资源。 好处:可以保留我们的历史版本,在代码开发到一半的时候,不至于无故丢失,还可以查看BUG的来龙去脉。 版本管理种类:集中式的版本管理和分布式的版本管理。实现的控制软件分别有SVN和Git。 了解了版本管理的概念那就进入主题, 阅读全文
posted @ 2020-11-27 14:23 浅笑· 编辑
摘要:1:插入数据 例:向默认的test数据库的wj表中插入数据 $manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); // 插入数据 $bulk = new MongoDB\Driver\BulkWrite; $bulk- 阅读全文
posted @ 2020-11-27 14:22 浅笑· 编辑
摘要:git branch -r #查看远程所有分支 git branch #查看本地所有分支 git branch -a #查看本地及远程的所有分支 git fetch #将某个远程主机的更新,全部取回本地 git branch -a #查看远程分支 git branch #查看本地分支: git ch 阅读全文
posted @ 2020-11-27 14:20 浅笑· 编辑
摘要:大多数野生程序员最棘手的问题就是如何依靠技术解决温饱,通俗来讲就是技术折现的问题。如果是单纯出于兴趣,或者只是为了突击某一阶段或者某一项目技术壁垒,不跟就业挂钩的自学倒也是无关痛痒。但是当上岗成为自学的终极目标和结果时,一切都就另当别论了。 前端自学者存在的学习误区: 1、所学东西可能已过时 奉为经 阅读全文
posted @ 2020-11-27 14:19 浅笑· 编辑
摘要:nginx首先决定要用配置文件里的哪个server{}块来处理,假设有下面的server{}配置 server { listen 80; server_name aaa; ... } server { listen 80; server_name bbb; ... } nginx会根据过来的http 阅读全文
posted @ 2020-11-27 14:17 浅笑· 编辑
摘要:1.工作的时候就是要给自己定一个可达到的小目标,然后再定个稍大点的目标,就很容易实现。比如先混到这周末,然后再混到元旦,最后实现混到过年的大目标。 2.父亲告诫儿子:“能力越大,责任就越大。” 儿子说:“对,我吃的能力大,我承担的减肥责任就越大。” 3.听到两个同事的聊天:“我好怕老啊。”“等你真的 阅读全文
posted @ 2020-11-27 14:16 浅笑· 编辑
摘要:防火墙配置错误可能与没有防火墙一样危险。人们需要了解五个常见的防火墙配置错误,这些错误将让任何组织都容易受到攻击。 防火墙是抵御所有类型网络入侵者的主要防线,但即使具有多年的实践和丰富的经验,许多组织仍然会犯配置错误,使其网络容易受到数据窃取、丢失以及其他类型的破坏。 以下是组织应该不惜一切代价需要 阅读全文
posted @ 2020-11-27 14:14 浅笑· 编辑
摘要:Redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用。通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁、通用的思想去考虑问题,而不是绑定在某种实现上。 Redis根据不同的用途,会有不同的持久化策略和逐出策略,所以,在使用和申请 Redis 集群前,请明确是用来做缓存还是存储。 阅读全文
posted @ 2020-11-27 14:13 浅笑· 编辑
摘要:什么是技术视野 网上看到不少关于如何提升技术视野的讨论,但却没有人给出定义,到底什么是技术视野? 所谓技术视野,就是看问题时所能切换的不同角(维)度。 下面就以API管理工具(以下简称“管理工具”)为例,来探讨背后隐藏的技术视野。 API管理工具 零视角 曾经在一个小型创业公司用到过最简单的管理工具 阅读全文
posted @ 2020-11-27 13:31 浅笑· 编辑
摘要:一:懒汉,线程不安全 这种写法lazy loading很明显,但是致命的是在多线程不能正常工作。 public class Singleton{ private static Singleton instance; private Singleton(){}; public static Singl 阅读全文
posted @ 2020-11-27 13:30 浅笑· 编辑
摘要:人工智能先驱、贝叶斯网络之父、美国计算机科学家 Judea Pearl 在最近的一篇论文中解释了基于数据统计的机器学习系统的一些局限性。要理解“为什么”,并回答“如果……会怎样”之类的问题,我们需要某种因果模型。在社会科学领域,尤其是流行病学中,一种名为“结构因果模型”(SCM)的革命性数学框架已经 阅读全文
posted @ 2020-11-27 13:29 浅笑· 编辑
摘要:移动应用开发框架的类型 就像开发 Web 应用程序的各种框架一样,有相当多的移动应用开发框架供您选择。这些框架分为三大类: 原生移动应用程序开发框架 混合移动应用程序开发框架 跨平台移动应用程序开发框架 原生移动应用程序开发框架 原生应用程序是 Google 和 Apple 推出的。原生移动应用程序 阅读全文
posted @ 2020-11-27 13:27 浅笑· 编辑
摘要:在面试的环节中,面试官问到:你是如何设计你的表结构的,画一下E-R图?接着又继续深挖,如果有慢查询,你是如何优化你的sql的? 今天,我就来和大家讲讲要怎么回答这道问题。首先,我们要稳住不要慌,自己是自己亲手做的项目,第一个问题应该都不大,第二个问题就需要在面试之前做好充分的准备啦… 在回答问题之前 阅读全文
posted @ 2020-11-27 13:26 浅笑· 编辑
摘要:一、请求报文 1、请求方法 GET:请求获取Request——URL所标识的资源 POST:在Request——URL所标识的资源后附加资源 HEAD:请求获取由Request——URL所标识的资源的响应消息报头 PUT:请求服务器存储一个资源,由Request——URL作为其标识 DELETE:请 阅读全文
posted @ 2020-11-27 13:24 浅笑· 编辑
摘要:nginx作为一个高性能的web服务器,想必大家垂涎已久,蠢蠢欲动,想学习一番了吧,语法不多说,网上一大堆。下面博主就nginx的非常常用的几个功能做一些讲述和分析,学会了这几个功能,平常的开发和部署就不是什么问题了。因此希望大家看完之后,能自己装个nginx来学习配置测试,这样才能真正的掌握它。 阅读全文
posted @ 2020-11-27 13:23 浅笑· 编辑
摘要:最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,也曾看到过有人对前端市场人才的稀缺这样吹捧过: 现在,几乎整个互联网行业都缺前端工 阅读全文
posted @ 2020-11-27 13:21 浅笑· 编辑
摘要:历史 面向过程的编程语言有汇编语言、C语言。C语言,是1972年贝尔实验室的 D.M.Ritchie 在B语言的基础上设计出的一种新的语言。他们的特点就是太底层了,当你在使用面向过程的编程语言编写代码的时候,你就需要把思维转换成机器的思维,时刻要考虑开辟多大的内存,存储多大的数据,数据在使用完毕的后 阅读全文
posted @ 2020-11-27 13:19 浅笑· 编辑
摘要:1. 前言 1.1 前端 前端三剑客:结构层 html,表现层 css,行为层 JavaScript。 html好比是房子的地基,css和 javascript是房子的建筑材料,这三个部分一起组成个漂亮的房子。我们不能把他们分开说,某某部分是个房子,只有三个一起才能组成一个漂亮的房子 。 1.2 J 阅读全文
posted @ 2020-11-26 13:11 浅笑· 编辑
摘要:什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 css 样式 ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::in 阅读全文
posted @ 2020-11-26 13:10 浅笑· 编辑
摘要:简介 如果你关注代码本身和代码的编写方式,而不是只关心它是否能工作,那么你写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写当前能工作就行的代码。 在此基础上,简洁代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。 以下列表一些好编写方式,仅供参考,当然, 阅读全文
posted @ 2020-11-26 13:08 浅笑· 编辑
摘要:网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单,但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。在设置视频处理和传输管道时,首先要考虑的是要服务的视频格式。 用户体验、支持(浏览器和系统)、压缩效率或编码速度等方面可能与此 阅读全文
posted @ 2020-11-26 13:07 浅笑· 编辑
摘要:css 的继承性是什么? 在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。 那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。 css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是 阅读全文
posted @ 2020-11-26 13:05 浅笑· 编辑
摘要:一、开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局。随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于内部系统的开发,有时候也显得笨重了,更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重 阅读全文
posted @ 2020-11-26 13:04 浅笑· 编辑
摘要:browser VS module VS main 前端开发中使用到 npm 包那可算是家常便饭,而使用到 npm 包总免不了接触到 package.json 包配置文件。那么这里就有一个问题,当我们在不同环境下 import 一个 npm 包时,到底加载的是 npm 包的哪个文件? 老司机们很快地 阅读全文
posted @ 2020-11-26 13:03 浅笑· 编辑
摘要:如果博客是使用Hexo管理的,sitemap可以使用插件来生成。但对于一个内容管理网站,后端可能是express、koa之类的框架,这时sitemap就需要自己来生成了 什么是sitemap Sitemap可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的Sitemap形式,就是X 阅读全文
posted @ 2020-11-26 13:01 浅笑· 编辑
摘要:第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id= 阅读全文
posted @ 2020-11-26 13:00 浅笑· 编辑
摘要:1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 1、包含与被包含 A.contains(B)检测B节点是否是A节点的子节点,返回布尔值 2、父与子 获取父节点: node.parentNode,node.parentElement,两者区别在于后者只能获取元素 获取子 阅读全文
posted @ 2020-11-26 12:59 浅笑· 编辑
摘要:1 什么是css? css通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置html页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以html为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不 阅读全文
posted @ 2020-11-26 12:58 浅笑· 编辑
摘要:前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法。 效果图: DOM中,首先定义canvas画板元素: <canvas id="canvas" wid 阅读全文
posted @ 2020-11-26 12:56 浅笑· 编辑
摘要:css3新增属性rgba和opacity:(0~1); 在ie8下无法使用Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明。 IE下的透明度属性,子元素会继承这个透明度。下面有阻断子元素继承方法。 背景透明,文字不透明。 <!DOCTYPE html><ht 阅读全文
posted @ 2020-11-26 12:55 浅笑· 编辑
摘要:Hash hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义: 锚点 url: http://www.example.com/index.html#jump dom: <a name="jump"></a> 或者 <div i 阅读全文
posted @ 2020-11-26 12:53 浅笑· 编辑
摘要:在这篇文章中,我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果,使用纯css实现。 浮动的文字标签 当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的: label标签是关联表单元素,提供说明信息最适合的元素。 输入框的placehold 阅读全文
posted @ 2020-11-26 12:51 浅笑· 编辑
摘要:需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了) 阅读全文
posted @ 2020-11-26 12:49 浅笑· 编辑
摘要:在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言,这是一个很简单的需求,而且市面上有很多开源的组件库就可以实现,像比如说:cube-ui等!那么对于一个要是还在练习 阅读全文
posted @ 2020-11-26 12:48 浅笑· 编辑
摘要:1. 基于server端session的管理 在早期web应用中,通常使用服务端session来管理用户的会话。快速了解服务端session: 1) 服务端session是用户第一次访问应用时,服务器就会创建的对象,代表用户的一次会话过程,可以用来存放数据。服务器为每一个session都分配一个唯一 阅读全文
posted @ 2020-11-26 12:47 浅笑· 编辑
摘要:一、Web应用 1、什么是Web应用?Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可,不需要安装其他软件。 2、Web应用程序的模式 应用程序有两种模式,即C/S、B/S两种,C/S是客户端/服务器端程序,这类程序一般独立运行;而B/S就是浏览器端/服务器 阅读全文
posted @ 2020-11-26 12:46 浅笑· 编辑
摘要:随着技术的发展、用户量的增加、客户端种类变多,每一个小小的细节都需要优化和考虑。在海量的访问量面前,也许改变一个按钮的位置和颜色就能影响上千万次的用户体验。如今的互联网产品已不是以一己之力就可以完成的乐高积木了,Web开发需要以某种可控的方式来管理。于是,所有认真对待互联网产品的大公司都引入了流水线 阅读全文
posted @ 2020-11-26 12:45 浅笑· 编辑
摘要:预测未来并非易事。在预测社会现象的未来趋势时,我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象。 在收集数据和观察趋势时,人们总会忽略一些不显眼的事实、一些难以观察到的趋势,反而很可能收集到一些本应无视的数据。话虽如此,但设法做出一些合理的预测总比完全不管不问、假装未来 阅读全文
posted @ 2020-11-25 13:55 浅笑· 编辑
摘要:一、背景 随着公司业务的拓展,随之而来就是各种系统横向和纵向的增加,PV、UV也都随之增加,原有的系统架构和模式慢慢遇上了瓶颈,需要逐步的对系统从整体上进行改造升级,通过一段时间的整理思路,做一个简单的总结与分享。同时由于能力等方面的不足,如果有什么说的不好之处,还请各位大神多多指点。 二、整体思路 阅读全文
posted @ 2020-11-25 13:54 浅笑· 编辑
摘要:在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画布上绘制以坐标点 (x,y)为圆心、半径为 ra 阅读全文
posted @ 2020-11-25 13:53 浅笑· 编辑
摘要:背景 在回家的地铁上使用自家应用H5相关功能时,可能由于网络原因导致体验较差,在使用微信、今日头条App时,感觉很流畅,基本做到了秒开,然后就想了解下业内H5秒开方案。 问题原因 文件下载耗时:包括html、css、js、图片等 页面渲染耗时:页面渲染,解析js、css文件等 WebView创建耗时 阅读全文
posted @ 2020-11-25 13:51 浅笑· 编辑
摘要:媒体查询 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自css3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。 基本使用 具体的使用方式是 <!-- link元素中的css媒体查询 --> < 阅读全文
posted @ 2020-11-25 13:49 浅笑· 编辑
摘要:css 指层叠样式表 (Cascading Style Sheets),定义如何显示 html 元素,但由于 css 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。 1. 通用规范 文件编码 为了避免内容乱码,统一使用 UTF-8 编码保存。 样式文件第一行设置字符集为 UTF-8 阅读全文
posted @ 2020-11-25 13:48 浅笑· 编辑
摘要:在初始页面加载问题之外,“布局颠簸”是我在动态Web应用程序中看到的最常见的性能问题。 对于单页应用程序尤其如此,它可以动态构建和销毁视图。 但是,我常常对我遇到的Web开发人员的数量感到惊讶,他们不知道导致浏览器做不必要的布局的模式(在Mozilla社区中也称为“重排”)。 如果您使用WebKit 阅读全文
posted @ 2020-11-25 13:47 浅笑· 编辑
摘要:标签的类型(显示模式) html标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。 一、块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div> 阅读全文
posted @ 2020-11-25 13:46 浅笑· 编辑
摘要:在做上传文件的时候,大家会引入input标签。但在实现的过程中,在上传一个文件后,第二次上传同一个文件时会无法触发上传的代码,问题其实这样解决。 <input type="file" ref="referenceUpload" @change="onUpload" style="width: 78p 阅读全文
posted @ 2020-11-25 13:45 浅笑· 编辑
摘要:通过<input id="input" type="file" onchange="changeFile()"> 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频,可以通过以下两种方式预览本地图片,不用上传到服务器就可以本地预览。 createObjectURL 这种方式生成 阅读全文
posted @ 2020-11-25 13:44 浅笑· 编辑
摘要:说明 最近在用vue写几个H5页面在微信上展示,遇到一个在弹窗上input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 出现原因分析 当键盘抬起时,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为0 解决 阅读全文
posted @ 2020-11-25 13:43 浅笑· 编辑
摘要:移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包 npm install --save-dev lib-flexible px2rem-loader 在需要的 阅读全文
posted @ 2020-11-25 13:42 浅笑· 编辑
摘要:1.click事件; 要在css中加上cursor: pointer;ios的点击才有效 2.margin-bottom问题; 在ios上,最后一个元素加margin-bottom无效。 3.时间转化问题 由时间转时间戳时 new Date('2019-07-3 11:22:32').getTime 阅读全文
posted @ 2020-11-25 13:41 浅笑· 编辑
摘要:这里用的是集成开发环境XAMPP,假设已经配置好ssl证书,不知如何申请ssl证书者请自行百度。修改Apache相关配置文件,强制所有http跳转到https,假设网站域名为xxx.com。 1、在httpd-ssl.conf中 <VirtualHost _default_:443>下面增加设置: 阅读全文
posted @ 2020-11-25 13:39 浅笑· 编辑
摘要:用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出了一个预览版的 SDK 可以让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用在浏览器中运行起来。 Flutter 在 Web端的雄心 自从去年第一个公测版本推出之后,开 阅读全文
posted @ 2020-11-25 13:38 浅笑· 编辑
摘要:首先是构思 我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭on:打开 off:关闭 <label for="ck2"> <input type="checkbox" id="ck2"> <span>未选中,则关 阅读全文
posted @ 2020-11-25 13:37 浅笑· 编辑
摘要:在Stream,我们构建了许多应用程序来展示我们的服务所提供的出色功能。对于几乎所有的应用程序,我们都将它们放在一个云服务器上—通常是DigitalOcean或AWS EC2。 虽然维护代码库和维持它的相关性是有困难的,但我们发现,在维护应用程序时,最具挑战性的是保持它的活动和运行。 此外,由于No 阅读全文
posted @ 2020-11-25 13:36 浅笑· 编辑
摘要:先来梳理一下本文的目录结构 现在我将详解head标签和它六个子标签的属性和作用,请耐心看完,会有很大的收获哦! 一、 head标签 可选属性: 属性值描述 profile URL 一个由空格分隔的 URL 列表,这些 URL 包含着有关页面的元数据信息。 说明: ·文档的头部经常会包含一些 meta 阅读全文
posted @ 2020-11-25 13:35 浅笑· 编辑
摘要:一、前言 最近在做一些项目重构的工作,看了不少脏乱差的代码,身心疲惫。本文将讨论如何编写整洁的代码,不求高效运行,只求可读性强,便于维护。 二、为什么要写简洁的代码 作为一个合格的程序员,写出简洁的代码是基本的职业素养。相信绝大部分的程序员都不会故意写恶心代码的,无论是对自己或者对别人都没有任何好处 阅读全文
posted @ 2020-11-25 13:34 浅笑· 编辑
摘要:1 em、rem、meta标签的基本概念 em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。 rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。 物理像素是硬件的一 阅读全文
posted @ 2020-11-25 13:33 浅笑· 编辑
摘要:HTTP有哪些方法? HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法 HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 这些方法的具体作用是什么? GET: 通常用于请求服务器发送某些资源 HEAD: 请求资源的头 阅读全文
posted @ 2020-11-24 18:41 浅笑· 编辑
摘要:介绍 NGINX从一开始就参与了微服务运动。 NGINX的轻巧,高性能和灵活性非常适合微服务。 NGINX Docker映像是Docker Hub上排名第一的应用程序映像,您今天在Web上找到的大多数微服务平台都包含一个演示,它以某种形式部署NGINX并连接到欢迎页面。 因为我们认为转向微服务对于客 阅读全文
posted @ 2020-11-24 18:39 浅笑· 编辑
摘要:如今,随着我们构建软件方式的变化,以及API平台的爆炸式激增,各大公司都必须以更快的速度构建出自己的产品、并推向市场。目前,几乎所有的软件需求都需要通过API来提供相应的解决方案,其中包括:支付类API、通信类API、以及传输类API等数千种。那么我们该如何设计并构建出一个优质的API呢? 无论您的 阅读全文
posted @ 2020-11-24 18:38 浅笑· 编辑
摘要:代码审查列表,是代码审查的明确规则和指导手册,它可以使代码审查为你的团队带来更多好处,并且能够显著提升代码审查的速度。 研究表明,使用代码审查列表的审阅者的表现要优于不使用的审阅者。所以不管你是新手开发者还是经验丰富的开发者,开始考虑使用代码审查列表吧。 代码作者应该关注的列表 作为代码的作者,你应 阅读全文
posted @ 2020-11-24 18:35 浅笑· 编辑
摘要:众所周知,架构师的角色,更偏向于策划、而非指挥,塑造、而非支配,其存在的意义,在于引导大家讨论、而非自己主宰一切。 但是,具体应该如何执行呢?本文作者整理了 30 个公认的架构原则,来帮助大家解决此问题。也许有的原则,你从未听说,但你看完就能快速学会。 相信你学会了,工作起来也会事半功倍,或许还可帮 阅读全文
posted @ 2020-11-24 18:29 浅笑· 编辑
摘要:先看一下Redis是一个什么东西 官方简介解释到:Redis是一个基于BSD开源的项目,是一个把结构化的数据放在内存中的一个存储系统,你可以把它作为数据库,缓存和消息中间件来使用。 同时支持strings,lists,hashes,sets,sorted sets,bitmaps,hyperlogl 阅读全文
posted @ 2020-11-24 18:28 浅笑· 编辑
摘要:做什么不重要,怎么做才重要。 如果你想成为一名真正杰出的资深开发者,那只有一个办法:犯错误、改正错误、从错误中学习、分享错误、再重复这一过程。 所有犯过的错误都将成为你的宝贵经历。再从经历中学习,这就是成为一名成功资深开发者的关键。很简单,对吗? 换句话说,你刚刚步入社会,成了一名初级开发者,你纠结 阅读全文
posted @ 2020-11-24 18:26 浅笑· 编辑
摘要:原文作者Stuart Popejoy在为金融业建立交易系统的方面拥有15年的经验。在2016年与Will Martino共同创立Kadena并成为公司总裁之前,Stuart在摩根大通公司新产品部门工作,领导并开发了摩根大通的主要区块链产品Juno。Stuart还为摩根大通编写了算法交易脚本,后者为他 阅读全文
posted @ 2020-11-24 18:25 浅笑· 编辑
摘要:前言 语言是一种复杂的自然习得的人类运动能力。成人的特点是通过大约100块肌肉的协调运动,每秒发出14种不同的声音。说话人识别是指软件或硬件接收语音信号,识别语音信号中出现的说话人,然后识别说话人的能力。特征提取是通过将语音波形以相对最小的数据速率转换为参数表示形式进行后续处理和分析来实现的。因此, 阅读全文
posted @ 2020-11-24 18:23 浅笑· 编辑
摘要:最近拜读了“阿里工程师的自我修养”手册,12 位技术专家分享生涯感悟来帮助我们这些菜鸡更好的成长,度过中年危机,我收获颇多,其中有不少的方法技巧和我正在使用的,这让我觉得我做的这些事情是对的,我走在了一条正确的道路上。我们程序员这个行业不像医生、律师等其他行业,那些行业可谓是越老越吃香,但是我们不一 阅读全文
posted @ 2020-11-24 18:18 浅笑· 编辑
摘要:当我进入软件开发领域时,我非常兴奋。我想要同时学习所有东西:游戏开发、移动开发、人工智能以及所有与之相关的内容。我把时间浪费在了写“hello world”和一些简单的程序上,使用了大约 30 种语言,只是为了弄清楚我应该学哪一种。 最后,一切都变得很无聊,因为我没能创造最酷的东西。然而,当我决定专 阅读全文
posted @ 2020-11-24 18:16 浅笑· 编辑
摘要:随着社会的发展,科技的进步,5G 落地、AI 爆发、大数据持续突破、云计算已然成为新时代的水电煤。日益增多的新兴技术,为开发者带来机遇的同时也带来了不少挑战。尽管开发者们经常身处历史性事件的前沿,但由于很多技术学习门槛较高,且没有相对完整的配套技术生态,开发者们其实很难时刻保持良好的学习曲线。 在简 阅读全文
posted @ 2020-11-24 18:14 浅笑· 编辑
摘要:所谓“热门” “敏捷”俨然成为了热门。毫无疑问,由Scrum Alliance领导的通过ScrumMaster认证的风潮,导致我们现在蜂拥而来成百上千个所谓的“敏捷”教练和培训师,以及许多竞争性的框架和方法。所谓的“敏捷”领导力培训,“敏捷”项目管理产品,等等,层出不穷。 企业的快乐 当然,很多,或 阅读全文
posted @ 2020-11-24 18:12 浅笑· 编辑
摘要:程序员创业的特别之处 关于程序员创业,我之所以愿意谈我的观点,是因为我是程序员出身,也是从小公司做起来的,我自认为对待很多程序员个人包括共享软件作者和一些小网站还是很好的。我希望分享一些经验和体会。首先,我想说的是聪明人不一定能成功,很多程序员很聪明,但我一看就知道他们不会成功。因为我看到了一些问题 阅读全文
posted @ 2020-11-24 18:11 浅笑· 编辑
摘要:对一个人来说,名字很重要,俗语说“人如其名”。对程序中的变量而言,名字同样非常重要。 作为开发人员,你要花费大量的敲代码时间来创建变量和考虑给变量起个名字。 名字无处不在。 你可以命名文件、类、方法和变量。而命名的不同导致有的是好代码,有的是糟糕的代码,最终这会严重影响代码维护的成本。 由于我们花费 阅读全文
posted @ 2020-11-24 17:55 浅笑· 编辑
摘要:作为软件工程师不可避免会遇到的一个场景是:我们在改变或添加一个功能到不是我们创建的、我们不熟悉的、与我们负责的系统部分无关的代码中时,会遇到麻烦。虽然这可能会是一个繁琐而艰巨的任务,但是由于使用其他开发人员编写的代码有很大的灵活性,所以我们可以从中得到大大的好处,包括增加我们的影响范围,修复软件腐烂 阅读全文
posted @ 2020-11-24 17:54 浅笑· 编辑
摘要:进行社招面试时,有一个问题几乎是必问的: 你为什么要离开上一家公司? 其实这个问题主要是想试探一下求职者的核心诉求,并借此预估一下他在本公司工作的稳定性。常见的答案也无非就是这么几种:对薪酬不满意、干得不爽,或者是想换个环境。 然而,我遇到过好几个初次跳槽的求职者给出的答案是:「在原来的公司学不到技 阅读全文
posted @ 2020-11-24 17:52 浅笑· 编辑
摘要:可视化编程能够取代高级语言吗?即使现代的计算机技术得到了飞速发展,可视化编程取代高级语言依旧是其行业内最高理想。本文将从国内外流行的可视化编程商业工具入手,分析现阶段可视化编程的局限性,以及未来可视化编程的发展前景。 之前在知乎看到了一则较早的问题 现在的可视化编程发展到什么程度了,什么时候可以取代 阅读全文
posted @ 2020-11-24 17:51 浅笑· 编辑
摘要:cr的标准 cr(Code review)主要目的在于确保Google 的代码库代码质量越来越好。而所有相关的工具与流程皆是因应这个目的而生。为达到此目的,势必需要做出一连串的权衡与取舍 首先,开发人员必须能够在自己负责的任务上有所进展。如果你从来没有向代码库提交改进过的代码,那么代码库就永远不会改 阅读全文
posted @ 2020-11-24 17:50 浅笑· 编辑
摘要:传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平,拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么。互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人. 如何提升 所谓提升,就是在现有的基础上进行优化,让结果比当前更好. 提升编程效率,可以 阅读全文
posted @ 2020-11-24 17:48 浅笑· 编辑
摘要:最近俩月正好用 vue 做了一个大数据的项目,积累了很多心得。今天终于有机会分享出来了。 组件(component)的使用 vue 提供的模块化无疑是提高开发效率的神器,而且对于后期代码优化和维护也提供的极大地便利。 组件使用简介 vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全 阅读全文
posted @ 2020-11-23 17:47 浅笑· 编辑
摘要:前文 最近在看webpack的源码,发现有个比较头疼的点是:代码看起来非常跳跃,往往看不到几行就插入一段新内容,为了理解又不得不先学习相关的前置知识。层层嵌套之后,发现最基础的还是tapable模型,因此先对这部分的内容做一个介绍。 引子-webpack的基本流程 Webpack的流程可以分为以下三 阅读全文
posted @ 2020-11-23 17:46 浅笑· 编辑
摘要:vue 在插入、更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果 1.transition标签 给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置,但是他会决定Dom更新时自动添加的css类名 这里name="xxx"作为演示 <div id="app 阅读全文
posted @ 2020-11-23 17:45 浅笑· 编辑
摘要:创建项目 首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目: npx create-react-app eslint-prettier-react-demo/ cd eslint-prettier-react-demo/ Eslint 安装依赖 Eslint 是一个可 阅读全文
posted @ 2020-11-23 17:43 浅笑· 编辑
摘要:Hooks 的 API 可以参照 react 官网。本文主要是结合 Demo 详细讲解如何用 Hooks 来实现 react Class Component 写法,让大家更深的理解 Hooks 的机制并且更快的入门。 注意:Rax 的写法和 React 是一致的,本文 Demo 基于 React 实 阅读全文
posted @ 2020-11-23 17:40 浅笑· 编辑
摘要:webpack整个的构建过程是基于事件流 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生 阅读全文
posted @ 2020-11-23 17:39 浅笑· 编辑
摘要:Flutter是Google开发的新一代跨平台方案,Flutter可以实现写一份代码同时运行在iOS和Android设备上,并且提供很好的性能体验。Flutter使用Dart作为开发语言,这是一门简洁、强类型的编程语言。Flutter对于iOS和Android设备,提供了两套视觉库,可以针对不同的平 阅读全文
posted @ 2020-11-23 17:36 浅笑· 编辑
摘要:策略模式是JavaScript设计模式中行为型的设计模式; 定义: 定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换 白话解释: 实际上所谓的策略模式就是值根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断;但是策 阅读全文
posted @ 2020-11-23 17:34 浅笑· 编辑
摘要:简单应用 我们先来看一个简单的应用示例: <div id="app"> <input id="input" type="text" v-model="text"> <div id="text">输入的值为:{{text}}</div> </div> <script> var vm = new Vue 阅读全文
posted @ 2020-11-23 17:33 浅笑· 编辑
摘要:axios 是 vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 作为一个优秀的 HTTP 库,axios 打败了曾经由 vue 官方团队维护的 vue-resource,获 阅读全文
posted @ 2020-11-23 17:28 浅笑· 编辑
摘要:前言 在我们平时的开发中会经常使用到背景图片,下面我这介绍的是Container通过BoxDecoration来设置的 布局 1、创建路由子页面 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: 阅读全文
posted @ 2020-11-23 17:25 浅笑· 编辑
摘要:一、如何使用redux 首先要明确为什么要使用redux,这一点很重要,如果不知道为什么使用redux,那么在开发的过程中肯定不能合理的使用redux.首先来看redux的本质: redux做为一款状态管理工具,主要是为了解决组件间通信的问题。 既然是组件间的通信问题,那么显然将所有页面的状态都放入 阅读全文
posted @ 2020-11-23 17:23 浅笑· 编辑
摘要:我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时看起来也没有什么问题。 目前,集团 Serverless 大潮已至,Node.js serverless-runtime 阅读全文
posted @ 2020-11-23 17:21 浅笑· 编辑
摘要:当我们使用编译器创建一个新Flutter应用的时候,我们可以在主界面看到两个小部件StatelessWidget和StatefulWidget。这是两个最常见使用最频繁的小部件了。 StatelessWidget ,StatefulWidget StatelessWidget 状态不可改变的,它内部 阅读全文
posted @ 2020-11-23 17:15 浅笑· 编辑
摘要:其实在JavaScript的发展中,它主要是在浏览器前端中被应用广泛。因为在实际应用中, JavaScript的表现能力主要取决于宿主环境的API支持程度, 在最早期,只有对BOM, DOM的支持,随着html5的出现,在浏览器中出现了更多,更强大的API供JavaScript调用,但是这些都是发生 阅读全文
posted @ 2020-11-23 17:11 浅笑· 编辑
摘要:在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法。 但是,就算使用框架,有些时候还是要用到的,比如: 阅读全文
posted @ 2020-11-23 17:10 浅笑· 编辑
摘要:写在前面 最近又抽时间把 vue-next/runtime-core 的源码陆陆续续地看完了,期间整理了很多笔记,但都是碎片化的。本来是想整理一下,写成一篇文章分享出来的,但是感觉最终的成果物只能是一篇篇幅巨长的解析文,就算我一行一行的把源码加上注释,其阅读体验也会很差,因为每个人读代码的习惯不同, 阅读全文
posted @ 2020-11-23 17:09 浅笑· 编辑
摘要:背景 在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求,但是使用过 canvas 的人,都会发现一些难以预料的问题>>有关 阅读全文
posted @ 2020-11-23 17:06 浅笑· 编辑
摘要:再有一棵树形结构的JavaScript对象后,我们现在需要做的就是将这棵树跟真实的Dom树形成映射关系,首先简单回顾之前遇到的mountComponent方法: export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 阅读全文
posted @ 2020-11-23 17:04 浅笑· 编辑
摘要:在开发微信小程序之前,个人从来没有接触过开发中涉及到第三方服务器交互的流程。在开发的过程本身倒是没有什么太大的意外,只是在维护服务器登陆状态这一点很讨厌。因为涉及到自身服务器的登录状态以及微信官方服务器登陆状态三方的关系。 下图是微信登陆机制: 在这种场景下,个人非常关注的点在于: 如何能够无感知的 阅读全文
posted @ 2020-11-23 16:43 浅笑· 编辑
摘要:简介 看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry,output,resolve,module, plugins几部分 配置示例 这并不是一个拿来可用的配置,主要是为了更好理解 阅读全文
posted @ 2020-11-22 20:44 浅笑· 编辑
摘要:带单个修饰符的组件 一个组件可能有不同状态。状态应该使用修饰符类来实现。 <!-- 这样写 --> <button class="btn btn--secondary"></button> <style lang="scss"> .btn { display: inline-block; color 阅读全文
posted @ 2020-11-22 20:38 浅笑· 编辑
摘要:前言 相信很多小伙伴都有可能碰到开发后台管理系统这样的需求,那么我们该如何快速的完成这个需求呢 本文将以 react 为切入点,记录打造一个基础管理系统模板的过程,以此加深对 react 技术栈以及项目实战的理解,希望对大家开发一个这样的项目有所帮助 如果文章中有出现纰漏、错误之处,还请看到的小伙伴 阅读全文
posted @ 2020-11-22 20:37 浅笑· 编辑
摘要:目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。 前言 写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构,并提供内部公有组件库和工具库供团队使用。在查阅 阅读全文
posted @ 2020-11-22 20:32 浅笑· 编辑
摘要:Hook 是 react 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 react 特性。 useCallback和useMemo是其中的两个 hooks,本文旨在通过解决一个需求,结合高阶函数,深入理解useCallback和useMemo的用法和使用 阅读全文
posted @ 2020-11-22 19:45 浅笑· 编辑
摘要:在 App 中,渲染 html 是一个非常常见的功能,有可能是直接渲染 html 字符串或者是通过 URL 渲染远程 HTML页面。react Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。 早先 WebView 是在 react Native 核心包中,后来为了减小 阅读全文
posted @ 2020-11-22 19:29 浅笑· 编辑
摘要:目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。 面向读者 有过 react 函数式组件的实践,并且对 hooks 有过实践,对 useState、useCal 阅读全文
posted @ 2020-11-22 15:26 浅笑· 编辑
摘要:前言 由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现,在这里记录一下学习过程。 Protobuf简单介绍 Google Protocol Buffer(简 阅读全文
posted @ 2020-11-22 15:25 浅笑· 编辑
摘要:一、grunt预处理简述 grunt的注册任务函数本身会对传入的参数和配置对象里的相关属性进行一定的预处理,方便任务函数进行操作。grunt的registerTask方法和registerMultiTask方法会进行不同的预处理。 二、预处理参数 grunt命令通过grunt taskname:ar 阅读全文
posted @ 2020-11-22 15:23 浅笑· 编辑
摘要:你对 Redux 感到困惑吗?如果使用新的 Redux Hooks,会更加简单!这里是一个关于 Redux 的速成班,将配合 react 函数组件使用: 1. Redux 使您可以集中存放 JavaScript 应用程序的状态(数据) 它最常与 react 一起使用(通过 react-redux ) 阅读全文
posted @ 2020-11-22 15:22 浅笑· 编辑
摘要:WebAssembly(Wasm)是 Web 浏览器中相对较新的功能,但它地扩展了把 Web 作为服务应用平台的功能潜力。 对于 Web 开发人员来说,学习使用 WebAssembly 可能会有一个艰难的过程,但是 AssemblyScript 提供了一种解决方法。首先让我们看一下为什么 WebAs 阅读全文
posted @ 2020-11-22 15:20 浅笑· 编辑
摘要:简介 读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度 更精准的loader规则 将loader规则写清楚 仅让需要处理的文件,进入loader处理环节,如下 rules: [{ // 正则尽量准确 test: /\.js$/, // 使 阅读全文
posted @ 2020-11-22 15:19 浅笑· 编辑
摘要:解析思路 同样是要使用protobuf.js这个库来解析。 之前提到,在vue中,为了避免直接使用.proto文件,需要将所有的.proto打包成.js来使用。 而在node端,也可以打包成js文件来处理。但node端是服务端环境了,完全可以允许.proto的存在,所以其实我们可以有优雅的使用方式: 阅读全文
posted @ 2020-11-22 15:18 浅笑· 编辑
摘要:区块链技术由于其安全、快速以及去中心化的特性(虽然不是所有项目都满足这些特性,但是大多数项目是符合的)已经迅速渗透到了各种业务场景、我们的生活以及身边的企业中。 数以千计的区块链项目正在开发,或者已经开发完成并且部署到了网络中。各个企业都在寻求区块链的新点子或者试图去改进其他公司正疯狂创造的东西,然 阅读全文
posted @ 2020-11-22 15:17 浅笑· 编辑
摘要:防抖函数(可用于防止重复提交) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。 /** * 防抖函数(可用于防止重复提交 阅读全文
posted @ 2020-11-22 15:16 浅笑· 编辑
摘要:一、页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。 1、localstorage 可以使用 localstorage 来保 阅读全文
posted @ 2020-11-22 15:15 浅笑· 编辑
摘要:具名插槽 自 2.6.0 起有所更新。已废弃的使用 slot attribute 的语法 但是我们有了新的语法,如下: 子组件 childCom: <template id="childCom"> <div> <!-- 具名插槽的针对于组件中不止一个插槽的情况下使用,使用方式,即:给每个插槽指定 n 阅读全文
posted @ 2020-11-22 15:14 浅笑· 编辑
摘要:vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到 webpack.base.conf.js 文件,在里面修改 resolve.alias 即可。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$ 阅读全文
posted @ 2020-11-22 15:11 浅笑· 编辑
摘要:vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的seo,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,除此之外,SSR能够在更短的时间内渲染出页面内容,通过在服务端填充数据吐出到客户端的方式,让用户有更好的用户体验。 前言 基于vueSSR的页面优 阅读全文
posted @ 2020-11-22 15:10 浅笑· 编辑
摘要:react 官网中对非受控组件与受控组件作了如图中下划线的边界定义。一经推敲, 该定义是缺乏了些完整性和严谨性的, 比如针对非表单组件(弹框、轮播图)如何划分受控与非受控的边界?又比如非受控组件是否真的如文案上所说的数据的展示与变更都由 dom 自身接管呢? 在非受控组件中, 通常业务调用方只需传入 阅读全文
posted @ 2020-11-22 15:08 浅笑· 编辑
摘要:在编程语言理论中,惰性求值(英语:Lazy Evaluation),又译为惰性计算、懒惰求值,也称为传需求调用(call-by-need),是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工作。它有两个相关而又有区别的含意,可以表示为“延迟求值”和“最小化求值”,除可以得到性能的提升外, 阅读全文
posted @ 2020-11-21 21:48 浅笑· 编辑
摘要:块级函数 严格模式下,在 ES6 之前应禁止使用。ES6 开始可以使用,函数的作用域为声明该函数的块内部。非严格模式下应禁止使用。 if(true) { function test() { //块级函数 console.log(1); } } test(); 直接修改对象的 prototype 原型 阅读全文
posted @ 2020-11-21 21:46 浅笑· 编辑
摘要:定义 Encapsulate a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests,and support undoa 阅读全文
posted @ 2020-11-21 21:45 浅笑· 编辑
摘要:模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有Commonjs、AMD、CMD以及ES6的模块系统 一、CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量 阅读全文
posted @ 2020-11-21 21:42 浅笑· 编辑
摘要:事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播。 观察者可能只有一个,也可能有一 阅读全文
posted @ 2020-11-21 21:39 浅笑· 编辑
摘要:当你想到路由时,通常会想到类似 react 之类的库。但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 js 写出自己的路由。 简介 我遇到了很多出于各种原因想要自己创建路由的人。既然你看到本 阅读全文
posted @ 2020-11-21 21:36 浅笑· 编辑
摘要:报错详尽信息 Uncaught DOMException: Failed to execute 'toDataURL' on 'htmlCanvasElement': Tainted canvases may not be exported. 前言 最近在做一个创意类的图片合成工具,大概齐就是通过拼 阅读全文
posted @ 2020-11-21 21:34 浅笑· 编辑
摘要:TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型。 接下来看看如何通过泛型参数默认将以下react组件从 js (和jsX)迁移到 TypeScript (和TSX): class Greeting extends react.Componen 阅读全文
posted @ 2020-11-21 21:30 浅笑· 编辑
摘要:1、Commonjs 之 exports和require用法 Commonejs规定每个文件是一个模块。将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境;而后者会形成一个属 阅读全文
posted @ 2020-11-21 21:29 浅笑· 编辑
摘要:在 ES6 之前,js 中的对象字面量(也称为对象初始化器)是非常基础的。可以定义两种类型的属性: 键值对 {name1: value1} 获取器 { get name(){..} } 和 设置器 { set name(val){..}} 的计算属性值 var myObject = { myStri 阅读全文
posted @ 2020-11-21 21:14 浅笑· 编辑
摘要:有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的 js 执行引擎,不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引 阅读全文
posted @ 2020-11-21 20:48 浅笑· 编辑
摘要:node 的fs文档密密麻麻的 api 非常多,毕竟全面支持对文件系统的操作。文档组织的很好,操作基本分为文件操作、目录操作、文件信息、流这个大方面,编程方式也支持同步、异步和 Promise。 本文记录了几个文档中没详细描写的问题,可以更好地串联fs文档思路: 文件描述符 同步、异步与 Promi 阅读全文
posted @ 2020-11-21 20:46 浅笑· 编辑
摘要:变量类型与存储空间 栈内存和堆内存 基本数据类型 string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值基本数据类型不存在拷贝,好比如说你无法修改数值1的值 引用类型 Object Function Reg 阅读全文
posted @ 2020-11-21 20:45 浅笑· 编辑
摘要:js 的动态类型有好有坏。好的一面,不必指明变量的类型。不好的是,咱们永远无法确定变量的类型。 typeof运算符可以确定 js 中的6种类型: typeof 10; // => 'number' typeof 'Hello'; // => 'string' typeof false; // => 阅读全文
posted @ 2020-11-21 20:42 浅笑· 编辑
摘要:1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量,还能从根本上改变你的编码方式。 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; 阅读全文
posted @ 2020-11-21 20:40 浅笑· 编辑
摘要:友情提示:想要更好的理解js继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念 第一种:原型链继承利用原型链的特点进行继承 function Parent(){ this.name = 'web前端'; this.type = ['js','html','css']; } Parent.p 阅读全文
posted @ 2020-11-21 20:36 浅笑· 编辑
摘要:在本文中,我们将探讨 “二次方” 和 “n log(n)” 等术语在算法中的含义。 在后面的例子中,我将引用这两个数组,一个包含 5 个元素,另一个包含 50 个元素。我还会用到 JavaScript 中方便的 performance API 来衡量执行时间的差异。 const smArr = [5 阅读全文
posted @ 2020-11-21 20:34 浅笑· 编辑
摘要:我们知道现在的开发人员都使用 来代替 ==,为什么呢? 我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用 。 这些都导致许多程序员将该语言的一部分排除在外,并将其视为一种缺陷,而不是去扩大他们的对该过程的理解。 下面通过两个使用案例,说明使 阅读全文
posted @ 2020-11-21 20:33 浅笑· 编辑
摘要:软件应用程序在计算机的主存储器中运行,我们称之为随机存取存储器(RAM)。JavaScript,尤其是 Nodejs (服务端 js)允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题,因为糟糕的实现可能会阻塞在给定服务器或系统上运行的所有其他应用程序。C 和 C++ 程 阅读全文
posted @ 2020-11-21 20:30 浅笑· 编辑
摘要:前面的话 根据 JavaScript 的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步。 所谓的同步和异步也是在排队,只是排队的地方不同。 同步和异步 同步任务进入主线程排队,异步任务进入事件队列中排队 同步任 阅读全文
posted @ 2020-11-21 20:26 浅笑· 编辑
摘要:如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作。但是,可能还有一些事情你应该知道。 CORS 是什么,不是什么 新手通 阅读全文
posted @ 2020-11-20 15:57 浅笑· 编辑
摘要:web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是html、css和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不断发展,掌握了这些新技术、新技能,在职场的竞争力必然会翻倍提升。 一、零基础学web前端开发要怎么去 阅读全文
posted @ 2020-11-20 15:53 浅笑· 编辑
摘要:Web前端的路该怎么走?这是作者张鑫旭的文章中的一个小部分,觉得非常有必要分开列出来。关于前端的路该如何走,一般都是工作1年作用或者正在想入职前端的小伙伴经常遇到的十大常见问题之一。 问题描述如下: 刚刚毕业,在公司一直做的是前端开发,之前都是自己去学习一些基础的前端知识(html+css+js)。 阅读全文
posted @ 2020-11-20 15:50 浅笑· 编辑
摘要:从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。 工作原理 SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元 阅读全文
posted @ 2020-11-20 15:48 浅笑· 编辑
摘要:目前市场上主流的APP分为三种:原生APP、Web APP(即html5)和混合APP三种,相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧! 一、原生开发 原生开发(Native App开发),是在Android、 阅读全文
posted @ 2020-11-20 15:47 浅笑· 编辑
摘要:介绍 html5 为我们提供了 File API 相关规范。主要涉及 File 接口 和 FileReader 对象 。 本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。 准备工作 首先,我们的 File 来自于<input>标签中 阅读全文
posted @ 2020-11-20 15:45 浅笑· 编辑
摘要:1、vue, react, Angular vue 在 2018、2019 年继续增长,其在 GitHub Stars 已经超过了 react ,国内公司更喜欢 Vue。虽然 Angular 与 React 和 Vue 等库相比,粉丝较少,但它仍然是专业项目的热门选择。 无论是Vue3.0, Rea 阅读全文
posted @ 2020-11-20 15:42 浅笑· 编辑
摘要:一次完整的HTTP请求过程 当我们在web浏览器的地址栏中输入: www.baidu.com,然后回车,到底发生了什么 过程概览 1.对www.baidu.com这个网址进行DNS域名解析,得到对应的IP地址 2.根据这个IP,找到对应的服务器,发起TCP的三次握手 3.建立TCP连接后发起HTTP 阅读全文
posted @ 2020-11-20 15:40 浅笑· 编辑
摘要:一、Material Design规范中占位符交互效果 Material Design风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用js实现的。(ps:weex 不支持这个样式) 实际上,我们可以借助css :plac 阅读全文
posted @ 2020-11-20 15:38 浅笑· 编辑
摘要:bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系: `__:双下划线用来连接块和块的子元素 ` :仅作为连字符使用 阅读全文
posted @ 2020-11-20 14:17 浅笑· 编辑
摘要:在诸多的企业尤其是创业型公司中,HR 在招聘时往往希望可以招到一名技术全能型人才,而这种人才又被称之为 全栈开发者,那么对于全栈开发者而言,都需要具备哪些技能? 以下为译文: 最近,在我参加的一个Web技术会议上,一位开发同事问了我这个问题。这位开发同事遇到的很多新人都自称是全栈开发人员,有点像Bo 阅读全文
posted @ 2020-11-20 14:15 浅笑· 编辑
摘要:最近工作中重构了抽奖转盘,给大家提供一个开发转盘抽奖的思路 需求 1、转盘根据奖品数量不同而有变化 2、canvas 目录结构 由于业务需要所以开发了两个版本抽奖,dom和canvas,不过editor.js部分只能替换图片,没有功能逻辑。 需要注意的是此目录隐藏了一个动态数据类(dataStore 阅读全文
posted @ 2020-11-20 14:14 浅笑· 编辑
摘要:1.Arachni Arachni是一款基于Ruby框架构建的高性能安全扫描程序,适用于现代Web应用程序。它可用于Mac,Windows和Linux的便携式二进制文件 Arachnin能适用于下面的平台和语言 Windows, Solaris, Linux, BSD, Unix Nginx, Ap 阅读全文
posted @ 2020-11-20 14:12 浅笑· 编辑
摘要:随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着多分辨率适配的问题。 基本概念 响应式开发本质时针对多种屏幕做适配,在实际开发中,通常情况下时针对主流的设备进行适配。在开发前,必须掌握几个基本概念: 物理像素:即屏幕的实际像素点。像素是屏幕设备的最小显示单 阅读全文
posted @ 2020-11-20 14:11 浅笑· 编辑
摘要:一、图标的本质 font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非 阅读全文
posted @ 2020-11-20 14:09 浅笑· 编辑
摘要:在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个 例子 。 我们将从下面这里开始: 这里请查看 Jesper Ekstrom 的 Revealing Text 阅读全文
posted @ 2020-11-20 14:07 浅笑· 编辑
摘要:一、变形 transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。 示例: transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,4 阅读全文
posted @ 2020-11-20 14:03 浅笑· 编辑
摘要:一.某个用户向你反映说你开发的网站访问速度很慢,但是该用户访问其他问题很正常,分析下原因、有哪些工具分析原因、怎么解决问题? (1)可能的原因一:服务器出口带宽不够用。这是一个很常见的瓶颈。一方面,可能是本身购买的服务器出口带宽就很小(企业购买带宽相当昂贵),一旦用户访问量上来了,并发量大了,自然均 阅读全文
posted @ 2020-11-20 14:02 浅笑· 编辑
摘要:前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系) 像素 它不是自然界的物理长度,指基本原色素及其灰度的基本编码。 css中的像素只 阅读全文
posted @ 2020-11-20 14:01 浅笑· 编辑

点击右上角即可分享
微信分享提示