从 JavaScruot 语法改写为 TypeScript 语法，有两个关键点，一点是类成员变量(Field)需要声明，另一点是要为各种东西(变量、参数、函数/方法等)声明类型。从 ES6 语法改写为 TypeScript 语法，有两个比较重要的知识点，一个是声明类成员，另一个是声明类型。这两个语法特点在 JavaScript 中都不存在。而这两个点直接引出了两个关键性的问题，有哪些类型？怎样声明？类型在说 TypeScript 的类型之前，我们先复习一下 JavaScript 的七种类型：undefinedfunctionbooleannumberstringobjectsymbol这七种类型都是可以通过typeof运算符算出来的，但其中并没有我们常见的Array、null，Date之类的类型——因为它们其实都是object。TypeScript 的重要特性之一就是类型，所以 TypeScript 中的类型要讲究得多，除了 JavaScript 中的类型之外，还定义了其它一些(不完全列表)Array，或T[]，表示 T 类型的数组null，空类型，其作用与strictNullChecks编译参数有关Tuple(元组)，形如[Number, String]enum T，定义枚举类型T，可理解为集中对数值常量进行命名interface T，接口，T是一种接口类型class T，类，T ...继续阅读 (20)

1. 导语承接上文：Vue 2.x 实战之后台管理系统开发（一）在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。在开发过程中，会遇到一些常见的需求和问题，我整理了一下，有以下几点。2. 常见需求01. 父子组件通信a. 父 -> 子（父组件传递数据给子组件）使用 props，具体查看文档 - 使用 Prop 传递数据（https://cn.vuejs.org/v2/guide...使用-Prop-传递数据）b. 父 -> 子（在父组件上调用子组件内的方法）使用 ref，具体查看文档 - 子组件索引（https://cn.vuejs.org/v2/guide...子组件索引）父组件 template子组件// 父组件 script this.$refs.profile.someMethod();注意：如果在子组件上设置 ref 属性，则可以通过 this.$refs 获取到该子组件对象，如果在普通的 html 标签上设置 ref 属性，则获取到的是 Dom 节点。c. 子 -> 父（在父组件上获取子组件内的数据）同上，也是利用 ref// 父组件 script let childData = this.$refs.profile.someData;d. 子 -> 父（子组件内触发事件，父组件监听事件）父组件可以在 ...继续阅读 (20)

这是一张神奇的 gif 图片，它可以显示自己的 MD5 值。这张图片的 MD5 值是:f5ca4f935d44b85c431a8bf788c0eaca原始图片地址：https://shells.aachen.ccc.de/~spq/md5.gif相关链接：An animated GIF that shows its own MD5 Reddit：AnimatedGIF displaying its own MD5 hash • r/programming文中讨论区也大致解释了图片的生成原理。1979 年 Ralph Merkle 博士发表了关于单向函数构造抗碰撞的信息摘要论文 R.C. Merkle.Secrecy, authentication, and public key systems. （PS：后来博士转而去研究奈米科技以及人体冷冻技术）(图片来源维基百科：Merkle-Damgård construction)Merkle 就是 MDx 中的 M，另一 D 是丹麦人 Ivan Damgård。（伊万？？？）在 13 年后的 1992 年，Ronald Rivest 发表了 MD5 算法，用于改进之前的 MD、M1、…、M4 算法。通过再仔细观察上面的图就很容易发现，MDx 族算法是一种基于块的流式算法。我们回到这张神奇的 gif 图上，本质是一种碰撞攻击Herding ...继续阅读 (21)

破解前端面试系列文章本周出到第 3 篇：如何搞定纸上编程环节，早些时候发布了闭包篇、DOM 篇，感兴趣的同学可以看看，对面试官和求职者都应该有些参考价值，每篇文章下面的讨论也是值得阅读的，部分读者提出了非常不错的建议和想法。下面是本周精选内容，请享用。技术动态Prettier 发布 1.4.0 版本非常好用的代码格式化工具 Prettier 本周发布了 1.4.0 版本，新版增加了对 CSS、Less、SASS、TypeScript 的支持，也修复了格式化 JSX 时的一些问题，预计接下来各代码编辑器插件也会紧跟升级，VSCode 里面的插件已经升级完了，你还在等啥？CSSConf EU 2017 视频列表原计划收录在 56 期的技术大会视频里面的内容，但是考虑到信息量太大，延迟到了这周。这是 CSSConf EU 2017 的视频列表，相比而言 CSS 的社区更小也更年轻，但是还是有不错的内容，跟 CSS-IN-JS 有关的题为《A Unified Styling Language》演讲推荐观看，Medium 上也为相同名字的文章。文章教程JS 模块现状和建议最近关于 Node.js 中如何实现 ES 模块的讨论多了起来，这篇文章对 ES 模块当下的发展做了梳理，包括各种工具（比如 Webpack、Rollup）的支持情况，浏览器的支持情况。并在最后就是否应该开始 ES 模块给出 ...继续阅读 (65)

