- 博客(84)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 跨域
同源政策同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。参考链接：http://www.ruanyifeng...
2018-05-07 13:44:59
1172
转载 浏览器内部工作原理
浏览器内部工作原理：参考链接：https://kb.cnblogs.com/page/129756/渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。渲染引擎在取得内容之后的基本流程： 解析html以构建dom树 (同步构建css树)-> 构建render树 （可视化dom树）-> 布局render树 -> 绘制render树为了更好的用户体验，渲染引擎将会解析...
2018-05-02 14:11:55
314
原创 amd规范转commonjs规范
目的是在项目框架中安装外部组件时，组件的规范能够统一。由于早期开发未整体文档，细节已记不太清，先把代码地址贴上来：https://github.com/tianmiyingzi/feather2-command-install需要了解的知识点：AMD规范，CMD规范，Comonjs规范，UMD规范等。以下是调研知识点笔记：Javascript模块化编程问：为什么要模块化？答：提高代码重复利用率。问...
2018-04-26 07:52:18
1168
原创 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
1108
转载 【转】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
377
原创 vue小记
vue原理如何追踪变化模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。把一个普通 Javascript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。通过它们（getter/setter）可以让 Vue 在访问属性时进行依赖追踪，以...
2018-04-23 16:06:25
1088
原创 截图插件使用总结
使用插件项目：海报保存 调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：html2canvas:https://github.com/niklasvh/html2canvasdom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题) 使用中因为截图图片模糊，于是采用在截图前先放大canvas画布的...
2018-04-23 15:35:44
482
原创 vuex知识点记录
state: 单一状态树，每个应用将仅仅包含一个 store 实例。getters:mutation: （同步操作）this.$store.commit('xxx')在methods中使用mapMutations将组件中的 methods 映射为 store.commit 调用。actions:（异步操作）Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，但...
2018-04-22 16:39:03
475
原创 调用第三方地图
唤起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
1466
转载 js怪癖
偶然看见，问问那些不注重细节的童鞋，哈哈哈~问题：为什么 ++[[]][+[]]+[+[]] = 10？原理：js的隐式类型转换参考链接：http://justjavac.com/javascript/2012/12/20/object-plus-object.html注意：js运算符优先级运算符描述. [] ()字段访问、数
2017-06-02 15:26:31
1212
转载 window.performance
目前只在chrome中调研在chrome控制台执行window.performance，会出现下面结果：简单介绍performance中的属性：memory：{ jsHeapSizeLimit: 1136000000 // 内存大小限制 totalJSHeapSize: 16100000 // 可使用的内存 usedJSHeapSize:
2017-05-27 14:04:42
5558
原创 截图插件
调研实践的截图插件主要有下面两个，其他思路与这两个大致相同：html2canvas:https://github.com/niklasvh/html2canvasdom-to-image:https://github.com/tsayen/dom-to-image(未在项目中采用，ios中svg转图片有问题) 使用中因为截图图片模糊，于是采用在截图前先放大canva
2017-05-27 13:52:32
1920
原创 页面局部刷新
场景：页面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
1171
原创 window.Notification实现桌面通知
var popNotice = function() { if (Notification.permission == "granted") { var notification = new Notification("Hi，", { body: '可以加你为好友吗？', icon: '/sta
2016-10-27 12:07:12
6190
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
267
原创 不想浪费时间写重复代码（二）
倒计时：/* 实现多个时间进行倒计时,或者直接格式化时间：time为时间戳 */var deadline = { counting:function(ele,timer){ var _this=this; setTimeout(function(){ if(timer >=0 ){ ele.ht
2016-09-08 16:46:35
658
原创 H5问题总结
搜索键盘与事件绑定input type="search"即可调用搜索键盘但是有时候键盘回车键并不一定具有“搜索”或“前往”字样，需要将input包裹在form中，有时还需要填上action属性(仍然不是所有有效)。回车键事件使用submit。为了防止表单提交时自动刷新页面，js事件中需要组织默认事件：return false。 另外，如果要移除搜索框的叉叉图标，可以设置样式
2016-09-01 14:13:21
1486
原创 不想浪费时间写重复代码(一)
.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
774
原创 div模拟文本框
最近做H5页面，经常碰见实现高度自适应且计数的文本框需求，所以在这里记录一下。其实很早之前就看了张鑫旭的“div模拟textarea文本域轻松实现高度自适应”，现在的做法也就是文章中提到的方法，主要是用到contenteditable属性。html结构如下： 0/30 这里主要介绍下contenteditable属性：（参考https://w3c
2016-08-02 17:03:59
4709
1
转载 事件处理模型
总结的很好，方便培训的时候使用。1、目前共存在四种事件处理模型分别是：原始事件模型、标准事件模型、IE事件模型，还有一种Netscape4事件模型，但基本可忽略2、事件处理模型又可以分为基本事件处理和高级事件处理两种，原始事件模型属于基本事件处理，标准事件模型和IE事件模型属于高级事件处理 一、基本事件处理： 基本事件处理主要是指原
2016-03-14 14:47:23
1405
转载 浏览器缓存知识小结及应用
虽然对浏览器缓存的知识已经有所了解，但是看到这篇文章，感觉很得很好，忍不住转载出来和大家一起分享阅读目录1. 浏览器缓存基本认识2. 强缓存的原理3. 强缓存的管理4. 强缓存的应用5. 协商缓存的原理6. 协商缓存的管理7. 浏览器行为对缓存的影响浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一
2016-03-09 14:43:32
404
转载 鼠标滚动事件mousewheel（DOMMouseScroll）
滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;1.mousewheel事件中的 “event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。 2. DOMMouseScroll事件中的 “even
2015-12-30 15:36:21
7472
2
转载 js中静态方法（属性）、实例方法（属性）、内部方法（属性）和原型的一点见解
属性1，私有类型 ：私有，即只能自己使用，在下面的例子，就是说只能在这个函数里使用这个属性( function(){ var a = "私有属性"; alert(a); //私有属性})()alert(a);//error a没有定义2,实例属性 ：即属于实例对象才能访问 var a = function(){ this.x="实例属性"； }
2015-12-10 10:30:02
9174
1
原创 oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出
（注：本文针对IE8ji以上版本）oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：在 IE9 以下版本不支持
2015-12-09 11:21:47
5921
原创 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
513
原创 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
3913
原创 Flex布局理论小结
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。兼容性：衍生过程：display:box -> display:flexbox -> display:flex任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex（inline-*）布局。两条轴线（主轴、交叉轴，两者是相对的）：容器flex container; 项目
2015-11-30 18:05:03
876
原创 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
2646
转载 CSS中文字体如宋体/微软雅黑的英文名称写法
我们在制作网页前端的时候，最常会遇到的两种中文字体是“宋体/微软雅黑”，你可以在css里面定义写成中文，但是这样的坏处是在英文的系统里面支持会不太好，为求保险，微软雅黑字体的css可以这样定义：font-family:'Microsoft YaHei','微软雅黑';下面给出一些常见字体的英文：Windows的一些：新细明体：PMingLiU细明体：MingLiU标楷体
2015-06-25 15:03:48
9551
原创 去除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
19794
原创 总结常用的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
599
原创 js中typeof、instanceof 和 constructor
JavaScript 的数据类型：字符串、数字、布尔、数组、对象、Null、UndefinedECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。ECMAScript 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。typeo
2015-05-27 11:45:26
827
转载 手机端click事件300ms延迟问题&&zepto.js的点透事件
手机端click事件300ms延迟问题问题由来：双击事件假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。于是就出现了300ms的延迟事件。
2015-05-25 16:02:00
6629
1
原创 利用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
777
原创 老浏览器（特别是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
787
转载 移动端H5页面之iphone6的适配
大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。回归正题，兼容iphone各版本机型最佳的方式就是自适应。1、viewport 简单粗暴的方式：meta name="viewport" conten
2015-04-23 14:31:11
1416
原创 HTML5判断移动端横屏竖屏功能
用CSS判断横屏竖屏问题：@media (orientation: portrait) { } 横屏@media (orientation: landscape) { }竖屏横屏竖屏用JavaScript判断横屏竖屏问题://判断手机横竖屏状态：function hengshuping(){ if(window.orientation==180||window.or
2015-04-23 14:24:08
5328
原创 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
6029
3
原创 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
1198
原创 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
491
程序员面试100题
2013-06-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人