1. 属性定义和属性赋值
2. 概述：属性特性和内部属性

原文链接:Properties in JavaScript: definition versus assignment

在JavaScript，属性的定义和赋值两个不同的操作，这篇博客致力于解释这两种操作的差异和造成这些差异的原因。

属性定义和属性赋值

1.属性定义：定义属性将会使用一个如下的属性定义函数：、

1

Object.defineProperty(obj, propName, propDesc)

这个函数的主要功能是直接在obj对象上添加一个属性，通过propDesc配置属性特性（例如writable）。
这个函数的另一个功能是用来改变一个属性的特性，包括属性的值。

JavaScript Modules

模块化

当我们称一个应用程序是模块化的的时候，我们通常是指它由一组高度解耦的、存放在不同模块中的独特功能构成。你可能已经知道，松散耦合通过尽可能地去除依赖性来让可维护性更加简单易得。当这一点被有效实现的时候，系统中某一部分的变化将如何影响其它部分就会变得显而易见。

JavaScript模块化是将JS代码按照功能的不同分成高度解耦的代码块，存放在模块中。与一些更传统的编程语言不同的是，JavaScript 6以前的版本并没有为开发者们提供以一种简洁、有条理地的方式来引入模块的方法。

sprite

做移动开发的时候，有时会遇到使用很多图片的需求，然而过多图片会导致很多的http请求，带来很差的用户体验，为了解决这个问题，我们目前解决的办法是将图片合并成雪碧图，然后设置雪碧图为容器背景图。

关于雪碧图

参考：雪碧图

CSS雪碧图即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位backgroun-position和background-size来控制显示需要显示的图片部分。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<img>标签，而是CSS Sprite雪碧图。

JavaScript Scope

构造块作用域：

let

let创建块作用域的例子：

1
2
3
4
5
6
7
8
9
10
11

if(i){

    let bar=i\*2; /\*let会将bar绑定在{......}之间*/

    bar =something(bar);

    console.log(bar);

}

 <!-- 并且let声明的变量不会被提升 -->

mobile-layout

说到移动端，不得不提适配问题，大大小小的移动设备不但让做Android和ios的难过，因为设备大小和浏览器的差异，现在也让前端开始头疼了，不过，遇到问题我们总归要去寻求解决的方案。

因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，我们需要找到一个合理的适配方案。

布局方案

百分比布局

我们能够想到的最简单的方案就是百分比布局了。各级元素的宽度都设成百分比以实现在水平方向上适应各种屏幕宽度的显示效果，我们先来看一个demo。

Build Your First Node App

1. Hello World
2. 一个完整的node的web应用
3. 应用构建

这是一篇node入门级别的文章，着重介绍使用node实现一个小型web应用的过程，不会涉及关于原理方面的知识，作为一个初学者，文章中如有不合理的地方还请指正。

Hello World

首先我们来实现一个Hello World。

打开编辑器，创建一个helloWord.js文件，写入以下代码：

1

console.log('Hello World!')

保存文件后通过在命令行执行：

1

node helloWord.js

你会看到命令行输出’Hello World!’。
这个应用太小儿科了对吧，那我们来点‘干货’。

Javascript library

库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数并具有一定的模式兼容性。库通常缺乏任何目的或意图的,并且旨在使用和集成客户端代码，协助客户端代码执行它的任务，常见的工具包如JQuery。

Toolkit

工具是一个有着特定目的的库，我的理解是它一般用来解决开发中的部分问题，或者说它提供了一个完整应用的单独的解决方案，比如说事件传递、控制流程或者网络通信等中的一个，常见的工具包如superagent。

Javascript framework

Javascript framework可以用来组织大型应用，提供几乎完整的解决方案。对于大型前端框架来说需要提供这些解决方案：

• 数据层的抽象

• 视图的抽象

• 事件传递和控制流程

• 网络通信

• 路由管理

Vuejs-event-system

在开发多组件应用是，经常涉及到不同组件之间的通信问题，组件的作用域是相互独立的，我们当然可以直接引用父子组件来同步组件之间的状态，然而这种实现是高耦合的，与我们组件化的思想刚好相悖。
使用一种合理的组件之间的通信方式有利于提高组件的健壮性与可维护性。

组件之间通信的原则

使用props从父组件向子组件传递数据

使用event从子组件通知父组件改变数据

实现

自定义事件

使用自定义事件，我们可以在子组件触发事件，在父组件监听事件。

CSS reset

什么是CSS－reset

CSS-reset是指在开发一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

为什么要进行CSS-reset

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。同时，因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

水平垂直居中是前端CSS编码中很常见的需求，本文将总结几种不同的写法。

一、垂直居中

1.line-height

如果元素内容是单行文本元素，将父元素的高度和行高设为一样就能实现垂直居中效果：