译者按:箭头函数看上去只是语法的变动，其实也影响了this的作用域。原文:JavaScript: Arrow Functions for Beginners译者:Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。本文我们介绍箭头(arrow)函数的优点。更简洁的语法我们先来按常规语法定义函数：function funcName(params) { return params + 2; } funcName(2); // 4该函数使用箭头函数可以使用仅仅一行代码搞定！var funcName = (params) => params + 2 funcName(2); // 4是不是很酷！虽然是一个极端简洁的例子，但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法：(parameters) => { statements }如果没有参数，那么可以进一步简化：() => { statements }如果只有一个参数，可以省略括号:parameters => { statements }如果返回值仅仅只有一个表达式(expression), 还可以省略大括号：parameters => expression // 等价于: function (parameters){ return expression; } ...继续阅读 (35)

为何要用正则正则表达式是为了专门解决文本的两个问题而产生的：查找特定的文本（搜索）查找并编辑特定的文本（替换）JavaScript中的正则JavaScript中的正则表达式用RegExp对象来表示。创建方式：1. var pattern = new RegExp("s$"); //用RegExp()构造函数来创建 2. var pattern = /s$/; //直接量语法来创建正则的语法直接量字符一般来讲，正则表达式中的所有字母和数字都是按照字面含义进行匹配的。eg:/s/就是匹配字母s。非一般的话，就是那些转义字符和正则中自带的一些特殊含义的符号。如果想在正则表达式中使用这些字符的直接量进行匹配，则必须使用前缀.转义字符：\n \r \t \o \v \f \xnn \uxxxx \cX 殊含义的符号: ^ $ . * + ? = ! : | \ / () [ ] { }字符类用方括号包裹直接量字符就组成了字符类。/[abc]/ //匹配字母"a","b","c"中的任意一个注意：字符类能够匹配包含在中括号中的一系列字符中的任意一个，但是匹配的结果只能够是其中的一个而不是多个。var str="abcd"; var reg=/[abcd]/; console.log(str.match(reg)); //结果是 ["a", index: 0, input: "abcd ...继续阅读 (29)

原文作者：Sébastien Castiel原文链接：Writing modern JavaScript code说点什么：这是一篇很朴素的文章，讲的道理都懂，但实际上，在工作中遇到类似的情形却未必如此，编写可维护，可阅读，更安全的代码是我们应有的责任。是不是还认为 JavaScript 是一门用于在光标悬浮时改变页面元素的语言？这些日子已经不复存在，每一种语言都在随着时间推移而发展，我们使用语言的方式同样也在发展。看一下你一两年前写的代码：会感到羞愧吗？如果是的话，这篇文章应该很适合你。这里会列出一些所谓的最佳实践，目的是让你的 JavaScript 代码更容易编写，阅读和维护。使用可格式化代码的 linter第一个建议是使用 linter 工具，可以帮助你检查在不同文件是否遵守一致的规则，尤其是当不同开发人员在同一个项目上工作：缩进，括号中的空格，替换==为===...但更重要的是，尽可能使用 linter 工具自动修复代码。ESLint就做得很好（带有--fix选项），而且与所有主流 IDE 完美集成，可以在保存时自动修复文件。还可以使用Prettier，不过这款工具更注重格式化而不是静态检查，但处理后的结果基本相同。下一步将介绍与 linter 工具一起使用的规则：为你的 linter 定制现代化的规则如果不知道你的代码需要什么样的规则，可以参考：StandardJS。这是 ...继续阅读 (37)

