一个前端项目,到底要集成多少库和工具

最近忙于一些新做的项目,由于新入手,就想着往最佳实践去靠,也寻找一些可以借鉴的模板。其中前端的部分,有很成型的模板可以借鉴。大幅度减少了自己调查和集成的工作量。但是仔细看看,发现这里头的概念太多了,各种开源的库和工具,有人说“前端玩的是广度”是有道理的。

这个新项目并不算特别复杂,大致的技术是基于 React+Redux 的,但是大体上集成完毕以后,完成了几个 demo 的代码之后,粗粗地过了一遍,除了传统意义上的 HTML+CSS+JavaScript(遵循 ECMAScript 6 的标准)三大件,居然涉及到了那么多技术,把自己吓了一跳:

  • React: an open-source dec

[……]阅读全文

A page widgetization practice

widget

I was working on the page reconstruction recently, and here is how I divide a page into widgets and how do they interacts in this new attempt.

Core Concepts

Page and widget: A page is composed by several widgets, and a widget is the minimum unit for reuse.

Widget controller: Accepts multiple widget

[……]阅读全文

跨域方法汇总

browsers

做 Web 开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于 http://www.a.com/1.html 来说:

  • http://www.a.com/2.html 是同源的;
  • https://www.a.com/2.html 是不同源的,原因是协议不同;
  • http://www.a.com:8080/2.html 是不同源的,原因是端口不同;
  • http://sub.a.com/2.html 是不同源的,原因是主机不同。

在浏览器中,<script>、<img>、<iframe> 和<link> 这几个标签是

[……]阅读全文

从 JavaScript 的单线程执行说起

先看一段代码:

setTimeout(function(){
	alert("a");
}, 0);
while(1);
alert("b");

希望在马山可以弹出一个警告提示框“a”来,但是始终没有来;而且,在 FireFox 中跑还得到了这样的提示,并提示你是否要终止这段脚本的执行,遇事我选择终止以后,“a”倒是弹出来了,但是“b”却弹不出来了:

Warning: Unresponsive Script

A script on this page may be busy, or it may have stopped responding. You can stop the script n

[……]阅读全文

Chrome 插件开发

plugin经常要访问一些工具网站,根据页面上特定的取值。这些行为其实完全可以被视作重复劳动,有机会被脚本或者插件的自动行为取代。iMacro 或者 Greasemonkey 都是做这件事的好工具,今天下午有时间,要不干脆写一个 Chrome 插件吧。

没有必要去 Google 什么教程, 官方的文档 已经非常详细,足够指导整个过程了。文档的质量非常好,又有很多例子,是很不错的示例。本质上,用到的技术还是 HTML、JavaScript 和 CSS。我不在这里说太多,推荐大家去浏览一下,即便不做插件开发这件事情,过一下文档也是有收获的。如果你想尽快上手,解决重复劳动的问题而已,对这种好似路边花花草草的小东西没有钻研的兴趣,那么不

[……]阅读全文

几道容易出错的 JavaScript 题目

crazy下面这几道 JavaScript 题目大多来自于周五的一个小分享。都是很小的题目,但是很容易犯错。有一些是语言特性使然,有一些则是语言本身没有设计好而留下的陷阱。结果就是,遇到的人很容易陷进去骂娘,这些东西是略有些反直觉,感兴趣的不妨看看,平时我们还是尽量少些这样似是而非的代码。

1.

