随笔分类 - 前端
摘要：webpack_bundle_analyzer 是什么？ 这是webpack官方出品的，对项目中模块依赖关系及体积的分析插件，其界面如下： 问题来了，这是如何来进行统计的？ 这里提供一个插件的代码，可以观察到里面的 json 结构。 代码中的 stats 是一个巨大的对象，里面包含 chunks，也
阅读全文
摘要：本文章发到掘金上，请移步阅读： https://juejin.im/post/5cf10b02e51d45778f076ccd
阅读全文
摘要：不是什么很难的东西，权且做个记录。 首先说下背景，目前的项目中，需要同时绑定 wheel 和 scroll 事件。 绑定 wheel，目的是开发 ctrl + wheel 缩放页面功能，此功能与浏览器本身的冲突，因此需要禁用滚轮原生功能，示意代码： 此时遇到个问题，禁用 wheel 的同时，会将 s
阅读全文
摘要：概述 position: sticky，这是一个比较容易忽略的css3 position 新属性，它的作用即为实现粘性布局，它是 relative 与 fixed 的结合。 用法 默认情况下，其表现为relative，在视窗与设置了该属性的元素之间，达到或超过其预设的 top、bottom、left
阅读全文
摘要：Lottie是Airbnb发布的开源动画库. 帮助动效落地。学会使用Lottie,会极大地提高工作效率。 Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的情况, 因为动画我们都给做好了他只需要给播放一下就好了!! 下面的效果可以轻松实现. 官网地址：htt
阅读全文
摘要：最近看了一道前端面试题，是关于正则的，用尽可能低复杂度的函数，匹配替换指定文本为html标签，题目是这样的： 按照正常情况，我们能瞬间想到以下几种解法： 正则分步替换 indexOf查找替换 以上二者均是分步处理，先匹配=g，替换成<g>，然后匹配=，替换成</g>，这种属于暴力破解。 下面介绍下r
阅读全文
摘要：关于作者 张云龙，全民TV 研发负责人，曾任阿里巴巴移动事业群主任工程师，百度高级研发工程师。 本文转载自：前端工程——基础篇 · Issue #10 · fouber/blog 0 写在前面 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者
阅读全文
摘要：平时做web开发的时候关于消息传递，除了客户端与服务器传值，还有几个经常会遇到的问题： postMessage方法 postMessage是html5引入的API可以更方便、有效、安全的解决这些问题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗
阅读全文
摘要：本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得，可能只有笔者一个人看，权当日记了。 很久很久以前，react-route还是2.X和3.X版本的时候，我们是这样做按需的： const routes = { path: '/', component:
阅读全文
摘要：这是一款针对webpack的像素转vw单位的loader插件。 笔者公司中，h5 rem的开发方案目前已经渐渐开始转向vw方案，因此本工具应运而生。 目前所制作的h5，大部分设计稿分辨率都是750的宽度，所以设定的基础分辨率是750，如果遇到特殊情况，只需要简单修改一下配置即可。 安装： 配置：按以
阅读全文
摘要：1.概念 xss一般分为两类，反射型和存储型。 反射型xss指的是客户端的不安全输入而引起的攻击，例如： 在某网站搜索，搜索结果会显示搜索的关键词，搜索时关键词填入<script>alert('1')</script>，然后点击搜索。如果页面没有对关键词进行过滤及代码转换，这段代码就会直接在页面上执
阅读全文
摘要：最近在看threejs开发指南，总结一下制作最基础的3d场景的8步： 1. 设置场景大小 2. 创建WebGl渲染器 3. 指定根节点元素 4. 初始化场景 5. 添加相机到场景 6. 创建物体到场景 7. 添加光源到场景 8. 渲染 下面给出代码： 1. 设置场景大小 var WIDTH = 40
阅读全文
摘要：整理一下xmlHttp.status的值（http 状态表） 状态码 状态码 意义 释义 100 1xx (临时响应)表示临时响应并需要请求者继续执行操作的状态代码。 继续 客户端应当继续发送请求 101 切换协议 请求者已要求服务器切换协议,服务器已确认并准备切换 200 2xx (成功)表示成功
阅读全文
摘要：前些天看了一篇很赞的文章，又因为想学习phaser，所以有了这个案例，在线预览可以点下方链接。 本案例中，核心原理是按文章中所提到的内容制作，整体遵循“大道至简”的原则开发，其实是懒的去封装模块。。。 在线预览 文中代码可以访问本人github 关键技术点 除去上面提到的文章中的技术点外，还有几处需
阅读全文
摘要：在vue2中，父子组件传递数据，父组件可以直接传递数据进子组件，而子组件通过调用父组件传递进来的方法，将自己的数据传递回去。 那兄弟组件之间，或者是兄弟组件的子组件之间如何传递呢？ 当然vuex是一种解决方案，那如果仅仅使用vue怎么办？一层层传递么？ 这里简单说下vue2里面的eventBus。
阅读全文
摘要：1. Webpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库，比如对于这样一个文件： import React from 'react'; console.log(React); 如果你在 Webpack.config.js 中配置了externals： modu
阅读全文
摘要：html中的空格encodeURIComponent后变成%C2%A0，而js中的空格是'%20'，二者无法匹配，所以要进行一次替换 html中的空格encodeURIComponent后变成%C2%A0，而js中的空格是'%20'，二者无法匹配，所以要进行一次替换
阅读全文
摘要：在ie内核中，发现Ajax的请求不会真正的被发送到服务器端，返回的永远是304。这个应该是IE的设计问题，查询解决方法后，看到网上的一段话： “因为ajax请求的时候如果使用get方式请求，同时路径参数相同的时候，ajax会先从本地缓存中取，如果取到了它是不会去请求后台的” 所以最终解决办法是，给每
阅读全文
摘要：方便初学redux的同学学习，这里是最简单的redux例子
阅读全文
浙公网安备 33010602011771号