前言在前端开发中会遇到一些频繁的事件触发，比如：window 的 resize、scrollmousedown、mousemovekeyup、keydown……为此，我们举个示例代码来了解事件如何频繁的触发：我们写个index.html文件：DOCTYPE htmldebounce#container{ width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px; }debounce.js文件的代码如下：var count = 1; var container = document.getElementById('container'); function getUserAction() { container.innerHTML = count++; }; container.onmousemove = getUserAction;我们来看看效果：从左边滑到右边就触发了 165 次 getUserAction 函数！因为这个例子很简单，所以浏览器完全反应的过来，可是如果是复杂的回调函数或是 ajax 请求呢？假设 1 秒触发了 60 次，每个回调就 ...继续阅读 (26)

一：Date类型介绍要创建一个日期对象，使用new操作符和Date构造函数即可：var now = new Date();Date.parse()方法其中Date.parse()方法接收一个表示日期的字符串参数，然后尝试根据这个字符串返回相应日期的毫秒数。ECMA-262没有定义Date.parse()应该支持哪种日期格式，因此这个方法的行为因实现而异，而且通常是因地区而异。将地区设置为美国的浏览器通常都接受下列日期格式："月/日/年"，如6/13/2004;"英文月名 日,年"，如May 12,2004;"英文星期几 英文月名 日 年 时:分:秒 时区"，如Tue May 25 2004 00:00:00 GMT+0800。ISO 8601扩展格式YYYY-MM-DDTHH:mm:ss:sssZ（例如2004-05-25T00::00:00）。只有兼容ECMAScript5的实现支持这种格式。例如，要为2004年5月25日创建一个日期对象，可以使用下面的代码：//Tue May 25 2004 00:00:00 GMT+0800 (中国标准时间) var someDate = new Date(Date.parse('May 25,2004'));如果传入Data.parse()的方法的字符串不能表示日期格式，会返回NAN。实际上，如果直接将表示日期的字符串传递给Date构造函数 ...继续阅读 (18)

本文按照政治问答题必备套路分为以下3个部分：为什么要跨域？跨域是什么？如何实现跨域？Section1、为什么要跨域？自古以来（1995年起），为了用户的信息安全，浏览器就引入了同源策略。那么同源策略是如何保证用户的信息安全的呢？栗子1：如果没有同源策略，你打开了你的银行账户页面A，又打开了另一个不相关的页面B，这时候如果B是恶意网站，B可以通过Javascript轻松访问和修改A页面中的内容。栗子2：现在我们广泛的使用cookie来维护用户的登录状态，而如果没有同源策略，这些cookie信息就会泄露，其他网站就可以冒充这个登录用户。由此可以看出，同源策略确实是必不可少的，那么它会带来哪些限制呢？1、Cookie、LocalStorage和IndexDB无法读取。2、DOM无法获得。3、AJAX请求不能发送。有时候我们需要突破上述限制，就需要用跨域的方法来解决。Section2、跨域是什么？什么叫做不同的域？比如：http://www.a.com:8000/a.js协议（http）、域名（www.a.com）、端口（8000）三者中有一个不同就叫不同的域。跨域就是不同的域间相互访问时使用某些方法来突破上述限制。【注意：协议或者端口的不同，只能通过后台来解决。】Section3、怎么跨域？一、解决Section1中提到的1、2两点限制：1.Cookie、LocalStorage和Ind ...继续阅读 (10)

socket.io与cluster在线上系统中，需要使用node的多进程模型，我们可以自己实现简易的基于cluster模式的socket分发模型，也可以使用比较稳定的pm2这样进程管理工具。在常规的http服务中，这套模式一切正常，可是一旦server中集成了socket.io服务就会导致ws通道建立失败，即使通过backup的polling方式仍会出现时断时连的现象，因此我们需要解决这种问题，让socket.io充分利用多核。在这里之所以提到socket.io而未说websocket服务，是因为socket.io在封装websocket基础上又保证了可用性。在客户端未提供websocket功能的基础上使用xhr polling、jsonp或forever iframe的方式进行兼容，同时在建立ws连接前往往通过几次http轮训确保ws服务可用，因此socket.io并不等于websocket。再往底层深入研究，socket.io其实并没有做真正的websocket兼容，而是提供了上层的接口以及namespace服务，真正的逻辑则是在“engine.io”模块。该模块实现握手的http代理、连接升级、心跳、传输方式等，因此研究engine.io模块才能清楚的了解socket.io实现机制。场景重现服务端采用express+socket.io的组合方案，搭配pm2的cluster模式 ...继续阅读 (6)

