为什么要用原生 JavaScript 代替 jQuery

随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音。这并不是什么坏事,但也不见得就是好事。如果你真的想把 jQuery 从前端依赖库中移除掉,我建议你慎重考虑。首先 jQuery 是一个第三方库。库存在的价值之一在于它能极大地简化开发。一般情况下,第三方库都是由原生语言特性和基础 API 库实现的。因此,理论上来说,任何库第三方...

jQuery全屏滚动插件fullPage.js

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
简介如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件...

AMP,来自 Google 的移动页面优化方案【转载】

Web 性能优化(Web Performance Optimization,WPO)是一个老生常谈的话题,本文作者也写过很多关于「性能优化」的文章。最近 Google 某个团队推出了一项名为 Accelerated Mobile Pages(AMP)的技术,号称能大大加快移动端页面呈现速度,提高整体体验。本文就带大家认识一下这项新技术。AMP 介绍Accelerated Mobile Pages(官网、GitHub),直译成中文是「加速的移动页面」的意思。...

WebApp 开发中常用的代码片段

其实这里面的多数都是 iOS 上面的代码。其他平台的就没有去验证了。HTML, 从HTML文档的开始到结束排列<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条<meta name=”format-detection” content=”telephone=no”]]> 禁用手机号...

精简 jQuery Mobile CSS样式

jQuery Mobile 这个JS 的库用起来很方便。也是最适合搞前端的人用的 WebApp JS库了。不过其默认主题的 CSS 让人头疼了。不过官方提供的主题定制工具也就只能定制一下基本的样子了。想要其他效果就得自己清理 CSS 后重新编写了。我做清理了个简单版的主题 CSS 文件,并提供下载。方便自己已经有兴趣的人做个性化定制用的。这个 样式表里面只包含 jQuery Mobile 的基本样式,是一个没有包含主题颜色和图片定义的 CSS 文件。方便自...

WebApp 开发中常用的代码片段

其实这里面的多数都是 iOS 上面的代码。其他平台的就没有去验证了。HTML, 从HTML文档的开始到结束排列<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条<meta name=”format-detection” content=”telephone=no”]]> 禁用手机号...

html5常用标签使用实例

很多人可能由于习惯,有时虽然知道html5的新标签语义明晰,但有时依然绕不过弯,想都不想直接用div了。这里了简单介绍一下几个html5中的标签,并做一个简单的样例。首先,header,nav,article,section,aside,footer 这些html5的标签本质上和div没有任何区别,他们的实质性 作用就是让你的html代码有语义。也就是说,仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来,...

7 个 jQuery 最佳实践

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
前言随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作。这其中最流行的JavaScript库就是jQuery。但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?背景在这篇文章中,我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践。事实上,我选...

