小蜗牛

小蜗牛 查看完整档案

上海编辑  |  填写毕业院校某公司  |  偏前端 编辑 lost-xming.github.io 编辑
编辑

不高不帅,时常犯二, 在逗比的道路上越走越远。。。

看完请闭眼!

个人动态

小蜗牛 收藏了文章 · 2020-11-24

react中Suspense的使用

关于Suspense的使用,先来看下示例代码

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
OtherComponent是通过懒加载加载进来的,所以渲染页面的时候可能会有延迟,但使用了Suspense之后,可优化交互。

<OtherComponent />外面使用Suspense标签,并在fallback中声明OtherComponent加载完成前做的事,即可优化整个页面的交互

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}
查看原文

小蜗牛 提出了问题 · 2019-07-03

react native 手指拖拽小球添加初始值问题

需求: 拖拽一个小球,在屏幕内移动

已有代码:(官网例子)

    class DraggableView extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          pan: new Animated.ValueXY(), // inits to zero
        };
        this.state.panResponder = PanResponder.create({
          onStartShouldSetPanResponder: () => true,
          onPanResponderMove: Animated.event([
            null,
            {
              dx: this.state.pan.x, // x,y are Animated.Value
              dy: this.state.pan.y,
            },
          ]),
          onPanResponderRelease: () => {
            Animated.spring(
              this.state.pan, // Auto-multiplexed
              {toValue: {x: 0, y: 0}}, // Back to zero
            ).start();
          },
        });
      }
      render() {
        return (
          <Animated.View
            {...this.state.panResponder.panHandlers}
            style={this.state.pan.getLayout()}>
            // 此处假设是一个带颜色的小球...
          </Animated.View>
        );
      }
    }

上例代码最终实现的效果是
图片描述

出现的问题: 1、小球跟随手指移动,释放手指时 小球回弹 2、下一次手指动作时,小球位置跳到 最初的 默认位置

修改上例代码,注释掉

        onPanResponderRelease: () => {
            // Animated.spring(
            //  this.state.pan, // Auto-multiplexed
            //  {toValue: {x: 0, y: 0}}, // Back to zero
            // ).start();
          },
          

问题1 得到解决,但问题2经过一个下午的调试都没有得到解决,希望等达到Rn开发者的 实现思路

上例中 主要用到的还是 手指动作onPanResponderMove 和 Animated.ValueXY 的关联,
在下午的实现中,在 Animated.event 中 dx: this.state.pan.x, 如何添加上一次最终的值,让下一次的小球起始时,不跳回初始位置;

其实在另外一个demo 中 通过 Animated.Value 和 Animated.add 合并两个一围坐标实现拖拽效果,但本人还是期望能够通过 Animated.ValueXY 二维坐标直接快速实现,求思路、解决方案... 多谢!!!

关注 2 回答 1

小蜗牛 回答了问题 · 2019-03-22

网页外链字体不同浏览器之间的区别

问题2 已解决

在生产环境中 服务器端未将woff2字体放入白名单中,造成在 字体文件虽然请求到, 但是返回结果为 200状态,msg: the request path not found

chorme 和 firefox 在未找到此字体文件时,引用了浏览器默认字体,最坑的时safari 竟然下载另外一种字体 也就是上图中带有彩色横条 轮廓明显的 S 字体包

关注 1 回答 1

小蜗牛 提出了问题 · 2019-03-22

网页外链字体不同浏览器之间的区别

直接上正文:

网页用@font-face 加载外链字体包

如下图:


    @font-face {
        font-family: Circular;
        font-style: normal;
        font-weight: 700;
        src: url(........circular-bold.woff2) format("woff2"),
        url(.........circular-bold.woff) format("woff")
    }
    

应用出引用 font-family : Circular

浏览器验证字体样式

  1. chrome 正常引用

clipboard.png

  1. safari 未引用

clipboard.png

  1. firefox 未引用

clipboard.png

但是各个浏览器字体样式都是相同, 怀疑:safari 和 firefox内置了此字体,求解惑...

另外为了验证此现象,我把woff2字体包下载到了本地,在另外一个项目中引用发现如下现象:

  1. chrome 成功下载字体

clipboard.png

  1. safari 也成功下载此字体包,但是 字体样式变了

clipboard.png

求解惑...

关注 1 回答 1

小蜗牛 赞了回答 · 2019-03-15

axios CancelToken操作时,服务器端是否已经接收到了请求?

分几块
请求之前 在请求之前判断已经被取消,抛错误,走 catch
请求中 调用 abort 取消,抛错误,走 catch
请求完成 会在then抛出一个错误就,走 catch
请求失败 会在catch 判断是否是取消的 error,不是取消的 error 接着抛错,走 catch