前言最近在用Polymer封装纯数字的输入框，开发过程中发现不少坑，也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[type=number]的遗憾》《动手写个数字输入框2：起手式——拦截非法字符》《动手写个数字输入框3：痛点——输入法是个魔鬼》《动手写个数字输入框4：魔鬼在细节——打磨光标位置》HTML5带来的福利-input[type=number]/* 工具函数...无视我吧:D */ const comp = (...fns) => (...args) => { let len = fns.length while (len--){ args = [fns[len].apply(null, args)] } return args.length > 1 ? args : args[0] } const isSome = x => 'undefined' !== typeof x && x !== null const invokerImpl = n => o ...继续阅读 (3)

介绍sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。该库使用 canvas 实现，兼容 IE9 以上浏览器。文档(中英文)：http://test.omwteam.com/sChart演示地址：http://test.omwteam.com/sChart/demo.html使用指南$ npm install schart.js import sChart from 'schart.js'也可以直接插入script到你的HTML页面:使用简单：new sChart(canvasId, type, data, options);即可生成一个图表。canvasId：canvas标签的id，必填。type：图表类型，必填。options：图表配置参数，可选，具体参考文档。data：要生成图表的数据，格式为：data:[ {name: 'xx', value: 'yy'} ]name则为坐标值，value则为柱状数据值。其他类型的图表data格式都相同，可以同个数据生成不同图表。vue相关vue-schart：是用vue.js封 ...继续阅读 (7)

很多重视技术的互联网公司在工程师招聘的技术面环节都会要求候选人在纸上写代码（后文用“纸上代码”代称），面试官想通过这种方式考察哪些点？候选人该注意哪些点？本文基于美团早几年常用的一道区分度比较高的面试题来做详细讲解，这道题我现在还在用，面过的人很多，但是纸上代码环节能答到满分的少之又少。本文为《破解前端面试》系列文章的第 3 篇，前 2 篇链接在这里：闭包篇、DOM 篇。为什么要纸上代码？纸上代码（也有可能在白板上写）的做法乍看起来不够人性，但如果你是团队的 Leader，什么样的人能更好的融入团队？如果你是老板，你愿意掏钱养什么样的员工？纸上代码的基本目的就是考察候选人是否具备出活的能力，附带考察候选人是否思路灵活、知识面广。纸上代码环节怎么考察出活的能力？首先是出活的速度，没有编码基本功的人快速出活的概率是极低的，100% 依赖百度或者 IDE 自动完成才能完成基本任务的工程师算不上合格的工程师；其次是出活的质量，通过编码过程可以了解候选人通过学习和训练积累下来的编码风格、思考方法等；此外，通过纸上代码也可以了解候选人接受和完成任务的主动性，是不是愿意接受任何团队需要完成的任务。某种程度上说，纸上代码过程就是今后工作的缩影，既然如此，面试时排练下不是挺好的么？纸上代码该怎么做？通常来说，纸上代码都不会问特别复杂的问题，很可能只是完成非常通用的需求，解决实际遇到的业务问题，或者用 ...继续阅读 (8)

原文链接：The Ultimate Atom Editor Setup (+for JS/React)根据多年以来不断完善 Sublime Text 配置的经验，决定这次给 Atom 也来一个大改造。这个过程花费了好几个月的时间，但成果还是很卓有成效的，我现在非常满意这份配置。这份清单将分为实用工具和 React 专用，并涉及到快捷键绑定。实用工具atom-beautify可以在 Atom 中 美化 HTML，CSS，JavaScript，PHP，Python，Ruby，Java，C，C ++，C＃，Objective-C，CoffeeScript，TypeScript，Coldfusion，SQL等。快捷键：⌃+⌥+Bprettier-atom使用 Prettier 来格式化 JavaScript 代码，配有强大的 ESlint 集成。快捷键：⌃+⌥+Fatom-transposeAtom 的转置更像是字符串翻转。在 Sublime 可以将选中的两个字符串进行交换，看起来更有用。快捷键：⌥+Tcase-keep-replace使用这个插件可以在替换文本的时候可以保留原来的命名风格。快捷键：⌘+⌃+Rchange-case一个可以快速改变当前选择文本命名方式的工具。比如可以从camelCase转换到snake_case等。快捷键：⌘+K ⌘+C/Scopy-path可以灵活地复制文 ...继续阅读 (13)

