朱小帅

前言很多时候会遇到空对象{}的情况,怎么样才能够很好的判断呢 前置条件现在有三个对象 1234567891011121314151617181920const obj = {}const obj1 = { name: 'Hello', age: 20}const obj2 = { name: 'World' age: 20}Object.defineProperty(obj2, 'name', { enumerable: false,});Object.defineProperty(obj2, 'age', { enumerable: false,}); 编写方法现在我们用不同的方法来判断 Function 1我们可以使用JSON.stringify(obj) 1const isEmptyJSON = (prop) => JSON.stringi ...

前言在上一篇文章中,依旧详细的讲解了如何部署后端,本篇再接再厉告诉大家伙儿如何部署 前端 前置条件默认大家伙儿已经有服务器了,我的是阿里云的. Step 1: 安装 Nginx下载 Nginx.js 的安装包1yum install nginx 查看是否安装成功1nginx -v 此时可以去浏览器输入yourIp看看 Step 2: Coding 起码找一个你最喜欢的地方新建一个文件,我的例子可能不是那么规范,但是先能跑就行 新建文件夹project123cd /mkdir projectcd project 在project中新建文件夹frontEnd12mkdir frontEndcd frontEnd 将前端代码打包,一般会生成dist将dist复制到frontEndStep 3: 获取证书首先你需要去得到免费的 ssl 证书以阿里云为例进入阿里云官网搜索数字证书管理服务点击左侧SSL私有证书点击创建证书点击证书申请 根据要求填写这里我们域名填写front.yourDomain.com点击提交审核等待一分钟…刷新页面点击下载下载服务器类型Nginx的证书下载后解压,会有 ...

前言本篇文章将详细的讲解如何部署 node 服务. 前置条件默认大家伙儿已经有服务器了,我的是阿里云的. 环境搭建首先我们可以进入到服务器可以通过本地的终端 1ssh root@yourIp 然后输入密码就可以进去啦 Step 1: 安装 Node 环境下载 Node.js 的安装包1wget https://npm.taobao.org/mirrors/node/v16.18.1/node-v16.18.1-linux-x64.tar.xz 解压 Node.js 的安装包1tar -xvf node-v16.18.1-linux-x64.tar.xz 重命名 Node.js 安装目录1mv node-v16.18.1-linux-x64/ /usr/local/node 将 Node.js 的可执行文件目录加入到系统环境变量中1echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile 使刚配置的 Node.js 环境变量立即生效1source /etc/profile 查看 n ...

需求在一般的项目中,往往只需要将某个分支往 dev 分支合并,但是有时候并不是所有的 commit 都需要合并.在这个例子中,一共会有三个分支: dev qa prod, dev是我们开发的分支,所有的功能都将在这个分支上开发,当开发完成后,本地测试通过后,需要发布到qa分支,测试.当需要正式上线时,需要将功能提交到prod上. dev 开发现在假设有三个需求,我们都进行了开发,所以会有三个 commit 信息.在 dev 上会呈现这样的 commit history现在我们仅仅只需求二更新到 qa 分支,我们应该怎么操作呢? 123456789# 首先我们现在本地建立与qa的链接git fetch origin# 新建本地qa分支git checkout -b qa origin/qa# 然后进行合并,这里使用到了 git cherry-pick# git cherry-pick commit_idgit cherry-pick commit_id 在上面的事例中,我们仅仅合并了一个 commit 了,但是如果需要合并多个且连续的 commit 应该怎么办呢假设我们需要从 comm ...

前言上一节中,我们已经成功将 css 抽离出来了,但是目前为了书写的方便,我们更多的使用 scss 或者 less,这里我们将使用 scss,less 的原理基本相同. 安装插件这里我们将使用到sass-loader 1npm install sass-loader sass webpack --save-dev 编辑 webpakc.config.js 1234567891011121314151617// changemodule: { rules: [ { // 这里已经使用scss了 test: /\.scss$/, use: [ // 提取css MiniCssExtractPlugin.loader, "css-loader", // 将scss转变为css "sass-loader", ], }, ], }, 仅 ...

前言在上个文章中我们已经成功引入了 css,但是,我们审查元素,发现 webpack 将 CSS 存储在 JS 模块中,对应于页面上我们的 CSS 写在了 style 标签中,如果 css 多了，很容易造成画面闪盾的情况,并且不符合我们日常的使用情况,所以我们需要将 CSS 从 JS 中抽离. 安装插件我们需要用到MiniCssExtractPlugin 1npm install mini-css-extract-plugin --save-dev 编辑 webpakc.config.js 12345678// addconst MiniCssExtractPlugin = require('mini-css-extract-plugin');// addnew MiniCssExtractPlugin({ // 对输出的css文件进行重命名 filename: 'built.css',}); 执行 npm run build我们可以看到dist目录下生成了 built.css 文件,观察dist中的 index.h ...

快速开始安装 css-loader style-loader 1npm install css-loader style-loader --save-dev 在 src 文件夹下新增style.css文件 1234/* style.css */p { color: red;} 此时目录结构 123456789101112webpack|- /dist |-index.bundle.js |-index.html|- /node_modules;|- /src |- index.html |- index.js |- style.css|- package-lock.json|- package.json;|- webpack.config.js 在index.js中引入 css 文件 123// index.jsimport './style.css';console.log('hello webpack'); 编辑 webpakc.config.js 123456789// add module: &# ...

设置 HtmlWebpackPlugin首先安装插件 1npm install html-webpack-plugin --save-dev 编辑 webpakc.config.js 1234567891011// addconst HtmlWebpackPlugin = require("html-webpack-plugin");// addplugins: [new HtmlWebpackPlugin({ // 选取 './src/index.html' 文件 template: "./src/index.html",}),], 我们可以先删除 dist 文件，然后执行npm run build可以看到重新生成了 dist 文件夹,此时文件结构为 1234567891011webpack|- /dist |-index.bundle.js |-index.html|- /node_modules;|- /src |- index.html |- index.js|- pack ...

准备工作 vscode node V16.13.1 npm V8.17.0 项目初始化首先在想要的位置新建一个空的文件夹,这里取名为 webpack,然后进入该文件夹执行命令 12// 初始化项目npm init -y 我们会得到一个 package.json 此时项目结构如下 12webpack|- package.json; 接下来安装 webpack 12// 初始化项目npm install webpack webpack-cli --save-dev 此时项目结构如下 1234webpack|- /node_modules;|- package-lock.json|- package.json; 我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。使用在 package.json 文件中 12345// 删除"main": "index.js",// 增加"private": true, 创建一个 src 文 ...

前言在我的日常工作中常常会用到TweenMax 和 ScrollMagic 来编写一些比较复杂的动画.基本上都能够较完整的完成需求. 问题描述当页面滑动过快会出现以下情况 代码如下下面代码是页面进入时 title desc 和 text 的动画,很简单,就是简单的浮动 12345678910111213141516171819202122232425var f2 = new TimelineMax() .from( `${className}.hdPlus .title`, 1, { y: computeTrans(150), opacity: 0 }, 'c' ) .from( `${className}.hdPlus .desc`, 1, { y: computeTrans(150), opacity: 0 }, 'c' ) .from(`${className}.hdPlus .tex ...