显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 
 
 
 

福建省 厦门市 摩羯座

 发消息  写留言

 
HTML5开发工程师~~梦幻雪冰
 
近期心愿技在手,能在身,思在脑~~梦幻雪冰
E-Mail chennengbao@mj216.com
联系地址新浪微博:梦幻雪冰【 http://weibo.com/523464842】
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 
 
 
博友列表加载中...
 
 
 
 
 
 
 
 

[置顶] metahandler.js——移动端适配各种屏幕无痛工具脚本

2015-5-27 20:24:45 阅读1005 评论11 272015/05 May27

梦幻雪冰——之前给大家介绍的是淘宝在使用的移动端框架——flexible.js,今天要给大家分享的是网易前端小组在使用的移动端框架——metahandler.js。这两个框架的使用原理差别比较大,flexible.js主要是控制html标签的字体大小,再结合rem单位进行实现移动端页面,然而metahandler.js是控制viewport进行页面的缩放,再结合px单位进行实现移动端页面。

作者  | 2015-5-27 20:24:45 | 阅读(1005) |评论(11) | 阅读全文>>

【转载】在北上广,拼的不只是当下

2017-2-2 21:42:28 阅读53 评论0 22017/02 Feb2

以匠人之心,码出多彩程序人生

HTML5学堂(码匠):在北上广等大城市工作,高强度的工作节奏让每个人在工作日都处于一种紧张的状态。不知不觉的打拼几年之后,突然发现原来处于类似水平的伙伴们,都拉开了不少的差距。在职场这漫长的几十年,怎样才能笑到最后,笑得最好呢?

1.1. 差距源于每天的积累

在上学期间,同学之间就已经开始慢慢产生差距,四年的大学时光,有人在宿舍玩游戏,有人参加各类社会实践和比赛、有人努力学习知识,并在学习与活动当中,收获各类能力和思维方式。

进入工作之后,在日常工作的同时,也是需要对自己的知识和能力进行积累和沉淀。一天两天并看不出什么,但是时间久了,距离就逐渐拉开了。

1.2. 除了薪资,还要考虑其他方面的因素

在职场当中,薪资是唯一一个可以量化的“衡量工作的标准”。但是,这个可量化的标准却受着各个潜在因素的影响。例如:团队的靠谱程度,企业对员工的重视程度与福利待遇情况,企业能够提供的发展空间,具体工作的工作时长等。因此,对于一份工作来说,有些东西比当前的薪资更为重要。

1.2.1. 相对的自由空间

如果在一个企业当中,你能够获得在工作上一定的自由空间,能够在自己的日常工作当中自己做主。那么你会得到更好更快的发展,毕竟思维能力的成长需要依托于实践,如果所有的实践操作都已经被上司安排好了,那你就变成了一个单纯执行操作的机器人,无论在这家公司做多久,思维能力都不会有太大的提升,这也就相当于断送了自己的未来。

1.2.2. 基于自由的指导和信任

作者  | 2017-2-2 21:42:28 | 阅读(53) |评论(0) | 阅读全文>>

【转载】用注释实现多行文本拼接

2016-3-30 19:27:16 阅读78 评论0 302016/03 Mar30

经常会遇到这么个场景,需要将html代码转为JavaScript输出。

一般的做法,就是使用字符串拼接或者使用数组拼接后最终转为字符串。

比如常规做法:

var str = '' +

'<!doctype html>' +

'<html>' +

'   <body>' +

'       <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>' +

'   </body>' +

'</html>' +

'';

以前,我一般是用转换工具实现

用工具确实是个好方法,那有没有更好的解决方案?以前曾用过函数内用注射来实现本地调试的效果,那么注释是否也可以实现字符串拼接?

于是google了一番,有些收获。

