![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端新技术
江木
前端攻城狮一枚
展开
-
Bit----组件管理工具
前言现在几乎每个前端都可以在嘴边挂着组件化、模块化,但是真正做到组件化、模块化开发的项目寥寥无几。比如我们接触的每个 Vue 项目中几乎都有components目录,但是其中的 Vue 组件都和这个项目有着不可切割的关系,如果某天要把这个所谓的公共组件用于其它项目上,就会发现——压根儿拔不动、抽不出。究其根本,造成这个不理想的结果原因很多。代码层面上,不同项目中的 UI 设计风格不同、...转载 2020-04-16 16:22:33 · 6908 阅读 · 1 评论 -
反击爬虫,前端工程师的脑洞可以有多大?
1. 前言对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额,教育网站的题目等。因为这些内容,往往是一个产品的生命线,必须做到有效地保护。这就是爬虫与反爬虫这一话题的由来。2. 常见反爬虫策略但是世界上没有一个网站,能做到完美地反爬虫。如果页面希望能在用户面前正常展示,同时又不给爬虫机会,就必...转载 2018-07-11 14:09:28 · 302 阅读 · 0 评论 -
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 · 8817 阅读 · 0 评论 -
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 · 3380 阅读 · 0 评论 -
Google reCAPTCHA ----------验证码
现有验证码的产品形态调研范围如下,基本涵盖了比较主流的验证码平台:Google reCAPTCHA 极验 阿里云 腾讯云 点触 网易易盾 螺丝帽 FunCaptcha产品背景reCAPTCHA起初是由CMU(卡耐基梅隆大学)设计,将OCR(光学自动识别)软件无法识别的文字扫描图传给世界各大网站,用以替换原来的验证码图片。那些网站的用户在正确识别出这些文字之后,其答案便会...转载 2018-07-06 14:57:38 · 13680 阅读 · 0 评论 -
前端性能与异常上报
概述对于后台开发来说,记录日志是一种非常常见的开发习惯,通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用,也会记录下每次接口调用的时间消耗,以便我们监控服务器接口性能,进行问题排查。刚进公司时,在进行Node.js的接口开发时,我不太习惯每次排查问题都要通过跳板机登上服务器看日志,后来慢慢习惯了这种方式。举个例子:/** * 获取列表数据 * @pa...转载 2018-07-30 17:24:51 · 2437 阅读 · 0 评论 -
前端----------------异常处理及监控
前言其实,在前端工作中,对错误异常处理做的比较少,因为我们知道,JavaScript 有基本的异常处理能力,前端开发过程中,很多错误js会直接抛出,但是这仅仅是表象的,有时候会因为环境不同,例如线下是好的,线上有问题,或者API等原因,造成js报错。针对这些报错,我们要及时捕获,才能不影响线上体验,减少损失!异常捕获的方式常见的js异常捕获一般有2中方式:1、try..catch...转载 2018-09-06 15:11:02 · 867 阅读 · 0 评论 -
多页应用的webpack4配置优化
webpack这款工具虽然很难学,但是自由度很大,玩转之后有种随心所欲的感觉。在学习webpack之前,有几个基础的概念:JavaScript, nodejs, CommonJS, 如果以上几个技能都具备,那么就可以开始学习webpack了。webpack的打包原理,就是将各个模块变成字符串,存入健值或者数组之中,然后每个模块之间的关系,通过__webpack_require...转载 2019-01-22 18:17:48 · 650 阅读 · 0 评论 -
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 · 25383 阅读 · 2 评论 -
iOS Universal Links(通用链接)
简介什么是Universal Links(通用链接)? 这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等), 或者打开网页(iOS设备上没有安装你的app).或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebVie...转载 2018-07-02 19:12:43 · 2681 阅读 · 0 评论 -
Git 基础 ------ tag------打标签
打标签同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签。人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做。本节我们一起来学习如何列出所有可用的标签,如何新建标签,以及各种不同类型标签之间的差别。列显已有的标签列出现有标签的命令非常简单,直接运行 git tag 即可:$ git tagv0.1v1.3显示的标签原创 2018-01-02 11:39:07 · 225 阅读 · 0 评论 -
H5-------------- script 标签的 crossorigin 属性有何作用
先来看下使用:src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="shdsfaafa/342/42342/werfadf/GpGFF93hXpG5KkN" crossorigin="anonymous">看起来比以前的写法复杂好多-----------多了一个 int原创 2018-01-31 14:46:54 · 23287 阅读 · 0 评论 -
WebSocket----------简要介绍
一、内容概览WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。二、什么是WebSocketHTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用H转载 2018-01-24 15:39:54 · 305 阅读 · 0 评论 -
前后端分离实践有感
前后端分离实践有感前后端分离并不是什么新鲜事,到处都是前后端分离的实践。然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时,仍然不可避免的会遇到各种各样的问题。由于层出不穷的问题,甚至会有团队质疑,一体化好好的,为什么要前后端分离?说到底,并不是前后分离不好,只是可能不适合,或者说……设计思维还没有转变过来……一体式 Web 架构示意前后分离式转载 2018-01-26 09:41:59 · 582 阅读 · 0 评论 -
git 命令行------详解
1.添加/删除文件# 添加指定文件到暂存区$ git add [file1] [file2] ...# 添加指定目录到暂存区,包括子目录$ git add [dir]# 添加当前目录的所有文件到暂存区$ git add .# 添加每个变化前,都会要求确认# 对于同一个文件的多处变化,可以实现分次提交$ git add -p# 删除工作区文件,并且将这次删除放入暂存原创 2018-02-09 09:20:51 · 231 阅读 · 0 评论 -
前后端分离之SEO优化--------以vue为例
前言----SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。 历史概况:十年前,几乎所有网站都使用 ASP、Java...原创 2018-02-27 15:34:45 · 37479 阅读 · 0 评论 -
window.open() 某些情况会被浏览器阻止弹出窗口
window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源,这是一个原生的 Javascript API 接口。有关 window.open() 的基本使用可以参考 mozilla 提供的 API 文档:window.open 。大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window....原创 2018-03-06 10:12:51 · 6439 阅读 · 0 评论 -
新型应用形态-----快应用----------1
快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装,即点即用,享受原生应用的性能体验。-------------------(个人感觉有点对标小程序的意思)一:环境的搭建 1.安装NodeJS 2.安装hap-toolkit npm install -g hap-toolkit 3.手机安装调试器---------...原创 2018-05-08 14:01:39 · 366 阅读 · 0 评论 -
drag-----拖拽
1、设置元素可拖拽属性:draggabletrue表示可拖拽。false表示不可拖拽。auto默认值,img和带href属性的a标签则表示可拖拽,其他标签表示不可被拖拽。其他值表示不可拖拽。兼容FF:需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。2、拖拽元素事件:dragstart:拖拽前触发,即鼠标按下,被拖拽元素被拖拽的瞬...原创 2018-06-14 11:27:47 · 420 阅读 · 0 评论 -
meta 标签禁止缩放失效
meta 标签禁止缩放失效原创 2017-09-12 17:34:20 · 8545 阅读 · 0 评论