一.编写代码实现遍历文件
const fs = require("fs")
const path = require("path")
const readDir = (entry)=>{
const dirInfo = fs.readdirSync(entry) //["hello","node.js"]
dirInfo.forEach(item=>{
const location = path.join(entry,item)
//需要判断这个路径是文件夹还是文件
const info = fs.statSync(location)
if(info.isDirectory()){ //如果是文件夹的话,就进来了 hello
console.log(`dir:${location}`)
readDir(location) //递归的方式实现遍历
}else{
console.log(`file:${location}`)
}
})
}
readDir(__dirname)
二.node如何做版本升级?为什么要使用nvm
回答node相关的内容的时候,尽量不要发挥到全栈。
引导到webpack上、npm上,前端工程化方向做功
为何做node的版本升级?现在使用node8 12.x
升级版本的目的:
1.12.x有些新的语法api出现了,在当前的8.x的版本不支持
2.webpack做项目过程中,希望它可以打包速度变快,所以需要升级node版本
npm install nvm -g
nvm ls (列出所有的node的版本号)
nvm use v12.0.0
node -v(查看当前安装的node版本)
三.模块化的差异 amd commonjs esmodule
amd是requireJS在推广过程中对模块的规范化产出,是一个概念。
amd推崇依赖前置 —> 依赖必须一开始就要写好 (生活的案例,打开3个标签页,每个标签页提前放好1,2,3集)
define([’./a’,’./b’],function(a,b){
a.doSomething()
//写了100行代码
b.doSomething()
})
cmd 是 seaJS在推广过程中对模块定义的规范化的产出
cmd推崇依赖就近—>内部用到某个依赖模块了再去进行单独的引入
define(function(require,exports,module){
var a = require("./a")
a.doSomething()
//写了100行代码
var b = require("./b")
b.doSomething()
})
//跟esmodule的区别
if(true){
//这句代码是否可行?这是不行的!不能在逻辑里面通过这种方式引入代码
//静态引入 webpack内部推荐esmodule的方式引入模块,内部打包速度快
import a from “a”
//amd.cmd这种方式称之为动态引入,可以根据逻辑引入不同的功能模块
require("./a") //这句代码是可行的
}
四.图片上传到服务器流程(FileReader.readAsDataURL)
onchange后,内部你就可以调用FileReader.readAsDataURL获取你所上传的图片的base64的内容,
放入到img标签里面,实现图片的预览效果
五.node里面的mvc的理解
m:model 数据模型层 (数据与数据库的操作的一部分逻辑 增删查改操作 java/dao层)
v:view 视图层
c:controller 控制器
c的作用是将m层的数据在v层上进行显示。
mvc三层是可以互相的调用,流程上没有过多的限制
mvp是mvc的升级,m不能调用p层,v也不能去调用p层,只有p层可以调用mv.最终暴露用户的是p这一层
mvvm
m:model
v:view
vm:viewmodel
vm层可以感知数据的变化,然后实时的渲染最新的视图,并且这个是自动的操作。(Object.defineProperty)
react只是mvc里面的v层。因为当数据发生变化了,视图是不会渲染最新视图,必须内部调用setState进行更新,
然后视图才可以变成最新的视图。 这个操作是我们手动实现的。
六.常用的css预处理语言
less or sass (stylus )
less底层是js进行编译的
sass底层是ruby进行编译的 (node-sass sass-loader)
命名空间可以避免一些冲突问题的产生:
.home{
.home-header{}
.home-content{}
}
七.工程化上的按需加载
说白了就是异步组件。
vue里面的vue-router生态里面,实现路由的懒加载的时候,通过
new VueRouter({
routes:[
{component:()=>import("XXX"),path:"/home"}
]
})
vue中的路由采用了异步组件+webpack的代码分割功能实现了路由的懒加载,减少首页的加载用时
react里面实现懒加载的话,怎么做?
通过使用react-loadable的第三方模块,实现懒加载
八.node中的npm与版本管理(package.lock / yarn.lock)
cnpm i axios -S
package.lock/yarn.lock 称之为版本锁文件
本地测试是没有问题的,然后发布线上有问题了,例如发布线上的时候axios由1.0变成了2.0了
api内部肯定不一样的,所以就会导致线上报错的问题。
版本锁文件的出现,就是锁住当前的版本,避免出错。 (npm 5.x以上就会有)
九.Webpack常用插件与loader
核心概念: entry output (hash chunkHash:8) loader plugins
loader:
css-loader(处理图片路径、将css样式进行打包到js文件中)
style-loader:通过style标签将css插入到dom中,通过与css-loader进行搭配使用
postcss-loader:添加样式前缀,解决部分css兼容问题
sass-loader 加载sass编译为css
vue-loader允许以一种单文件组件的形式去编写vue组件
file-loader 处理文件或图片(url-loader)
plugins:
html-webpack-plugin插件 (template模板)
将打包后的文件自动插入到指定的模板里面去
extract-text-webpack-plugin
将打包后的css单独进行抽离
optimize-css-assets-webpack-plugin
压缩css,优化css结构,利于网页的加载与宣传
copy-webpack-plugin
将指定目录下的文件赋值到指定目录下
happypack
多线程的执行任务,加快编译速度
打包后的文件"*.map"作用?如何干掉?
打包后的后缀名为map的文件是由于配置了souremap选项产生的,打包后的文件不容易找到出bug对应的源码的位置。所以通过sourcemap就可以帮助我们解决此问题,有了map就可以像未压缩的代码一样,准确的输出是哪一行那一列有错误。
config/index.js文件中修改参数即可:
productionSoureMap:false
webpack中通过proxy配置反向代理?
为了解决前后端联调时出现的跨域问题,将后端的域名的请求代理到本地,从而避免跨域请求。
“/api”:{
target:“http://www.XXXX”, //要访问的真实域名接口
changeOrigin:true, //是否跨域
pathRewrite:{ //在代理过程中是否需要替换掉/api/路径
“^/api”:""
}
}
十. mongodb数据库操作常用命令
mongodb vs mysql