暂时未有相关云产品技术能力~
每天进步一点点 研磨生活的香甜
ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类)。
Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性。与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组。
ES6引入了两种新的数据结构:Set和Map。Set是一组值的集合,其中值不能重复;Map(也叫字典)是一组键值对的集合,其中键不能重复。Set和Map都由哈希表(Hash Table)实现,并可按添加时候的顺序枚举。
箭头函数(Arrow Function)是ES6提供的一个很实用的新功能,与普通函数相比,不但在语法上更为简洁,而且在使用时也有更多注意点,
类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据。总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView。在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能。
在ES5中,如果使用构造函数RegExp()初始化RegExp对象(即正则表达式),并且它的第一个参数是正则表达式时,那么不允许再传入标志字符串(即第二个参数)。而ES6更改了这项限制,如果传入了第二个参数,那么就会取代第一个参数中的标志,如下所示。
ES6不仅完善了数字的八进制形式,还补充了一种十六进制形式,并且添加了全新的二进制形式。下面的三个变量分别表示八进制、十六进制和二进制的10,注释中给出了该进制的另一种写法。
在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载。而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了。模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装、按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程。但有一点要注意,模块中的代码默认运行在严格模式中。
当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么ES6允许省略冒号和属性值,这样就能避免冗余的初始化。下面分别用传统的键值对和最新的简写方式创建对象字面量,可以明显的看出,第二种书写起来更加精炼。
模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号。模板字面量包含特定形式的占位符(${expression}),由美元符号、大括号以及合法的表达式组成,合法的表达式(expression)可以是变量、算术或函数调用,甚至还可以是模板字面量。在ES6引入模板字面量后,就能避免用若干个加号来实现字符串拼接,而改用更为优雅的语法来替代,下面用新旧两种方式分别来组合字符串。
解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性。解构地目的是简化提取数据的过程,增强代码的可读性。有两种解构语法,分别是数组解构和对象解构,两者的区别在于解构赋值语句的左侧,前者是数组字面量,而后者是对象字面量。为了说明解构的优势,下面用一个例子来对比手动赋值和解构赋值。
扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对象(iterable)。虽然两者之间有诸多类似,但它们的功能和应用场景却完全不同。扩展运算符能把整体展开成个体,常用于函数调用、数组或字符串处理等;而剩余参数正好相反,把个体合并成整体,常用于函数声明、解构参数等。此处的整体可能是数组、字符串或类数组对象等,个体可能是字符、数组的元素或函数的参数等。
古语云:“纸上得来终觉浅,绝知此事要躬行”。的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓。自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理。为此,开辟了《ES6躬行记》系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友。
我们作为程序员,对技术要时刻保持着激情,每天都需要不断地学习编程语言、框架或库,并且会的工具越多越好。很多人都还会觉得学习Angular、React、Vue、Riot、Ember和Knockout等框架是一件有趣而高大上的事情。
每年各大电商都会推出图书满减活动,每次我都会屯些书,然而在以前,这些书买了后经常放在书架上吃灰,给自己的理由就是没时间看。现在想想是自己当时看的方法不对,由于对每本书都是事无巨细无差别的从头开始一篇篇的看,看的时候也不注意笔记,因此经常是读了后面的忘了前面的,读完整本书,能记得的内容寥寥无几。平时如果用不到的话,等于是白读了,久而久之,就越来越不喜欢阅读书籍了,但屯书的习惯倒没变。
在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程。有个记录的话,在未来需要用到相关知识时,也方便自己查阅。
最近在知乎上看到有人问“一个人开发一个项目是一种怎样的体验?”,这让我想起了2011年刚出道那会儿的项目经历。当时在一家旅游公司工作,整个公司就我一个技术,老板和我们算是校友,通过关系在我们学校招一个人过来做开发,主要维护公司的网站。当时比较流行的社交平台是开心网,老板突发奇想,让我们也做个类似的系统,就叫驴友驿站(目前已经下线),刚出来混,一听要做个这么好玩的系统,马上就一头扎进去了。当时是个热血青年,看到公司的网站是用古老的ASP做的,马上就想将其改版,但碍于时间不够,只能先搁置,完成当前的任务才是该做的事情,顺便为自己将要用的相关技术试试水。
最近有一本很红的面试书叫《剑指Offer:名企面试官精讲典型编程题》,作者是美国微软总部资深软件工程师何海涛,他在书中以面试官的角度分享了程序员面试的方方面面,并且还在书中停供了80余道面试题,大部分是与数据结构和算法有关。本文不会重点分析这些面试题目,而是归纳总结书中所提到的一些面试相关的编程技能和软技能。
在上一篇《初识少儿编程》曾提到过Scratch的脚本标签内包含10大模块,本文将围绕这10大模块展开,分为两部分:积木和编程概念,结合《动手玩转Scratch2.0编程―STEAM创新教育指南》一书进行分析。
少儿编程并不需要写代码,而是以简单易用的图形化编程为主,注重趣味性和可玩性,学习目标不是培养未来的程序员,而是培养孩子的思维、学习和独立解决问题的能力,以及培养探索、创新和协作等精神。少儿编程所使用的编辑器有很多,例如Scratch、Etoys、Alice等,本文将要介绍的编辑器是Scratch。
方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案。搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂。题目旁边的方括号内, 简单记录了与此题相关的知识点。总共大概一千多道,包含国内的题目,如有错误,欢迎指正。有些原链可能已无法打开,有些可能需要代理才能查看。
方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案。搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂。题目旁边的方括号内, 简单记录了与此题相关的知识点。总共大概一千多道,包含国内的题目,如有错误,欢迎指正。有些原链可能已无法打开,有些可能需要代理才能查看。
方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案。搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂。题目旁边的方括号内, 简单记录了与此题相关的知识点。总共大概一千多道,包含国内的题目,如有错误,欢迎指正。有些原链可能已无法打开,有些可能需要代理才能查看。
最近读了一本不是编程的程序员技能书《软技能 代码之外的生存指南》,全书分为7个篇章,分别是职业、自我营销、学习、生产力、理财、健身和精神。其中在读过职业、自我营销和理财这三个篇章后,让我非常有感触,也让我很意外,本来以为国外的软件环境会与国内不同,现在看来很多情况都很类似。下面会着重围绕这三个篇章展开讨论。
最近拜读了徐茂权老师的《 网络营销决胜武器(第2版)》,下面会梳理书中的内容,记录下以后可能会用到的软文营销的技巧。
首先插播一条好消息,新书《前端程序员面试笔试宝典》已于9月在各大平台上架,现免费送出4本(看到大家热情这么高涨,幸运人数已提升至4人),具体参与规则如下所列:
在第一篇文章中,重点介绍了脚本需要搜集的数据,而本篇主要介绍的是服务器端如何处理客户端发送过来的请求和参数。
Piwik现已改名为Matomo,这是一套国外著名的开源网站统计系统,类似于百度统计、Google Analytics等系统。最大的区别就是可以看到其中的源码,这正合我意。因为我一直对统计的系统很好奇,很想知道里面的运行原理是怎么样的,碰巧了解到有这么一个系统,因此马上尝试了一下。国内关于该系统的相关资料比较匮乏,大多是分享怎么安装的,并没有找到有关源码分析的文章。下面先对其做个初步的分析,后面会越来越详细,本人目前的职位是前端,因此会先分析脚本代码,而后再分析后台代码。
面试的自信来源于扎实的基础
《程序员的数学思维修炼(趣味解读)》、《生活中的数学》和《生活中的概率趣事》,下面会对本书的知识点做个梳理。
最近有点浮躁,也有点膨胀,工作也提不起劲,有点混混的节奏。 在此期间看到了本书《工匠精神》,读了几遍,矫正了一下自己。正像高达OO中的人物们一样,找到了一个战斗的理由。
《代码大全》中的变量
前端页面数据埋点、分析和参考
前端工程师在理解Nginx之后,就能更好的与后端工程师沟通,为了能提高工作效率,这两天抽空读了《Nginx高性能Web服务器实战教程》。
两本趣味算法书
前端工程化是一个新兴的词语,改变了前端的开发模式,《前端工程化体系设计与实践》系统的阐述了前端工程化的方方面面。
原子设计是一种方法,由五个不同的阶段一起工作,以更慎重和更具层次的方式创建界面设计系统。
最近在拜读一本《前端架构设计》的书,该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程,都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。
这些天突然想了解一点关于项目管理方面的知识,因此找了一本叫做《写给大家看的项目管理书》的书,该书比较通俗易懂,下面将该书的重点部分加以记录。
最近在拜读一本Web体验相关的书《渐进增强——跨平台用户体验设计 》,阅读后做些总结,消化一下书中的精髓。
将表单验证的通用部分提炼出来,做成一个简易插件,方便调用。 已将源码放到GitHub上,名字叫zValidate。
最近在研读《高性能JavaScript》,在此做些简单记录。示例代码可在此处查看到。
大多数程序员的英语是软肋,包括我在内。自己也曾经试过多种方法来学习英语,但最后都是不了了之,现在回想起来,
《正则指引》
移动端 H5图片裁剪插件,内置简单手势操作
这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本“WebPageTest 3.0”。
在前一篇《配置》完成后,点击“START TEST”,就可以开始测试,测试需要一段时间。 有时候可能还要排队,如下图所示,测试完成后可查看到测试结果。
网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类。 WebPageTest通过布置一些特定的场景进行测试,例如不同的网速、浏览器、位置等。 测试完成后,能获得优化等级、性能参数、请求瀑布图、网页幻灯片快照等,更多信息可以参考《WebPageTest快速入门》。
JavaScript中通常分为两种类型转换,“隐式强制类型转换”(implicit coercion)和“显式强制类型转换”(explicit coercion)。 下面所有代码的源码可以在此处查看。
对于table的一些基础信息不了解的,可以参考我以前写过的一篇《关于table的一些记录》。下面演示的代码,具体的源码可以参考此处。