这十二行代码是如何让电脑崩溃的?

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
使用下面这段 JavaScript 代码能让 firefox,chrome,safari 浏览器崩溃,而且还能让 iphone 重启。你信不信,不信自己来试一下。<h<b<scrvar total="";for (var i=0;i<1000000;itotal= total+i.toString ();history.pushState (0,0,total);</scr</b</h不会执行怎么办?将以上代码...

Adobe又放大招,全面打通界面、交互、原型制作!

  是的,去年 Adobe 就在网站上放出了 Adobe Project Comet 的简介和视频,如今已经可以下载到 Preview 版本体验试用了。目前只有OS版本,window版本将在年底发布。这是Adobe界面工具的究极形态——Adober XD.将全面打通界面、交互、原型的制作。Adobe Experience Desig  辣么首先我们来感受一下 Adobe XD的功能吧传言这是Sketch的劲敌会PS可直接上手  简单来说,Adobe XD是一款轻便的矢量+原型绘制软件...

如何写出高效率的HTML

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
我们该如何提升网页的性能看到这个问题时,大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而,网页的核心语言HTML却被忽视了。如今,HTML的负担越来越重,在全球排名前100的网站中,平均每个页面的HTML代码大小有40k左右,其中Amazon和Yahoo平均每页的 HTML代码有几千行,Youtube的首页甚至有3500个HTML元素。虽然降低每页HTML的复杂性、减少元素数量并不能使页面的加载...

[译]有关网页渲染,每个前端开发者都该知道的那点事

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整。如果要想对这个主题有个大致的了解,我们还得学习很多知识。因 此,Web 开发者 Alexander Skutin 决定写一篇文章。他相信,这篇文章不仅能帮助初学者,也能对那些想要刷新知识结构的高级前端开发者有所裨益。原文地址译文如下网页渲染必须在很早的阶段进行,可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧,从而避免在实践的过程中...

原生体验挡不住!JavaScript开源跨平台框架NativeScript

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS、Android和Windows Phone。且NativeScript的使用没有过多繁杂的要求,只需使用自己已经掌握的JavaScript和CSS技能就能开发出真正具有原生用户 体验的移动应用。作 为免费开源项目的NativeScript,它的源码已经托管至Github上,让开发者可以没有任何门槛约束的随意使用。除了无需学习新的编程语言,使 用大家所熟...

HTML 5的消息通知机制

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
原文:HTML 5 Notificatio译文:HTML 5 的消息通知机制译者:dwqHTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation,...

响应式设计三部曲

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
原文:Responsive Design in 3 Step译文:响应式设计的三个步骤译者:dwq现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的responsive sites。对于新人,responsive design可能听起来有点复杂,但实际上,它比你想的要简单的多。为了帮助你快速入门响应式Web设计,我写了一篇快速入门教程。我保证你通过三步就可 以学会响应式设计的基本逻辑和媒体查询(med...

Python利用Phantomjs抓取渲染JS后的网页

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
最近需要爬取某网站,无奈页面都是JS渲染后生成的,普通的爬虫框架搞不定,于是想到用Phantomjs搭一个代理。Python调用Phantomjs貌似没有现成的第三方库(如果有,请告知小2),漫步了一圈,发现只有pyspider提供了现成的方案。简单试用了一下,感觉pyspider更像一个为新手打造的爬虫工具,好比一个老妈子,有时无微不至,有时喋喋不休。轻巧的小工具应该更受人喜爱,我也怀着一点私心,可以带着我最爱的BeautifulSoup一块儿用,而不用...

移动H5前端性能优化指南

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
概述PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点,首屏加载3秒完成或使用Loadin基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KMobile侧因手机配置原因,除加载外渲染速度也是优化重点基于第五点,要合理处理代码减少渲染损耗基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置加载完成后用户交互使用时也需注意性能加载优化加载过程是最为耗时的过程,可能会占...

Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
转自http://www.cnblogs.com/ctriphire/p/4116207.htm大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端 设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛 还要用console.log这么一长串的字符串来替代alert输出信息呢,下...

BrowserSync — 你值得拥有的多浏览器测试工具

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
BrowserSync 是一个同步多浏览器页面测试工具。BrowserSync makes your tweaking and testing faster by synchronising file changes and interactions across multiple devices. It’s wicked-fast and totally free.有了它,你不用在多个浏览器间来回切换,不断刷新来看效果了。更神奇的是你在一个浏览器中滚动页...

最近一些不错的大会部分 slides (大家随便看看,毕竟不全)

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于
很多人还一直在问哪里能看到 slides 呢,我就顺手整理了一份,也帮大家 mark 下啦CSS开发者大会 相关 slide尤小右, Meteor 核心开发,Vue.js 作者,ex-Google (帅哥鉴定无误!数据驱动 + 组件化的前端界面开发薛丽丽 (点头猪),平安付 交互设计师点头猪 女神的《CSS 对用户体验的影响寒冬 winter 计算机之子 阿里高(搞)级(基)技术专家《用Promise组织程序》以及 一组小清新的小函数一丝大美女《武...