function Container( properties ) {
    var objthis = this;
    for ( var i in properties ) {
        (function(){
                var t = properties[i];

[……]阅读全文

JavaScript 使用 for 循环时出现的问题

javascript 这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内容记录下来。

有一些项目组在定位问题的时候发现,在使用“for(x in array)”这样的写法的时候,在 IE 浏览器下,x 出现了非预期的值。

具体说,如果自定义了 Array.prototype.indexOf 方法(譬如源于某 prototype 污染),也许是因为老版本 IE 浏览器并不支持 array.indexOf 方法,而开发者又很想用,那么这样的浏览器可能会出现这样的问题:

Array.prototype.indexOf = function(){...};
var arr = [1, 2];
for (x in arr) consol

[……]阅读全文

你没有抓住 Promises 的要点

注:这篇文章翻译自 《You're Missing the Point of Promises》,阅读这篇文章,你首先需要对于 JavaScript 中的 Promises 是什么有了解,否则,你可以先看一看 这篇文章(英文),或者 这篇文章(中文)掌握基础。有一些修改,另受水平所限,翻译的不当之处请参阅原文。

Promises 是一种令代码异步行为更加优雅的抽象。如果用最基本的编码方式,代码是这种连续的形式:

getTweetsFor("domenic", function (err, results) {
    // the rest of your code goes

[……]阅读全文

程序员,都去写一写前端代码吧

html 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不屑于其它“ 肤浅” 的工作范畴一样。比如我见过不少认为做 portal 没有技术含量的判定,做工程都是充满苦逼行为的言论,最近则还有那些“ 大数据” 崇拜者的疯狂吐槽…… 我的极端则有些不同,我的极端在于我认为绝大多数优秀的程序员,都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战,我做了几年网站,很难说这就是我最初的兴趣,虽然也在接触和学习其他的领域,但是依然觉得,做网站仍旧充满挑战,互联网真是一个奇葩充斥的地方。

前端开发,则是这“ 多方面的

[……]阅读全文

页面模板的重构

page_divide 最近在工作中重构一个老系统,烂的地方有很多,但是对于后台的页面模板(我指的是 JSP、FreeMarker、Velocity 这样的后台模板,JavaScript 前端模板不在此讨论范围内),却是我要说的部分,这似乎是一个被人遗忘的小角落。你可以很轻易地找到怎样重构 Java 类和方法的材料,你的 Java 代码可以写得很优雅;去搜搜“重构”,到处是怎样重构你的 Java 代码、C++代码,我们也能找到许多前端设计师对于页面结构的重构,但是重构的范围远非至此。

后台业务逻辑写得再好,一个 jsp、ftl 模板页面还是可能写上几千行,业务逻辑耦合在呈现代码里面,看起来一团糟,对这部分的重构,既不属于传统的 Java 代

[……]阅读全文

网络图形标准

image 前端绘图有几种方式,主流的网络图形标准有:

  • VML,IE 支持;
  • SVG,FF、Safari 和 Opera 支持;
  • Canvas,HTML5 规范支持。

后端生成图形较为便捷,但是没法生成能够响应用户行为的动态图形(比如生成一个地图,用户点击地图上的某个城市,要显示城市信息,这通过后端图形生成很不容易做到),而且生成图形会吃掉服务端的性能。前端生成图形方面,有用 Applet、ActiveX(这两个都不是什么好东西),Flash 等等,但是现在,我们有纯文本的更好的选择。

下面会就这几种标准做一个介绍:

VML

Vector Markup Language(矢量标记语言)是一种 XML 语言,用于绘制

[……]阅读全文

前端解耦的一个最简单示例

且看这样一段 HTML 片段:
<div style="background-color: red" id="name" onclick="alert('');">
    Jim
</div>
这是前端代码全部耦合在一起的例子,下面对它进行 MVC 解耦。
 
第一步解耦,把 View 层分离出来:
<div id="name" class="name" onclick="alert('');">
    Jim
</div>
同时,引入一表示 name 的 css。
 
第二步解耦,把 Controller 分离出来:
<div id="na

[……]阅读全文

Web 页面的聚合技术

近接触到了 Mason,并且了解到了它基础之上的一个 MVC 框架实现,随即联想到做网站以来接触到的各种各样的页面聚合的场景,颇有意思。

页面聚合本身是一种“分而治之”的思想,把复杂的页面分割成可以被重用和独立维护的部分,这些部分的来源灵活,可以来自同一个 web app 中,也可以来自不同的域;可以聚合独立的子页面(页面集成),也可以聚合数据(数据集成),甚至可以聚合子呈现(模板集成)。

客户端聚合

这种聚合的最大好处在于把聚合的工作分散到如今越来越强势的客户端,减轻了服务端的压力;另一方面,也从一定程度上简化了服务端的设计。客户端聚合在互联网初期比较少见,如今随着客户端性能越来越优秀,客户端聚合的优

[……]阅读全文

CommonJS

老实说,之前我对 CommonJS 也是一无所知,直到不久前 Node.js 火起来,我去研究它,才了解到 Node.js 其实是 CommonJS 的一个部分实现,我才关注起 CommonJS 来。

image

以前我们说起 HTML,我们说起 JavaScript,大家的印象似乎都停留在了“网页”上面,从 2005 年开始,因为 Ajax 的缘故,有一种叫做“前端程序员”的新型物种诞生了。

可是现在,前端程序员不甘心自己的一亩三分地了,他们要越权,看看 HTML 5 的 API 吧,它是要吃了 Flash 啊,连 Adobe 都倒向 HTML 5 了,它的 API 可以做各种各样的事情,要绘图、操作文件、客户端数据库、摄像头、重力感应……这些特性,怎么

[……]阅读全文

CSS 也面向对象

css 最初接触到面向对象的 CSS 还是因为项目中的 CSS 已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构。在前端重构中,除了 JavaScript 重构,不妨再看一看 CSS 面向对象和模块化,这给我的工作提供了非常好的思路。

首先,我要说的是,在这个概念翻飞的年代里,固执地追求某些概念和涵义,并不能带来更优秀的设计和更高的生产力,面向对象是一种思路,或者说是一种方法论,给 CSS 重构带来一些启示,这就足够了,没有必要去纠结 OO CSS 的定义和严谨性。

我们的 CSS 代码遇到了什么问题?

重用性差,看着一个 CSS 的名称,很难说出哪些模块可能引用到了它,这个 CSS 是用作网页的哪些部分

[……]阅读全文

由后端来类比前端设计的思考

design 有这样一句话被提起:

前端也有 MVC,DOM 树就是这个 M,CSS 就是这个 V,至于 C,非 JavaScript 莫属。

很高兴团队中有越来越多的人能够跳出某种语言、某种平台的局限性,站到抽象的层次上思考一些设计上的问题。在我的印象中,似乎前端开发总是容易给人以随意、混乱的感觉,可真的是前端技能不容易掌握吗?

大学里 Java 课程正儿八经学了 3 年,JavaScript 只字未提,只是课余时间凭借着兴趣自学,加起来也就两三个月。

前端代码更加灵活,无论是 HTML、JavaScript 还是 CSS,似乎任何一个初学者都可以轻松入门。可是越是看似简单的东西,就越难以精通地掌握,没有好

[……]阅读全文

JavaScript 实现继承的几种方式

js

JavaScript 虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。

1、原型链继承:

var Base = function()  
{  
    this.level = 1;  
    this.name = "base";  
    this.toString = function(){  
        return "base";  
    };  
};  
Base.CONSTANT = "constant";  
  
var Sub = function()  
{  
};  
Sub.prototype = new Base();  
Sub.p

[……]阅读全文

JavaScript 并发下载

在 IE6/7 里 JavaScript 会从两个方面阻碍页面呈现:
script 标签下面的网页资源在 script 加载完之前会停止请求、下载。
script 标签下面的 html 元素在 script 加载完之前会停止渲染。

在 ie6/7 firefox2/3 Safari3 Chrome1 和 opera 下 script 标签会阻碍下载:

image

虽然在 ie8,safari4,chrome2 下 script 可以并发,但依然阻碍了其他资源的下载:

image

有 6 种方法可以使 script 与其他资源并行下载:

  • XHR eval — 通过 XHR(XMLHttpRequest 对象) 下载 script,然后用 eval 方法执行 XHR 的 r

[……]阅读全文

Javascript Memoizer

以下来自 John Hann 的实现,这段代码引起了我的注意,它用巧妙的方法把方法调用的结果缓存起来了。

代码解析:

// memoize: 使用 memoization 来缓存的通用方法 
// func: 要被缓存的方法 
// context: 方法执行上下文 
// Note: 方法必须是外部可访问的,参数是可字符序列化的 
function memoize (func, context) { 
	function memoizeArg (argPos) { //参数表示原始方法中参数的位置 
		var cache = {}; //这个缓存的 key 是参数,value 是执行结果 
		retu

[……]阅读全文

JavaScript 重构攻略

flash

[Updated 11/3/2017] 文章写在好多年前,由于时代和自身技术水平的限制,很多文中的观点都已经不准确。现在有好的多的方法和工具来完成 JavaScript 重构。

一、模块划分和命名空间

通常我们的团队中,开发人员在 Java 语言层面具备相当的技术素养,经验丰富,而且有许多成熟的、合理的规约,类型繁多的代码隐患检查工具,甚至在团队间还有计划内的评审和飞检。但是前端的代码不似后台,就像一个没人疼的孩子,不仅仅容易被低估、被轻视,导致质量低劣、可维护性差,技能上,更缺少优秀的前端开发人员。

JavaScript 是前台代码中重要组成部分,随着版本的延续,产品越做越 [……]阅读全文

back to top