随笔分类 - 前端开发
1
摘要：现在主流的浏览器都支持全屏，但是各家实现不一。下面是主流浏览器实现方法： 实际使用的时候我们需要做兼容，可以用函数包装起来： 封装后兼容主流浏览器用法，且支持某个指定的元素全屏，支持class、id查询。默认是对整个网页全屏。 调用方法： 可能出于安全考虑，只能手动触发才能实现全屏，浏览器自动执行无
阅读全文
摘要：概述 "Underscore.js" 是一个很精干的库，压缩后只有4KB。它提供了几十种函数式编程的方法，弥补了标准库的不足，大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用，Underscore.js还可以用于Node.js
阅读全文
摘要：这些高度相信很多同学都搞不清楚吧。这里我通过本地测试，发现了区别。 以聊天窗口为例。 元素(class='content')高度444px,其中上下padding分别是10px,margin为0。距离最近的一个定位的父元素的上边距是60px。 这里，在控制台打印出各个高度值： 默认情况下： 加了bo
阅读全文
摘要：css是不能够定义变量的，也不能嵌套。它没有编程语言的特性。在项目开发中，常常发现有很多css代码是相同的，但我们通常都是复制然后粘贴。 举个例子：假设h5应用里主题色是 ，可能用于文字或者背景色。通常开发中，哪里需要这个颜色，我们就复制这个颜色并粘贴。下次要修改就得全部查找批量替换，其实不是很方便
阅读全文
摘要：DEMO : "滚动加载示例" 关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用 "iscroll.js" 实现的 "上拉加载更多、下拉刷新" 功能。 但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加
阅读全文
摘要：DEMO : "JSONP示例" 为什么使用JSONP JSONP和JSON是不一样的。JSON( )是一种基于文本的数据交换方式，或者叫做数据描述格式。而JSONP( )是一种方式或者说非强制性协议。它是为了解决某个难题而产生的一种技术方式。 为什么会用到JSONP呢？ 我们平时在用ajax请求服
阅读全文
摘要：h5项目中需要集成微信分享，以实现自定义标题、描述、图片等功能。结果遇到了很多坑。 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众号 JSSDK使用步骤 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“
阅读全文
摘要：在之前的一篇名为《 "移动端基于HTML模板和JSON数据的JavaScript交互" 》的文章中，我向大家说明了为什么要使用JavaScript模板以及如何使用，文末还提到了laytpl、artTemplate、doT、baiduTemplate、kissyTemplate等模板引擎。 本文将举实
阅读全文
摘要：在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。 插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新
阅读全文
摘要：简介 当页面图片太多时，加载速度就会很慢。尤其是用2G/3G/4G访问页面，不仅页面慢，而且还会用掉很多流量。图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片（一般尺寸很小），只有图片在可视区域才去请求加载。 实现原理 页面打开时首先会加载 里的图片，即很小的加载图；通过监听 事
阅读全文
摘要：写本文之前，我正在做一个基于Tab页的订单中心： 每点击一个TAB标签，会请求对应状态的订单列表。之前的项目，我会在js里使用 + 连接符连接多个html内容： Html内容少点还好，但是当内容多起来的时候，再使用这种方式，以后维护起来不方便，也影响美观，可阅读性差。 突然想起来PHP模板的相关知识
阅读全文
摘要：移动h5开发避免不了上传图片，一般我们使用html自带的控件 或者使用 。但微信上传API不是任何地方都可以使用的，使用html自带的控件input上传又免不了图片体积太大，上传不稳定。localResizeIMG4就是为此而生的。 本文演示版本localResizeIMG 4.9.35。 特点 兼
阅读全文
摘要：这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多，可以点击下方『悬浮
阅读全文
摘要：在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯色的。开始制作时考虑用双倍大小的Sprite图，通过CSS
阅读全文
摘要：2016 1 21 更新说明： "微信web开发者工具" 已经集成了weinre，只需设置手机代理便可调试任意页面，更简单更方便，推荐使用！ Web应用开发者需要针对手机进行界面的调试，但是手机上并没有称心如意的调试工具（如Firebug），调试界面的工作往往事半功倍。本文介绍的调试工具Weinre
阅读全文
摘要：call和apply 两者作用一致，都是把 (即this)绑定到 ，这时候 具备了 的属性和方法。或者说 『继承』了 的属性和方法。绑定后会立即执行函数。 唯一区别是apply接受的是数组参数，call接受的是连续参数。 我们在控制台运行： 调用原生对象的方法 示例： 对象a类似array，但不具备
阅读全文
摘要：var是否可以省略 一般情况下，是可以省略var的，但有两点值得注意： 1、 与 ，这两条语句一般情况下作用是一样的。但是前者不能用 删除。不过，绝大多数情况下，这种差异是可以忽略的。 2、在函数内部，如果没有用 进行申明，则创建的变量是全局变量，而不是局部变量了。 所以，建议变量申明加上var关键
阅读全文
摘要：html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一
阅读全文
摘要：如图，需要使用jQuery实现全选、全不选、反选功能： 核心代码： 全选 全不选 反选 全选/全不选 全部代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <scrip
阅读全文
摘要：原生js操作cookie 创建和存储 cookie 在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。 首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数
阅读全文
1
