我只是文字的搬运工
本文旨在对web前端，涉及到的javascript相关知识进行一个广而泛的普及。
JSON是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式。
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [“java”,”javascript”,”vb”,…]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
HTTP是一个客户端和服务器端请求和应答的标准（TCP）
典型的请求消息：
Host: download.*******.de
Accept: */*
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/4.04[en](Win95;I;Nav)
Range: bytes=554554-
User-Agent头域的内容包含发出请求的用户信息。
典型的响应消息：
HTTP/1.0200OK
Date:Mon,31Dec200104:25:57GMT
Server:Apache/1.3.14(Unix)
Content-type:text/html
Last-modified:Tue,17Apr200106:46:28GMT
Etag:"a030f020ac7c01:1e9f"
Content-length:39725426
Content-range:bytes55******/40279980
Content-Range实体头用于指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。 一般格式：Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth 例如，传送头500个字节次字段的形式：Content-Range:bytes0-499/1234
世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展，将Perl/Python等解释器编译到服务器中。
一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器
一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
一个可扩展的开源Node.js 框架。基于express之上。 它可以让我们:
一个基于nodejs简单的零配置命令行 http 服务器。
npm install http-server -g
http-server [path] [options]
一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器，是全球最大的开源库生态系统。
核心模块#
这些核心模块被编译成二进制文件，可以require(‘模块名’)去获取； 核心模块具有最高的加载优先级（有模块与核心模块同名时会体现）
文件模块
访问方式通过require(‘/文件名.后缀’); require(‘./文件名.后缀’); requrie(‘../文件名.后缀’) 去访问，文件后缀可以省略；以”/”开头是以绝对路径去加载，以”./”开头和以”../”开头表示以相对路径加载，而以”./”开头表示同级目录下文件，
node_modules
如果require()中的模块名不是一个本地模块，也没有以’/’, ‘../’, 或是 ‘./’开头，那么node会从当前模块的父目录开始，尝试在它的/node_modules文件夹里加载相应模块。
获取操作html节点（Element）属性（prototype）样式（style）
native:
var div=document.createElement('div'); //创建div
var p=document.createElement('p'); //创建div
div.id='inativediv';修改属性id
div.innerHtml="div"
div.style.background='red';修改样式背景色
div.style.width="100px";设置宽度
div.style.height="100px";设置高度
//get
document.getElementById('inativediv');
var div=$("<div id='ijQuerydiv'></div>");
div.css({width:"200px",height:"200px"});
//get
$("#dijQuerydiv")
进行数据校验，逻辑判断等
var outData=[];
var jsonData=[{id:0,name:'n0'},{id:1,name:'n1'}];
for(var i=0;i<jsonData.length;i++){
var jData=jsonData[i];
if(jData.id=0){
outData.push(jData.name);
}
}
与服务器端交互，ajax，websocket
native:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://www.baidu.com",true);
xmlhttp.send();
jQuery#:
$.ajax({
url:"http://www.baidu.com",
success:function(resData){
}
})
捕获事件，页面响应 native:
var div=document.getElementById('inativediv');
div.onClick=function(){
alert("click")
}
div.onchange
div.onfocus
jquery#
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo() // 移动当前窗口
window.resizeTo() // 调整当前窗口的尺寸
alert
confirm
prompt
window.navigator
Window.history
window.location
window.screen
document.cookie
指有权访问另外一个函数作用域中的变量的函数。 创建闭包的常见方式就是在一个函数内部创建另外一个函数。 在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，这样我们可以很大程度上减少全局作用域中的变量，净化全局作用域。 使用闭包有好处，也有坏处，滥用闭包会造成内存的大量消耗。
不依赖其他类库，能基于其上进行组件开发,例如 jquery Yahoo! UI Library (YUI) Prototype extjs
每个组件由模板（hbs）、样式（LESS）、脚本（JS）三部分组成。 脚本处理大致包含以下内容
几个典型UI库、框架：jqueryUI,ligerui,extjs,Yahoo! UI Library (YUI)、Dojo、Sencha(extjs)
软件总体结构体现模块化思想，即把软件划分为一些独立命名的部件，每个部件称为一个模块，当把所有模块组装在一起的时候，便可获得问题的一个解。 模块化以分治法为依据，但是否意味着我们把软件无限制的细分下去。事实上当分割过细，模块总数增多，每个模块的成本确实减少了，但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏，内聚度及耦合度。
信息隐藏
模块应设计的使其所包含的信息（过程和数据）对于那些不需要用到它的模块不可见。每个模块只完成一个独立的功能，然后提供该功能的接口。模块间通过接口访问。JavaScript中可以用函数去隐藏，封装，而后返回接口对象。如下是一个提供事件管理的模块event。
信息隐藏对于模块设计好处十分明显，它不仅支持模块的并行开发，而且还可减少测试或后期维护工作量。如日后要修改代码，模块的隐藏部分可随意更改，前提是接口不变。如事件模块开始实现时为了兼容旧版本IE及标准浏览器，写了很多IE Special代码，有一天旧版本IE消失了（猴年马月），只需从容删去即可。
内聚度
内聚是来自结构化设计的一个概念，简单说内聚测量了单个模块内各个元素的联系程度。最不希望出现的内聚就是偶然性内聚，即将完全无关的抽象塞进同一个模块或类中。最希望出现的内聚是功能性内聚，即一个模块或类的各元素一同工作，提供某种清晰界定的行为。
内聚度指模块内部实现，它是信息隐藏和局部化概念的自然扩展，它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显，当把相关的任务分组后去阅读就容易多了。设计时应该尽可能的提高模块内聚度，从而获得较高的模块独立性。
耦合度
耦合也是来自结构化设计，Stevens、Myers和Constantine将耦合定义为「一个模块与另一个模块之间建立起的关联强度的测量。强耦合使系统变得复杂，因为如果模块与其它模块高度相连，它就难以独立的被理解、变化和修正」
内聚度是指特定模块内部实现的一种度量，耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性，进入或调用模块的位置等。与内聚度相反，在设计时应尽量追求松散耦合的系统。
CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。NodeJS是这种规范的实现。
它就主要为前端JS的表现制定规范。 AMD就只有一个接口：define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中,像这样：
define(['dep1','dep2'],function(dep1,dep2){});
要是没什么依赖，就定义简单的模块，下面这样就可以啦：
define(function(){
var exports = {};
exports.method = function(){...};
return exports;
});
RequireJS就是实现了AMD规范的呢。
seajs，就是遵循的CMD规范。与AMD蛮相近的，不过用起来更加方便些，最重要的是中文版
define(function(require,exports,module){...});
#### 总结
JavaScript语言是弱结构性的，通过CommonJS定义一些规范，CMD和AMD得定义模块的方式对代码进行管理，使得更易维护；此外，NodeJS的诞生，对模块的规范定义，和包（npm）的概念的引入，让JS管理不再困难
Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式；Model包含应用的数据和业务逻辑；Controller负责把用户的输入，转换为命令传递给Model和View。 MVC给我们带来的好处:
Model管理应用的数据。当model数据发生改变的时候，会通知它的监听者【可能是view】，收到通知后，监听者会做相应的变化。
View是当前状态的model的视觉展现，view会观察模型的变化，当模型改变的时候被通知，同时允许view来更新自己。一般情况下我们会在view中使用模版引擎渲染model;
Controllers是位于models和views的之间的调解人，它的工作是当model改变时来更新view和当用户操作view时来更新Model。
担任了一部分Controller（控制器）的工作，它一般运行在单页应用中，能将特定的URL或锚点规则绑定到一个指定的方法（Action）。
Backbone的Model把服务器端的数据模型映射到浏览器端，绑定数据验证机制，并与相应的REST操作绑定，这样每个数据模型都变成了独立体，方便REST操作，却限制REST的灵活性。 Backbone的Model没有与UI视图数据绑定，而是需要在View中自行操作DOM来更新或读取UI数据。
Model直接与UI视图绑定，数据双向绑定。
一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。
npm install -g bower
{
"directory" : "js/lib"
}
bower init
会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来保存该项目的配置，如下：
{
"name": "XXX",
"version": "0.0.1",
"authors": [
],
"moduleType": [
"amd"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"js/lib",
"test",
"tests"
],
"dependencies": {
}
}
包的安装
对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力。
npm install --global gulp
npm install --save-dev gulp
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
gulp
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
npm install webpack -g
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
一个很精干的库，压缩后只有4KB。它提供了几十种函数式编程的方法，弥补了标准库的不足，大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用，Underscore.js还可以用于Node.js。
一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象，所有方法都通过这个对象调用。