nodejs学习之基础篇

下面会对前端中依赖于node或者跟node相关的东西做一些整理,当然不够全面,主要是拿一些常用的进行对比跟分析:

一、自动化构建工具  gulp   webpack  grunt

gulp ---用于构建项目,进行压缩合并。其核心文件是gulpfile.js; 核心API语法有dist  watch  default   task pipe  ;gulp提供了丰富的插件库 sass  less  uglify等等
webpack ------用于构建项目,整合模块,把浏览器不识别的语言(es6/babel)转换成浏览器识别的语言。主要依赖于webpack.config.js,其核心组成部分有:entry   output   moudle/rules    plugins   devserver等;webpack提供了丰富的加载器(loader)------url   babel     file     sass(对静态资源文件做管理)
注:在项目中,webpack和gulp可以同时来使用

二、css预处理器   sass  less

Sass是基于Ruby环境的,诞生于2007年,其本身的语法并不太容易让浏览器识别,但最后还是会编译出合法的CSS让浏览器使用。许多框架和工具中会用到它(如:ionic     mintui)

less  是基于JavaScript环境的,2009年开源的一个项目,LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,很多流行框架及工具会用到它(如Bootstrap)

更多请看:css预处理器

三、版本管理工具   git     svn

git ------分布式管理,最大的特点是可以构建多个分支

svn -----集中式管理,必须要联网才能进行

注:一般的话,一个公司会选择用一个版本管理工具

更多请看:git与svn对比

四、es5    es6    es7

在es5中,

var  声明可以定义、修改变量,没有值会返回一个undefined
用字符串的拼接:“”+变量+“”
函数this指向      function -----谁调用指向谁,没人调用指向window
对象               字面量    构造函数      原型    混合----------继承:原型继承        原型链继承     call  apply  
在es6中,

let  块级作用域  ;   const    用于声明变量
新增数组map    forEach     [...]等方法
提供了模板字符串:  `  `    ${}
函数this指向    ()=>{}   -----this指向父级
对象              class类------继承:extends
注:模块的暴露和接收

五、模块开发的规范   AMD    CMD   commonjs规范

AMD--------------异步加载规范,核心是依赖提前引入,代表框架require.js

CMD-------------标准通用规范,核心是模块按需引入,代表框架是sea.js

commonjs-------------谷歌提供的规范,核心是模块的接收和暴露(require/import   module.exports/export)

六、测试工具  mocha  karma

先弄清测试、调试、联调三个概念

测试: 通过专门的测试工具/ 代码  对功能/项目进行整体测试(黑盒测试/白盒测试)--线下  线上--(一轮 二轮  三轮)需要写测试用例
 调试:控制台  打断点
 联调:前端与后端的交互   测试的是 后端的数据有没有问题network
目前能想到的就这些,还有一些其他的日后再说。

学习一个新事物,肯定是从听说到了解,再通过学习训练达到熟悉和熟练的一个阶段,在理论和实战都十分强的情况下,最后通过不断训练不断学习不断思考总结,才可能达到精通的地步。下面就node的一些基本知识做一个了解:

一、node是什么

nodejs是一个基于Chrome   v8引擎的JavaScript运行环境。它使用了一个事件驱动、非阻塞式I/O的模型,使其轻量又高效。

注:1.事件驱动:事物在执行过程中用于决策的一种策略,跟随当前时间点上出现的事物,调用一切可调用的资源该事物,使其不断出现的事物被处理  防止事物堆积。

        2.非阻塞式:i(input输出/写入)/o(output输出/写出)

        3.nodejs由C++语言编写

        4.nodejs的包管理器npm  ----------- 关于包管理器

            包管理器  npm  cnpm yarn
            相同点: 追踪package.json 进行依赖安装(npm init)

             cnpm 是npm的镜像(实际项目开发  不推荐cnpm 因为会生成多余的依赖文件;当依赖过大,比较吃网络的情况下   使用cnpm镜像) 
             npm -- npm install   //npm一个依赖接一个依赖进行安装,依赖信息会全部打印出来/安装过的再次安装会重新下载 
             yarn-- yarn add  //并行安装 安装信息一emoji表情做展示 /安装过的再次安装  不会重新下载
        5.简单来说,nodejs是一个编写高性能网络服务器的JavaScript工具包(用于js开发服务端程序),使用的是单线程、异步、事件驱动的一个模式。

