Node

最新推荐文章于 2024-05-21 09:47:47 发布

Fengwu9166

最新推荐文章于 2024-05-21 09:47:47 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/Fengwu9166/article/details/104615620

版权

一.编写代码实现遍历文件

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

Fengwu9166

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node

一.编写代码实现遍历文件const fs = require("fs")const path = require("path")const readDir = (entry)=>{ const dirInfo = fs.readdirSync(entry) //["hello","node.js"] dirInfo.forEach(item=>{ ...
复制链接

扫一扫