前端开发的工具
编辑器：
- 轻量级的，依靠插件：sublime；atom（github）；vs code（miscrosaft）
- 集成的：DW；webstorm；hbuild；
markdown
markdown是一个标记语言，可以利用一些简单的语法来对内容进行排版，可以将markdown文件编译成html，pdf，一般使用markdown写笔记、文档...
eq：一般的项目中都会README.md文件来做项目标识。
一般的编辑器都可以编写markdown，语法简单，也有专门的markdown编辑器
使用gulp搭建markdown编译环境
执行npm init 进行项目初始化得到package.json
全局安装gulp ：npm install gulp --global;
在项目中安装gulp依赖：npm install gulp --save-dev;
创建gulpfile.js文件设置任务：
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'])- 在命令行工具通过执行gulp指令来运行gulp中的默认任务
markdown的简单语法
NodeJS
一个后端技术，研究web应用的开发模式...，希望能有能力开发一些简单的web服务器，学会操作数据库等等。
NodeJS第一课
什么是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这个网站上有很多很多的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 学习网站
我们可以在这里下载node，查看api，版本更新日志等动态
我们可以在这这里查找很多很多的node模块去学习
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代码的方式
- 脚本模式：在命令行里执行 node 文件名（不需要加后缀名） + enter就可以运行脚本文件中的js代码了。
如果是js文件的话，不需要加后缀名，如果是其他后缀名的话必须得加
- 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，敲下回车会发生什么？
利用DNS域名解析系统进行域名解析，将域名解析成IP
因为域名只是一个别名，计算机只认识IP，所以需要DNS解析一下
查找ip对应的主机服务器
如果是第一次访问该服务器，会向网络供应商（移动、联通...）请求
TCP的三次握手，经过三次在客户端和服务器之间传递报文，建立连接
发起http请求，请求入口文件，后端接收到请求相关信息，返回入口文件
解析入口文件，同时如果有资源请求继续发送http请求...
入口文件渲染完成（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('海海帅吗？<br/>') //写入响应内容，可以执行多次,只能写字符串
// 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('<a href="http://10.9.166.65:3000/question">看看海海帅不帅</a><br/><a href="http://10.9.166.65:3000/random">来一个随机数</a>')
}
})
//监听端口域名，跑起服务
server.listen(port,host,()=>{
//会在监听之后触发
})
回调函数小知识
将一个函数作为另一个函数的参数或者对象的属性值，这样的函数就是回调函数
特点： 在某一个特定的时刻触发
例如：
a.addEventListener("click",function(){
alert(1)
})
$.ajax({
success:function(){
alert(1)
}
})模块化及在Node中的应用
什么是模块化？
将系统功能分离成独立的功能部分的方法就是模块化。目的、优点：代码复用，便于维护！（八字金言，基本上百分之八十的技术点的优点都可以用这八个字概括）
在生活中，假设有这样的场景：
现在我们需要做一个雕像：变型金刚。有两种方式：1. 直接在大的材料上进行雕刻 2.分开部分来雕刻最后再组装到一起；
一般都会使用第二种方式，因为第二种有这样的优点：1. 便于分工合作 2. 便于复用 3. 便于维护（因为复用了，一改都改；因为每一个模块都是独立的，便于修改）
模块划分的原则：1. 此功能被复用次数较多 2. 此功能的逻辑较为独立
模块应该具有的特性：
内聚度：模块的独立性，越高越好；
例如，海贼王里每一个角色都有自己独立的支线故事，他们的内聚度高
耦合度：模块与模块间的关系，越低越好；
例如：葫芦娃里的七个娃，一个被抓，全军覆没，耦合度较高。
模块化的规范：
在开发变形金刚的时候，每一个部分最后都要连接到一起，所以需要规定一些连接的相关规则，比如，螺钉的长宽高，螺孔的长宽高。螺钉的作用是为了此模块可以导入到其他模块中，螺孔的作用是可以将其他模块导入进来，也就说，模块化的规范其实就是规定螺钉ヘ螺孔的相关信息，其实也就说：
如何导入模块，和如何导出模块现有的几种模块化规范：
| 现有的规范 | AMD | CMD |CommonJS |ES6 module |
| ------------- |:-------------:| :-----:| :-------:| ----------:|
| 使用场景 | 前端 | 前端 |后端Node |前后端都行（需要编译）|
| 工具或环境 | requierJs | SeaJs |Node |在js引擎里 |
| 同异步 | 异步（async module define 异步模块定义） | 同步，延迟加载 （commond module define 通用模块定义） |同步 |同步|
AMD是requirejs工具里定义的模块化规范，requireJS在推广的过程中对自己的模块化规范命名为AMD，异步导入模块，运行于浏览器端，不会阻塞页面加载：
```
//利用define函数来导出模块，可以通过require函数导入模块（同步，不建议使用），在define函数的i一个参数数组里也可以指定需要导入的模块,提前加载
var c = require('c')
console.log(c)
define(['a','b'],function(a,b){
console.log(a,b)
})
console.log(1)
```
CMD是seaJS工具里定义的模块化规范，同步但是延迟导入模块，也不会阻塞，as lazy as possible
```
//b模块
define(function(){
var a = require('a')
console.log(a)
})
```
CommonJS是Node的模块化规范，它是同步导入模块，因为node的模块都是本地的，所以模块的加载速度等于硬盘的读取速度，不会阻塞代码的运行CommonJS的模块化与使用
CommonJS导入模块的方式是：
1. 使用require方法，传入目标模块的路径，返回值为模块导出的内容
注意:
模块导入之后，模块内的代码会执行一次，
模块里的变量、函数都是私有的。如果需要使用，必须得在模块中导出
默认的模块导出的是module.exports这个对象，这是一个空对象
代码：
```
//math.js
const math = {
add(num1,num2){
return num1+num2
},
reduce(num1,num2){
return num1-num2
},
mutiply(num1,num2){
return num1*num2
},
divide(num1,num2){
return num1/num2
}
}
module.exports = math
// module.exports.math=math
// module.exports.add = math.add
// module.exports.reduce = math.reduce
// module.exports.mutiply = math.mutiply
// module.exports.divide = math.divide
```
```
// a.js
const math = require('./modules/math')
console.log(math.divide(6,2))
```
2. 可以把一个大模块做成一个目录，直接引入这个目录名相当于导入的是目录里的入口文件，默认情况入口文件是index.js,如果目录中存在package.json的话，json文件中配置的main选项的文件就是入口文件。
如果此目录在node_modules文件夹中的话，不需要写路径
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
