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

使用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标签，显示图片

token存在cookie里，过时怎么处理

• token尽可能让后端作，前端不要作这方面的动词
• 过时处理最好的解决办法就是直接跳转到登陆界面

mongle与mysql的优点

• noSQL的设计很是灵活，目前大数据方面的数据库有noSQL的
• mysql适合作比较规范化的数据存储

git上的冲突解决

• 为何会产生冲突：两我的同时修改了相同文件的相同代码
• 直接在冲突的文件中修改对应的文件，修改以后再次提交

设计模式

Node中的npm与版本管理（package.lock yarn.lock）

• package.lock版本锁，会锁住当前的版本信息，安装依赖的时候会参考锁文件的版本