- 博客(109)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 codeMirror配置
CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/下载后，解压开得到的文件夹中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。一般在开发中，添加lib下的引用和mode下的引用就够了。使用示例首先，要引用是 lib 目录下的 codemirro
2016-03-22 16:35:25
10536
1
原创 12个免费web后台模板
1. Charisma Admin Template （示例） Charisma是一个响应式管理模板，基于Twitter Bootstrap构建。拥有9种外观主题，包括几乎所有的东西，如表单、图表、按纽、表格、文件管理器、相册等。可到 GitHub link 下载该模板。 2. INADMIN – jQuery Admin Template
2016-03-16 09:17:40
1526
转载 23种设计模式
创建型1. Factory Method（工厂方法）意图：定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。适用性：当一个类不知道它所必须创建的对象的类的时候。当一个类希望由它的子类来指定它所创建的对象的时候。当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这
2016-03-10 16:24:55
325
转载 什么是前端工程师?
“喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。”你好，切图仔。不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动，那么
2016-02-25 17:40:22
2249
转载 纯HTML5 APP与原生APP的差距在哪？
1、动画动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：css3动画javascript动画原生动画css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验
2016-02-25 17:26:34
374
转载 WEB开发者应必须具备的6大技能
1. 界面和用户体验注意，浏览器的实现标准是不一致的，请确保你的网站能够兼容所有主流的浏览器。最少需要测试的有 Gecko 引擎(Firefox)，WebKit引擎(Safari以及一些手机浏览器)，Chrome，你所要支持的 IE 浏览器，以及Opera。此外，你还需要了解不同系统下，浏览器是如何渲染网页的。考虑一下人们不使用主流浏览器的情况，如手机，屏幕阅读器和搜索
2016-02-25 17:22:50
425
转载 Web App自适应布局
1、困扰多时的问题在这之前做Web App开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。这样做的弊端很明显：做出
2016-02-25 17:21:04
833
原创 Chrome开发者工具的使用
Chrome开发工具是一个Web开发者的利器，使用她你可以实现：管理界面元素断点调试JavaScript代码优化你的代码这里将列出一些非常实用的使用技巧，帮助你更加高效的工作1. 快速编辑HTML元素选择开发工具面板的Elements在Elements下的元素编辑器中选择一个DOM元素双
2016-02-25 17:18:58
1022
转载 express搭建服务端框架
本篇我们来介绍一下，如何在nodejs环境下利用express来搭建起服务端，使之正确的响应前端的请求。本文所讲的示例还是基于我们的学习项目QuestionMaker（项目地址）。运行起基于express的Web服务器express是一个Web应用开发框架，它基于nodejs，扩展了很多Web开发所需的功能，使得我们能够很方便的访问和操作request和response。请注意
2016-02-25 17:17:09
1954
转载 前端组件化框架之路
1. 为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混乱而欣欣向荣的景象。这一方面说明前端领域的创造力很旺
2016-02-25 17:14:57
424
转载 Web开发者推荐的最佳HTML5/CSS3代码生成器
HTML5代码生成器网上有五六种可以生成优质代码的HTML5生成器，其中的真谛是HTML5样板文件，我们不要自以为然的把样板文件当成是生成器，虽说这样，大多数开发者还是把它当作是他们第一个网站的模板。回到主题，要找到一个好的HTML5生成器并不是那么容易的事，因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此，我们经常会被搞的稀里糊涂。不过，我们还是设法找到了一些比较好的生成器在
2016-02-25 17:13:02
835
转载 零基础如何系统地学习前端开发
基础知识：1、HTML + CSS 这部分建议在 W3school 在线教程 上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。2、Javascript 要学的内容实在很多，如果没有其他编程语言的
2016-02-25 17:10:41
340
转载 AngularJS常见问题答疑
AngularJS是动感的JS框架，使用它可以使你的代码变得简单，特别是大型的WebApp，因为你不在去手动的去更新你的UI,你只需要关心你的数据和你应用的状态即可。下面是一些简单而常用的AngularJS中遇到的一些问题，仅供大家参考：1s钟回顾问题分享明明改变了数据为什么没有更新？这种问题可能多半时没有进入AngularJS自己的Contex
2016-02-25 17:07:39
408
转载 2015年双11手机淘宝前端技术之H5性能最佳实践
2015年是全面『无线化』的一年，在BAT（财报）几家公司都已经超过50%的流量来自移动端，这次 双11 更是占到了68.67%无线交易（天猫微博）。手淘中大量的业务采用H5的方式开发，H5体验好坏全面影响着手淘的使用体验。今年手机淘宝在技术上重点解决“顿”，“卡”，“慢”的问题，并提出了“521法则” ,具体指：App内存节省50%绘制帧率，滑动体
2016-02-25 17:05:56
1160
转载 H5 缓存机制浅析 移动端 Web 加载性能优化
1 H5 缓存机制介绍H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。H5 应用程序缓存为应用带来三个优势：离线浏览 用户可在应用离线时使用它们速度 已缓存资源加载得更快减少服务器负
2016-02-25 16:21:41
2612
转载 图片模糊化编程(毛玻璃效果)
去年盛夏之时，曾写过“小tip: 使用CSS将图片转换成黑白”一文，本文的模式以及内容其实走得是类似路线。CSS3 → SVG → IE filter → canvas.前段时间，iOS7不是瓜未熟就落地了嘛，然后捡瓜的人很多，然后国内外开始了各种探讨，从界面到动画，从兼容到实现等。其中，“毛玻璃”一次梆梆出世，一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之，国内有之（不记得了），
2016-02-22 14:22:29
1298
转载 申请TexturePacker免费注册码（TP:20C9A58A）
如果你是人开发人员，你需要使用TexturePacker工具制作精灵表，则可以通过https://www.codeandweb.com/request-free-license申请免费的注册码。请真实填写你的信息，主要是需要提供你的技术博客。提交申请后返回信息如下：Please prove that you are the blog's owner by placing t
2016-01-29 21:10:54
698
转载 cocos2d-js cc.DrawNode用法示例
var draw = new cc.DrawNode(); //创建drawnode对象 this.addChild(draw, 10); var centerPos = cc.p(winSize.width / 2, winSize.height / 2); //drawSegment --- 绘
2016-01-26 10:23:30
1913
原创 COCOS-HTML5-3.9版本学习（四）chipmunk物理引擎的测试
chipmunkLayer和上一篇的实现方式几乎一致，只是两种引擎有差别，var chipmunkLayer = cc.Layer.extend({ size: null, space: null, _debugNode: null, box: null, downUpAction: null, onEnter: function() { this._super(); th
2016-01-08 16:30:14
522
原创 COCOS-HTML5-3.9版本学习（三）box2d物理引擎的测试
我也是刚学习这两种引擎的JS写法，具体我先给大家说下box2dLayer的结构把：var box2dLayer = cc.Layer.extend({ world: null, allowSleep: true, //允许睡眠 onEnter: function() { this._super(); }, init: function() { }, initBox2d: fu
2016-01-08 16:21:08
1078
原创 COCOS-HTML5-3.9版本学习（二）HTML5的COCOS结构模板
通过今天的研究，我根据官方文档的例子自己写的一个结构模板，下面就分享下：下图是项目结构：首先我们来看下index.html window.onload = function() { cc.game.onStart = function() { //load resources cc.LoaderSc
2016-01-04 18:00:23
502
原创 COCOS-HTML5-3.9版本学习（一）HTML5的COCOS环境
首先我们先来说下开发环境吧： 也许很多人和我一样是web前端开发，一看官网那个COCOS-JS那个包300多M就崩溃了。其实当人认真研究官方文档和别人写的教程你会发现其实cocos也可以和jquery一样作为第三方引入。第一步： 我们去下载JS。 地址：http://cocos2d-x.org/filecenter/jsbuilder
2016-01-04 17:28:58
833
转载 JavaScript跨域
什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和
2015-11-30 17:24:06
358
原创 HTML5塔防（一）
现在我们就开始做一个HTML5塔防游戏，首先我们需要建工程好吧！接下来我们直接开始html文件和js了。首先index.html 我的TD html,body{ margin: 0px; padding: 0px; } #game { margin: 10px; width: 600p
2015-11-18 17:09:50
1227
原创 热力图原理
最近公司让做一款统计移动APP的热力图插件，好吧百度了下也只是找到了百度统计的一些线索。思考了几天终于开始做了。首先我说下思路和开发遇到的问题：一. 数据采集部分： 1.因为是移动端第一个考虑的便是分辨率的问题。毕竟市场上手机屏幕大小区别还是很大的。 2. 第二个要考虑的是坐标点的问题一个1980*1080的屏有200万个象素点，好吧我开始蛋
2015-11-16 16:05:36
11307
2
转载 网站统计中的数据收集原理及实现
网站数据统计分析工具是网站站长和运营人员经常使用的一种工具，比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于javascript的。本文将简要分析这种数据收集的原理，并一步一步实际搭建一个实际的数据收集系统。数据收集原理分析简单来说，网站统计分析工具需要收集到用户浏览目标网站的行为（如打开某网页、点
2015-11-16 15:17:40
1274
原创 自己开发jquery插件的方法
jquery插件开发模式jquery插件一般有三种开发方式：通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。
2015-11-16 11:12:59
392
转载 JavaScript操作DOM
DOM的工作模式是：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异。Node 接口特性/方法类型/返回类型说 明nodeNameString节点
2015-11-16 09:36:20
410
转载 关于原生js的一些研究
callee和callerfunction inner(){ console.log(arguments.callee);//指向拥有这个arguments对象的函数，即inner() console.log(arguments.callee.caller);//这个属性保存着调用当前函数的函数的引用,即outer() console.log(inner.caller)
2015-11-16 09:27:36
446
原创 原生js跟jquery 的对比
选择器便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。1.获取页面所有的div/* jQuery */ $("div") /* native equivalent */ d
2015-11-16 09:20:35
1806
原创 原生JavaScript事件详解
DOM0事件模型 事件模型在不断发展，早期的事件模型称为DOM0级别。 DOM0事件模型，所有的浏览器都支持。 直接在dom对象上注册事件名称，就是DOM0写法，比如：1 document.getElementById("test").onclick = function(e){}; 意思就是注册一个onclic
2015-11-16 09:08:36
333
转载 抛弃jQuery 深入原生的JavaScript
今天，我准备将在过去几年学到的一些基础东西与大家一起分享，这将可能帮你深入纯 JavaScript的世界，让你能更简单的做出决定——jQuery在你下个工程中是否需要。 逐步增强 虽然像jQuery这样的库有助于解决许多浏览器之间不兼容的问题，但当你一旦开始使用纯JavaScript来完成所有工作的时候你确实会变得对他们很熟悉。为了避免写包含浏览器修改和只能解决浏览器兼容问题的
2015-11-12 09:35:10
338
原创 窗口关闭事件
1.用javascript重新定义window.onbeforeunload()事件 在javascript里定义一个函数即可 functionwindow.onbeforeunload(){alert("关闭窗口")} alert()事件将会在关闭窗口前执行，你也可以用户决定是否关闭窗口 functionwindow.onbeforeunl
2015-11-11 10:22:36
457
原创 js中MAP集合的构造
/** MAP构造*/var Map = function() {this.keys = new Array();this.data = new Object();this.put = function(key, val) {if (this.data[key] == null) {this.keys.push(key);}this.data[key] =
2015-11-11 09:39:07
862
原创 JavaScript中清空数组的三种方式
方式1，splice123var ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 []，空数组，即被清空了方式2，length赋值为0这种方式很有意思，其它语言如Java，其数组
2015-11-11 09:37:16
425
转载 JS中数组的操作
1、数组的创建var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要
2015-11-11 09:36:02
282
原创 jquery 插件写法三
html,body {margin: 0px;padding: 0px;height: 200%;}div {width: 400px;height: 200px;position: fixed;right: 0px;border: 1px solid cadetblue;background-color: gainsboro;}.msg-m
2015-11-09 11:40:00
348
原创 JQ插件写法二
参数放在外面的写法:DOCTYPEhtml>html> head> metacharset="utf-8"> title>title> head> scripttype="text/javascript"src="js/jquery-1.7.1.js">script> body> psty
2015-11-09 10:29:07
405
转载 jQuery的插件的写法
JQ插件标准的封装代码如下，首先需要闭包：scripttype="text/javascript">(function ($) { //这里放入插件代码})(jQuery);script>这是jQuery官方的插件开发规范，这样写是作用是：1. 避免全局依赖。2. 避免第三方破坏。3. 兼容jQue
2015-11-09 09:42:57
468
原创 用Bootstrap写一个简单的响应式布局
首先写一个index.html文件： 响应式布局实例其中这句话必须要有，这是获取屏幕分辨率的方法；然后我们写css自适应：* {margin: 0px;padding: 0px;}html {background-color: beige;}.heading,.contain
2015-09-06 16:39:55
745
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人