项目地址在线演示不识庐山真面目，只缘身在此山中。大概一个月前，开源了Vue重构豆瓣移动端的项目，效果还可以，收到了很多小伙伴的反馈，话说是要写一些文章的，但迟迟没有动笔，估计小伙伴们等的花都谢了，拖延症是病，需要治疗...接下来开始填坑，这一系列的文章会把在开发中遇到的问题总结下来。这篇文章是第一篇，是一些准备工作，包括从idea到具体项目实现...目录结构万事开头难，当有idea从你脑海中闪过的时候，你第一个想到的应该是:脚手架工具，快速生成基本的项目结构，即刻上手。Vue官方就提供了方便易用的Vue-cli命令行工具，快速，高效，爽!这个项目本身是基于Vue-cli的webpack模板，简单的输入一条命令vue init webpack my-project，便能生成一个使用webpack作为打包工具，具备热重载，代码检查，css预处理等一系列功能的初始项目。这一系列文章不会讲webpack如何使用?有可能会涉及一些简单的配置项。当然，学习webpack能很好的理解和解决开发中遇到的问题，有需要可自行谷歌。不过，也不必担心，正如上面所说，即使你不了解webpack，你仍然可以用Vue-cli快速开发出高逼格Vue应用。来看看我们的目录结构:. ├── build // Webpack打包相关配置 ├── config ...继续阅读 (6)