二、node的特点

快、耗内存多

三、node与PHP相比的一些优缺点

优点:
            性能高

            开发效率高

            应用范围广

缺点:
              新、会的人少

             中间件少(函数)

              IDE(编辑器)不完善

四、node的一些基本API

url模块
      提供的方法:

        url.parse(urlString)     url路径转换成url对象信息,用于查询url信息

        url.format(urlObject)       将url对象信息转换解析成正常的url地址

        url.resolve(from,to)           将两个url地址解析成一个完整的url路径,   from通常跟URL前,to  通常跟path路径  
 

//首先一定要引入模块
var url = require("url");
 
console.log(url.parse("http://localhost:3000#aaa/hh?id=name"))
 
 
var str ={
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: 'localhost:3000',
  port: '3000',
  hostname: 'localhost',
  hash: '#hh?id=name',
  search: null,
  query: null,
  pathname: '/aaa',
  path: '/aaa',
  href: 'http://localhost:3000/aaa#hh?id=name' 
}
 
console.log(url.format(str))
 
console.log(url.resolve("http://localhost:3000","/aa?id=name"))
  • querystring模块

用于解析与格式化 URL 查询字符串,提供的方法有:

var querystring = require("querystring");
//querystring.escape()汉字编码,将汉字编码成计算机识别的语言
console.log(querystring.escape("哈哈哈"))
//querystring.unescape() 汉字解码,将计算机语言解码成中文
console.log(querystring.unescape("%E5%93%88%E5%93%88%E5%93%88"))
//querystring.stringify()  将对象转换成字符串,逗号用&连接起来
console.log(querystring.stringify({"name":"ls","age":"22"}))
//querystring.parse()  将字符串转换成对象
console.log(querystring.parse("name=ls&age=22"))
  • events模块
var  EventEmitter  = require("events");
//EventEmitter   -   类  原型上  提供两种方法  on(进行事件,数据接收)  emit(进行事件,数据推送)
 
//定义类
class  Person extends  EventEmitter{};
//实例化
var person = new Person();
//定义后,可以多次触发
person.on('事件名',(data)=>{
	console.log(data)
})
 
//emit只触发一次
//person.once('事件名',(data)=>{
//	console.log(data)
//})
 
person.emit('事件名','hello-----大白')
person.emit('事件名','hello----小可爱')
  • fs模块
var fs = require("fs");
//获取文件的一些信息  
fs.stat("./qs.js",(err,data)=>{
	console.log(data.isFile())  //true
})
//新增目录
fs.mkdir("dist",()=>{
	console.log("success")
})
//书写文件
fs.writeFile("./dist/c.js","console.log('ccc');",()=>{
	console.log("success")
})
//追加文件内容
fs.appendFile("./dist/a.js","console.log('bbb')",()=>{
	console.log("success")
})
//读取文件的内容
fs.readFile("./dist/a.js",(err,data)=>{
	console.log(data.toString()) //data----><Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 6c 65 2e 6c 6f 67 28 27 62 62 62 27 29>
})
//列出目录的东西
fs.readdir("./dist",(err,data)=>{
	console.log(data)
})
//重命名目录或文件
fs.rename("./dist/a.js","./dist/b.js",()=>{
	console.log("success")
})
//删除目录(rmdir)与文件(unlink)
fs.unlink("./dist/b.js",()=>{
	console.log("success")
})
fs.rmdir("./dist",()=>{
	console.log("success")
})
//注:rmdir只能删除空文件夹,下面是删除整个目录的写法
fs.readdir("./dist",(err,data)=>{
	data.map(function(item){
		fs.unlink("./dist/"+item,()=>{
			fs.rmdir("./dist",()=>{
				console.log("success")
			})
		})
	})
})
//同步读取目录信息
console.log(fs.readdirSync("./dist"))//[ 'a.js', 'b.js', 'c.js' ]