关注 4 回答 2

小蜗牛 赞了回答 · 2019-03-15

axios CancelToken操作时,服务器端是否已经接收到了请求?

关注 4 回答 2

小蜗牛 提出了问题 · 2019-03-15

axios CancelToken操作时,服务器端是否已经接收到了请求?

axios中有一个回调函数为 CancelToken 表示您可以使用取消令牌取消请求。

axios取消令牌API基于撤销的可取消承诺提议。但这个提议在2年前就已经取消了。

最近发现公司的vue项目中使用着这个函数,在一个提交用户行为记录的接口上进行的,发现当客户端手动调用
axios.CancelToken 时,服务端仍保留了这个操作记录,

在翻查 撤销的可取消承诺提议 的提交记录中取消 前一版并未找到取消是在哪一步进行的。

请问:axios.CancelToken操作时,断开操作是在哪一步进行的,服务器端是否已经确认获得到当次请求的内容?

关注 4 回答 2

小蜗牛 回答了问题 · 2019-03-04

怎么才能搭建一个完美的vue项目的基础工程,有没有搭建笔记推荐一下,总感觉自己的不完美?

看大家都是推荐内容,那我就来手写一点吧, 其实搭建完后 基础内容都是差不多的(router + store + sass/less + bable 等);

关键在于自己的项目流程习惯性问题处理;

下面是我个人配置 vue 项目上的一些需要处理的点
1/ 全局公共文件 这里设置版本号, 获取host 判断dev test pro 环境, 全局公共url / cdn 地址等信息
2/ axios 的封装, 这里根据项目做特殊处理,get/post二次封装等, 例如拦截所以请求添加 token ,对dev 环境中的url 添加固定的 api标示(后端代理请求跨域处理) 当请求异常时是否做弹窗提示等;
3/ api 管理,全局 API 提取当公共文件中,通过dispatch 触发,当前页面内部的业务api 直接写在当前vue文件中
4/ 错误异常收集并上报处理, 利用$bus(具体实现看业务需求)
5/ router 做 require 按需加载,个人习惯 每个 业务独立一份router.js 管理 全局 通过addRoutes 添加

    const myRouter = new VueRouter({
              mode: "history",
              base: config.ROUTER_BASE_PATH,
              routes: []
            });
            
            myRouter.addRoutes([
              {
                path: "/",
                redirect: "/userList"
              }
            ]);
            
            myRouter.addRoutes(require("@views/login/router").default); // 登陆页
            

6/ views 下面按照业务分类为 文件夹形式,不太习惯另一种模式(components 下一切皆组件),太难找了,不好区分
7/ 组件间嵌套尽量不超过3级
8/ eslint 的配置, 官网配置的是 save 的是运行lint, 我个人 习惯借用husky的precommit时运行lint
9/ 写业务代码时,尽量多写 注释,个人认为一切的文档都不如注释来的明白和方便
10/ 分包处理, 防止单文件过大

关注 8 回答 7

小蜗牛 赞了文章 · 2019-03-04

深入NUXT,看看一条命令行的背后到底发生了什么

图片描述

一、介绍

Nuxt.js - Universal Vue.js Applications

随着react社区的next.js框架的发布,vue社区也终于诞生了属于自己的前后端同构框架nuxt.js。在进一步的接触与使用中,发现nuxt.js确实极大地方便了vue项目的开发,其背后的逻辑也值得我们玩味。关于nuxt的具体的用法请查阅官方文档,本文就不一一赘述了。

本文主要研究nuxt的运行原理,分析它从接收一条nuxt指令,到完成指令背后所发生的一系列事情。

在开始本文之前,请读者务必亲自体验过nuxt.js的使用,并且具备一定的vue.js相关开发经验。

二、NUXT指令

通过查看nuxt.js工程目录下的package.json文件,我们可以看到下列几条指令:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

结合官网的介绍,我们可以知道不同的指令对应着不同的功能:

指令描述
nuxt开启一个监听3000端口的服务器,同时提供hot-reloading功能
nuxt build构建整个应用,压缩合并JS和CSS文件(用于生产环境)
nuxt start开启一个生产模式的服务器(必须先运行nuxt build命令)
nuxt generate构建整个应用,并为每一个路由生成一个静态页面(用于静态服务器)

以上几条指令,也就是本文将要分析的重点:究竟这些指令的背后,nuxt都做了一些什么样的工作呢?

三、执行指令

