Node、gulp、sass

最新推荐文章于 2023-05-20 21:50:14 发布

野槐

最新推荐文章于 2023-05-20 21:50:14 发布

阅读量443

点赞数

分类专栏：前端文章标签： javascript windows 前端

本文链接：https://blog.csdn.net/qq_44930306/article/details/126534209

版权

前端专栏收录该内容

45 篇文章 5 订阅

订阅专栏

2.为什么使用node.js作为后端服务器?(优势)

3.node的操作

4.模块化

5.模块的分类

6.nodejs模块的导入和导出:CommonJS

一、懒加载

使用场景:瀑布流

1.定义

延迟加载：当页面需要加载大量图片时，优先加载可视窗口的图片

2.懒加载原理

<img src="url地址">

每个img都有src属性,当src属性发送请求时，就会下载数据，

如果src属性开始没有url地址，该img标签遍不会发送请求，

开始不要让所有的img标签都存储url,

将url保存在一个自定义属性中,

等img标签进入加载条件时，在将url赋值给src

3.加载条件

if (图片.top < 可视窗口的高度 + 滚动条的高度){

oImg[i].src = oImg[i].data_url;

}

4.浏览器的javascript的作用？

（1）操作dom（也就是对dom的增删改,注册事件之类的事情）

（2）发送AJAX请求/跨域

（3）BOM交互：如给我们提供页面跳转，历史记录，控制台打印日志

（4）ecmascript(js的核心语言:如用来定义变量、函数等)

js只能实现浏览器页面的交互行为,存在缺陷

1.不能对文件进行读写

2.也不能直接操作windows api

二、Node.js

1.定义

就是一个javascript的运行环境（平台）,他不是一门语言,也不是javascript的框架。

可以用来开发服务端应用程序，web系统。其特点是体积小，快速，高性能。

简单的说:Node.js就是运行在服务端的JavaScript。

Node.js 是一个开源和跨平台的 JavaScript 运行环境.

Node.js = js的运行环境(谷歌v8js引擎) + 巨量的新API

js的运行环境(谷歌v8js引擎)作用,

以前js必须运行在浏览器，因为浏览器中有js引擎,而node.js将js引擎抽离出了浏览器,

所以js现在可以运行在服务器端

巨量的新API作用,可以做以前干不了的事，（对文件进行读写，可以直接操作windows api,可以搭建服务器，写后端代码）

2.为什么使用node.js作为后端服务器?(优势)

1.前端人员不必在重新学习一门后端语言

2.服务器运行效率极高

3.node的操作

双击exe安装node->证明node安装成功->打开cmd(window+r)

node -v如果显示版本号，则安装成功

注意事项:路径的切换,必须保证编译的文件路径和用户路径相同

在js文件所在目录处，键入cmd

运行js文件的命令:node 文件名

4.模块化

没有html文件了,那么js文件和js文件之间怎么导入和导出.

必须研究js文件如何导入导出。

nodejs淡化了类的概念,通过模块替换了类.

模块:本质其实就是js文件,通过模块模拟类.

可以通过模块定义模块对象

5.模块的分类

1.系统内置模块:http,fs

2.自定义模块:你写的js文件

3.第三方模块:通过npm下载的模块

6.nodejs模块的导入和导出:CommonJS

模块的导入:

const 模块对象 = require(模块文件);

模块的导出:

方法1:

exports.属性1 = 值1;

exports.属性2 = 值2;

方法2:

module.exports = {

属性1:值1,

属性2:值2,

...

}

注意事项:

1.被导入的模块的属性或方法，必须对外暴露，才能直接使用

2.平级目录文件导入，也得加./

3.CommonJS规则导入时，可以省略js后缀

4.node_modules文件夹包含的文件夹,可以直接通过文件夹名，导入里面的index.js模块

公有和私有的问题:

在类的设计中，有些属性往往是不愿被外部可以直接操作的，这种属性应设置为私有。

三、npm

node package manger 包管理工具

包:出口模块

npm可以理解为是一个软件商城，

通过npm可以下载各种各样的模块。

1.npm常见命令

npm -v:检测npm是否安装成功

