zzh466

zzh466 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

zzh466 回答了问题 · 2018-12-03

解决函数内如何返回 函数内部异步方法赋值的变量?

const list = [
    "./img.png",//本地存在可加载成功
    "//be-fe.github.io/static/images/iSlider-card/10.jpg",//加载图片失败
    "./load.gif",//本地存在可加载成功
    "//be-fe.github.io/static/images/iSlider-card/12.jpg",//加载图片失败
    null,//无图片
    "//be-fe.github.io/static/images/iSlider-card/17.jpg",//加载图片失败
];
const placeholder = '默认占位图';
const loadError = '加载失败图';
const gen = () =>
    list.map((ele) => new Promise(resolve => {
        function getsrc(src) {
            resolve(`<p>${src}</p>`)
        }
        if(ele){
            const image = new Image();
            image.src = ele;
            image.onload = () =>getsrc(ele)
            image.onerror = () => getsrc(loadError)
        }else {
            getsrc(placeholder)
        }
    }))
Promise.all(gen()).then(htmlArr =>  $("body").append(htmlArr.join('')));

关注 3 回答 4

zzh466 赞了回答 · 2018-10-12

解决react从state中获取的数组可以直接修改吗?

看你继承哪个。继承component可以直接修改。继承purecomponent则不行

关注 4 回答 5

zzh466 回答了问题 · 2018-10-12

解决如何在数组B中加入数组A与数组B中的不重复元素?

arrB = arrB.concat(arrA.filter(a => !arrB.includes(a)));

关注 4 回答 3

zzh466 回答了问题 · 2018-10-09

解决vue组件的事件是否有必要在组件销毁前进行移除?

必须移除的,不然整个组件的实例都无法被垃圾回收,导致内存泄漏

关注 5 回答 4

zzh466 发布了文章 · 2018-09-25

js超大整数相加函数

前几天开发的时候遇到了一个奇怪的bug,前端接收的id与后端的不符。经过一番折腾后发现原因是后端发出的id为number类型,但是超过了js的整数精度上限,直接导致接收的时候就精度丢失了,通知后端将id改为string类型后bug解决。
同时我思考了如果有两个超过精度上限的数字,怎么解决他们相加导致的精度丢失问题,思索了下觉得可以用数组解决,下面贴代码

function addLargeNumber(a,b) {
  function getArr(n) {
    const arr = [];
    while (n.length > 10) {
      arr.push(+n.substring(n.length-10));
      n = n.slice(0, n.length-10)
    }

    arr.push(+n)
    return arr;
  }
  const arrA = getArr(a);
  const arrB = getArr(b);
  const addtion = [];
  let carry = 0;
  for(let i = 0; i < Math.max(arrA.length, arrB.length); i++){
    const bitA = arrA[i] || 0;
    const bitB = arrB[i] || 0;
    let bitC = (bitA + bitB + carry).toString();
    if(bitC.length > 10) {
       bitC = bitC.slice(1);
       carry = 1;
    }else {
      carry = 0;
    }
    addtion.push(bitC);
  }
  if(carry){
    addtion.push(carry.toString());
  }
  return addtion.reverse().join('');

}

具体思路及时将两个字符串形式的数字转化成数组形式然后进行处理就行了

查看原文

赞 1 收藏 1 评论 0

zzh466 收藏了文章 · 2018-07-16

编写自己的Webpack Loader

本文将简单介绍webpack loader,以及如何去编写一个loader来满足自身的需求,从而也能提高对webpack的认识与使用,努力进阶为webpack配置工程师。

Webpack Loader

webpack想必前端圈的人都知道了,大多数人也都或多或少的用过。简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中。可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用。

那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理。比如把less、sass文件编译成css文件,负责这个处理过程的,就是webpack的loader。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。

举个稍微复杂的例子,vue-loader,它官网介绍如下:

vue-loader 是一个 Webpack 的 loader,可以将指定格式编写的 Vue 组件转换为 JavaScript 模块。

Vue组件默认分成三部分,<template><script><style>,我们可以把一个组件要有的html,js,css写在一个组件文件中,而vue-loader,会帮助我们去处理这个vue组件,把其中的html,js,css分别编译处理,最终打包成一个模块。

明确自己需要什么Loader

我们知道了webpack的强大依托于一个个强大的 loader(当然还有plugin,本文就不介绍了)。如果想真的玩溜webpack,我们就必须掌握loader的使用。在我们使用它们前,我们得知道自己需要什么loader。如果想编译less,可以用less-loader;想加载html文件并打包它内链的静态文件,可以使用html-loader。只要我们想对文件进行处理时,我们都可以去找想对应的loader。

那么问题来了,万一找不到想要的loader该怎么办?

