前端技术的发展主要还是Javascript推动,当HTML+CSS+Javascript的发展到jQuery的时候,Javascript已经从浏览器运行环境进化到虚拟机运行环境,然后向Java看齐,到Google的AI框架也支持Javascript,其中尤其是ES6的变化。从此Javascript向正常语言发展,出现了服务器端开发框架Express + Jade(Pug+EJS),包括webpack-dev-server都是以Express框架为基础的轻量级框架,但同时浏览器端的开发也在出现不同的开发技术。
Javascript就有了两个运行方式,这两种运行方式怎么2in1就成了一个折腾点。首先是Babel框架用来处理ES6与浏览器端语法的兼容,然后打包成Webpack,Webpack后开始出现模块化技术,HTML组件化,CSS组件化,开始出现各种Loader与插件处理技术:HTML-loader,CSS-loader,Vue-loader。这些模块技术催生五花八门的脚本规范,比如CSS相关的less等等,这些技术采用繁碎的配置,饿了么开发的cooking框架用开简化这种配置(还有webpack-cli,vue-cli等脚手架模块都是为了简化配置而来),从此前后端分离开发技术就日趋成熟了。
本主题就从Javascript标准规范谈起,这个规范的实现是Node.js(不完全支持最新的ES标准),主要内容包含:
1. Node.js的编程模式;
2. Node.js的支持的Javascript语法支持;
- 说明:
- Node.js的安装比较简单,可以在官网参考不同平台下的安装:
- Window
- Linux:Redhat,Centos,Ubuntu,Suse等
- Mac OS X
- Node.js的安装比较简单,可以在官网参考不同平台下的安装:
Node的编程方式
交互式编程
-
交互式编程:
- 编写一行执行一行,与运行环境交互。
-
注意;
- 需要先启动执行环境,目前脚本语言基本上都支持交互式编程(号称:REPL:Read Eval Print Loop)
启动node环境
- 安装好node后,就可以直接执行node命令了;
- 查看node的帮助
node --help
- node命令行帮助显示,除了命令行参数外,node的执行还受一些环境变量影响;
- 启动Node运行环境
REPL命令在线帮助
-
REPL的在线内部命令都是用.开头,查看帮助,使用
.help
- 官方文档说明还支持一些快捷键,在帮助中没有出现,不过不用也罢。
常用的REPL命令
-
退出
.exit
-
保存为js文件
.save a.js
- 加载js文件
.load a.js
支持的Javascript基本语法
- Node虚拟机支持基本的Javascript语法:
- 基本语言结构;
- 语法三要素;
- 函数与面向过程;
- 面向对象;
- 异常;
- 内置对象;
- 由于Node运行环境不是浏览器运行环境,所以与浏览器相关的对象域操作不支持(在反爬虫破解中,那种依靠BOM对象,字体等反爬的JS脚本破解起来特别麻烦,需要仿真浏览器环境来完成)
- BOM对象;
- DOM对象;
REPL独特语法支持
交互式多行语句
多行是node运行环境自行判定;
下划线变量
- 下划线在node环境中具备特殊的用途,用来保存上一次命令的输出值;
非交互式编程
-
非交互式编程两种方式:
- 使用node直接加载执行;
- 在交互式环境中使用内部命令.load加载执行;
-
注意:
- Javascript与python一样,直接从文件第一行开始执行,不需要main执行入口函数等(区别于传统的C与Java程序);
编写js文件
- Node遵循的ES标准,脚本文件如下:
var sum = 0;
for(var i = 1; i<=100; i++){
sum += I;
}
console.log("1-100的和是:" + sum);
- 把代码保存为js文件(我们保存的文件名是:
n01_mode_file.js
)
执行js文件
-
执行命令:
node js文件
npm工具与第三方模块
- 正如其他语言一样,语言依靠其他模块(主要包含系统模块)才能实现强大的功能,ES6(ECMAScript 6.0 )Javascript一样,也需要模块库,一般模块库有:
- 标准模块库(随运行环境自带的模块)
- 第三方模块(需要单独安装)
- Node运行环境提供npm工具专门用来下载第三方模型(类似评估系统的brew,python的pip,Linux的yum一样)
- 比如区块链访问的javascript访问模块就是第三方模块。
node标准模块
-
Node.js官方文档中提供标准模块的帮助,由于我们只关注Web前端开发的部分,所以很多模块不关注。地址如下:
http://nodejs.cn/api/
全局安装
-
全局安装在在安装指令中使用-g选项即可
- 安装指令:
npm install 模块名 -g
- 安装指令:
-
全局安装的位置是下面两个目录之一:
- node的安装目录
- /usr/local目录下
局部本地安装
- 局部安装位置,会在npm命令执行时的工作目录下创建(没有的话)一个模块目录(
./node_modules
)安装。- 安装指令:
npm install 模块名
- 安装指令:
npm的其他功能
- 查看已经安装的模块
npm list -g
npm list
npm list 模块名
-
卸载模块
npm uninstall 模块名
-
万能神器npm的命令行帮助
npm --help
- 可以查阅到模块的全局安装目录
- package.json模块管理文件
- 模块管理主要通过package.json来管理,此文件被破坏,模块的加载就会出现问题。
Node支持的语法
浏览器Javascript语法的支持
- 从基本语法来说,浏览器Javascript与服务器Javascript支持的是相同的语法标准;
浏览器对象的访问
- 因为在node运行环境中缺少浏览器环境,所以浏览器中的BOM对象与DOM对象都无法访问。
- 注意:浏览器JS需要依赖html文件执行与加载,这一点与Node运行的js是不同的。Node执行js脚本,但无法识别与执行html文件。
内置对象
- Javascript标准内置对象,Node.js都支持;比如Date等。但是Node运行环境支持更多的内置对象或者类,比如:
- Buffer类
- Stream类
require与标准模块
-
引入标准模块与第三方模块使用require函数。
- Vue对象也可以通过服务器脚本加载执行;
require函数的定义
require(id)
- 参数说明:
- id:模块名或者模块路径
- 返回:加载的模块内容
import与ES实现标准
- ES6按照Java的方式,希望使用import引入模块,但实际早期使用require,在新的标准中引入import;
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
ES6在2015年6月正式发布,所以ES6也有一个别称ES2015;
在ES6之前,也可以使用import / export,这依赖一个项目:babel,他b把import/export转换为require/export。
-
注意:
- 因为上面所描述的缘故,import与require还是存在差异;
下面是使用net模块,创建一个服务器监听的例子:
const net = require("net");
// console.log(net);
// 创建服务器对象,绑定了一个connection事件
var server = new net.Server(
function(c){
console.log("有用户链接:" + c.remoteAddress);
}
);
server.listen(
9999,
function(){
console.log("服务器已经启动,等待客户链接");
}
)
- 运行:
-
启动浏览器,在地址栏输入
http://127.0.0.1:9999
就可以访问这个socket网络服务了。- 注意:实际上这个socket还提供IPC通信(在Window就是管道文件,在Linux就是Domain套接字,实际也是双工管道文件)
-
注意:
- import的使用与CommonJS存在不兼容的情况,需要特殊的要求。;
- javascript基本上具有大部分语言具有的标准库,包含网络、数据库访问等;