这篇依然是跟dom相关的方法，侧重点是跟集合元素查找相关的方法。读Zepto源码系列文章已经放到了github上，欢迎star:reading-zepto源码版本本文阅读的源码为zepto1.2.0内部方法之前有一章《读Zepto源码之内部方法》是专门解读zepto中没有提供给外部使用的内部方法的，但是有几个涉及到dom的方法没有解读，这里先将本章用到的方法解读一下。matcheszepto.matches = function(element, selector) { if (!selector || !element || element.nodeType !== 1) return false var matchesSelector = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector if (matchesSelector) return matchesSelector.call(element, selector) // fall back to performing a selector: var match, ...继续阅读 (14)

前面写了一篇，写的很粗，这篇讲讲一些细节。实际上Fiber/Coroutine vs Async/Await之争不是一个简单的continuation如何实现的问题，而是两个完全不同的problem和solution domain。Event Model我们回顾一下最纯粹的Event Model。这曾经在UI编程，和现在仍然在microcontroller(MCU)编程中占据主力地位，在系统编程上是thread model了。用MCU编程来讲解最方便，在传统UI编程上是一样的。单核的MCU具有硬件的Thread。Main Thread是CPU的正常运行，Interrupt Thread(一般称为ISR，Interrupt Service Routine)是硬件上的比Main Thread优先级更高的Thread，即所谓的抢先(pre-emptive)。如果Main Thread在运行，有Interrupt进来，CPU会立刻跳转到ISR入口执行，ISR原则上应该保存现场，运行，然后恢复现场，return。return之后Main Thread重新拿回CPU继续运行。这里压栈弹栈的细节不说了，这就是一个抢先CPU的过程。在这种模式下编程，ISR里能访问的变量，和Main Thread里访问的变量，很明显存在race，需要锁机制。在系统级编程这种锁机制就是lock，但是上述情况里Main ...继续阅读 (16)

packtpub.com 是一家电子书网站，目前在上面它们每天都会赠送一本电子书，今天送的是Learning JavaScript Data Structures and Algorithms。注册账户后就可以免费获取了，网站提供了 ePub、Mobi 和 PDF 三种格式，同时也提供了书中的源码。获取地址：https://www.packtpub.com/packt/offers/free-learning截止时间：2017 年 5 月 31 日 7 时 来自反斗限免您可能也喜欢：免费获取电子书 Practical Machine Learning[$37.99→0]免费获取电子书 Learning Robotics Using Python[$35.99→0]免费获取电子书 Learning Python Application Development[$35.99→0]免费获取电子书 IPython Interactive Computing and Visualization Cookbook[$29.99→0]免费获取电子书 Learning Web Development with Bootstrap and AngularJS[$39.99→0]无觅 ...继续阅读 (13)

原文链接：The state of JavaScript modules最近在 twitter上有很多关于ES Module现状的讨论，尤其是在 Node.js 上，因为他们计划引入*.mjs文件扩展名。人们的担忧和不确定性是情有可原的，因为这个主题很复杂，接下来我会尽力来阐述这个问题。来自远古的恐惧大多数前端开发者应该还记得javascript 依赖管理的黑暗时期。那个时候，你需要把一个库复制粘贴到 vendor 文件夹，然后作为一个全局变量引入，要自己去按次序组合所有东西，可能还要管理命名空间。在过去的那些年，我们能深刻体会到公共模块格式化和中央模块管理的价值。在今天，不管是发布还是使用一个库都要容易得多，只需要使用npm publish和npm install命令就行。这就是人们会那么紧张两种模块系统兼容性问题的原因：他们不想失去已有的舒适区。接下来我会解释和总结现有实现的情况，以及为什么 Node 生态迁移到 ES Module（ESM）会那么难。在最后，总结这些变化对于 webpack 使用者和模块作者有什么影响。现有实现目前，ESM 有三种方式的实现：浏览器webpack 以及类似的构建工具Node（未完成，但可能在年底作为一个实验功能）为了更好地理解现在的讨论，首先要知道 ES2015 包含两种模式：script用于具有全局命名空间的常规脚本module用于具有明确导 ...继续阅读 (9)

原文收录在我的 GitHub博客 (https://github.com/jawil/blog)，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。有些童鞋肯定有所疑惑，花了大量时间学习正则表达式，却发现没有用武之地，正则不就是验证个邮箱嘛，其他地方基本用不上，其实，大部分人都是这种感觉，所以有些人干脆不学，觉得又难又没多大用处。殊不知，想要成为编程大牛，正则表达式必须玩转，GitHub上优秀的开源库和框架里面到处都是强大的正则匹配，当年jQuery作者也被称为正则小王子。这里分享一些工作中用到的和自己收集的一些正则表达式的妙用，到处闪耀着开发者智慧的火花。实现一个需求的方法很多种，哪种更好，仁者见仁智者见智，这里只提供一种对比的思维来激发大家学习正则的兴趣和养成活用正则的思维。作为前端开发人员，总会有点自己的奇技淫巧，毕竟前端开发不同于后端，代码全部暴漏给用户不说，代码冗余了少则影响带宽，多则效率降低。正则表达式（Regular Expression），这是一块硬骨头，很难啃，但是啃着又很香。所以今天我也来爆一些正则表达式的奇技淫巧。正则大法好，正则大法好，正则大法好，重要的事情说三遍。1、获取链接https://www.baidu.com?name=jawil&age;=23name的value值非正则实现：function getParam ...继续阅读 (10)

JSON(Javascript Object Notaion, javascript 对象表示法)， 是一种数据交换格式，能够在服务器端交换数据， 2001年由Douglas Crockford提出，目的是取代繁琐笨重的XML格式。JSON 数据格式的优点：与语言无关的文本数据格式轻量、简单、易维护是javascript编程语言的一个子集(Standard ECMA-262 3rd Edition - December 1999)， 符合javascript 语言语法，可以使用javascript提供的方法直接解析处理JSON 建立在两种数据结构上：键 / 值对：各种语言中可以为 字符串、对象、数组或者哈希表有序列表（值）：各种语言中实现为数组、向量、列表或者序列JSON的基本语法：JSON 对象{ "key": "value" }JSON 数组["value", "value", "value"]value 可取值可以是 String(必须使用双引号包裹)、Number、Boolean、null、Object、Array, 这些形式可以嵌套，value值不能是八进制、十六进制（0xF0F）、undefined、function、日期对象，看下面示例：合格的 JSON 格式：{ "name": "煦涵", "name": null, "male ...继续阅读 (23)

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。基本概念在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。Node类型DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：Node.ELEMENT_NODE:1 Node.ATTRIBUTE_NODE:2 Node.TEXT_NODE:3 Node.CDATA_SECTION_NODE:4 Node.ENTITY_REFERENCE_NODE:5 Node.ENTITY_NODE:6 Node.PROCESSING_INSTRUCTION_NODE:7 Node.COMMENT_NODE:8 Node.DOCUMENT_NODE:9 Node.DOCUMENT_TYPE_NODE:10 Node.DOCUMENT_FRAGMENT_NODE:11 Node.NOTATION ...继续阅读 (5)

能和微博上的 @响马 （fibjs作者）掰扯这个问题是我的荣幸。事情缘起于知乎上的一个热贴，诸神都发表了意见：https://www.zhihu.com/questio...这一篇不是要说明白什么是async/await，而是阐述为什么会在编程技术这么多年后出现和流行了这个东西，读懂这篇文章你需要对async/await有很透彻的机制理解。如果是写系统程序，流行的编程范式是面向对象，这非常成熟不用多说；但如果是写微服务(restful api server)，情况不同。写微服务的时候数据不是从文件或数据库读取、去串行化、构造对象然后在内存中维护对象；而是向数据库、cache、或者API提取数据，计算后尽快输出结果；前者的数据对象生命周期较长，object-oriented范式很合适，它研究一个对象的状态机和如何响应外部事件；后者的数据生命周期很短，而且更糟糕的，各种input数据的结构也不很稳定，经常变化，所以这个时候OO的模式就显得笨重和低效了，在这个时候对data的处理不是object-oriented范式，而是transformation-oriented范式。后者导致了函数式编程的兴起，这里没法仔细讨论函数式编程的方方面面，我们仅仅说transformation的问题。这种编程范式下一次api服务的生命周期在心理模型上一个函数的开始和结束，这个函数需要从很多地方pull数据 ...继续阅读 (31)

electron-bridgegithub链接求starMotivition如果想一套代码同时能跑在web环境和electron环境中，就需要在代码中先判断环境，再分别写对应的逻辑。每次写到electron环境下的逻辑，又要区分渲染进程和主进程，因为有些事只能渲染进程做，有些事只能主进程做。所以，我希望能将这些抽象出来，某个方法，只能在electron环境下被调用，并且不需要关心在什么进程下，web只要判断环境，调不同的方法就行，不需要关心和electron的交互。如果，我需要快速的开启另一个electron的项目，我希望我web里的代码能轻易的获取到electron的能力，而不是重新开始编写，这个时候，我希望有一层对electron能力的封装。团队内有些成员对web很熟悉，但是对electron不是很了解，如果加入项目，就需要去学习electron的知识，这个时候，如果能有一个库列出了所有electron能做的事，你只需要调用，无需关心它是怎么实现的，能很大程度提高开发效率。Goals给web注入适当的环境变量，让web知道自己的环境给web注入一个对象，包含所有electron能做的事（包括主进程、渲染进程）How to do在load web页面的时候，有个webPreferences配置，我们在这里预加载一个js文件，就是electron-bridge.js这个文件拥有no ...继续阅读 (12)

不知道大家是否注意到，社区中出现的 CSS 尤其是 CSS-IN-JS 风格的轮子轮子越来越多，这个事情在前端社区引发的很多的讨论，或者说是争吵，比如有人说 CSS is Broken，就有人对 CSS is Fine。Cristiano Rastelli 以《战争与和平》为蓝本回顾了历史，也给出了非常赞的观察视角，程序员应该务实，而不是教条，更重要的是保持好奇心。另外第 56 期提到的各种技术大会，已经陆续有人整理适合 WEB 的视频列表，本期收录了我看过的比较精彩的两个，如果你有时间看更多，请移步：Google I/O、JS Conf Europe、Vue Conf。共 2121 字，读完需 4 分钟。以下是本周精选内容，请享用。技术动态NPM 5.0 发布：更像 Yarn官方的 NPM 5.0 发布日志，你需要知道的版本更新要点：更快，有 Benchmark 表明它比 Yarn 还快；能够自动保持 package.json 里面的缩进；--save 变为默认参数；支持离线模式；支持依赖锁定，直接npm install -g npm@5可以体验。styled-components 2.0 发布对，就是以抹指甲油图片为图标的那个 CSS-IN-JS 库，我第一次使用就爱上她了，本周发布了 2.0 版本，可以说是真正意义上的大版本，代码体积更小、添加 SSR 支持、发布全新的文档站 ...继续阅读 (16)

Vue-book 2.0Github 地址：https://github.com/percy507/v...【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端: Vue.js + Vuex + Webpack2后端: php + MySQL要是你对 PHP 和 MySQL 没啥基础，可以逛逛我的博客，有几篇文章是用来介绍这些基础的。本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出（扫码或手动），前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。具体请看下面的实现逻辑图。我在自己的服务器上把这个项目搭建好了，但是，目前不便给出登录后台的链接，只给出前台的链接，本项目只针对移动端，所以最好在手机上查看链接 ^_^Demo && 演示前台链接前台登录测试账号：15566666666，密码：666666Build Setup# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build我在本地测试用的服务器是WAMP Server。为了方便大家阅读源码，我列出 ...继续阅读 (6)

Vue-QQMusic简介：最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个QQ音乐的简易版。顺便进一步加深下自己对移动端的知识。我会在每个核心组件和部分都加下注解大致说明原理，争取提供一个良好的代码阅读环境，在注视部分是采用英文写的，请原谅我撇脚的英语o(╯□╰)o，欢迎大家给我提出更好的意见( *︾▽︾)原理简介：首先这里通过Jsonp来进行跨域获取QQ音乐API数据，在API Hanler对API进行处理导出统一的方法来获取数据。核心文件则是在Store,在这里使用Vuex统一管理页面切换动画，歌曲播放状态，歌曲进度等信息。所有对于歌曲的操作都通过Vuex来进行全局管理，然后对相应的变化做出全局改变。技术栈Vue全家桶（使用Vue-cli作为构建工具）WebpackMint-UiEs6SassVelocity, AlloyTouch等第三方库运行演示线上地址：Vue-QQMusic移动端请扫描下面二维码：运行截图：项目组件[x] 首页 -- 完成[ ] 电台 -- 无法获取电台API[X] 歌手信息 -- 完成[X] 歌手列表 -- 完成[x] 歌曲排行 -- 完成[x] 歌曲列表 -- 完成[x] 热门推荐 -- 完成[x] 歌曲搜索 -- 完成[x] 歌曲播放 -- 完成[x] 底部固定歌曲播放条 -- 完成项目结构|-- build ...继续阅读 (10)

ES6官网http://www.ecma-international...Babel官网https://babeljs.io/learn-es2015/GitHubhttp://es6-features.orgGitHubhttps://github.com/lukehoban/...阮一峰ES6教程http://es6.ruanyifeng.com/ES6简介ES6(即ES2015)是最新版本的ECMAScript标准。ES6是该语言的重大更新。主流的JS引擎正在对这些新特性提供支持。ES6特性箭头函数（Arrows）箭头函数是函数的简写，使用=>语法。箭头函数可以写在块语句内也可以写在表达式内。箭头函数内的this与其外部的this一致(arguments同)。（看过编译后的ES5就可以发现其实是在外部将this存为_this,然后箭头函数内使用_this）// Expression bodies var evens = [1,3,5,7,9]; var odds = evens.map(v => v + 1); var nums = evens.map((v, i) => v + i); var pairs = evens.map(v => ({even: v, odd: v + 1}));// 如返回对象则必须使用()将对象包裹 // Statement bodies v ...继续阅读 (17)

最近有个项目里面用到跑马灯，网上搜了下，虽然有人贴出来过一些实现，但是实际上都存在一些个问题。哎，再造个轮子吧。先放个效果：p.s. 如果能访问jsfiddle最好：https://jsfiddle.net/650spwen/主要原理微信小程序现在实际上还是用的webview，里面搞动画效率最高的莫过于使用CSS3的animation了。跑马灯无非就是一直滚动，这很容易想到使用无限循环的animation.而一直往左滚动的效果，通过css有很多种方式，比如通过改变left,margin-left,tranform: translateX()都可以实现。但是left和margin-left一般会导致布局的重新计算。使用transform: translateX()性能会更好一些。主要实现代码首先，视图模板wxml中：css3 + animation跑马灯{{text}}{{text}}{{text}}这里为了连续无限滚动，特意复制了2份跑马灯的内容（.content)。然后，样式wxss中：@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } } .marquee{ width: 100%; height: 44p ...继续阅读 (11)