比如我前几天遇到了一个需求,我希望我加载的html文件,都嵌套在一个 layout.html 文件中。如下所示:

<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pure Web</title>
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</head>
<body>
  <header>This is Header</header>

  <!-- 我希望我webpack加载的html,都会被嵌套在这个{{__content__}}部分 -->
  {{__content__}}

  <footer>This is footer</header>
</body>
</html>

这样如果是编写多页应用,我就只需要编写唯一不一样的中心内容,而把网站公共的部分作为layout抽离开来。

可惜html-loader它只能帮我在一个html文件中去加载另外一个html文件,像这样:

<body>
  ${require('@/htmls/header.html')}
  ${require('@/htmls/index.html')}
  ${require('@/htmls/footer.html')}
</body>

这样虽然能抽离公共部分,但我依旧需要在每个html文件中去引用,而且为了保证html结构顺序,我得每个文件都再引一次headerfooter,没法将他们作为一个单独的layout来引入。所以它并不完全符合我的需求。

那该怎么办,我们没有办法,只能自己动手写啊。

动手写一个webpack loader

首先,我们要先阅读一遍webpack官网的介绍:如何编写一个loader?

看完后,我们能知道,loader本质就是接收字符串(或者buffer),再返回处理完的字符串(或者buffer)的过程。webpack会将加载的资源作为参数传入loader方法,交于loader处理,再返回。

在我这个需求中,就是将我加载的html,套在我设定的layout中,再将这个处理完的html返回。大致的代码就是这样:

// {string} source: 加载的html的字符串值
module.exports = function (source) {
  return getLayoutHtml().replace('{{__content__}}', source)
}

简单思考后,发现可行,那么开始编写。

开始尝试

所以,我们第一步,只要实现一个getLayoutHtml方法,能得到设定的layout.html文件就好。仔细想想,layout文件应该是通过配置声明的,然后在loader里去根据配置,调用node的api去加载文件就好。

查阅node与webpack文档,我们可以通过loader-utils来获取loader的配置项。通过node的fs.readFileSync去加载文件,那我们的代码大概可以这样写:

module.exports = function (source) {
  const options = loaderUtils.getOptions(this)
  const layoutHtml = fs.readFileSync(options.layout, 'utf-8')
  return layoutHtml.replace('{{__content__}}', source)
}

webpack的config增加如下loader配置:

{
  test: /\.(html)$/,
  loader: 'html-layout-loader',
  include: htmlPath, // the htmls you want inject to layout
  options: {
    layout: layoutHtmlPath // the path of default layout html
  }
}

难以置信,这样就完成一个基础的html-layout-loader了。当然,这才是真正的开始,真正让loader变得可用,好用。我们还需要考虑很多情况。

完善自己的loader

明确代码可行后,我们得完善自己的功能点,我仔细想想,大概需要考虑如下功能:

  1. 针对每个加载的html,应该可以设定自己的layout文件,而不是所有的html,都必须加载同一个layout。
  2. 替换的占位符{{__content__}}也应该可以配置。

另外,还需要考虑一些异常的处理,如模板文件找不到。

完善自身的需求后,我们又可以编写代码了,这回我就不一行行阐述代码了,直接放链接:html-layout-loader

代码也比较简单,算是实现了自己的基本需求,大家有兴趣的话可以先看看readme的介绍。

写在最后

当我们在遇到大问题时,首先想到的总是去搜搜看有没有现成的解决方案,但现实却难免是没有解决方案。在这种情况下,我们也可以尝试着去写一些插件、组件、或者一个通用化的解决方案,来解决自身的问题,同时对自己掌握一些知识也会有帮助。而且尝试过后可能发现,它也没那么难嘛。

另外,如果这个loader,也对读者们有帮助的话,请尽情使用,有什么问题、想法可以提issue或PR。

--阅读原文 --转载请先经过本人授权-丁香园F2E@相学长

查看原文

zzh466 关注了专栏 · 2018-07-13

前端烂笔头

undefined==null

关注 2

zzh466 回答了问题 · 2018-05-21

关于vue的生命中周期created和mounted的区别的问题?

因为有时候你的请求可能会对当前页面的真实节点有依赖,大家都统一放在mounted里面了。按理来说created里面也是可以的

关注 6 回答 5

zzh466 回答了问题 · 2018-05-21

解决creat-react-app项目在用serve -s部署以后,如果要更新,如何重新build项目。

你打开chrome的控制台,将network中的disable cache 勾上

关注 3 回答 2

zzh466 回答了问题 · 2018-05-21

js如何模拟alert阻塞?

你不能靠这种hack的方式解决问题。至于阻塞你可以用while(true)的方式模拟

关注 4 回答 4

认证与成就

  • 获得 16 次点赞
  • 获得 9 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-07
个人主页被 652 人浏览