手写 Promise

1. Promise 的基本特征:

  1. promise 有三个状态:pending,fulfilled,or rejected;「规范 Promise/A+ 2.1」
  2. new promise时, 需要传递一个executor()执行器,执行器立即执行;
  3. executor接受两个参数,分别是resolve和reject;.
  4. promise 的默认状态是 pending;
  5. promise 有一个value保存成功状态的值,可以是undefined/thenable/promise;「规范 Promise/A+ 1.3」
  6. promise 有一个reason保存失败状态的值;「规范 Promise/A+ 1.5」
  7. promise 只能从pending到rejected, 或者从pending到fulfilled,状态一旦确认,就不会再改变;
  8. promise 必须有一个then方法,then 接收两个参数,分别是 promise 成功的回调 onFulfilled, 和 promise 失败的回调 onRejected;「规范 Promise/A+ 2.2」
  9. 如果调用 then 时,promise 已经成功,则执行onFulfilled,参数是promise的value;
  10. 如果调用 then 时,promise 已经失败,那么执行onRejected, 参数是promise的reason;
  11. 如果 then 中抛出了异常,那么就会把这个异常作为参数,传递给下一个 then 的失败的回调onRejected;

日常问题速记

日常问题及解决方案或知识点

  1. UI框架组件方法中绑定默认参数,此时传参会覆盖掉默认参数

解决方案

1
@close="(e) => {deleteNode(e ,item.id)}" // e 默认参数 item.id自定义参数

  1. 常见HTTP状态码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    export default {  
    200'请求被正确处理并返回了结果',  
    201'新增或修改数据成功',  
    202'请求已进入任务队列,被异步处理',
       203'令牌或登录状态失效',
       204'删除数据成功',  
    301'请求的资源被永久重定向到新的位置,将从新的地址重新请求',  
    302'请求的资源被临时重定向到新的位置',  
    400'请求参数错误,服务器没有对数据做新建或修改',  
    401'无访问权限,用户名、密码、令牌错误',  
    403'得到访问授权,但访问是被禁止',  
    404'访问的是不存在的资源',  
    405'请求方式不正确',  
    406'请求的数据格式不是服务接收的类型',  
    410'请求的资源被永久删除',  
    422'服务器创建对象时发生错误',  
    500'服务器不可用,未返回正确的数据',  
    502'服务器网关错误',  
    503'服务器过载或维护中',  
    504'服务器响应超时',
    }

云服务器配置部署前端项目实践

从零搭建前端项目运行环境

  1. 登录服务器

  2. 安装node
    下载Node.js安装包

    1
    2
    cd /usr/local/src/
    wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz

解压文件

1
tar xvf node-v10.15.3-linux-x64.tar.xz

创建软链接

1
2
ln -s /home/node-v10.15.3-linux-x64.tar.xz/bin/node /usr/local/bin/node
ln -s /home/node-v10.15.3-linux-x64.tar.xz/bin/npm /usr/local/bin/npm

验证

1
node -v

  1. 安装nginx

安装nginx相关的依赖

1
2

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

安装nginx相关的依赖

1
2
cd /usr/local/src/
wget http://nginx.org/download/nginx-1.16.0.tar.gz

解压文件

1
tar -zxvf zlib-1.16.0.tar.gz

编译

1
2
3
4
//进入nginx
cd nginx-1.16.0
./configure
make install

启动

1
2
cd /usr/local/nginx/sbin/
./nginx

配置环境变量

1
2


4.

前端命名规范

促进项目中名称命名统一

参考 ant-design
参考 element UI

类型 规则
项目名 全小写,中划线 eg: ant-design
文件夹名 全小写,中划线 eg: page-header
文件名 全小写,中划线 包括图片,html,js等
组件名 大驼峰 eg: TimePicker.vue
id class 全小写,中划线 header-logo
类名 大驼峰 eg: Student
方法名 小驼峰 eg: getUserInfo()
变量名 小驼峰 userInfo
常量名 全大写 下划线 MAX_COUNT

跨域及解决方案

跨域定义

跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域.相反,不跨域即叫同源,
同源:即协议头(http/https)、域名、端口完全一致就叫同源;

跨域解决方案


跨域解决方案

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享(CORS)

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

VUE知识点梳理

1.对于MVVM的理解


MVVMModel-View-ViewModel 的缩写

Model : 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为

View : 用户操作界面。当ViewModel对Model进行更新的时候,会通过数据绑定更新到View

ViewModel : 业务逻辑层,View需要什么数据,ViewModel要提供这个数据;View有某些操作,ViewModel就要响应这些操作,所以可以说它是Model for View.
总结: MVVM模式简化了界面与业务的依赖,解决了数据频繁更新

VUE开发中遇到的问题

对象数组深度监听

问题: 后端传过来的数组是一个数组对象,页面中绑定对象中某一具体的属性,当该值变化时调用某个函数,自然想到就是watch方法。但如何watch数组对象中某一个具体的属性,显然不可能一个个属性写watch。

解决办法:

  1. watch整个对象,设置deep为true,当该对象发生改变时,调用处理函数。

  2. 将页面中绑定的属性写在computed函数中,watch这个computed中的函数,当对象值改变时会进入computed函数中,进而进入watch函数中,再调用处理函数。

JavaScript进阶问题列表

JavaScript 进阶问题列表

摘自github

从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

答案在问题下方的折叠部分,点击即可展开问题。祝你好运


ESlint报错解决方案

Unary operator ‘++’ used

ESLint 不允许++ 运算比如

1
2
3
4
5
6
7
8
9
10
11
for (let i = 0; i < 3; i ++) {
// ...
}
for (let i = 0; i < 3; i += 1) {
// ...
}

temp++

var temp = 0;
temp += 1;

浮生六记

衡量爱情的标准,从来只有一个

贾平凹说过:人,可以无知,但不可以无趣。

一本《浮生六记》让我认识了一位有趣的文人——沈复:

他,才情出众,既有文人风雅,亦有稚童心态,虽半生潦倒,依然和夫人将清贫的生活过得热气腾腾。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×