- 博客(80)
- 收藏
- 关注
RSS订阅转载 Bit----组件管理工具
前言现在几乎每个前端都可以在嘴边挂着组件化、模块化，但是真正做到组件化、模块化开发的项目寥寥无几。比如我们接触的每个 Vue 项目中几乎都有components目录，但是其中的 Vue 组件都和这个项目有着不可切割的关系，如果某天要把这个所谓的公共组件用于其它项目上，就会发现——压根儿拔不动、抽不出。究其根本，造成这个不理想的结果原因很多。代码层面上，不同项目中的 UI 设计风格不同、...
2020-04-16 16:22:33
6748
1
原创 REST 以及RESTful API
先说REST名称REST -- REpresentational State Transfer首先，之所以晦涩是因为前面主语被去掉了，全称是 Resource Representational State Transfer：通俗来讲就是：资源在网络中以某种表现形式进行状态转移。分解开来：Resource：资源，即数据（前面说过网络的核心）。比如 newsfeed，friends等；Repr...
2019-12-20 12:43:16
2438
转载 Vue Function-based API RFC
Vue Function-based API RFC概要将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。基本例子import { value, computed, watch, onMounted } from 'vue'const App = { template: ` <div> <span>count i...
2019-10-06 15:35:56
328
转载 一次性搞懂JavaScript正则表达式之引擎
我们说正则表达式是语言无关的，是因为驱动正则表达式的引擎是相似的。鉴于正则表达式是一种古老的语法，它的引擎也在历史长河中衍生出了几个大的分支。我会关注到正则表达式引擎这样比较底层的实现，缘起于在一次业务实践中，追踪到一个由正则引起的BUG。业务中使用的一个markdown解析库Remarkable在解析一段不规则文本时引起浏览器崩溃，调试之后发现是某一个正则在匹配时陷入了死循环，严格...
2019-08-15 13:20:47
773
原创 vue父子通信的方式
最近团队在做 Vue项目代码层面上的优化。在此整理下vue父子组件通信的方式。大纲：几种通信方式无外乎以下几种：Prop(常用) $emit (组件封装用的较多) .sync语法糖 （较少） $attrs & $listeners (组件封装用的较多) provide & inject （高阶组件/组件库用的较多） slot-scope & v-slo...
2019-06-18 17:14:23
2465
转载 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系，重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知...
2019-06-13 12:23:20
212
原创 真正认识 sessionStorage
很早之前就知道sessionStorage ，也学习过；但没有实战使用过 。最近团队遇到一个问题--------重新来认识一遍。同源策略 和 它的api 这个我就不强调了 。通过实测，我得到下面几个结论 。+各个标签页的sessionStorage 是独立的 。+在a标签页写入修改删除sessionStorage ，不会影响到已经打开的标签页中的sessionStorage 。+通过a标...
2019-05-21 21:50:59
224
转载 webpack4-------缓存
本文为手摸手使用 webpack4，主要分为两部分：怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存默认分包策略webpack 4 最大的改动就是废除了CommonsChunkPlugin引入了optimization.splitChunks。webpack 4 的Code Splitting它最大的特点就是配置简单，如果你的mode是production，那么 w...
2019-05-18 16:40:52
1426
原创 ajax中的withCredentials使用效果
XMLHttpRequest.withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。XMLHttpRequest.withCredentials 怎么用?withCredentials属于XMLHttpRequest对象下的属性，可以对其进行查看或配置。...
2019-05-16 17:56:37
46144
4
转载 webpack-----知识点总结
什么是webpackwebpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScr...
2019-05-16 17:33:37
453
转载 前端面试总结
Motivation2019寒冬来临，卷入动荡之中只能又开启了漫漫求职路。有辛酸，有坎坷，但也有点小幸运。Experience前前后后面试了6家公司，总结一下问题做一个backup。（仅记录问题，不区分面试轮次） 脉脉 框架 简述vue的基本原理 vue的生命周期 vue与react的不同 vue父子通信的方式 vuex的原理及理解 ...
2019-05-16 12:29:59
573
原创 webpack-----------Tree-shaking
一 什么是 Tree-shakingtree-shaking可以理解为通过工具"摇"我们的JS文件，css文件；将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样...
2019-05-16 12:21:54
669
翻译 SplitChunksPlugin文档翻译
SplitChunksPlugin文档翻译chunks以及它的内部引入模块本质上是通过webpack对于模块之间的父子关系做的关联。在webpack4以前，我们使用CommonsChunkPlugin插件来避免依赖的重复打包，但是这样很难进行更深一步的优化。从webpack4开始，CommonsChunkPlugin被移除，新增了optimization.splitChunks和optim...
2019-05-09 13:39:41
1087
原创 stacking context-----------层叠上下文
前言----------最近工作中有同事遇到css的z-index与transfrom相互影响的问题，在此总结整理下。出现影响的原因就是对元素层叠上下文理解问题。一 什么是层叠上下文，层叠水平，层叠顺序层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就level更高一级。换句话说就是于网页...
2019-04-29 17:18:19
268
原创 webpack----------require 几种常见用法
webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上ES6的import语法。本篇就来梳理一下这些require各自的特点。commonjs同步语法经典的commonjs同步语法如下：var a = require('./a...
2019-01-25 16:18:53
588
原创 webpack-dev-server和webpack-dev-middleware的区别
webpack-dev-serverwebpack-dev-server实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware。它的作用主要是用来伺服资源文件。这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-midd...
2019-01-24 19:32:22
1093
转载 基于 webpack 的持久化缓存方案
如何基于 webpack 做持久化缓存似乎一直处于没有最佳实践的状态。网路上各式各样的文章很多，open 的 bug 反馈和建议成堆，很容易让人迷茫和心智崩溃。作为开发者最大的诉求是：在 entry 内部内容未发生变更的情况下构建之后也能稳定不变。TL;DR;拉到最后看总结 XDhash 的两种计算方式想要做持久化缓存的首要一步是 hash，在 webpack 中提供了两种...
2019-01-23 11:21:25
756
转载 多页应用的webpack4配置优化
webpack这款工具虽然很难学，但是自由度很大，玩转之后有种随心所欲的感觉。在学习webpack之前，有几个基础的概念：JavaScript， nodejs， CommonJS， 如果以上几个技能都具备，那么就可以开始学习webpack了。webpack的打包原理，就是将各个模块变成字符串，存入健值或者数组之中，然后每个模块之间的关系，通过__webpack_require...
2019-01-22 18:17:48
644
原创 spy-debugger 前端调试工具
特性1、页面调试＋抓包2、操作简单，无需USB连接设备3、支持HTTPS。4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。6、可以配合其它代理工具一起使用(默认使用AnyProxy) (...
2018-11-27 18:26:43
2674
转载 chai.js------使用
BDDexpect和should是BDD风格的，二者使用相同的链式语言来组织断言，但不同在于他们初始化断言的方式：expect使用构造函数来创建断言对象实例，而should通过为Object.prototype新增方法来实现断言（所以should不支持IE）；expect直接指向chai.expect，而should则是chai.should()。个人比较建议使用expect，sho...
2018-11-27 15:37:42
1739
原创 前端单元测试Unit Test---2---入门
上篇简单介绍了下前端单元测试的背景；以及主要的框架断言库的选择；本文以mocha+chai为主简单介绍下单元测试的入门简介Mocha 是具有丰富特性的 JavaScript 测试框架，可以运行在 Node.js 和浏览器中，使得异步测试更简单更有趣。Mocha 可以持续运行测试，支持灵活又准确的报告，当映射到未捕获异常时转到正确的测试示例。Chai 是一个针对 Node.js ...
2018-11-20 16:56:54
961
原创 前端单元测试Unit Test---1---初探
早就知道单元测试这样一个概念，但是一直没有使用到；只知道后端用到单元测试；直到最近，在真正开始接触和使用它。究竟什么是单元测试？很多人也不一定能描述的十分清楚，故整理记录下，以备自己查看同时帮助他人。waht is the unit test ?In computer programming, unit testing is a method by which individual uni...
2018-11-10 11:06:05
1936
原创 js 中replace中的回调函数
定义和用法replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。我们常用的是： 使用replace进行字符替换，第二个参数传入替换的参数："yyyy-MM-dd".replace(/y+/g,"年")// 年-MM-dd其实replace的第二个参数可以传入一个回调函数 str.replace(ext, funct...
2018-11-09 11:06:15
3254
原创 [ -webkit-box-orient: vertical ] 打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。 1. 加上这注释命令/*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */2. optimiz...
2018-11-06 19:12:26
740
转载 前端----------------异常处理及监控
前言其实，在前端工作中，对错误异常处理做的比较少，因为我们知道，JavaScript 有基本的异常处理能力，前端开发过程中，很多错误js会直接抛出，但是这仅仅是表象的，有时候会因为环境不同，例如线下是好的，线上有问题，或者API等原因，造成js报错。针对这些报错，我们要及时捕获，才能不影响线上体验，减少损失！异常捕获的方式常见的js异常捕获一般有2中方式：1、try..catch...
2018-09-06 15:11:02
852
原创 微信自定义分享IOS环境下-----失效的问题
最近在做一个公众号，涉及到分享的功能，但是在安卓机上，自定义的分享配置参数能够被触发，而在ios苹果手机上却失效了，在百度上搜索解决办法，但都没有效果，配置参数如下： var content = { title: '少时诵诗书所所', // 分享标题 desc: '实打实大发', // 分享描述 link: 'sdsssssss, // 分享链...
2018-08-27 14:39:01
5772
2
转载 前端性能与异常上报
概述对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口性能，进行问题排查。刚进公司时，在进行Node.js的接口开发时，我不太习惯每次排查问题都要通过跳板机登上服务器看日志，后来慢慢习惯了这种方式。举个例子：/** * 获取列表数据 * @pa...
2018-07-30 17:24:51
2392
转载 h5的web push---------h5的Notification
前言本文主要介绍h5的桌面通知和web push，h5的Notification主要用于向用户展示通知，而web push 主要用于订阅推送消息。h5的Notification关于h5的Notification已经不是什么新的技术，但是最新chrome浏览器也是只有在https协议下面才有效。下面简单介绍一下Notification语法let myNotification =...
2018-07-24 12:03:58
3328
转载 反击爬虫，前端工程师的脑洞可以有多大？
1. 前言对于一张网页，我们往往希望它是结构良好，内容清晰的，这样搜索引擎才能准确地认知它。而反过来，又有一些情景，我们不希望内容能被轻易获取，比方说电商网站的交易额，教育网站的题目等。因为这些内容，往往是一个产品的生命线，必须做到有效地保护。这就是爬虫与反爬虫这一话题的由来。2. 常见反爬虫策略但是世界上没有一个网站，能做到完美地反爬虫。如果页面希望能在用户面前正常展示，同时又不给爬虫机会，就必...
2018-07-11 14:09:28
297
转载 Google reCAPTCHA ----------验证码
现有验证码的产品形态调研范围如下，基本涵盖了比较主流的验证码平台：Google reCAPTCHA 极验 阿里云 腾讯云 点触 网易易盾 螺丝帽 FunCaptcha产品背景reCAPTCHA起初是由CMU（卡耐基梅隆大学）设计，将OCR（光学自动识别）软件无法识别的文字扫描图传给世界各大网站，用以替换原来的验证码图片。那些网站的用户在正确识别出这些文字之后，其答案便会...
2018-07-06 14:57:38
13526
原创 forEach-------break不能跳出循环
用forEach遍历数组的话，不能用break跳出循环，也不能用return返回外层。如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止。try { a.forEach（f,t）; } catch（e）{ if（e === foreach.break）retur...
2018-07-04 15:35:14
8790
原创 Mac命令行不执行命令 总出现command not found解决方法
配置过java开发环境,最后不知怎么的只有cd命令能执行解决方法:1，在命令行中输入：export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 这样可以保证命令行命令暂时可以使用。命令执行完之后先不要关闭终端。2，输入cd ~/进入当前用户的home目录。3，创建bash_profile 执行命令: touch .bash_profile4，...
2018-07-03 10:07:56
25213
2
转载 iOS Universal Links(通用链接)
简介什么是Universal Links(通用链接)? 这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等), 或者打开网页(iOS设备上没有安装你的app).或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebVie...
2018-07-02 19:12:43
2591
原创 drag-----拖拽
1、设置元素可拖拽属性:draggabletrue表示可拖拽。false表示不可拖拽。auto默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽。其他值表示不可拖拽。兼容FF：需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。2、拖拽元素事件：dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬...
2018-06-14 11:27:47
404
原创 跨域-------------同源策略
在前端开发中，经常遇到"跨域"的问题，以下的文章将探讨一下为什么会有"跨域"问题的出现，和所谓的"同源策略"同源策略1995 年由 Netscape 公司提出，之后被其他浏览器厂商采纳。同源策略只是一个规范，并没有指定其具体的使用范围和实现方式，各个浏览器厂商都针对同源策略做了自己的实现。一些 web 技术都默认采取了同源策略，这些技术范围包括但不限于Silverlight, Adobe Flas...
2018-06-01 16:45:28
286
原创 Mustache
Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javascript 语言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender...
2018-05-18 13:37:34
544
转载 webpack
阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的...
2018-05-16 18:57:41
139
原创 新型应用形态-----快应用----------1
快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。-------------------（个人感觉有点对标小程序的意思）一：环境的搭建 1.安装NodeJS 2.安装hap-toolkit npm install -g hap-toolkit 3.手机安装调试器---------...
2018-05-08 14:01:39
360
转载 gulp 详细教程
一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript、coffee、sass、...
2018-05-03 18:03:39
408
1
原创 ejs 模板语言的使用
特性<% %> 用于控制流<%= %> 用于转义的输出<%- %> 用于非转义的输出-%> 结束标签用于换行移除模式带有<%_ _%>的控制流使用空白字符移除模式自定义分隔符 (例如，使用 '<? ?>' 代替 '<% %>')包含客户端支持中介JavaScript的静态缓存模板的静态缓存与 Express 视图系统兼容...
2018-04-25 18:21:33
1073
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人