切图崽的自我修养－页面加载Js的常见方式

前言我就想随便找个地方放东西不行吗？看别人写的代码，中写原生js无一例外加了window.onload, jquery示例中无一例外的加了 $(function(){}) But why? 从此这两尊神秘的大佛让我畏惧了很久，今天写的博文，就是为了崇尚科学破除迷信，撕下'规则' 的神秘面纱. 而这神秘的面纱，本质就是浏览器加载js的方式总的来说，浏览器加载js通常就这么

业界 2016年07月05日

前端开发之单一职责原则

单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一。它规定一个类应该只有一个发生变化的原因。在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。需求描述：两个input框作为查询条件，一个按照名

业界 2016年07月05日

切图崽的自我修养－如何提高项目的加载速度

前言我的项目没问题，是用户的网络环境不够好前端作为一个最贴近用户的技术工种，毫无疑问应该把户体验放在第一位. 而用户体验，基本正比于页面的打开速度，特别是做移动端的同学，所以如何优化自己的项目，提高页面的加载速度成为重中之重.资源的下载及解析对前端同学来说，弄清楚页面上资源的下载和解析顺序是及其重要的，知道了它们的加载顺序，就知道对于特定的场景，应该如何去优化. 一般来说，

业界 2016年07月05日

浅谈DOMContentLoaded事件及其封装方法

我们在开发时，经常需要检测页面是否加载完毕，以确保脚本安全运行，下面我们就来浅谈一下检测页面是否加载完毕的那些事件们。1. onload 事件在页面的所有资源加载完成时，window对象上会触发一个onload事件。该事件通常被用以执行一些逻辑代码。比如，你需要通过JS去访问一个DOM。 console.log(document.getElementById('nam

业界 2016年07月05日

javascript在网页中实现粘贴qq截图功能

这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件。具体代码如下。利用 clipboardData 在网页中实现截屏粘贴的功能# box{ width:200px; height:200px; border:1px solid # ddd; }# 利用 clipboardDa

业界 2016年07月04日

HTML Application Cache 离线应用

HTML Application Cache （简称 HAC）是一套针对缓存应用资源的接口，通过此套接口，可以实现网页的离线访问，或者在网速较慢的情况下也能快速打开页面。使用 HAC 之后，浏览器在请求网站的时候首先会去 cache 内查找，如果命中，则会加载命中的资源，如果没有，则向服务端请求，再加载。HAC 与浏览器传统的缓存（304 的那种）不同的是，HAC 是将整套

业界 2016年07月04日

IOS中弹出键盘后出现fied失效现象的解决方案

概述 这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。 解决方法 原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框

业界 2016年07月04日

网站入口页双栏对称布局实现思路

先来一张预览图。接下来说一说这种页面布局的实现思路，因为自己是从零开始的，所以着实花了好几天功夫才实现了这么一个看起来很简单的布局，所有东西都要自己一点点摸索，不过这种经历对于自己的成长也是很有帮助的。好了，下面进入正题。整体布局在写这个页面的过程中，其实不管是 HTML 代码的结构，还是 CSS 的实现方式，思路一直都是在变化的，目前的布局如下：HTML 代码结构顶部为导

业界 2016年07月04日

Vue.js 开发实践：实现精巧的无限加载与分页功能

本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。需求分析当一个页面中信息量过大时（例如一个新闻列表中有200条新

业界 2016年07月04日

元素上下层叠关系总结

从浏览器渲染说起一个页面的渲染，大致有下几个步骤这里直接看最后一步Composite: 渲染层合并，这步是渲染最后一个步骤，作用就是把之前绘制的图层（如果有PS的经验的话图层很好理解）按照规定的顺序合并成一个图层，元素的层叠谁在上面谁在下面的关系，就在这步里被规定被最终在浏览器里体现出来了。那么这个对层叠理解有什么用呢？。。。。。。。。。。并没什么卵用，只是最近看到了而已，

业界 2016年07月04日