## 前端开发的工具
### 编辑器：
1. 轻量级的，依靠插件：sublime；atom（github）；vs code（miscrosaft）
2. 集成的：DW；webstorm；hbuild；
---### markdown
markdown是一个标记语言，可以利用一些简单的语法来对内容进行排版，可以将markdown文件编译成html，pdf，一般使用markdown写笔记、文档...
eq：一般的项目中都会README.md文件来做项目标识。
一般的编辑器都可以编写markdown，语法简单，也有专门的markdown编辑器
#### 使用gulp搭建markdown编译环境
1. 执行npm init 进行项目初始化得到package.json
2. 全局安装gulp ：npm install gulp --global;
3. 在项目中安装gulp依赖：npm install gulp --save-dev;
4. 创建gulpfile.js文件设置任务：
注意：npm服务器在国外，网络影响大，甚至还会遇到需要翻墙才能下载插件的情况，因此推荐安装cnpm，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm；【淘宝npm镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步】， 镜像地址：http://npm.taobao.org
执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
执行cnpm -v 显示版本号即安装成功
var gulp = require("gulp")
var markdown = require('gulp-markdown');
var mdpdf = require('gulp-markdown-pdf');
gulp.task("compileMDToHtml",function () {
gulp.src("./md/*.md")
.pipe(markdown())
.pipe(gulp.dest("./html"))
})
gulp.task("compileMDToPdf",function () {
gulp.src("./md/*.md")
.pipe(mdpdf())
.pipe(gulp.dest("./pdf"))
})
gulp.task("watch:md",function(){
gulp.watch("./md/*.md",['compileMDToHtml','compileMDToPdf'])
})
gulp.task("default",['compileMDToHtml','compileMDToPdf','watch:md'])
5. 在命令行工具通过执行gulp指令来运行gulp中的默认任务
#### markdown的简单语法
[入门连接，来自简书](http://www.jianshu.com/p/1e402922ee32/)
---## NodeJS
> 一个后端技术，研究web应用的开发模式...，希望能有能力开发一些简单的web服务器，学会操作数据库等等。
##### 什么是nodeJs
下面是对官网描述的解析：
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
> 在Node里面写JS代码，很开心~~，为什么基于引擎：在web前端中，js运行在浏览器中，js只是一个脚本语言，js文件也只是一个普通的文本文件，只有在浏览器中才能发挥应有的作用。浏览器内部有一个东西叫做内核，浏览器内核的类型：
> IE ：trident/microsoft/ms;chrome:blink(webkit)/google/webkit;firefox:gecko/mozillar/moz;opera:blink(presto)/opera/o; safari：webkit/apple/webkit
> 内核里有两个东西：渲染引擎（渲染DOM结构，CSS）、脚本引擎（编译执行JS代码）Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其++轻量++又++高效++。
>NodeJS的优点：轻量、高效node是使用C++编写的基于V8引擎的JS运行环境，同时提供了很多基于ECMAScript的扩展对象。
> node的底层语言是C++,JS是netscope公司创造出来的，诞生的目的是：在前端做表单验证；netscope将js交给ECMA国际标准组织->ECMAScript 1.0;
> ECMAScript是JS的语法规范；所以说：NODEjs里的js语法和浏览器的语法是一样的。且多出了很多对象；Node.js 的包管理器 npm，成为世界上最大的开放源代码的生态系统。
> npm是Node的一个小兄弟,会在安装Node的时候一起安装，node package manager；[npmjs](www.npmjs.com)这个网站上有很多很多的node的工具包来使用，免费的包就有470000+，一般需求的包都可以在这里找到
---##### NodeJS可以干什么？
Node.js 可以解析JS代码（没有浏览器安全级别的限制）提供很多系统级别的API，如：
> 浏览器运行JS的时候，例如AJAX，因为浏览器有同源策略，所以会出现跨域问题，这就是浏览器安全限制
> 浏览器端js不能操作文件系统，但是在NodeJs里就可以* 文件的读写* 进程的管理* 网络通信* ...nodejs可以编写独立的服务端应用，也可以向客户端提供Web内容，无需借助与任何Web服务器（apache）可以去连接文件系统，还能操作数据库。
> 证明Node完全可以作为后端服务器的开发工具
> 一般的应用分为两种架构：B/S(browser/server);C/S(client/server)
> 服务器的外观上的话是千奇百怪的，内部分为逻辑层（JS-NODE,PHP-APACHE,JAVA-VM）、资源层(文件系统，数据库)
是Node选择了JS，还是JS选择了Node？
是Node选择了JS，因为JS的受众较广，且JS的特性和Node的理念较为符合.
.---##### 为什么要学习
nodeJs对于咱们来说，一种语言通吃前后端，并且可以增加咱们的竞争力且Node现在较火，它有如下的特点：
==nodejs适合高并发、I/O密集型，可伸缩的网路应用，数据写入读取的应用比较好
==> I/O输入输出频繁的应用就是I/O密集型==nodejs不适合CPU密集型的应用，各种计算的就不太适合==> CPU密集型应用，一般计算量特别的大！
==nodej间服务器：==s适合开发中
> 将高并发的，I/O密集操作交由Node服务器来处理，Node服务器再向真正的Web服务器发送请求得到响应后返回给前端
---##### nodeJs 学习网站
1. [nodejs官网](https://nodejs.org/)我们可以在这里下载node，查看api，版本更新日志等动态
2. [npm官网](https://www.npmjs.com/)我们可以在这这里查找很多很多的node模块去学习
3. [github官网](https://github.com/)
4. [stackoverflow](http://stackoverflow.com/)
5. [掘金](https://juejin.im/);[sgmentFault](https://segmentfault.com)
6. [极客学院node文档](http://wiki.jikexueyuan.com/project/nodejs/)
---##### nodeJs安装
nodeJs版本：
LTS指的是long time support 也就是长期支持版本，推荐大家安装Current是现在最新的版本。
请安装到C盘吧，它占用的内存不是很大，不会卡，否则需要配置全局变量才可以在任意一个盘下使用。---
##### 搭建第一个node服务器
我们在项目目录下建立一个server.js文件：
```
const http = require("http")
const port = 3000
const hostname = '127.0.0.1'
const server = http.createServer((req,res)=>{
res.end('hai hai is handsome')
}).listen(port,()=>{
console.log('server is listening')
})
```
这样的话只要运行后，客户端访问这个服务器的时候就可以接收到响应的信息
在控制台里输入node 文件名+回车（脚本模式），这时，我们的服务就启动了
这只是一个简单的例子，里面的代码我们后面都会详细再介绍--
-##### NodeJS运行JS代码的方式
1. 脚：在命令行里执行 node 文件名（不需要加后缀名） + enter就可以运行脚本文件中的js代码了。
>如果是js文件的话，不需要加后缀名，如果是其他后缀名的话必须得加
2. REPL模式:在命令行中输入node后回车，大家会发现这个时候我们的控制台就像chrome浏览器里一样可以运行js代码了，其实这里就是node离的V8引擎解析js代码的情况。模式是读一句返回一句。
注意，在Node里运行alert会报错：alert is not define,原因是：alert是属于window对象的一个方法，window属于BOM对象，BOM、DOM属于宿主对象，在web前端JS中，浏览器就是JS的宿主，所以BOM/DOM是JS在浏览器中的宿主对象，在Node中，Node就是JS的宿主，Node的宿主对象可没有BOM/DOM，更没有window了。比如process对象、global(角色定位相当于window对象)对象在浏览器里就没有
---##### 关于请求的面试题
当浏览器地址栏输入www.baidu.com，敲下回车会发生什么？
1. 利用DNS域名解析系统进行域名解析，将域名解析成IP 因为域名只是一个别名，计算机只认识IP，所以需要DNS解析一下
2. 查找ip对应的主机服务器 如果是第一次访问该服务器，会向网络供应商（移动、联通...）请求
3. TCP的三次握手，经过三次在客户端和服务器之间传递报文，建立连接
4. 发起http请求，请求入口文件，后端接收到请求相关信息，返回入口文件
5. 解析入口文件，同时如果有资源请求继续发送http请求..
.6. 入口文件渲染完成（TCP的四次挥手，断开连接）
---##### hello world
现在我们来创建一个hello.js文件
>ES6小知识：const可以定义只读常量readonly，let定义局部变量，只有用了这两个，就会形成块级作用域。
// 引入http模块 说明Node给咱们内置了很多模块
const http = require("http")
//定义端口
const port = 3000
//定义域名信息 10.9.166.65
// 假设有一个大商城（服务器主机），商城里有很多商店（主机里可能有很多服务器），每一个商店都有自己的一个入口A1,A2(每一个服务器都有一个端口)，大商场可能也有一些名字（域名或者IP）
// 域名和IP：域名只是为了方便用户记忆，真正计算机识别的是IP，每一个网段主机都会拥有一个ip，
// 127.0.0.1回环地址对应的域名是localhost,每个主机访问此地址的时候都是访问到的自己
const host = "127.0.0.1"
//创建服务（服务员） 传入requestListener函数，当有客户端访问的时候就会执行
// req上保存的是此次访问的请求相关信息，一般用来做判断...
//res是专门做出响应的工具，有writeHead方法，statusCode属性，setHeader方法，write方法，end方法
const server = http.createServer((req,res)=>{
console.log(req.url)//此次请求的地址,得到的就是整个请求地址中，域名端口后面的path路径
console.log(req.method)//此次请求的方法
console.log(req.headers)//此次请求的请求头信息例如cookie
// res.statusCode=200//设置响应的状态码，为浏览器而设置，200成功 404
// res.setHeader("Content-Type","text/plain;charset=utf8")
//设置响应头
//content-type特别重要，告诉浏览器我给你返回的是什么东西，text/plain普通纯文本,text/html,text/css,application/javascript
// res.writeHead(200,{'Content-Type':'text/html;charset=utf8'})
//是res.statusCode和res.setHeader的简写方式
// res.write('海海帅吗？')
//写入响应内容，可以执行多次,只能写字符串 // res.write('帅') // res.end('!!!')//通知前端响应结束,其实在end里也可以写入响应内容,但是end之后不能再write
res.writeHead(200,{'Content-Type':'text/html;charset=utf8'})
if(req.url=='/question'){
res.end(Math.random()<0.8?'帅':'还行吧')
}else if(req.url=='/random'){
res.end(Math.random()+'')
}else{
res.end('看看海海帅不帅来一个随机数')
}
})
server.listen(port)
### 模块和包管理工具
现在我们想做这样一个事情，就是封装一个专门在页面中输入hello——world的函数，写在我们的服务模块上的话会影响我们的编程思路，因为会比较乱，那么我们怎么办呢？
其实这样的问题一直存在于我们的编程中，我们通常也就是分成单个的js文件来引入，但是这样的话又要考虑命名冲突、依赖关系等等的问题
nodeJs让我们使用一套CommonJs规范来解决这些问题：
按照规范来定义模块，暴露接口，引用模块，使用模块
在node里的很多工具、包也都是在使用这个规范，也就是说学习这个规范是很有必要的。
我们可以使用npm这个工具来安装很多很多的包、工具，通过npm install方法来安装，安装好的内容会放到node_modules文件夹里
下面我们来尝试一下，
这里是我们的模块：
//定义模块
var util={};
util.sayHello=function(){
return 'hello nodeJs'
}
util.add=function(x,y){
return x+y;
}
//暴露接口
module.exports=util;
```
这里是我们使用模块的地方：
```
var http=require('http');
var util=require('./4.util');//引入模块
http.createServer(function(req,res){
res.writeHead(200,{'content-Type':'text/html;charset=utf-8'});
if(req.url!=='/favicon.ico'){
res.write(util.sayHello()+'');
//使用模块
res.write(util.add(1,2)+'');res.end();
}
}).listen(3000);
```
有一个需要注意的地方，就是reswrite的时候需放入的是字符串
require引入模块的时候，node内置的模块我们直接写模块名，自定义模块的话我们要写路径，需要引入包的时候（用npm下载的，或者在node_modules文件夹里的），我们也直接写模块名就好。
使用module.exports暴露接口的时候我们可以暴露任何数据类型的任何东西，需要注意的是，不暴露的数据是模块内部数据，不会在引入模块的文件里使用。
module.exports其实是直接暴露出一个module的实例，并将实例赋值：
```
module.exports=util;
```
我们还可以这么做：
```
exports.sayHello=util.sayHello;
exports.add=util.add;
```
这样的话我们并没有重写module的实例，只是为他添加了几个方法；
在引入模块的时候，可能我们的模块有很多方法，我们也可以单个引入其中的几个：
```
var sayHello=require('./4.util').sayHello;
var add=require('./4.util').add;
```
这就是Commonjs的使用细节，希望大家都要记住哟。
---
### NPM使用入门
npm 就是node package manager node的包管理工具
我们通过npm install 模块 来安装模块，缩写：npm i 模块,注意，低版本的node可能需要npm init先来创建一个package.json文件，这也是我推荐的
卸载的话就是unintsall，全局安装（大多是工具，例如gulp等） -g（全写上是--global）
在在本地（当前目录上）安装（大多是包）不需要加-g
使用npm list 可以查看现在安装了的一些东西,npm list | grep 模块 可以查看其中某个模块的信息
使用npm info 模块 可以查看模块的信息及历史版本
使用npm install 模块@版本号 可以来安装对应的版本的模块包，原包就会被覆盖
---
#### package.json相关：
我们可以通过npm init来创建package.json文件，这个文件可以来管理我们的项目依赖的包的信息
devDependencies是开发依赖，也就是只在开发的时候使用的包 --save-dev （-D），depedencies是我们打包的时候依然使用的包--save （-S）
这个文件还有一个好处，就是使我们的项目有辨识性，我们在某些情况下，需要将项目提交给某个地方或者共享给某人，这个时候我们不需要提交node——modules文件夹，只需要在那个地方执行npm install 就可以安装package.json里所有的包，使我们的项目可以继续运行
#### 源相关：
我们可以全局安装nrm这个工具来管理我们的源（就是下载地址），
nrm ls可以查看我们可以使用的源
nrm test可以来测试我们可以使用的源的速度
nrm use 源 可以来切换我们使用的源.
#### 清楚缓存
有的时候我们因为下载报错或者某种原因，需要重新下载的时候，结果依然报错，我们排除掉网络等原因后，可以尝试通过执行npm cache clear 来清除掉npm的缓存。
网友评论