前端漫记

到目前，Node.js 还没有支持 ES6 的 import 模块。但是你可以通过 Babel 的协助来使用它。

下面是一个 express.js server 的示例。

翻译原文：Pointer Basics

这是翻译的斯坦福大学官网上的 CSLibrary 中的一篇课程文档

这个文档介绍指针的基础知识，因为很多计算机语言中都会用到它，例如：C，C++，Java，以及 Pascal。

• Section 1 – 指针的三个基本规则
• Section 2 – 一个简单的代码示例
• Section 3 – 习题和答案

这是 Stanford CS Education Library 的106号文档。其他免费资料在 cslibrary.stanford.edu 中可以获取到。

算法常常被拿来考察程序员的编程功底，即便是前端，找工作的时候一些大厂也会出几道算法题来刁难一下你，毕竟好的工作资源相对较少，想要从一众求职者中脱颖而出，只掌握了大家都会的技能是不够的。面试官要从应聘者中挑出最优秀的人，也就要用更难的题来筛选。所以即使前端用到算法的地方屈指可数，想要提升自己，得到更好的机会，就得去学习更底层的知识。

持续更新。。。

原文：Understanding the CSS box model for inline elements

​ 页面上的每一个元素都会被浏览器渲染成一个个的矩形的盒子。box model解释了元素的 content, padding, border, 和 margin 是如何决定元素占据的空间以及与页面上其他元素之间的关系。

​ 页面元素因 display 属性设置不同可能出现两种类型：block box（块级元素）或者 inline box（内联元素）。盒模型对这两种类型的处理方式不同。本文就聊一聊盒模型如何作用于 inline box。

JavaScript 对象拷贝暗藏陷阱，JavaScript 提供了许多种方式来拷贝一个对象，但非都是深拷贝，大多数情况下浅拷贝是默认行为。

深拷贝 VS 浅拷贝

​ 浅拷贝能够成功地复制数字和字符串等原始值 （基本类型），但是不会递归地复制任何对象的引用，而是复制得到的新对象将会引用之前的同一个对象。

​ 如果一个对象 A 引用了另一个对象 B ，当对对象 A 执行 浅拷贝 的时候，你只是拷贝了对 B 的引用，复制得到的新对象仍然引用了 B 。

​ 当执行深拷贝的时候，外部的 B 对象也会一并拷贝，所以新复制得到的对象是完全独立于 B 对象的。

原文: ECMAScript 6 modules: the final syntax

1. JavaScript 的模块系统现状

JavaScript 没有内建的模块系统，但是社区创造了很多给力的解决方案。 两种最重要（不幸的是互不兼容）的标准是:

• CommonJS Modules: 这个标准的主要 实现是在Node.js中（Node.js 模块有一些特性领先于 CommonJS)。

  特性：

  • 语法紧凑
  • 设计用于同步加载
  • 主要应用于服务器端

• Asynchronous Module Definition (AMD): 这个标准的主要实现是 RequireJS。

  特性：

  • 语法稍微复杂，使AMD能够在没有 eval()（或者无须编译）的情况下工作。

  • 设计用于异步加载

  • 主要用于浏览器端

上面只是对当前状况的简单介绍，如果想要详细了解，可以看看 Addy Osmani 写的 “Writing Modular JavaScript With AMD, CommonJS & ES Harmony”

这是一个大约需要花10-15分钟看完的技术讲义，关于 NaN 是什么？它会在哪里出现？以及对于它大家需要知道些什么？

讲义的作者是 Lewis J Ellis，有一份这个讲义的演讲视频录像，还可以在 Github 上找到这个讲义的项目。

​

​ JavaScript 数组允许你对元素进行分组和迭代，你可以用不同的方式添加或者删除数组元素，但不幸的是，却并没有一个简单的 Array.remove 的方法。

​ JavaScript 数组有各种各样的方法来删除数组元素，而不是用 delete 方法。如果我们用 delete arr[index]的方式删除了数组元素，则只是将该数组中索引值为 index 的元素置为 undefined ，该位置上是一个空元素，并且数组长度不会减少。

​ 从数组头部删除元素用 shift ，从尾部删除元素用 pop ，从中间删除元素用 splice ，还可以用 filter 方法来过滤出符合条件的元素，并将这些元素返回一个新的数组，这是一个更高级的用法。

排序算法的学习和记录

更新中。。。

水平居中

水平居中布局需要看子元素是 block 元素还是 inline 元素，width 是否固定。因此形成下面四个例子。

• demo1 是子元素为 inline ，对父元素设置 text-align:center。
• demo2 中子元素为 block ，宽度固定，则对子元素设置 margin:0 auto,左右宽度固定
• demo3 中子元素为 block ，宽度不定，则子元素 display:inline ,父元素 text-align:center
• demo4 中采用了 flex 布局，是一种通用的方案，对 inline 和 block 两种元素均有效，display:flex 主轴居中对齐 justify-content:center;