javascript :只执行一次的函数

在日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。

直接上代码:

function runOnce(fn, context) { //控制让函数只触发一次
    return function () {
        try {
            fn.apply(context || this, arguments);
        }
        catch (e) {
            console.error(e);//一般可以注释掉这行
        }
        finally {
            fn = null;
        }
    }
}

// Usage 1:
var a = 0;
var canOnlyFireOnce = runOnce(function () {
    a++;
    console.log(a);
});

canOnlyFireOnce(); //1
canOnlyFireOnce(); // nothing
canOnlyFireOnce(); // nothing

// Usage 2:
var name = "张三";
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
});
canOnlyFireOnce(); //你好张三
canOnlyFireOnce(); // nothing

// Usage 3:
var obj = {name: "天涯孤雁", age: 24};
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
}, obj);
canOnlyFireOnce(); //你好天涯孤雁
canOnlyFireOnce(); // nothing

继续阅读

前端开发中的JS调试技巧

转载自:http://seejs.me/2016/03/27/jsdebugger/

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。 继续阅读

移动前端适配—低级、无趣的老方法

首先请了解一下移动前端中 viewport (视口)http://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视,看图就知道了。 继续阅读

用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。

visibilitychange事件介绍

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。

Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
13前缀webkit
33无需前缀
10前缀moz
18无需前缀
10前缀ms 12.10 最新的测试已经支持

注:Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性

Page Visibility (Second Edition)中定义了2个只读的document属性:hiddenvisibilityState。

其中document.hidden是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细,目前有四个可能的值: 继续阅读

[前端日报]推荐一个GitHub/GitLab 代码结构浏览插件-Octotree

Octotree 是一个浏览器扩展(Chrome,Firefox,Opera和Safari),用以显示GitHub/GitLab 代码结构(代码树)。可以非常方便的浏览项目源代码,这样不必把每个项目拉取到你的机器。浏览器浏览时就像使用IDE目录结构,也不必来回的前进后退。

项目地址:https://github.com/buunguyen/octotree
chrome-github 继续阅读

[前端招聘]蚂蚁金服招聘高级H5前端/容器开发工程师/专家

蚂蚁金服招聘高级H5前端/容器开发工程师/专家

薪资范围:15k-30k

工作地点:杭州,上海,北京

岗位要求:经验1-3年  全职

技术要求:javascript / css / html / html5 / node.js

岗位描述:

1、负责支付宝客户端内H5业务开发,包括但不限于支付基础业务、垂直行业应用、社交扩展产品等;

2、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量; 继续阅读

[前端日报]阿里的 echarts 来了 – G2 一套图形语法

G2(The Grammar Of Graphics) 是蚂蚁金服-体验技术部-数据图形组的开源项目,是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。

74AE98CB-4BED-46AA-B9B0-79A9BEE6950B

类似于百度的echarts ,提供了比echarts更多的扩展。

简单、易用便于扩展

G2 的图形语法为我们提供了一套非常自由简洁的创建图表过程,可以说是一句话画图;并且 G2 提供了更简单的可视化改变形式,对于使用者来说,用户仅仅改变非常少的配置就可以实现不同图表之间的切换。可视化形式的轻松改变可以帮助数据分析人员更佳容易的找到适用于他的数据的形式,进而发现数据中的规律。 继续阅读

用javascript比较语义化版本号

移动端APP第三方开发中经常会碰到一些因为版本不同而造成JS SDK或JS API差异或支持的问题。对于移动前端来说,在实际第三方开发中可能会需要根据APP的版本号做一些特殊的业务逻辑处理。

语义化版本号

一般语义化版本号通常定义是这样的:

Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]]

主版本号            .子版本号              [.修正版本号       [.编译版本号  ]]

定界符一般使用.

语义化版本号比较方法

这样我们可以做版本号比较,这里提供一个粗陋的方法: 继续阅读

2016年度 JavaScript 展望(下)

本地移动 apps

在2015年,出现了一种新的基于 JavaScript 的移动应用开发类别:JavaScript Native。与基于 Cordova 或 PhoneGap 的应用不同,JavaScript 本地应用使用平台的本地控制与范型建立用户界面,无需涉及浏览器或 web 视图。

JavaScript Native 框架试图提供一种两全其美的方式建立 iOS 与 Android 应用:使用 JavaScript 编写程序逻辑(而不是 Java,Swift等),使用平台的本地用户界面 API 建立适应原生 OS 的应用,从而实现可能的最佳性能。

使用 JavaScript 打造的移动 apps 举例,点此获得源代码

React NativeNativeScript是2015年最早公开发布的两个 JavaScript Native 框架,后来者还包括 Fusetabris.js。自然,不同的框架提供了不同的功能。比如说,React Native 允许重用 React JavaScript 框架,而 NativeScript 允许直接调用 iOS 与 Android APIs。但是,他们都具备使用 JavaScript 搭建真正本地 apps 的高级方法。
继续阅读