- 博客(84)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 跨域
同源政策同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。参考链接：http://www.ruanyifeng...
2018-05-07 13:44:59
1266
转载 浏览器内部工作原理
浏览器内部工作原理：参考链接：https://kb.cnblogs.com/page/129756/渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。渲染引擎在取得内容之后的基本流程： 解析html以构建dom树 (同步构建css树)-> 构建render树 （可视化dom树）-> 布局render树 -> 绘制render树为了更好的用户体验，渲染引擎将会解析...
2018-05-02 14:11:55
365
原创 amd规范转commonjs规范
目的是在项目框架中安装外部组件时，组件的规范能够统一。由于早期开发未整体文档，细节已记不太清，先把代码地址贴上来：https://github.com/tianmiyingzi/feather2-command-install需要了解的知识点：AMD规范，CMD规范，Comonjs规范，UMD规范等。以下是调研知识点笔记：Javascript模块化编程问：为什么要模块化？答：提高代码重复利用率。问...
2018-04-26 07:52:18
1245
原创 webpack
依赖nodejs创建一个demo目录mkdir webpack-demo && cd webpack-demonpm init -ynpm install --save-dev webpack#将接口代理到本地devServer.proxy#代码拆分完成两类分离工作：1.分离资源，实现缓存资源和并行加载资源1）分离第三方库，因为它们基本保持不变，可以长时间缓存在用户的机器上。如...
2018-04-25 13:58:26
1154
转载 【转】JavaScript：彻底理解同步、异步和事件循环(Event Loop)
理解setTimeout(function(){}，0)for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i);}一. 单线程我们常说“JavaScript是单线程的”。所谓单线程，是指在JS引擎中负责解释和执行JavaSc...
2018-04-23 16:50:14
412
原创 vue小记
vue原理如何追踪变化模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。把一个普通 Javascript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。通过它们（getter/setter）可以让 Vue 在访问属性时进行依赖追踪，以...
2018-04-23 16:06:25
1131
原创 截图插件使用总结
使用插件项目：海报保存 调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：html2canvas:https://github.com/niklasvh/html2canvasdom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题) 使用中因为截图图片模糊，于是采用在截图前先放大canvas画布的...
2018-04-23 15:35:44
538
原创 vuex知识点记录
state: 单一状态树，每个应用将仅仅包含一个 store 实例。getters:mutation: （同步操作）this.$store.commit('xxx')在methods中使用mapMutations将组件中的 methods 映射为 store.commit 调用。actions:（异步操作）Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，但...
2018-04-22 16:39:03
526
原创 调用第三方地图
唤起APP：唤起百度地图(地图webAPI)：http://lbsyun.baidu.com/index.php?title=uri唤起高德地图(地图webAPI)：http://lbs.amap.com/api/uri-api/summary
2018-04-22 16:06:59
1695
转载 js怪癖
偶然看见，问问那些不注重细节的童鞋，哈哈哈~问题：为什么 ++[[]][+[]]+[+[]] = 10？原理：js的隐式类型转换参考链接：http://justjavac.com/javascript/2012/12/20/object-plus-object.html注意：js运算符优先级运算符描述. [] ()字段访问、数
2017-06-02 15:26:31
1320
转载 window.performance
目前只在chrome中调研在chrome控制台执行window.performance，会出现下面结果：简单介绍performance中的属性：memory：{ jsHeapSizeLimit: 1136000000 // 内存大小限制 totalJSHeapSize: 16100000 // 可使用的内存 usedJSHeapSize:
2017-05-27 14:04:42
5884
原创 截图插件
调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：html2canvas:https://github.com/niklasvh/html2canvasdom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题) 使用中因为截图图片模糊，于是采用在截图前先放大canva
2017-05-27 13:52:32
1978
原创 页面局部刷新
场景：页面A使用第三方插件C，如果页面刷新，C会重新初始化并且无法记录之前的信息。现在希望页面的主要功能区B刷新，但是C的信息不要丢失。解决方案：B采用iframe方式引入到A中，B刷新采用self.location.reload()，这时B内容刷新，而A中除了B以外的其他内容保持不变。局部刷新一般就是采用ajax或者iframe（frameset）的方式，这里之所以用iframe
2016-10-27 12:19:17
1217
原创 window.Notification实现桌面通知
var popNotice = function() { if (Notification.permission == "granted") { var notification = new Notification("Hi，", { body: '可以加你为好友吗？', icon: '/sta
2016-10-27 12:07:12
6350
2
原创 有关shell或linux问题小结
linux运行后自动启动服务或者脚本方法有几种：1. 最简单的就是在/etc/rc.d/rc.local 文件中加入启动服务或者执行脚本语句即可。2. /etc/rc.d/init.d文件夹中加入控制服务的脚本3.......小妙招：命令放入后台运行，不影响当前窗口脚本执行->只需要在命令后面加上&即可例如： node app.js >> app.log &
2016-10-17 17:16:41
305
原创 不想浪费时间写重复代码（二）
倒计时：/* 实现多个时间进行倒计时,或者直接格式化时间：time为时间戳 */var deadline = { counting:function(ele,timer){ var _this=this; setTimeout(function(){ if(timer >=0 ){ ele.ht
2016-09-08 16:46:35
701
原创 H5问题总结
搜索键盘与事件绑定input type="search"即可调用搜索键盘但是有时候键盘回车键并不一定具有“搜索”或“前往”字样，需要将input包裹在form中，有时还需要填上action属性(仍然不是所有有效)。回车键事件使用submit。为了防止表单提交时自动刷新页面，js事件中需要组织默认事件：return false。 另外，如果要移除搜索框的叉叉图标，可以设置样式
2016-09-01 14:13:21
1553
原创 不想浪费时间写重复代码(一)
.icon_close{ position: absolute; top: 50%; right: 0.5rem; display: inline-block; width: 0.85rem; height: 0.1rem; background: #a3a3a3; line-height: 0; font-size: 0;
2016-08-02 17:52:11
815
原创 div模拟文本框
最近做H5页面，经常碰见实现高度自适应且计数的文本框需求，所以在这里记录一下。其实很早之前就看了张鑫旭的“div模拟textarea文本域轻松实现高度自适应”，现在的做法也就是文章中提到的方法，主要是用到contenteditable属性。html结构如下： 0/30 这里主要介绍下contenteditable属性：（参考https://w3c
2016-08-02 17:03:59
4825
转载 事件处理模型
总结的很好，方便培训的时候使用。1、目前共存在四种事件处理模型分别是：原始事件模型、标准事件模型、IE事件模型，还有一种Netscape4事件模型，但基本可忽略2、事件处理模型又可以分为基本事件处理和高级事件处理两种，原始事件模型属于基本事件处理，标准事件模型和IE事件模型属于高级事件处理 一、基本事件处理： 基本事件处理主要是指原
2016-03-14 14:47:23
1455
转载 浏览器缓存知识小结及应用
虽然对浏览器缓存的知识已经有所了解，但是看到这篇文章，感觉很得很好，忍不住转载出来和大家一起分享阅读目录1. 浏览器缓存基本认识2. 强缓存的原理3. 强缓存的管理4. 强缓存的应用5. 协商缓存的原理6. 协商缓存的管理7. 浏览器行为对缓存的影响浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一
2016-03-09 14:43:32
433
转载 鼠标滚动事件mousewheel（DOMMouseScroll）
滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;1.mousewheel事件中的 “event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。 2. DOMMouseScroll事件中的 “even
2015-12-30 15:36:21
7682
2
转载 js中静态方法（属性）、实例方法（属性）、内部方法（属性）和原型的一点见解
属性1，私有类型 ：私有，即只能自己使用，在下面的例子，就是说只能在这个函数里使用这个属性( function(){ var a = "私有属性"; alert(a); //私有属性})()alert(a);//error a没有定义2,实例属性 ：即属于实例对象才能访问 var a = function(){ this.x="实例属性"； }
2015-12-10 10:30:02
9293
原创 oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出
（注：本文针对IE8ji以上版本）oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：在 IE9 以下版本不支持
2015-12-09 11:21:47
5997
原创 box-sizing与盒模型的认识
box-sizing属性：content-box（default），border-box。content-box，border和padding不计算入width之内border-box，border和padding计算入width之内，其实就是怪异模式了~盒模型一共有两种模式，一种是标准模式（strict mode），另一种就是怪异模式（quirks m
2015-12-03 14:30:07
552
原创 display：table布局的几个比较好的应用
首先还是了解下基础知识：table：使该元素按table样式渲染table-row：使该元素按tr样式渲染table-cell：使该元素按td样式渲染table-row-group：使该元素按tbody样式渲染table-header-group：使该元素按thead样式渲染table-footer-group：使该元素按tfoot样式渲染table-caption
2015-12-03 10:54:19
3995
原创 Flex布局理论小结
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。兼容性：衍生过程：display:box -> display:flexbox -> display:flex任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex（inline-*）布局。两条轴线（主轴、交叉轴，两者是相对的）：容器flex container; 项目
2015-11-30 18:05:03
921
原创 AMD与CDM RequireJS与SeaJS CommonJS 的认识
CommonJS是一种规范，包括很多内容，NodeJS是这种规范的实现。RequireJS与SeaJS 都是模块加载器。RequireJS工作于web浏览器端，同时也工作于web服务器端，SeaJS专注于web浏览器端。 RequireJS与SeaJS 的差异，可以参考：https://github.com/seajs/seajs/issues/277AMD与C
2015-11-27 13:43:34
2683
转载 CSS中文字体如宋体/微软雅黑的英文名称写法
我们在制作网页前端的时候，最常会遇到的两种中文字体是“宋体/微软雅黑”，你可以在css里面定义写成中文，但是这样的坏处是在英文的系统里面支持会不太好，为求保险，微软雅黑字体的css可以这样定义：font-family:'Microsoft YaHei','微软雅黑';下面给出一些常见字体的英文：Windows的一些：新细明体：PMingLiU细明体：MingLiU标楷体
2015-06-25 15:03:48
9895
原创 去除input[type=number]的默认样式
input[type=number] { -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
2015-06-24 13:51:24
19941
原创 总结常用的js函数
1. 从数组中获取一个随机项var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];var randomItem = items[Math.floor(Math.random() * items.length)];2. 在特定范围内获取一个随机数这个代码片段在你想要生成测试数据
2015-05-27 14:35:42
643
原创 js中typeof、instanceof 和 constructor
JavaScript 的数据类型：字符串、数字、布尔、数组、对象、Null、UndefinedECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。ECMAScript 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。typeo
2015-05-27 11:45:26
864
转载 手机端click事件300ms延迟问题&&zepto.js的点透事件
手机端click事件300ms延迟问题问题由来：双击事件假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。于是就出现了300ms的延迟事件。
2015-05-25 16:02:00
6675
原创 利用regexp匹配标签内元素
"hello, world-->hello, world''-------\"\"--------".replace(/('[\s\S]*?'|"[\s\S]*?"|)|()/g, function(all, $1, $2){ console.log("$1----"+$1); console.log("$2----"+$2); return $1 ? $1 : $2 ? 'console.
2015-04-27 19:37:18
801
原创 老浏览器（特别是IE）支持html5标签
主要有三个方法：1、 javascript: document.createElenment("......")[if lt ie 9]> --> 不要忘了指定新建标签的display属性，大多情况下我希望标签是block的：header,footer,article,aside,section,nav,menu,hgroup,details,dialo
2015-04-23 17:47:12
819
转载 移动端H5页面之iphone6的适配
大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。回归正题，兼容iphone各版本机型最佳的方式就是自适应。1、viewport 简单粗暴的方式：meta name="viewport" conten
2015-04-23 14:31:11
2277
原创 HTML5判断移动端横屏竖屏功能
用CSS判断横屏竖屏问题：@media (orientation: portrait) { } 横屏@media (orientation: landscape) { }竖屏横屏竖屏用JavaScript判断横屏竖屏问题://判断手机横竖屏状态：function hengshuping(){ if(window.orientation==180||window.or
2015-04-23 14:24:08
5370
原创 git diff和回退操作
在git提交环节，存在三大部分：working tree, index file, commit这三大部分中：working tree：就是你所工作在的目录，每当你在代码中进行了修改，working tree的状态就改变了。index file：是索引文件，它是连接working tree和commit的桥梁，每当我们使用git-add命令来登记后，index file的内
2015-04-08 10:44:47
6225
原创 kindeditor在线HTML编辑器
kindeditor在线HTML编辑器 Think DefferentHere’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. Th
2015-04-07 11:07:20
1240
原创 css实现多行文本溢出显示省略号
以后更新http://www.zhangxinxu.com/study/200909/text-overflow-ellipsis-so-on.htmlhttp://www.111cn.net/cssdiv/css/67208.htm
2015-04-01 10:37:51
509
程序员面试100题
2013-06-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人