打开nuxt.js的工程目录,进入到到bin目录,我们可以看到5个文件:

  |__ nuxt
  |__ nuxt-build
  |__ nuxt-dev
  |__ nuxt-generate
  |__ nuxt-start

每个文件对应着不同的指令。下面我们通过一张图来分析每一条指令的执行过程:

图片描述

从上图可知,每一条指令基本都是做了这么几件事情:

  1. 读取nuxt.config.js文件的配置;

  2. 实例化Nuxt()类,并把上一步读取到的配置覆盖Nuxt()类的默认配置;

  3. 执行各自具体的方法函数。

对应代码如下(节选):

var nuxtConfigFile = resolve(rootDir, 'nuxt.config.js')

var options = {}
if (fs.existsSync(nuxtConfigFile)) {
  options = require(nuxtConfigFile)
}
if (typeof options.rootDir !== 'string') {
  options.rootDir = rootDir
}

var nuxt = new Nuxt(options)
nuxt.build()

第一步读取配置以及配置的内容可以查看官网说明,下面我们将会对第二步和第三步进行深入探讨。

四、Nuxt()

进入到nuxt/lib目录,我们可以看到如下的文件目录结构:

  |__ app
  |__ build
    |__ index.js
    |__ webpack
  |__ generate.js
  |__ nuxt.js
  |__ render.js
  |__ server.js
  |__ utils.js
  |__ views

目录当中的nuxt.js文件,就是我们要实例化的Nuxt()类的所在,让我们来看看它都包含一些什么内容,以及各自都有些什么作用:

图片描述

上图中每一步都可以在具体的代码中自行浏览。在用户输入指令并实例化了Nuxt()类以后,实例化出来的nuxt对象就会执行图中打了绿色对勾的几个方法:build(), render(), renderRoute(), renderAndGetWindow()以及generate()方法。

同时,Nuxt()类也提供了一个close()公有方法,用于关闭其所开启的服务器。

五、build()方法

build()方法对应着nuxt/lib/build/index.js文件,其基本构成如下:

图片描述

简单来说,build()方法在判断完运行条件后,会先初始化产出目录.nuxt,然后通过不同目录下的文件结构来生成一系列的配置,写入模板文件后输出到.nuxt目录。接下来,则会根据不同的开发环境来调用不同的webpack配置,运行不同的webpack构建方案。

六、render.js文件

nuxt/lib目录下找到render.js文件,它包含着我们即将要分析的三个方法:render(), renderRoute(), renderAndGetWindow()

图片描述

通过这张图片,我们可以知道nuxt对于处理“客户端渲染”与“服务端渲染”的逻辑其实是非常清晰的。

首先,在render()方法在处理完一系列的路径问题后,会调用renderRoute()方法,获取响应所需内容并完成响应。

其中renderRoute()方法会判断当前响应是否应执行服务端渲染。如果是,则调用vue提供的bundleRenderer()方法,把html内容渲染完毕以后再整体输出;如果不是,则直接输出一个<div id="__nuxt"></div>字符串,交由客户端渲染。

最后,通过renderAndGetWindow()来检查输出的html是否存在问题,然后发出通知,表明html可用。

七、generate.js文件

最后我们来分析一下generate.js文件。我们知道nuxt generate指令会为page目录下的每一个页面文件单独生成一个html静态页面,功能非常贴心。那么generate.js到底是怎么工作的呢?

图片描述

在执行nuxt generate时,它会先执行前文已经分析过的build()方法,产出编译后的文件;然后会初始化dist目录,调用resolveRouteParams()方法,读取产出后的路由配置并整理。然后通过fs.writeFile()等API,把内容挨个写入文件并输出,最后再统计总的generate()运行时间。

八、写在最后

Nuxt是一个新诞生的项目,官网文档也尚未全部完成。从一个使用者的角度来说,这是一个非常有意思的项目,VueJS的作者尤大也曾褒奖过这个项目,在VueJS的官网也专门为其进行推荐。

如此interesting的项目实在很值得深入研究,作者的代码和注释也非常清晰详细。本文受限于个人水平,在分析理解上难免有出错的地方,欢迎各位读者指正!

查看原文

赞 67 收藏 90 评论 6

小蜗牛 回答了问题 · 2019-03-01

解决nuxt 部署的问题 急急急

clipboard.png

项目完成后,现在本地npm run build 跑跑看

关注 2 回答 1

认证与成就

  • 获得 1123 次点赞
  • 获得 65 枚徽章 获得 2 枚金徽章, 获得 15 枚银徽章, 获得 48 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-11-14
个人主页被 8.6k 人浏览