- 博客(50)
- 收藏
- 关注
RSS订阅原创 富文本编辑器
方案一：使用iframe给iframe指定一个非常简单的HTML页面作为其内容来源：<!-- iframe html --><!DOCTYPE html><html><head> <title>这里是富文本的iframe页面</title&am
2019-03-01 16:01:35
746
原创 关闭页面beforeunload事件
概述当页面在卸载之前阻止这一操作，控制权限交给用户。代码EventUtil.addHandler(window, 'beforeunload', function() { event = EventUtil.getEvent(event); let message = '你确定要离开吗？' event.returnValue = message; return me...
2019-02-28 18:04:45
1148
原创 右键菜单contextmenu事件
概述通过单击鼠标右键可以调出自定义上下文菜单。这个事件的目标是发生用户操作的元素。代码// html<div id="myDiv"> 右键单击我得到一个自定义的上下文菜单 </div><ul id="myMenu" style="position: absolute;visibility: h
2019-02-28 18:04:39
3222
原创 事件委托
概述事件委托是对“事件处理程序过多”问题的解决方案。原理事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。代码<ul id="myLinks"> <li id="goSomewhere">Go somewhere</l
2019-02-28 18:04:22
189
原创 ie阻止事件兼容
阻止事件的默认行为一般浏览器：event.preventDefault();IE：event.returnValue=false;立即停止事件在DOM中的传播一般浏览器：event.stopPropagation();IE：event.cancelBubble=true;...
2019-02-28 18:04:14
338
原创 textarea基本使用
适用范围IE9+，以及其他主流浏览器。<textarea id="textbox"></textarea>一、设置值let textbox = document.getElementById('textbox');textbox.value = '你好啊';二、选择文本textbox.select();三、取得选择的文本function getSel...
2019-02-28 18:04:05
2758
原创 浏览器的渲染原理
1.浏览器会解析3个东西一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。CSS，解析CSS会产生CSS规则树。Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.2.解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule...
2019-02-28 18:03:56
311
原创 css命名规范
很多开发人员讨厌CSS。根据我的经验，这是因为没有花时间学习CSS。CSS不是最漂亮的“语言”，但它已经成功地为web样式提供了超过20年的支持。还不错吧?但是，当您编写更多的CSS时，您很快就会看到一个很大的缺点。很难维护CSS。写得不好的CSS很快就会变成噩梦。下面是一些命名规范，可以为您节省一些压力和时间。使用连字符’-'分隔字符串如果你写了很多JavaScript，那么驼...
2019-02-28 18:03:32
4797
1
原创 前端实现跨域
一、jsonpJSONP包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。数据就是传入回调函数中的json数据，也就是回调函数的参数了。function handleResponse(response){ console.log('The responsed data is: '+response.data);}var script = docum...
2019-02-28 17:51:10
176
原创 事件处理程序
一、HTML事件处理程序（不推荐）<input type='button' value='click Me' onclick='showMessage' /><script> function showMessage(event) { console.log(this); // window alert('Hello World...
2019-02-28 17:49:58
162
原创 node版本管理工具
仅支持MACtnvmhttps://github.com/aliyun-node/tnvmMac 下安装命令curl https://raw.githubusercontent.com/aliyun-node/tnvm/master/install.sh | bash列出所有可用的node版本: tnvm ls-remote安装某个node版本: tnvm install n...
2019-02-28 17:49:15
668
原创 XML简介
可扩展标记语言（英语：Extensible Markup Language，简称：XML），是一种标记语言。标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。用途XML设计用来传送及携带数据信息，不用来表现或展示数据，HTM...
2019-02-28 17:47:52
146
原创 标准模式与混杂模式
关于渲染模式：在多年以前（IE6诞生以前），各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈）。随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。DOCTYPEDOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，D...
2019-02-28 17:46:58
531
原创 深入理解Dom
一、DOM全称文档对象模型（Document Object Model）二、DOM是什么DOM就是一个编程接口，就是一套API。DOM是针对标记语言（HTML文档、XML等文档）的一套API。三、DOM的用途DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。现在基本上所有的浏览器都都执行了W3C发布的DOM规范，所以在浏览器上就可以用DOM的这些API。...
2019-02-28 17:46:05
422
原创 Firefox float bug? How do I get my float:right on the same line?
问题描述Firefox float bug? How do I get my float:right on the same line?解决方法在父节点加入：white-space: normal;参考[1] https://stackoverflow.com/questions/26306864/firefox-float-bug-how-do-i-get-my-floatrigh...
2019-02-28 17:44:37
212
原创 webstorm快捷键
MAC电脑key功能Command ＋ 左键定位变量引用位置option ＋ F1定位当前文件目录Command + shift + O全局定位文件(文件夹需要最后加/)Command ＋ E最近打开文件列表Command + \分割当前文件(自定义快捷键)[如果想要对照其他文件,直接把文件拖入分割后的区域]Command + shif...
2019-02-28 17:43:36
405
原创 web缓存
缓存是什么?用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。如果中间加上一层CDN，那么用户浏览器与服务器的交互如下：客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接...
2019-02-28 17:42:01
233
原创 Babel文档
介绍Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。 在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。 Babel 把用最新标准编写的 JavaScript ...
2019-02-28 17:40:40
615
转载 webpack代码分割技巧
1. 代码中定义分割点webpack支持在代码中定义分割点。分割点指定的模块只有在真正使用时才加载，可以使用webpack提供的require.ensure语法:$('#okButton').click(function(){ require.ensure(['./foo'], function(require) { var foo = require('./foo'); ...
2018-09-11 15:51:33
5273
原创 webpack中使用postcss-loader
前情提要：在之前项目webpack1.x版本升级到webpack4.x版本，使用postcss-loader代替autoprefixer。在webpack.config.js中直接使用postcss plugins会有 No PostCSS Config found in ... 的错误。{ loader: 'postcss-loader', ...
2018-09-10 17:43:24
2824
1
原创 HappyPack not work in webpack 4
问题描述：在webpack4版本使用happypack会出现以下错误：if (resolve.length === 4) { ^TypeError: Cannot read property 'length' of undefined at resolveLoader (...\node_modules\happypack\lib\Webpack...
2018-09-06 14:39:05
1280
转载 用webpack的CommonsChunkPlugin提取公共代码的3种方式(webpack4 removed)
前面我们实现了 多页面分离资源引用,按需引用JS和css 但有一个问题：最后生成的3个js，都有重复代码，我们应该把这部分公共代码单独提取出来。方式一，传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.jsvar HtmlWebpackPlug...
2018-09-05 18:50:05
678
转载 webpack中hash、chunkhash和contenthash三者的区别
在webpack中有时需要使用hash来做静态资源实现增量更新方案之一，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？hash、chunkhash、contenthashhash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容发生改变的话，那么对应文件hash值也会改变，对应的HTML引用...
2018-09-04 19:55:52
3280
1
转载 JavaScript Source Map 详解
jQuery 1.9发布。这是2.0版之前的最后一个新版本，有很多新功能，其中一个就是支持Source Map。访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是这样的： //@ sourceMappingURL=jquery.min.map...
2018-09-04 17:42:53
227
原创 window.URL.createObjectURL Blob URL在IE中兼容问题
问题描述 window.URL.createObjectURL()可以直接生成blob:开头的链接，该链接产生于浏览器端，不会占用服务器资源。window.URL.createObjectURL()在IE10, IE11以及Microsoft Edge中生成的blob:链接，你不能把它加到一个<a>节点上，也不能直接在浏览器地址栏打开访问，并且得到“Error: 拒绝访问。...
2018-08-16 11:44:13
26474
7
原创 Animation性能优化
在进入主题之前，先来了解一下浏览器的渲染过程，及动画执行的像素渲染过程。 以 Chrome 为例：渲染过程主要包括以下几个过程（Chrome 浏览器）：Parse Html ---HTML 解析 Recalculate Style ---重新计算样式 Style（不包含布局 Layout） Layout ---计算布局位置信息 Rasterizer ---光栅化（针对图形栅格化） 耗...
2018-08-14 13:40:58
1893
原创 获取随机数(重复概率接近于0)
使用方法：import random from 'random.js' // 引入文件random() // 获取随机数，例: OGVjOGRmYTItMmYwZS00NDA4LWIyOTEtMzA0NTM2YTUzYjU1random.js文件//生成唯一标识var Base64 = { // 转码表 table: [ 'A', 'B', '...
2018-08-04 15:07:04
4525
原创 深拷贝方法
第一种方法(最优)：function deepCopy(p, c) { var c = c || {}; for (var i in p) { if(!p.hasOwnProperty(i)){ continue; } if (typeof p[i] === 'object') { ...
2018-08-04 11:56:21
735
原创 IE10以下类静态变量继承
感谢 Babel，我们可以在项目中使用 es6 语法开发项目，大大提升开发效率。但是，在 IE<=10 中，我们需要留意一个 Babel 翻译的处理，那就是 ES6 类继承语法。class Root { static displayName = 'Root'}class Model extends Root {}Model.displayName // 'Root'...
2018-07-17 23:45:18
809
原创 vue-router配置虚拟页面
使用虚拟页面配合 vue-router 划分项目结构解决的问题由于对 router 的理解问题，项目里之前使用了比较恶心的路由配置，导致项目路由嵌套关系特别混乱，而且带来了问题，同一个模块在切换子模块的时候左侧导航栏高亮消失。如下图:vue 的 src 文件里组件文件的结构一般如下（注：文件夹名采用小写，因为对应的是路径 path）+----------------------...
2018-07-17 23:44:08
1442
原创 css命名准则
命名规范使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的命名。反映元素的使用目的是首选。/不推荐: 无意义/ #yee-1901 {} /不推荐: 与样式相关/ .button-green {}.clear {} /推荐: 特殊性/ #gallery {}#login {}.video {} /推荐: 通用性/ .aux ...
2018-07-17 23:43:55
184
原创 vue中通过watch监听数据变化，带来的性能优化
问题背景为什么要用 vuex?在使用 Vue 进行组件化开发时，组件通信是一个十分重要的部分。在 Vue 中，父子组件的关系可以总结为父子组件通信：父组件通过 props 向下传递数据给子组件 子父组件通信：子组件通过 events 给父组件发送消息 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 非父子组件通信：使用...
2018-07-17 23:43:39
41125
原创 vue 中的动态传参和query传参
Vue router 如何传参params、query 是什么？params：/router1/:id，这里的 id 叫做 params。例如/router1/123, /router1/789 query：/router1?id=123，这里的 id 叫做 query。例如/router1?id=456query 方式传参和接收参数传参: this.$router.push({ ...
2018-07-17 23:43:27
43566
4
原创 JavaScript设计模式—代理模式
代理模式代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的用处：为了保障当前对象的单一职责(相对独立性)，而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率、状态判断等。代理模式的意义：遵循面向对象设计原则——单一职责。代理对象角色内部含有对真实对象的引用，从而可以操作真实对象，通常代理和本体的接口应该保持一致性，这样当不需要代理的时候，用户可直接访问本...
2018-04-23 16:40:09
155
原创 JavaScript设计模式—策略模式
策略模式策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来。说白了就是以前要很多判断的写法，现在把判断里面的内容抽离开来，变成一个个小的个体。表单校验为例：<form action="http:// xxx.com/register" id="registerForm" method="post"> 请输入用户名：<input ...
2018-04-20 15:21:53
215
原创 JavaScript设计模式—单例模式
单例模式var getSingle = function(fn){ var result; return function(){ return result || (result = fn.apply(this,arguments)); }}var Fun = getSingle(function(a){ return a;});console.l...
2018-04-19 17:51:15
161
原创 Axios说明文档
Axios说明文档Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装使用 npm:$ npm install a
2017-11-21 15:52:03
404
原创 vue的跨域问题
vue的跨域问题*本文只针对使用vue-cli构建的项目问题描述：使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问 localhost:8888 上的接口分析原因：不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置。 不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨
2017-09-14 10:02:30
2348
1
原创 原型链继承实例
原型继承实例//先用对象字面量去构造一个有用的对象(function(){ var myMammal = { name : 'Herb the Mammal', get_name : function(){ return this.name; }, says : function(){
2017-08-23 12:56:45
793
1
原创 深拷贝和浅拷贝的理解与应用
深拷贝和浅拷贝的理解与应用 对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的，主要是为了在新的上下文环境中复用对象的部分或全部 数据。JavaScript中有两种类型的对象拷贝：浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。深拷贝与浅拷贝的区别 深复制和浅复制最根本的区别在于是否是真正获取了一个对象的
2017-08-22 23:55:01
26649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人