学习
关注
分享
扫一扫
光哥是来学习的
这个作者很懒，什么都没留下…
展开
-
【持续更新】commonJS和ES6 import目前已解决但说不清原因的问题，搞清楚后贴上来
commonJS引入文件的一些机制出问题的代码import componentsState from "../componentsState/bbt"componentDidMount() { import(`../pages/${componentsState[this.props.componentPath]}`) .then(Component => { ...原创 2019-11-18 16:57:12 · 532 阅读 · 0 评论 -
利用JS获取用户当前ip地址
新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.p...原创 2019-10-15 15:29:07 · 528 阅读 · 0 评论 -
webpack 配置全局样式（自定义的，vue-cli2/3）
应用场景当我们在scss样式文件中想使用其他已经声明好的scss变量文件，通常会这么做：// style.scss@import "variables.scss";body { color: $theme-color;}随着项目越来越大，每个样式文件都需要用到全局定义好的变量，这时就变得非常的笨重，弊端就暴露出来了。下面来看看怎么去解决这个问题安装sass-resouces-...原创 2019-08-16 10:00:21 · 2134 阅读 · 0 评论 -
SignalR的Javascript客户端API使用方式整理
[原创地址](https://www.cnblogs.com/shenba/p/5416328.html) SignalR的Javascript客户端API使用方式整理 SignalR的服务端提供了两种实现方式，分别是PersistentConnection和Hub，这两种方式的侧重点不同：PersistentConnection更接近于底层，编程接...转载 2019-08-12 15:31:45 · 278 阅读 · 0 评论 -
npm install 安装依赖报错errno: -4048,
作为前端攻城狮，和npm打交道肯定是少不了的，经常利用npm下载各种依赖，题主就经常遇到这个报错F:\demo\webpack_study\webpack4.0>npm install webpack -Dnpm ERR! path F:\demo\webpack_study\webpack4.0\node_modules\fsevents\node_modules\getpass\no...原创 2019-08-16 16:42:10 · 1872 阅读 · 0 评论 -
-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透
MDN中概述 入下-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.值选项1、auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止2、touch使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。问题 B...原创 2019-08-22 10:51:42 · 378 阅读 · 0 评论 -
JS弹出新窗口被拦截的解决方法
在Web编程中，使用JS在新窗口打开页面的时候，会遇到被浏览器拦截的情况，那么，我们如何才能让JS打开新窗口不被浏览器阻止呢？一、问题一一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器会对弹出的窗口进行拦截，因为浏览器会把该窗口认为是弹出广告等用户不想得到的窗体1、解决方法把window.open()函数改为由用户主动点击...转载 2019-09-04 18:02:12 · 784 阅读 · 0 评论 -
IOS Safari浏览器添加桌面图标
iOS中Safari浏览器的私有属性。添加图标到主屏幕：<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png"><link...原创 2019-09-07 15:40:27 · 2288 阅读 · 0 评论 -
iframe的安全问题
今天尝试在iframe中嵌入外部网站, 碰到了一些小问题.如何让自己的网站不被其他网站的iframe引用?我测试的时候发现我把iframe的src指定到github不起作用. 原来是它把X-Frame-Options设置为了DENY, 这样就禁用了别的网站的iframe引用, 避免点击劫持(clickjacking).X-Frame-Options有三个可能值: DENY, SAM...原创 2019-09-20 18:20:25 · 1613 阅读 · 0 评论 -
webpack 如何优雅的使用tree-shaking
1.什么是tree-shakingwebpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS , AMD , es6 ，我简单的说一...原创 2019-08-14 11:57:51 · 1045 阅读 · 0 评论 -
Service Worker 从入门到进阶
背景有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。这是原生APP 本来就支持的功能，这也是相比于 web app，原生 app 更受青睐的...原创 2019-08-08 15:40:02 · 1157 阅读 · 0 评论 -
浅入浅出webpack
准备了挺久，一直想要好好深入了解一下Webpack，之前一直嫌弃Webpack麻烦，偏向于Parcel这种零配置的模块打包工具一些，但是实际上还是Webpack比较靠谱，并且Webpack功能更加强大。由于上一次学习Webpack的时候并没有了解过Node.js，所以很多时候真的感觉无能为力，连个__dirname都觉得好复杂，学习过Node.js之后再来学习Webpack，就会好理解很多，这一次...原创 2019-05-03 10:50:05 · 230 阅读 · 0 评论 -
基于Webpack搭建React开发环境
前几天一直在学习webpack，总算比之前学习的时候有了点收获，所以在昨天发布了一篇webpack入门笔记，今天继续使用webpack练了练手，搭建了一个React开发环境，如果还不熟悉的童鞋可以看一下昨天发布的笔记：入门webpack笔记一、初始化项目文件夹在任意目录下，新建一个文件夹作为你的项目文件夹，命名随意。随后使用命令行工具，切换到该文件夹，键入npm init进行初始化（遇到的问...原创 2019-05-03 10:53:07 · 118 阅读 · 0 评论 -
基于 Webpack4 搭建 Vue 开发环境
之前有写过 Webpack4 的文章，但是都比较偏入门，唯一的一篇实战篇 —— 基于Webpack搭建React开发环境，也是比较简单的，没有涉及到 CSS 抽取，第三方库打包等功能，这篇文章相对而言比较深入。但由于作者水平有限，难免存在谬误之处，欢迎大家指正。还有没入门的童鞋可以参考我之前的文章：浅入浅出webpack 基于Webpack搭建React开发环境一、初始化项目在命令行中...原创 2019-05-03 10:58:21 · 637 阅读 · 0 评论 -
深入研究-webkit-overflow-scrolling:touch及ios滚动
目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scro...原创 2019-05-04 17:16:14 · 216 阅读 · 0 评论 -
JavaScript 高阶函数浅析
引言本期开始介绍 JavaScript 中的高阶函数，在 JavaScript 中，函数是一种特殊类型的对象，它们是 Function objects。那什么是高阶函数呢？本节将通过高阶函数的定义来展开介绍。高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下列一个条件的函数：接受一个或多个函数作为输入输出一个函数也就是说高阶函数是对...原创 2019-05-07 14:29:12 · 145 阅读 · 0 评论 -
基于Hyper-V、centos、搭建宝塔Linux结合gitLab实现前端自动化部署
本文涉及内容较为繁杂，自己也是头一次接触这方面内容，主要也是作为记录以免睡一觉起来忘了。。一、准备工作1.在windows控制面板-程序和功能里开启Hyper-V相关功能；2.在菜单栏管理工具里找到Hyper-V管理器并打开；3.新建虚拟机，没有特殊配置直接点下一步就好；主要注意下面几点在网上找一个centos的安装镜像，我用的是CentOS-7-x86_64-Minimal-181...原创 2019-05-28 15:19:47 · 2260 阅读 · 1 评论 -
Chrome 73导致的flex布局崩坏 以及IOS fixed 失效问题
Chrome 73导致的flex布局崩坏现象项目中会存在如下几种嵌套flex结构：<style> /* 通用样式 */ .card { width: 200px; height: 300px; margin: 20px; border: 1px solid #999; } .flex { display: flex; ...原创 2019-07-10 17:07:48 · 662 阅读 · 0 评论 -
总结一下前端优化方案（持续更新）
1、编译到 ES2015+把 ES2015+ 的代码编译成 ES5，体积会增大好几倍，运行速率也会减慢。在当下2018年，大部分现代浏览器已经支持 ES6 语法。我们要做的，就是把代码编译到 ES2015+，然后给少数的老旧浏览器留一份 ES5 的代码即可。具体的做法就是使用 支持这个标签的浏览器必然支持 async/await, Promise, Class, 箭头函数, Map/Set, ...原创 2019-07-16 14:11:20 · 337 阅读 · 0 评论 -
babel 7 的使用的个人理解
最近看了很多关于babel的使用方法，大部分在一些点上都没有说明白，同时给出的代码也很难再现，为了能够理解和防止以后自己遗忘，特写此文。首先我们要明白babel存在的意义，babel的目的就是为了解决浏览器的自身对于es语言的差异性而带来的一款工具，有了babel就首先不用担心浏览器不支持es语言这件事（当然现在的浏览器尤其是chrome对es6的支持越来越好），其实最重要的不是支持，而是解决差...原创 2019-07-17 14:15:02 · 469 阅读 · 0 评论 -
js中in操作符
in 操作符用来判断属性是否存在与对象中。使用 in 操作符分单独使用和在 for-in 循环中使用。在单独使用时， in 操作符会在通过对象能够访问给定属性时返回 true ，无论该属性存在于实例中还是原型中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...原创 2019-08-03 18:45:31 · 903 阅读 · 0 评论 -
webpack 介绍 & 安装 & 常用命令
webpack 介绍 & 安装 & 常用命令webpack系列目录webpack 系列 一：模块系统的演进webpack 系列 二：webpack 介绍&安装webpack 系列 三：webpack 如何集成第三方js库webpack 系列 四：webpack 多页面支持 &a...转载 2019-05-02 22:10:36 · 202 阅读 · 0 评论