第14篇—node.js及项目工程化

最新推荐文章于 2024-01-26 17:36:58 发布

weixin_34221773

最新推荐文章于 2024-01-26 17:36:58 发布

阅读量357

点赞数

文章标签：后端 javascript webpack ViewUI

原文链接：https://juejin.im/post/5c8e41d751882545c70a8175

版权

使用Node.js编写代码实现遍历文件夹及所有文件名

// 实现遍历文件下，获取所有的文件
// 这里使用同步的方式比异步的方式简单的多，异步需要回调里面嵌套回调
const fs = require('fs')
const path = require('path')
const readDir = (entry) => {
    const dirInfo = fs.readdirSync(entry);// [ 'hello', 'test.js' ]
    dirInfo.forEach(item => {
        const location = path.join(entry, item)
        const info = fs.statSync(location)
        // console.log(info.isDirectory())
        if (info.isDirectory()) {// 如果是一个文件夹
            console.log(`dir: ${location}`)
            readDir(location) // 递归的方式实现
        } else {// 如果是一个文件
            console.log(`file: ${location}`)
        }
    })
    // console.log(dirInfo)
}

// __dirname是系统级的变量，拿到的是当前文将所在文件夹
readDir(__dirname)
复制代码

Node如何实现版本的升级？为什么要使用nvm?

为什么要升级node的版本？
- 新的ES语法
- webpack做打包的时候，提升打包速度，因为webpack底层依赖node的api
如何升级node版本
- npm install nvm
nvm的使用：允许在电脑上安装多个node版本
nvm use 版本号
安装新版本的版本：nvm install 版本号
还有一个和nvm差不多的一个n模块

前端开发为什么要学习Node.js

node.js不算是非常优秀的后端语言，计算能力是非常差的，这给后端开发带来了很大的麻烦
node.js可以做一个中间的过滤层的服务器
node.js可以作为一个数据的分发服务器
node.js最强的能力，给前端提供工程化的能力，webpack就是用node.js实现的
npm的包管理系统也是node.js最后的体现

模块化的差异 AMD CommonJS ESModule

AMD依赖前置，也就是说依赖之前就写好了
ESmodule是静态的，加载的是一个接口
AMD和commonJS都是动态的，可以实现动态加载，而且加载的是一个对象
静态引入的好处：可以做代码的静态分析，webpack中的打包就是利用了静态依赖

// AMD 在Angular中就是非常好的体现
defined(['a','b'],function(a, b){
    // 数组中放的是a模块和b模块
    // 函数相当于一个c模块
})

复制代码

图片上传到服务器的过程

<input type='file'>考虑的问题：低版本浏览器的兼容问题高版本浏览器的兼容问题
高版本浏览器
- 预览功能的实现：通过input标签的onchange事件触发函数
- 浏览器的FileReader 和 FileReader.readAsDataURL
- <img src='base64'>来展示图片
低版本浏览器的兼容
- 低版本浏览器是没有FileReader这个类的
- 在onchange触发的时候：直接让input通过表单的形式直接提交给后端，后端存储完会返回一个图片的url
- 创建img标签，显示图片