npm install 模块名称;[模块的安装]

install可以改为i

通常凡是需要使用到npm下载的项目,请在下载模块前,创建json文件

npm init[在项目的根目录下创建package.json配置文件]

往往在项目拷贝的过程中，是不会拷贝第三方模块的.

当创建配置文件后，可以直接通过npm i的方式下载所有依赖关系的第三方模块

npm uninstall moudleName[卸载模块]

2.nodemon[自动重启工具]

自动重启工具,可以监听某一个文件,当实现保存时,自动执行该文件

npm install nodemon -g

四、gulp简介

程序员的作用:不是用来解决低级且重复性问题的。

简单重复性的工作咱们用工具代替.

1.定义

gulp是一个前端的自动化构建工具,可以对很多类型的文件实现压缩(去空格回车),合并,拷贝,格式化,测试

2.安装cnpm的命令

npm i 模块 -g 全局

npm install cnpm --registry=https://registry.npm.taobao.org -g

没有配置全局环境变量的话,该模块只能在自己的路径下使用，

当添加了g(全局环境变量后),在电脑的任意位置都可以使用该模块

*此电脑->属性->高级系统设置->高级->环境变量->系统变量->Path*

npm i 模块 -D 将模块绑定在[开发依赖]

npm i 模块 -S 将模块绑定在[生产依赖]

3.gulp的使用步骤

1.安装全局gulp,这一步是在安装gulp的软件(电脑是需要安装一次)

cnpm i gulp -g

每个项目使用gulp时都得执行一遍

2.创建配置文件paakage.json

cnpm init

3.安装gulp模块

cnpm i gulp -S

4.在项目跟目下，创建名为gulpfile.js文件

4.gulp的操作

原生的gulp(不考虑插件的情况下,只能实现文件的拷贝)

task

src

dest

5.傻瓜日期

const sd = require('silly-datetime');

console.log(sd.format(new Date(),"YYYY-MM-DD,hh"));

6.fs文件读写模块

[第一步]

const fs = require('fs');

[读]

//同步的读

**let str = fs.readFileSync("文件路径");**

console.log(str.toString());//将二进制转为明文

//异步的读

**fs.readFile("路径",回调函数(err,读取的内容){})**

fs.readFile("2.fs.js",(err,data)=>{

if(err){

console.log("文件读取失败");

}else{

console.log(data.toString());

}

//异常处理:*try{..}catch{...}*

try{//条件成功时执行的代码

console.log(data.toString());

}catch(err){//抓取异常对象,异常对象包含着该种异常出现的原因

console.log(err);

}

});

[写]

//异步的写

**fs.writeFile("路径","写入内容",[{flag:"w|a"}],回调函数);**

*{flag:"w"} 删除源文件,创建新文件*

//当路径不存在时,创建新文件

fs.writeFile("111.txt","明天星期五，啊哈哈哈哈",{flag:"w"},function(){

console.log("写入完毕");

});

//追加==>*{flag:"w"}*

fs.writeFile("123.txt","后天星期六，哇哈哈哈哈哈哈哈",{flag:"a"},function(){

console.log("写入完毕");

});

//创建文件夹==>*fs.mkdir("文件夹名称",回调函数)*

fs.mkdir("heihei",()=>{});

//删除文件夹==>*fs.rmdir("文件夹名称",回调函数)*

fs.rmdir("heihei",()=>{});

//删除文件==>*fs.unlink("文件夹名称",回调函数)*

fs.unlink("111.txt",()=>{});

7.路由

用户输入不同的路由参数跳转至不同的页面

**http.createServer((req,res)=>{ res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});}**

//url:ip+端口+路由参数+请求参数

const http = require('http');

const fs = require('fs');

http.createServer((req,res)=>{

res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});

// console.log(req.url);

路由模块(/3种情况)

if(req.url == '/login'){

fs.readFile("login.html",(err,data)=>{

if(err){

console.log("读取失败");

}else{

res.end(data);

}

});

}else if(req.url == '/reg'){

res.end("注册页面");

}else if(req.url == '/admin'){

res.end("后台页面");

}

}).listen(8888);