Press "Enter" to skip to content

Tag: JS

新版JavaScript的箭头函数

据统计,箭头函数(arrow functions)是新版JS(ES6)最受欢迎的功能之一,并且已经得到各大主流现代浏览的支持。

本文看看箭头函数到底是什么,怎么用法,最常见的使用情景(use cases),还有它的不足或使用陷阱。

本文略译自《ES6 Arrow Functions: Fat and Concise Syntax in JavaScript》。

arrow-functions
arrow-functions

JavaScript异步任务与Promises技术

JavaScript 一般被认为是天生具有异步特性的,这是什么意思?与其它非天生异步的语言相对,异步特性是对「JavaScript应用开发」有什么影响[em]?这些异步编程的方式在新版ES6+有没有新改进?

EM:更确切的是JS应用的交互任务天性具有异步特性,影响主要表现是,有一组异步编程的API。

本文摘译自《Flow Control in Modern JS: Callbacks to Promises to Async/Await》和《 An Overview of JavaScript Promises》两篇文章。

JS开发者进阶的十项技能

有一种引人思索的事实,就是在职的开发者不必全知全会,就可入岗;这个事实存在合理性的前提是:

  • 第一,不完全掌握只影响效率(时效低,产品质量差),不代表无能;没有,你可以现学;不够不好,你可再改善;
  • 第二,软件工程复杂度超出单个人;
  • 第三,团队互补;

所以更实际的情景是,你的专业技能越来越完满(通过有效的学习),从团队的一个角色跃进到另一个角色。

作为一名JS入门者,如何进阶,从一个次要的角色转变为更有价值的角色,对他们来说非常重要。我以为  Ben McCormick的《Ten Things A Serious JavaScript Developer Should Learn》作了一个尝试,尝试列出了JS进阶的技能清单,我觉得很有趣,于是略译出来。

JavaScript单元测试基础

软件单元测试可分为测试单元的构建,和测试程序的编写,两步。一般软件测试是指测试程序的编写,默认可用的测试单元,这个默认条件对【JS单元测试】来说常常不充分。JS单元测试则有一个构建测试单元的前置任务,本文简单介绍了使用了【代码重构(refactoring)】的技术,来完成这项前置工作,最后还试编写了一个测试程序,引出【单元测试框架】的概念。本文略译自《Introduction To JavaScript Unit Testing

Backbone.Marionette 学习小结

八月陆陆续续将 Ben McCormick 讲解 Marionette 的系列六篇文章《Marionette: Explained》翻译和学习完成。首先非常感谢作者,给了像我这样的初涉前端应用程序的开发者一个比较全面完整的学习指引。

这六篇文章我还是以我一贯的风格,以略译的形式完成,略译不但不是意译,甚至是笔记式的改写,以自己的语言概念系统重新梳理一遍这些开发知识、技术和理论。

正所谓一百位教师就有一百种教学方法,在略译Ben的文章过程中,除了忽略部分过时的内容,我还以自己喜好的表述方式重组织过内容,并且使用了很多自己提炼的语言和概念。我的理由是,前端应用开发是块热土,各路英雄各举一器,到目前还没一个稳定成熟开发路法,教什么都不确定,如何教更是五花八门。

Marionette View的生命事件模型

本文略译自《The Life of a Marionette View

有过前端经验的人都了解,在构建单页面应用程序时,页面常常有一些UI组件需要被动态替换,要确保它们被正确创建、使用和销毁,不然产生内存问题。所以,管理页面上的「UI组件的置换」是很重要的任务,Marionette 在View基类中增加了“生命周期”的事件“勾子”,达到了简化管理「UI组件的置换」的任务。

使用Marionette.js构建复杂的交互布局

本文略译自《Building Complex Layouts With Marionette.js》,主要介绍——交互页面的布局需求。

当我们开发一支较复杂的web交互应用程序,首先摆在设计师的第一个问题(之一)是,如何规划交互页面的内容结构和位置布局(structure and layout of your application)。大多数交互应用程序有这样的布局结构:

  • 第一,页面有一些是静态的区域,例如导航栏(navigations)和页面脚部(footers);
  • 第二,页面有一些是动态的区域,例如主内容区,或页面相关的交互控件;

静态区域则比较容易,动态区域则需要某种管理功能,能内容调入调出(swapping out)。在Backbone里,怎么实现布局呢?尤其是有动态区域的布局结构?

Marionette.js的历史舞台

本文略译自《The Case For Marionette.js

Backbone.js不是一个完整的应用框架,用它来开发「大型前端应用」是不容易的。 Backbone 的设计思想是很棒的,它的极简设计提供极大的自由和灵活性,能满足各种开发场景,然而这种极简设计涉及的面变得很宽而没有针对性,结果,当你用Backbone开发大型应用时,相对于 AngularEmber 这样的”不简单不灵活的”应用框架(opinionated frameworks),反而失去了效率上的优势。因为大型应用固有的很多任务和开发困难(具体什么困难?[注]),你都得自己(自由)判断解决,要么给 Backbone 添加第三方插件,要么自己实现。

注:嵌套的V,复合的M等,当应用scale up,需更多「构件」——更粗粒度的工作对象——提高开发效率,和降低维护的成本

Backbone 要用来开发大型应用,需要引入更多的构件工具,或完整的应用框架,本文介绍最流行的一支 Marionette.js

利用Marionette Behaviors使你的代码更加干净整洁

本文略译自《Staying DRY with Marionette Behaviors

Backbone 提供的构件过于“简陋”,开发者普遍抱怨Backbone的一点,就是要写太多重复的代码(boilerplate)——不断写UI事件逻辑代码,业务控制逻辑代码。

削减boilerplate code,是Marionette的目标之一。而在之前的「高级V基类」的基础之上,Marionette还提供一个通用基类——the Behavior class,进一步削减重复的代码,让你的代码更加的DRY。

EM:V的代码复杂到居然可以「再度的抽象」

EM:理解和应用Behavior的前提,是对V有深刻全面的了解

Marionette Behaviors 类是对「通用的UI逻辑代码」的抽象,故它可“植入”你的View中,实现复用。当你发现在多个V类中出现类似的行为代码,那么你可用Behaviors对它进行抽象,来降低boilerplate。

在开始介绍Behaviors API前,我们先看一个实例。