注:终端里面不能执行多行的表达式 ,但是终端可以进行简单逻辑计算,可以url.parse()、url.resolve()、 url.format(),只是都是在node环境下,先进入node环境,再执行这些逻辑计算。

       错误优先回调函数-- 函数先执行错误判断  函数第一个参数为错误对象  第二个参数是正常数据

五、node可以做什么

node.js可以用来解析JS代码(没有浏览器安全级别的限制),提供了很多系统级别 的API,如:文件的读写,进程的管理,网络通信等。-----搭建服务器

学习node.js 可以辅助前端开发,代替后端开发。

六、node的安装

nodejs安装版本
        v6.9.4 LTS(长时间支持版本——-推荐) 

        V7.6.0 Current(最新版本,有些api会有变动)

注:中间为偶数位的是稳定版(推荐使用),为奇数位的是非稳定版本

nodejs安装方法
下载安装包,然后小黑窗执行以下代码:

         npm i xxx -g(只需要安装一次)
         npm i xxx --save-dev/-D/-S(项目依赖  哪一个项目用就安装)
         npm i xxx@2.2 -D(指定版本安装)

接下来就是用nodejs搭建我的第一个服务器,代码如下:
 

//搭建一个地址为http://localhost:3000的服务器
 
var http = require("http"); //引入node原生模块
var hostname = "localhost";  //主机名
var port = 3000;             //端口号
 
 
 //创建服务器  req:请求对象  res:响应对象
http.createServer((req,res)=>{
 
    //1.charset=utf-8主要是解决中文乱码问题;2.要用单引号,双引号不起作用
	res.setHeader('content-type','text/html;charset=utf-8')
	
	res.statusCode=200;
	
//	console.log(req.url);   //向服务器请求的地址路径
	
	if(req.url!="/favicon.con"){
		//写入响应信息
		res.write("hi");
        say(req,res);
		//响应结束
		res.end();	
	}
 
	
	//域名端口号的监听
}).listen(port,hostname,()=>{
	console.log(" 服务器已开启http://localhost:3000")
})
 
 
 
function say(req,res){
	res.write("你好啊 ---")
	res.end()
}

写入数据信息除了在res.write()里面写入之外,还有两种写法:

一个是直接在下面写个函数,通过函数调用的方式,如上面say()函数的调用;

第二种是引入外来文件,如common.js

 

var hs = {
	fn1:function(req,res){
		res.write("hello");
		res.end()
	},
	fn2:function(req,res){
		res.write("hi");
		res.end()
	}
 
}
 
//commonjs规范
module.exports = hs

然后在源文件server.js里面引入,再调用

//引入写法
var hs = require("./common")
 
//调用写法
 
if(req.url!="/favicon.con"){
	res.write("2");
	hs.fn1(req,res);
	res.end();	
}

上面搭建的方法比较复杂,下面是node搭建服务器的简洁写法

var  http = require("http");
 
http.createServer((req,res)=>{
	
	res.writeHead(200,{"content-type":"text/html;charset=utf-8","Access-Control-Allow-Origin":"*"})
	
	if(req.url!="/favicon.ico"){
		
		res.write("hello");
		res.end();
	}
	
}).listen(3000)

注:

1、nodejs的三大模块分别是:内置模块(原生模块)、依赖模块、自定义模块。其中,内置模块不需要安装依赖,如http等;

自定义模块通过“./a.js”这种模式引入。

2、安装热更新:npm install supervisor -g    

      启动    supervisor xxxx.js   可以不用执行node,自动更新(supervisor )

七、前端从服务器请求数据展现于页面
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>请求数据</title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	
		<button id="btn">请求数据</button>
                <p></p>
		
	</body>
	<script type="text/javascript">
		$("#btn").click(
			function(){
				
				$.ajax({
					type:"get",
					url:"http://localhost:3000",
					success:function(data){
						//console.log(data)
                                             $("p").text(data)
					}
				});
			}
		)
	</script>
</html>

八、node可以选择搭配的一些框架

  • Express(sails): 完善、稳定、文档全、社区大
  • Koa: 超前
  • Hapi:复杂(一个简单的helloworld都要做很多堆砌),适合复杂的大型项目

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值