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