function multiline(fn){

var reCommentContents =

/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;

var match = reCommentContents.exec(fn.toString());

作者  | 2016-3-30 19:27:16 | 阅读(78) |评论(0) | 阅读全文>>

【转载】前端开发懒人必备——自己封装结构模板

2015-11-18 17:15:36 阅读108 评论0 182015/11 Nov18

前端在写页面时,经常会用到DOM一个结构进HTML中,而传统的书写方式就是字符串拼接,要么写成一行,要么每行都用引号引起来再加上加号拼接起来,因此非常短的结构这么写还能够忍受,一旦超过十行的结构就会令人发狂。

现在各种模板插件也非常多,但是习惯不同总感觉用起来非常不舒服,所谓的模板无非就是对字符串进行截取替换拼接的三种方法,以前我们写结构是这么写的:

这种写法费时费力如果有变量也需要字符串拼接进去,如果class也是变量,class里就会有很多引号,非常容易眼花,一行的写法就不多说了,删空格删回车都累死你,回头看结构又不美观,完全不能看!

昨天和毛毛聊天中发现他用注释的方法去做模板,但是用的是/**/这种注释方式,正好也闲的无聊,平时都用快捷键注释在JS中都是双斜杠//,为了更方便自己的偷懒习惯,开始了模板制作的思考,这里就不写思考过程了,直接贴代码:

这样就让事情变得简单了,以后需要插入结构更新数据就可以这么写:

定义一个object存放你需要的数据,用固定格式{{xx}}的方式把数据替换上去,只需要把结构复制进来,直接选中双斜杠注释掉就可以了。

想要量身定做自己的模板函数,还需要根据自己的习惯对正则进行调整,so,如果你看不懂,请先看看正则的含义,然后再看看数组字符串的方法。一切就会变得简单起来。

作者  | 2015-11-18 17:15:36 | 阅读(108) |评论(0) | 阅读全文>>

【转载】移动端之强大的预加载

2015-11-6 22:29:04 阅读97 评论3 62015/11 Nov6

最近一直在做移动端,而移动端最大的问题在于网速和流量,相信很多初学者都遇到过这样的问题-——>移动端点击切换背景图的时候背景图会消失一下,如果网速较差背景图甚至不会出来。原因在于之前浏览器的缓存中并没有图片,因此在点击的时候才会请求缓存图片,而此时网速不好之前的图片被切换,现在需求的图片还没下载下来,就会导致这种现象产生。

为了避免这种情况,预加载就成了必备神器,预加载顾名思义就是预先加载,提前将图片缓存到浏览器中。

在页面开发的过程中经常需要做loading页面,loading并不是平白无故的去添加的,一般我们会在document全部加载完成后才会让loading界面消失,而在document还没load的时候只就是在加载资源,我们可以认为大部分资源都是image,因此我们可以在刚开始的时候执行预加载,将我们需要加载的图片全部加载放到浏览器缓存中,等document完全加载完资源时隐藏loading。

现在流行很多创意H5页面,图片数量居多,以前做loading的时候对于加载进度完全无头绪,现在利用预加载后就可以制作带进度的loading页面。

下面demo可供参考学习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>叶落非殇</title>

<style>

作者  | 2015-11-6 22:29:04 | 阅读(97) |评论(3) | 阅读全文>>

【转载】前端网络(性能)监测工具 berserkJS

2015-9-30 15:52:51 阅读64 评论0 302015/09 Sept30

berserkJS 是基于 Qt (C++跨平台库)开发的前端网络(性能)监测工具。 它的核心功能是通过内置 webkit 收集由页面实际网络请求相关数据。 偏重于页面上线前检测与评估。

  页面性能分析工具,可用 JS 编写自己的检测、分析规则。 基于 Qt 开发,可跨平台编译,部署。内置基于 QtWebkit 的浏览器环境。 源码需在目标系统中编译后,可产生运行于 Windows / Linux / Mac 系统的可执行文件。 工程中自带 Window 系统中动态编译的可执行文件,此文件位于 bulid 目录下。

使用案例

无界面浏览器测试:在不依赖本地任何浏览器的情况下,运行测试框架,如 QUnit,Capybara, QUnit, Mocha, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework 等。

页面自动化:可以无障碍访问和操作网页的标准 DOM API 以及页面所用 JS 变量、对象、属性等内容。

屏幕捕获:以编程方式获取网页全部或部分内容,可根据 Selector 截取指定 DOM 元素渲染情况;包括 CSS,SVG 和 Canvas。可将截取图片 base64 化,以便发送给远端服务器保存。

网络监控:自动化的网络性能监控,跟踪页面所有资源加载情况并可简便的将输出结果格式化为标准HAR格式。

页面性能监控:自动化的页面渲染监控,可获取 CPU、 内存使用情况数据,根据页面整体情况可简便的输出首次渲染时间、首屏渲染时间等关键数据。

作者  | 2015-9-30 15:52:51 | 阅读(64) |评论(0) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018

注册 登录  
 加关注