javascript

浅析 JavaScript 的函数节流和去抖

现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等。他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可视区,然后根据判断结果来决定是否来加载相关数据。 输入联想也类似,无非就是修改一下监听的事件类型,和判断的相关逻辑。 前端交互的优化上,我们总是需要需要事件监听来知道用户进行了什么操作,从而设定页面给出怎样的反应。但本文主要的内容不是讲如何具体的实现某个交互,而是对交互实现的依赖的事件监听那部分的优化。 滚动加载图片的例子 var onScroll = function() { // 这里判断当前的 img 元素是否已经滚动到了用户的可视区 // 根据判断结果来决定是否来加载相关数据 // 注:img 元素当设置 src 属性值后会产生一个 http

webpack

Caiyun 的实践之 —— webpack 打包优化

caiyun 是基于 react react-router redux开发的网站, 其中使用了 webpack 作为打包工具。如果你不了解 webpack 是什么,可以先去搜索了解一下,现在网上关于他的文档教程已经很多了。本文主要记录 caiyun 在对首屏渲染的优化上,对 webpack 做的相关配置优化。 问题概述 webpack 可以通过各类的 loader 将源文件做相关处理,比如通过babel-loader 可以解析 jsx 文件,将 es6 转化成 es5。可以通过

前端

为什么要用sass来写css--一个demo小实例

我在很早之前就知道世上有sass,less这些css的预处理器,可以根据他们特有的语法来编写生成css。但我始终找不到理由为什么要去学习和使用这些东西。一是不想跳出自己的舒适区,觉得css已经够用了。二来是不知道他们怎么用。我想在这篇文章里试图说服你,为什么我们要使用这些css的预处理器。 我在本文举两个sass例子,sass很简单。如果你学习过css和编程,看一下马上就能理解。如果你对sass还不熟悉,我建议你去看这两篇文章。 SASS用法指南 最详细的 Sass 基础教程指南 使用sass来实现移动适配 如果你看过我上一篇文章,你会发现,我已经在那边有提及sass。也是我了解适配移动方案使用sass可以复用大量的适配css代码,我才开始使用学习和使用sass。 //定义个mixin 根据不同dpr将px值转化成相应dpr的px值 /* @params $name 是css属性 比如 width、top

前端

移动端适配记

做工作室的新官网,芦荟学姐用sketch画了设计稿,分别是pc和mobile的版本。有两种方案来实现网站的pc和移动适配。一种是直接做成响应式,类似bootstrap实现的那样。还有一种就是专门定制不同的版本,也就是两套。考虑到响应式版本会给移动端的带来不少不必要,冗余的代码。且一套分工不能十分明确。所以我和芦荟选择后面一套。 我负责移动端的开发,就记录一下移动适配的方案。 检测设备 当pc设备访问m.betahouse.us 的时候 跳转到www.betahouse.us var pathname = window.location.pathname; var url = location.href; var mDomain

前端

整理的一些学习资料

整理了一些学习资料,方便大家一起学习。 大家有好的资料,也可以直接编辑,贴上来,一起学习,一起fighting! 老规矩!男神镇楼! 工作室都给大家配vpn了,所以首先推荐的就是google了,另外,如何使用google高级搜索也可以看一下。 weibo 微博上有些大牛戾气还是满重的,推荐关注一些常常分享干的帐号,这个微博链接是我的,求关注。 : ) v2ex 无聊空的时候可以逛逛,好多程序猿哥哥。 html5rocks 都是一些高质量的教程,不少是有中文翻译的。 MDN 仅次标准的权威了吧 css-tricks csser 应该没有不知道的吧 stackoverflow 搜技术问题怎能少了栈溢出 nodecloud node资源排名大集合。

行之 的使用说明

大家好,我叫行之,是betahouse的周报系统,这学期开始小伙伴们再也不用把周报交给芦荟了。也就告别了word形式的周报了。 当前是测试帐号,不出意外新学期的第一周,我们就会用上行之,到时候给发送一个帐号密码给大家使用。 现在就行之的使用做些说明。使用的是大帝的测试帐号。哈哈~ hello,欢迎访问行之噢! 登录,在数据库里找了一下,发现大帝还没有测试数据,果断拿大帝帐号来写文档。 当当当当 今天是周日,所以系统就提醒你了,喂~~ 该交周报了!! 你还可以查看之前记录的内容 当然你还可以修改或者删除,只要双击每一个文字就可以编辑他,编辑的时候点击红色的叉叉,就可以删除了! 再看右侧导航,你每天都可以预览本周周报,点进去,是介个样子的 你发现了一个叫一健提交的按钮,

前端

[译] webpack 的 demos

本仓库是一些webpack简单的demo集合。 这些demo故意写的简单但调理清楚,你会发现学习这个强大的工具一点都不难 怎么使用 首先,全局安装 Webpack 和webpack-dev-server $ npm i -g webpack webpack-dev-server 然后克隆本仓库再安装依赖 $ git clone git@github.com:ruanyf/webpack-demos.git $ cd webpack-demos $ npm install 现在你可以试着跑demo*目录下面的源码文件了 $ cd demo01 $ webpack-dev-server 在你的浏览器里面访问http://127.

系统简介

欢迎使用 Ghost 博客系统

Yeah,博客上线了!这篇文章的目的是向你介绍 Ghost 编辑器并帮你快速上手。通过 <your blog URL>/ghost/ 链接就可以登录系统后台管理你的博客内容了。当你进入后台,你就能看到左侧文章列表处列出的这篇文章,右侧就是这篇文章的预览效果。点击预览栏右上角的铅笔图标就能进入内容编辑页面。 快速入门 Ghost 使用 Markdown 语法书写内容。简单来说,Markdown 就是一种简化的书写格式! 用 Markdown 语法写作是很容易的。在编辑界面的左侧就是你写作的地方。在你认为需要的时候,可以使用以下这些语法来格式化你的内容。例如下面这个无序列表: Item