<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[visibleforest的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/visibleforest</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; visibleforest]]></copyright><item><title><![CDATA[js执行机制 和 事件循环（event loop）]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/124061243</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/124061243</guid><author>visibleforest</author><pubDate>Mon, 11 Apr 2022 09:34:53 +0800</pubDate><description><![CDATA[javaScript是一门单线程语言，它的异步和多线程的实现是通过event loop(事件循环)来实现的。

javaScript Event Loop大体有三部分组成：调用栈 call stack 消息队列 message queue 和 微任务队列 Microtask queue。

Event Loop 刚开始时，会从全局栈的代码开始一行一行执行，遇到函数调用就把函数压入栈中（调用栈），被压入的函数叫做帧frame， 当函数返回（函数return 或者 执行完毕）后会从调用栈中弹出。

javaSc]]></description><category></category></item><item><title><![CDATA[数组 的常见操作]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/123534253</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/123534253</guid><author>visibleforest</author><pubDate>Wed, 16 Mar 2022 22:33:19 +0800</pubDate><description><![CDATA[ES6新增的数组的操作方式：

includes() :判断数组中是否含有某个成员

判断机理：基本尊徐严格相等（===），但是对于应NaN的判断与===不同，includes方法认为NaN===NaN

基本用法：数组.includes()
]]></description><category></category></item><item><title><![CDATA[前端面试题]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/122884223</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/122884223</guid><author>visibleforest</author><pubDate>Thu, 17 Feb 2022 15:03:08 +0800</pubDate><description><![CDATA[前端面试题 —— HTML

如何理解 HTML 语义化


	让人更容易读懂（增加代码的可读性）
	
	
	让搜索引擎更容易读懂（SEO）
	
块状元素有哪些？ 内联元素有哪些

块状元素的特点：display: block/table;

有 div h1 h2 table ul ol p 等；

内联元素的特点：display: inline/inline-block;

有 span img input button 等；

前端面试题 —— CSS

CSS - 布局（1）

盒模型宽度的计算

]]></description><category></category></item><item><title><![CDATA[回顾Restful API]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/122293583</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/122293583</guid><author>visibleforest</author><pubDate>Mon, 17 Jan 2022 19:54:39 +0800</pubDate><description><![CDATA[一种新的API设计方式（其实早已推广使用）

传统API设计：把每个url当做一个功能

Restful API设计：把每个url当做一个唯一的资源

不用url参数，举例：

传统API设计：/api/list?pageIndex=2 用参数去局限返回的页面

Restful API设计：/api/list/2




...]]></description><category></category></item><item><title><![CDATA[留言板项目开发]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/122133490</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/122133490</guid><author>visibleforest</author><pubDate>Mon, 03 Jan 2022 12:29:40 +0800</pubDate><description><![CDATA[一、需求分析

需求分析很重要：

原型图：

功能描述：



二、数据库设计

mongodb创建数据库和集合：

回顾mongoose:
mongoose定义Schema和Model:



三、接口（路由）设计

分析需要哪些接口：

哪些接口需要登录验证：

登录如何实现（跨域传递cookie）:



四、初始化环境开发

初始化koa2环境：

规范目录和层级：

连接数据库：



五、项目开发

前端代码介绍：

跨域和跨域传递cookie：

接口开发和前后端联调：



六、项目总结
]]></description><category></category></item><item><title><![CDATA[登录实现方案与实践]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/122083267</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/122083267</guid><author>visibleforest</author><pubDate>Fri, 24 Dec 2021 14:11:44 +0800</pubDate><description><![CDATA[一、cookie和登录校验

1）cookie是什么

存储在浏览器的一段字符串，最大5kb；

每个域都可有一个cookie，跨域不共享；

格式如: k1=v1;k2=v2...（可结构化）；

cookie会随着http请求传递给服务端：

每次http请求，cookie都会随着传递到服务端；（cookie中会携带用户敏感信息，不要把自己的cookie公开让大家看到）

服务端可修改cookie再返回给前端；

默认，跨域不可传递cookie



2）服务端操作cookie


// 服务端操作co]]></description><category></category></item><item><title><![CDATA[mongoose]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/122038615</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/122038615</guid><author>visibleforest</author><pubDate>Wed, 22 Dec 2021 12:45:40 +0800</pubDate><description><![CDATA[为什么要使用mongoose:
mongodb数据格式过于灵活（不够规范），可以插入任何数据，不受限制；实际项目开发时，要有数据格式的规范（重要），特别是多人协作开发时。

而mongoose可以提供规范：Schema定义数据格式的规范；以Model规范Collection;规范数据操作的API.

使用npm安装mongoose：npm imongoose
...]]></description><category></category></item><item><title><![CDATA[mongodb中的一些概念]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/121993145</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/121993145</guid><author>visibleforest</author><pubDate>Mon, 20 Dec 2021 12:13:00 +0800</pubDate><description><![CDATA[启动数据库服务：



mongodb中的一些概念

数据库database：

mongodb可以成为数据库系统（服务）；

一个数据库系统，允许对接很多服务；

每个数据库，就对接一个数据库

集合 collection:

数据库是一个服务（业务）的数据容器；

一个服务（业务）的数据，要分类管理；

如留言板系统，有留言数据，有用户数据

文档document:

集合collection也是数据容器；

文档document 是单条数据，如一条留言，一个用户；

可以被增删改查

bson:

.]]></description><category></category></item><item><title><![CDATA[koa2框架]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/121887813</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/121887813</guid><author>visibleforest</author><pubDate>Thu, 16 Dec 2021 00:38:59 +0800</pubDate><description><![CDATA[框架frame：

1.框架的作用：

封装原生代码的API；规范流程和格式；让开发人员更加关注与业务代码，提高开发效率。

2.框架frame和lib库的区别：
框架是唯一的，库可以共存；框架关注全流程，库关注单个功能。

koa2

koa2是nodejs web server 框架；

官网和文档：Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 | Koajs 中文文档

通过async/await语法高效编写web server；

koa2的中间件机制，能合理.]]></description><category></category></item><item><title><![CDATA[Node.js处理HTTP]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/121788359</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/121788359</guid><author>visibleforest</author><pubDate>Thu, 09 Dec 2021 18:14:53 +0800</pubDate><description><![CDATA[req和res

1.nodejs如何监听http请求:

nodejs启动Web服务：
使用http模块启动服务，通过本机的IP（127.0.0.1）或本机的域名（localhost）访问服务。


// 获取http模块
const http = require("http");
// 创建一个服务器
const server = http.createServer(()=&gt;{
    // 接收到请求后
    console.log("已经收到了http请求")
})
// 监听端口
ser.]]></description><category></category></item><item><title><![CDATA[Node.js基础入门]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/121765500</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/121765500</guid><author>visibleforest</author><pubDate>Wed, 08 Dec 2021 12:24:03 +0800</pubDate><description><![CDATA[1.node.js是什么：

node.js是一个基于Chrme V8 引擎的js运行时。

2.使用node.js的好处：
node.js使得js语言能做更多的事情，而不仅仅是网页。

npm

1.npm是什么：
npm 是 node package manager,即nodejs软件包管理者。

npm的官网https://www.npmjs.com

有几百万的软件包，开源免费。

3.lodash是一个一致性、模块化、高性能的JS实用工具库。
为什么选择Lodash：lodash通过降低arry,]]></description><category></category></item><item><title><![CDATA[vue.js/devtolls插件下载]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/121097964</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/121097964</guid><author>visibleforest</author><pubDate>Tue, 02 Nov 2021 12:47:02 +0800</pubDate><description><![CDATA[下载vue.js/devtools插件时遇到的问题：猜测可能是vue-devtools版本问题导致的，目前vue-devtools需要使用beta版本的，这个才是vue3.x用的，可以参考如下步骤重新安装一下工具（与网络问题有关，访问可能会比较慢，同学可以耐心等待或者多试几次）

1、在官网https://github.com/vuejs/vue-devtools，下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件，安装谷歌版的

（1）进入官网，找到右侧圈起来的地方，点击.]]></description><category></category></item><item><title><![CDATA[vue基础入门下]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120723427</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120723427</guid><author>visibleforest</author><pubDate>Fri, 15 Oct 2021 11:07:59 +0800</pubDate><description><![CDATA[一、mixin混入的基础语法

定义mixin：

全局mixin的定义方法和全局组件类似，局部mixin的定义方法和定义局部组件类似：


    // 定义局部mixin
        const myMixin = {
            data() {
                return {
                    count:222,
                }},}
const app = Vue.createApp({
            // 在]]></description><category></category></item><item><title><![CDATA[Vue怎么做动画和过渡效果？]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120700982</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120700982</guid><author>visibleforest</author><pubDate>Mon, 11 Oct 2021 23:30:18 +0800</pubDate><description><![CDATA[1.通过添加或删除 类名/行内样式 来实现css做动画或过渡效果:


 &lt;style&gt;
        @keyframes leftToRight{
            from{
                transform: translateX(-100px);
            }
            to{
                transform: translateX(0px);
            }
        }
        .a]]></description><category></category></item><item><title><![CDATA[Vue组件]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120635452</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120635452</guid><author>visibleforest</author><pubDate>Thu, 07 Oct 2021 20:31:58 +0800</pubDate><description><![CDATA[组件的定义与使用

组件具备复用性

组件名使用横线连接的小写命名方式。

全局组件：

全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单。名字建议小写字母单词，中间用横线连接。

定义全局组件：


        //声明一个全局组件（使用app.component声明全局组件）
        app.component('hello-word',{
            data() {
                return {
                    cou]]></description><category></category></item><item><title><![CDATA[自己总结前端面试题]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120603335</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120603335</guid><author>visibleforest</author><pubDate>Mon, 04 Oct 2021 16:16:09 +0800</pubDate><description><![CDATA[sass常见面试题

1.什么是sass?

Sass是css的预处理器，它能用来清晰地、结构化地描述文件样式，有着比普通css更强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表，有助于更好地组织管理样式文件，以及更高效地开发项目。

2.列出Sass的一些功能？

一个开源的预处理器，被解析为css。

完全兼容css3。

在css基础上增加变量、嵌套、混合等功能。

在更少的时间内轻松地编写css代码。

自定义输出格式。

3.解释Scss和Sass之间的]]></description><category></category></item><item><title><![CDATA[小程序开发]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120486871</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120486871</guid><author>visibleforest</author><pubDate>Mon, 04 Oct 2021 13:34:38 +0800</pubDate><description><![CDATA[项目目标：

1.移动端屏幕适配；

2.模块化和组件化；

3.在项目中使用Ajax获取服务器端数据；

4.复习ES6

技术选型：

开发语言：ES6;

获取数据：Ajax;

打包工具：Webpack;

模板引擎：art-template;

触摸滑动库：Swiper



准备工作：

1.创建项目目录结构
...]]></description><category></category></item><item><title><![CDATA[Swiper]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120469863</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120469863</guid><author>visibleforest</author><pubDate>Sun, 26 Sep 2021 13:04:53 +0800</pubDate><description><![CDATA[Swiper是什么：swiper是开源、免费、强大的触摸滑动插件。在移动端和PC端。

swiper可以做什么：实现移动端和PC端的大部分滑动功能。如幻灯片、Tab选项卡、页面滑动切换

Swiper使用方法：参考官网的使用教程Swiper使用方法 - Swiper中文网

版本升级怎么办：一切以官网为准，同样参考官网的教程。

各种版本下载地址：https://github.com/nolimits4web/swiper

Swiper的常用API

1.swiper初始化：

用于初始化一个Swipe.]]></description><category></category></item><item><title><![CDATA[移动端Web开发性能优化]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120418353</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120418353</guid><author>visibleforest</author><pubDate>Fri, 24 Sep 2021 16:29:22 +0800</pubDate><description><![CDATA[什么是性能：

性能指的是页面的响应速度，页面的响应速度具体指的是：

1.打开页面到实际能够正常使用的时间：网络请求的时间、页面加载和渲染的时间

2.与页面进行交互的流畅程度：JavaScript脚本的执行速度

注意点：要更快地加载页面首屏内容，无需考虑整张页面。（首屏内容指的是打开网站可以看到的内容，不包含下滑滚动条才能看到的内容）

为什么需要优化移动端的性能：
提升用户体验；与PC端相比，移动端网络速度较慢；与PC端相比，移动端的设备性能较低

各阶段的性能优化点

1.网络请求过程中的优化点
]]></description><category></category></item><item><title><![CDATA[移动端事件]]></title><link>https://blog.youkuaiyun.com/visibleforest/article/details/120316196</link><guid>https://blog.youkuaiyun.com/visibleforest/article/details/120316196</guid><author>visibleforest</author><pubDate>Sat, 18 Sep 2021 23:28:44 +0800</pubDate><description><![CDATA[grid项目的属性：
grid-column-start和grid-column-end、grid-row-start和grid-row-end:项目网格的开始和结束；

取值：

1.number型，是网格线的序号，

*项目可以重叠，使用z-index决定谁在上面

2.name,通过名字来引用一个命名的网格线

3.span number :该网格项将跨越所提供的网格数量

grid-row/grid-column分别是grid-row-start和grid-row-end/grid-column-s]]></description><category></category></item></channel></rss>