javascript

JavaScript 异步编程一二三

1. JavaScript 天生异步 你说我一个浏览器写写表单验证的,怎么就突然成为如今最流行的编程语言了呢? JavaScript 设计之初是用于浏览器端 GUI 编程,这就决定了这门语言是单线程、非阻塞的。而 JavaScript 正是通过异步执行任务来实现非阻塞。 关于 JavaScript 异步机制和 Event loop 详细可见:Help, I'm stuck in an event-loop 2. 异步函数的类型 JavaScript 环境本身提供的异步函数通常可以分为两大类: I/O 函数

前端

我眼中的前端世界

接触并且正式入坑前端也有近两年了,谈谈我个人对于前端开发的一种理解吧,全为个人体验之谈。 偏向设计 所谓偏向设计,便是前端开发的最终目的便是将脑子里的 idea 或者设计师提供的设计稿赋予实践,具体开发中会精确到每一像素,还有文字的排版样式,以及一些动效等等,其最终成果是面向于普通大众的。 于后端的交流 前端开发只要不是单纯的静态展示页面,势必会涉及到数据的操作,而数据的具体处理过程是交由后台的同学的来实现的(插一句,相对于前面提到的,我认为后端开发的最终成果是面向专业人士的,比如我们前端的同学),所以在前后端分离大行其道的今天,为了提高开发效率,前后端同学就有必要事先约定数据的交换规则。包括数据的格式(一般 json 比较多还有 xml 之类的);还有 HTTP 行为(GET、

javascript

浅析 JavaScript 的函数节流和去抖

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

前端

为什么要用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

前端

Brower-sync多平台调试利器

子曰:“工欲善其事,必先利其器.......” 辣么就向各位推荐Brower-sync,多平台调试利器,好用得很!!!^_^ Brower-sync是干嘛用的 1.与LiveReloader相似,用于页面的自动刷新; 2.但是Browser-sync做的更完美,比如说: 你改变代码的时候,BrowserSync会重新加载页面,或者如果是css文件,会直接添加进css中,页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。假设你正在开发单页应用的第4页,刷新页面就会导致你回到开始页。使用LiveReload的话,你就需要在每次改变代码之后还需要点击四次,而当你修改CSS时,插入一些变化时,BrowserSync会直接将需要修改的地方添加进CSS,就不用再点击回退 3.BrowserSync提供了一种在多个浏览器(不管是pc端还是移动端)里测试网页的很好方式 BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、

前端

移动端适配记

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

前端

前端模块及依赖管理

文章根据以下三点整理,不讨论技术细节 为什么需要前端模块化和依赖管理 有哪些实现规范和方法 前端模块及依赖管理的历史 模块化是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易得 好了,以上是段废话,模块化的重点就是分而治之。什么可复用性只是顺便的。 ========== JS模块化 曾经,我一度以为js模块化就是前端模块化,直到我认识了less(css模块化),而如今在这个遍地谈论ui component的年代,理清前端模块化概念是非常重要的基础。我会尽量用简单的方式介绍清楚每一个概念,有什么不清楚的我再改。 Javascript不是一种模块化编程语言,它不支持"类"(class),本身也没有"模块&

前端

整理的一些学习资料

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

前端

[译] 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.