- 博客(162)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 给数字每三位加一个逗号分隔符的两种方法
function formatNum(num) { var STEP = 3; var DELIMITER = ','; var str = '' + num; var arr = str.split(''); var len = arr.length; for(var i = len - STEP; i > 0; i -= STEP) { arr.splic
2016-08-25 12:58:26
14361
3
原创 canvas实现擦除动画
原理总结为就是在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现。如果是用户手动擦除，则需要监听touchmove,touchend等事件，并计算相应的坐标，利用canvas的clearRect或rect 画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。canvas有个globalCompositeOperation属性，这个属性的默认值是source-over
2016-07-16 10:38:52
2035
1
原创 userAgent判断客户端类型
根据userAgent判断客户端类型微信判断 function is_weixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return
2016-06-10 10:22:17
3435
1
转载 前端构建工具gulp入门教程
本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。第一步：安装Node首先，最基本也最重要的是，我们需要搭建node环境。访问http://nodejs.org，然后点击大大的绿色的install按钮，下载完成后直接运行程序，就一切准备就绪。
2016-06-05 14:55:47
725
原创 微信长按识别二维码bug整理
微信长按识别二维码问题搜集与整理最近在折腾一个手机端页面长按识别二维码的问题。发现长按二维码时在ios和android手机上识别不是那么灵敏。下面整理下我对该问题的总结。
2016-06-05 11:33:44
23606
原创 改变单选按钮radio的默认样式
默认的radio的样式很丑，那么如何改变其默认的样式呢？我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。先来看下效果：html代码如下: 在校生 非在校生样式如下:.choice{ position: relative;}.choice .radio{ position: rela
2016-05-08 21:46:57
36770
3
原创 Javascript实现树结构
树节点属性 Node data：节点值 parent ：指向节点的父节点 children：指向节点的孩子节点Tree 属性与方法 _root ：树的根节点 traverseDF(callback) ：深度遍历 traverseBF(callback)：广度遍历树的实现树节点定义： function Nod
2016-04-23 23:02:20
5194
原创 CDN内容分发网路技术原理
网络缓存技术，其目的就是减少网络中冗余数据的重复传输，使之最小化，将广域网转为本地或就近访问。互联网上传递的内容，大部分为重复的Web/FTP数据，Cache服务器及应用Caching技术的网络设备，可大大优化数据链路的性能，消除数据峰值访问造成的节点设备阻塞。大部分的网页对象在有效期（TTL）内，对于重复的访问，可以只通过简单的认证（传送几十字节的Header），便可将本地的副本直接传送给访
2016-04-17 19:57:44
1207
转载 中断或取消 Promise 链
PromisePromise 已经成为了 JavaScript 管理异步操作的重要工具之一. 然而, 有的时候还是会很头痛:Promise // 等价于 `Promise.resolve(undefined).then`. .then(() => { // 开始. }) .then(() => { if (wantToBr
2016-04-12 22:16:24
18133
转载 CSS3 timing-function: steps() 详解
一、不堪回首的过往在应用 CSS3 渐变/动画时，有个控制时间的属性 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。在许多相关文章里，关于这个函数的解释都比较含糊其辞，比如：steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态
2016-03-30 21:25:07
603
原创 Object新方法总结
Object总共添加以下几种新方法：Object.keys()Object.getOwnPropertyNames();Object.getPrototypeOf();Object.defineProperty();Object.defineProperties();Object.getOwnPropertyDescriptor();Object.create();Object.
2016-03-24 14:27:25
1083
转载 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
英文原文：Improving Web App Performance With the Chrome DevTools Timeline and Profiles我们都希望创建高性能的Web应用程序。由于我们的应用程序变得越来越复杂，我们可能想要支持丰富的画面以及理想的60帧/秒，这能保证我们的应用程序响应灵敏且生动流畅。知道如何衡量和提高性
2016-03-22 14:58:34
760
转载 MVC vs. MVP vs. MVVM
1 简介 英文原文：MVC vs. MVP vs. MVVM 三者的目的都是分离关注，使得UI更容易变换（从Winform变为Webform），使得UI更容易进行单元测试。 2 MVC/MVP 2.1 MVC 1、View接受用户的交互请求 2、View将请求转交给Controller 3、Controller操作
2016-03-22 13:58:46
970
原创 页面内元素跟随鼠标移动和右键菜单组件功能
这是腾讯一面给我的面试题，现在想想其实也蛮简单的，主要是考察鼠标事件。我当时没有完成的比较好。面试完后仔细又重新实现了下。鼠标对正方形元素拖拽和放下，主要涉及的鼠标事件包括：mouseover,mousemove,mousedown.。事件流程如下（1）当鼠标首次点击触发mousedown（2）移动时触发mousemove,正方形才跟着移动（3）鼠标点击完成后释放时触发mous
2016-03-11 21:01:28
2513
原创 数据结构与算法javascript描述（六）集合
集合（Set）是一种包含不同元素的数据结构。集合中的元素称为成员。集合的两个最重要的特性是：首先，集合中的成员是无序的；其次，集合中不允许相同成员存在。当你想要创建一个数据结构，用来保存一些独一无二的元素时，比如一段文本中用到的单词，集合就变的非常有用。集合的定义：（1）不包含任何成员的集合称为空集，全集则是包含一切可能成员的集合。（2）如果两个集合的成员完全相同，则称两个集合相等。
2016-03-10 17:07:11
728
原创 数据结构与算法Javascript描述（五）循环链表
循环链表和单向链表相似，节点类型都是一样的。唯一的区别是，在创建循环链表时，让其头节点的next属性指向它本身，即 head.next = head;如果你希望可以从后向前遍历链表，但是又不想付出额外代价来创建一个双向链表，那么就需要使用循环链表。从循环链表的尾节点向后移动，就等于从后向前遍历链表。修改构造函数如下：function LList() { this.head =
2016-03-10 16:50:30
589
原创 数据结构与算法Javascript描述（四）双向链表
尽管从链表的头节点遍历到尾节点很简单，但反过来，从后向前遍历则没那么简单。通过给Node 对象增加一个属性，该属性存储指向前驱节点的链接，这样就容易多了。此时向链表插入一个节点需要更多的工作，我们需要指出该节点正确的前驱和后继。但是在从链表中删除节点时，效率提高了，不需要再查找待删除节点的前驱节点了。 function Node(element) { this.element =
2016-03-10 16:38:40
1336
原创 数据结构与算法Javascript描述（三）链表
数组不总是组织数据的最佳数据结构，因为数组的长度是固定的，所以当数组已被数据填满时，要再加入新的元素就会非常困难。在数组中，添加和删除元素也很麻烦，因为需要将数组中的其他元素向前或向后平移，以反映数组刚刚进行了添加和删除操作。然而，JavaScript 的数组并不存在上述问题，因为使用split() 方法不需要再访问数组中的其他元素了。JavaScript中的数组的主要问题是，它们被实现成了对象，
2016-03-10 16:27:31
573
原创 数据结构与算法Javascript描述（二）队列
特点：先进先出Queue类 function Queue() { this.dataSource = []; this.enqueue = enqueue; this.dequeue = dequeue; this.front = front; this.back = back; this.empty = empty; this.toString
2016-03-10 15:54:49
426
原创 数据结构与算法Javascript描述（一）栈
栈的特点： 后入先出。Stack类： function Stack() { this.dataSource = []; this.top = 0; this.push = push; this.pop = pop; this.peek = peek; this.clear = clear; this.length = length
2016-03-10 15:34:45
532
原创 54. Spiral Matrix
54. Spiral MatrixMy SubmissionsQuestionTotal Accepted: 52570 Total Submissions: 238571 Difficulty: MediumGiven a matrix of m x n elements (m rows, n columns), return all elemen
2016-02-26 08:57:01
535
转载 JS一定要放在Body的最底部么？聊聊浏览器的渲染机制
说明： 1. 本文提到的浏览器均是指Chrome。 2. “script标签“指的都是普通的不带其他属性的外联javascript。 3. web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为了不使论述失去重点，不会扩展太开。一、从一个面试题说起面试前端的时候我喜欢问一些看上
2016-02-24 22:14:22
911
转载 position&containing block
一、包含块(Containing Block)要讲position,首先就涉及到一个概念：包含块。1、包含块介绍包含块简单理解就是一个定位参考块，就是大盒子里套小盒子中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。1、初始包含块（Initial containing block），即根元素的包含框。 在浏览器中是原点与 canvas 原点重
2016-02-23 17:11:28
428
原创 改变opacity实现图片轮播
这里实现原理我就不详细述说了，主要是通过改变图片的opacity，利用fadeIn和fadeOut来实现过渡效果，使切换不会显得很突兀。但是我在这里遇到了一个问题，让我纠结了一段时间。问题是，我发现页面初始化的时候首屏切换并没有过渡效果，仅仅是直接切换了。我想了很久，以为是我的index的初始值不对，但发现根本不是这个问题。最后，终于发现，原来是我的样式的问题，我将所有的图片都设置为displ
2016-02-22 14:33:47
2676
转载 html的meta总结，html标签中meta属性使用介绍
前言meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！html的meta总结meta标签的组成：meta标签共有两个属性，它们分别
2016-02-21 19:22:48
443
原创 浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。4、并且在下载后进行解析，解析过程中，停止页面所有往
2016-02-21 10:42:20
418
转载 前端文摘：深入解析浏览器的幕后工作原理
目录简介我们要讨论的浏览器浏览器的主要功能浏览器的高层结构呈现引擎呈现引擎主流程主流程示例解析和 DOM 树构建解析 - 综述语法解析器和词法分析器的组合翻译解析示例词汇和语法的正式定义解析器类型自动生成解析器HTML 解析器HTML 语法定义非与上下文无关的语法HTML DTDDOM解析算法标记化算法树构建算法解析结束后的操作浏览器的容
2016-02-21 10:34:47
1098
转载 有趣的HTML5：离线存储
随着Web App的发展，越来越多的移动端App使用HTML5的方式来开发，除了一些HybridApp以外，其他一部分Web App还是通过浏览器来访问的，通过浏览器访问就需要联网发送请求，这样就使得用户在离线的状态下无法使用App，同时Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于这些原因，HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需
2016-02-20 16:29:14
632
转载 最常见的20个jQuery面试问题及答案
1. jQuery 库中的 $() 是什么？（答案如下）$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组
2016-02-19 15:24:11
3778
转载 5个典型的JavaScript面试题
阅读目录1. 变量范围2. 创建“native”方法3. 提升 Hoisting4.this在JavaScript中是如何工作的5.call()和apply()JavaScript是一门有意思的语言，入门很快，但是想要深入的理解却并不简单，比如JavaScript中的原型、面向对象。对当前的Web世界而言，JavaScript是一门你必须精通的语言，因此本文借用一些
2016-02-19 15:10:18
924
原创 手机端图片左右滑动效果实现
起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得不放弃使用。接着我又尝试用zepto.js，但是由于页面很大部分已经依赖了jQuery，jQuery和zepto.js存在冲突，我本打算解决冲突，让两者共存，但是最后还是放弃了，因为觉得引入两者实在是太冗余。所以我最后采用了
2016-01-25 16:32:35
17516
1
转载 classList详解，让你的js方便地操作DOM类
在此之前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在移动端的网页中，考虑到传说中的性能和静态资源的请求量等因素，我们通常会选择采用原生js，而对于元素的class操作。你首先想到的就是className，这位伙计完美地得到了包括ie6在内的所有古现代浏览器的支持，尽管它的功能
2016-01-16 11:13:36
3258
原创 产品详情页配送送信息联动的实现逻辑
功能图如下：需要实现选择运送国家时，相应的运送方式随着改变，同时运送价格也改变后台返回的部分数据如下：{ "jsonrpc":"2.0", "id":null, "result":{ "delivery_info":{ "1":[//对应的country id { // co
2016-01-13 08:38:45
633
原创 搜索框组件
最近封装了一个search bar的组件，主要用到了Qweb的template在相关组件中来引入，相关的代码如下：search_bar_template.xml :
2016-01-11 09:10:33
1617
原创 HighCharts源码学习---扩展函数wrap和扩展对象 extendClass
Highcharts.wrap在原函数的基础上扩展原函数 /** * Wrap a method with extended functionality, preserving the original function * @param {Object} obj The context object that the method belongs to * @p
2015-12-27 14:24:25
1162
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人