实例分析 JavaScript 作用域

了解作用域对于编写代码至关重要,作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。对于JavaScript中作用域我们可能已经了解了很多。建议看看 深入理解JavaScript中的作用域和上下文JavaScript 核心概念之作用域和闭包。今天从其他方面介绍一下 JavaScript 中作用域,以帮助我们更好的完整的了解 JavaScript 作用域。

作用域模型

作用域有两种常见的模型:词法作用域(Lexical Scope,通常也叫做 静态作用域) 和 动态作用域(Dynamic Scope)。其中词法作用域更常见,被 JavaScript 等大多数语言采用。(愚人码头注:这里避开了witheval特殊语句,不再做介绍)。
继续阅读

现在就可以使用的5个 ES6 特性

这篇文章介绍了5个 ES6 特性,使你的 JavaScript 代码变的更好。不用说,我们大多数前端开发工程师非常关注 JavaScript 的性能和特性,这就是为什么 ES6 对于我们来说是如此令人兴奋。

ES6的变化是巨大的,是令人兴奋的,也有令人困惑的地方。在本文中,我将介绍5个 ES6 的新特性,您可以立即使用它们来增强你的 JavaScript代码,以及哪些特性不建议使用。 继续阅读

Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

深入理解JavaScript中的作用域和上下文

在本教程中,我们将深入学习 JavaScript 中作用域(Scope)的一切。 所以,来吧。

介绍

JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域。理解作用域将使你的代码脱颖而出,减少错误,并帮助您使用它强大的设计模式。

什么是作用域(Scope)?

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。

为什么说作用域是最小访问原则?

那么,为什么要限制变量的可见性呢,为什么你的变量不是在代码的任何地方都可用呢?一个优点是作用域为您的代码提供了一定程度的安全性。计算机安全的一个常见原则是用户应该一次只能访问他们需要的东西。 继续阅读

JavaScript 核心概念之作用域和闭包

相信大家已经阅读了很多关于作用域和闭包文章,我也一样。作用域和闭包是 JavaScript 中的关键概念之一。当我阅读了《高性能的JavaScript》这本书后,我才完全理解这两个概念。所以今天强烈推荐这本书中的解释,并与其他开发人员分享。

作用域

下面会提到几个概念:

  • 函数对象的[[scope]]属性
  • Scope Chain(作用域链)
  • Execution Context(运行期上下文)
  • Activation Object(激活对象)

函数对象的[[scope]]属性

JavaScript 中每个函数都都表示为一个函数对象(函数实例),既然是对象,就有相关的属性和方法。除了正常的属性,函数对象具有仅供 JavaScript 引擎内部使用,但不能通过代码访问的一系列内部属性。这些属性中,其中一个就是 [[scope]] 属性。 继续阅读

ES6 新特性范例大全

ECMAScript6(ECMAScript 2015 ,ES5,ES2016)技术已经在前端圈子很流行了,他给前端开发人员带来了很多惊喜,提供的语法糖使复杂的操作变得简单。

本文没有详细描述这些新特性,因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的javascript规范。 继续阅读

更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

上一篇文章我们入门了几个基本的 Flexbox 属性:flex-directionjustify-contentalign-itemsalign-self

这些属性对于创建基本布局非常有用。 但是一旦你开始使用Flexbox构建网页的时候,你需要更深入学习Flexbox 属性,以发挥它的潜力。

现在让我们深入了解 Flexbox 的缩放 – 以及如何利用它来构建漂亮的自适应布局。

属性 #1: Flex-Basis

在上一篇文章中,我们主要了解了适用于容器元素的属性。这一次,我们专门介绍如何控制子元素(flex项)的大小。 继续阅读

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。

很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。 继续阅读

前端开发聚合、分享、期刊订阅类网站收集

前端技术日新月异,及时了解前端开发最新最前沿的技术资讯,对于前端开发攻城狮的成长进步来说非常重要。分享这些年收藏的几个前端开发聚合、分享、期刊订阅类网站。欢迎大家留言补充。

JavaScript Weekly

一个总结 JavaScript 新闻和文章的免费电子邮件周刊。http://javascriptweekly.com/ 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读