前端从刀耕火种时代脱离出来，离不开其生态环境的完善，各种插件和库的层出不穷，让我们减少了自己造轮子的繁杂过程，从而大大提高了开发者的工作效率。造轮子也就是模块化的过程。

但是随着模块化的发展，一个项目也就会由很多的模块组成，而这些模块有一部分是自己的，也有一部分是别人开发的，模块的管理就成为了很大的一个问题。正是因为有这样的需求，才引起了模块化管理规范的发展。

模块化经历了下面几个阶段，也表明了模块化的作用和发展方向：

• 代码的封装和复用
• 减少全局的污染、冲突
• 部分属性和方法的私有化
• 模块的管理规范化
  Read more »

题目描述：

1
2
3
4
5
6
7
8

<style>
  .span1 {border: 1px solid red;width:10px;height: 50px;}
  .span2 {border: 1px solid red;width:10px;height: 50px;}
</style>
<div class="wrap">
  <span class="span1">2</span>
  <span class="span2">3</span>
</div>

call

一句话介绍 call：

call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

举个例子：

1
2
3
4
5
6
7
8
9

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1

简介

PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。主要应用到的技术：serviceWorker等。

serviceWorker

Service Worker 是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。 现在，它们已包括如推送通知和后台同步等功能。 将来，Service Worker 将会支持如定期同步或地理围栏等其他功能。 本教程讨论的核心功能是拦截和处理网络请求，包括通过程序来管理缓存中的响应。

生命周期：

目前浏览器支持情况： https://jakearchibald.github.io/isserviceworkerready/

定义

维基百科中对柯里化 (Currying) 的定义为：

In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument.

翻译成中文：

在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

导语

前端目前来说越来越庞大，对前端有了一种新的定义–大前端，PHP和node等一些弱类型的脚本辅助语言也逐渐归类为大前端的一部分。对于一个完整的，可持续优化的项目，前端的优化必不可少。

• 减少 HTTP请求数
• 将外部脚本置底
• 异步执行 inline脚本
• 将 CSS放在 HEAD中
• 减少不必要的 HTTP跳转
• 避免重复的资源请求
• Image压缩
• 文件等静态资源存储到CDN服务器
  …
  Read more »

原文摘自 lin-xin/blog， 对原文作者的部分观点不一致，文中会有指出。

apply 和 call 的区别

ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。

前言

目前项目的自动化部署越来越简便和成熟，项目开发过程中对前端项目的自动化部署做一下总结。通过Jenkins运行Groovy脚本实现对项目的自动化构建和部署。

Jenkins的Config配置

前言

最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题：

• 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。
  Read more »