React+Redux 组合使用之感受

最近完成了一个使用 React+Redux 组合的项目,以前仅仅是接触了解以及学习,并未正儿八经地使用过,因此这一次可以说是第一次完整地再一个项目当中使用。因而对于认识之浅显请轻拍。

从架构和层次的层面,这个组合给我最好的感受是干净利落的解耦。有不少 JavaScript 框架尝试解决解耦问题,但是到了落实的层面上很容易出现分层分模块不容易严格控制,缺少清晰标准等问题。但是 React+Redux 的组合没有这个问题,我们把应用中 JavaScript 的部分分层为 action、client、config、constant、reducer、store、util 和 view 几个部分,其中 view 又进一步划分 [……] 阅读全文

一些前端框架的比较(下)——Ember.js 和 React

JavaScript framworks

这是前端框架比较和吐槽的第二篇。

Ember.js

Ember.js 的 extend 的写法很类似于 JQuery 或者是 Backbone.js,创建 Application,然后在它下面创建相应的 Model(Object)、Controller、Router、View 和 Template,这些都是非常类似的。但是它更为先进的地方在于,一些重复的样板代码,比如给 template 注入上下文并渲染,如果命名按照 CoC 的原则正确完成的话,都由框架自动完成,这就省去不少体力活 。CoC 还体现在 URL mapping 上面,比如”/books/book_id” 配置在 books.index 的 Router 里,Contro

[……]阅读全文

一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js

JavaScript framworks

和一些前端框架打过交道,想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受,甚至是吐槽,记录在这里,有些零散,并且更多的是个人的感悟。而且由于技术所限,可能部分内容不够深入,或者不甚客观。当然,网上有很多分析对比,视角可能更为全面和系统。如果你在技术选型,或者在考虑要学习使用哪一款 MVC/MVP/MVVM 框架的时候,此文能够给你有价值的信息,就更棒了。如果你觉得我哪些部分说得不正确,或者需要补充,也烦请告知。

需要预先说明的是,这篇文章不是教程,因此如果你对其中某一框架知之甚少,可能需要先去简单学习了解以后才能和我产生共鸣,或者产生反驳的冲动。

以下是第一部分,先谈谈 GWT、An

[……]阅读全文

借助 AngularJS 写优雅的代码

AngularJS

接触 AngularJS 还真有点碰巧,在用 JQuery 写数据绑定的时候,我被数据对象和 DOM 之间的同步整烦了,要写一大堆方法绑定和取值/设值的代码逻辑,丑得要死。简单说来,就是:

  1. 数据对象发生变更以后,要及时更新 DOM 树;
  2. 用户操作改变 DOM 树以后,要回头更新数据对象。

这个问题还是举例来说清楚一些,比如我定义了这样一个 queryObj:

{name: "sally", price: 30}

现在有这样的 DOM 对象:

<input type="text" value="sally" />
<

[……]阅读全文

跨域方法汇总

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

[……]阅读全文

几道容易出错的 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

[……]阅读全文

用 JavaScript 截图

canvas 使用 JavaScript 截图,这里我要推荐两款开源组件:一个是 Canvas2Image,它可以将 Canvas 绘图编程 PNG/JPEG/BMP 的图像;但是光有它还不够,我们需要给任意 DOM(至少是绝大部分)截图,这就需要 html2canvas,它可以将 DOM 对象转换成一个 canvas 对象。两者的功能结合起来,就可以把页面上的 DOM 截图成 PNG 或者 JPEG 图像了,很酷。

Canvas2Image

它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API:

var strDataURI = oCanvas.toDataURL();  
// returns "data:ima

[……]阅读全文

Function Invocation Patterns

js 今天看到微博上大家在讨论一个 JavaScript 的小问题,问题虽小,还是有思考的价值。我看到不少人对其展开了讨论,有很多答案,也有很多有意思的观点。学 JavaScript 的人很多,但是学好真不容易,哪怕就是基础的部分。

先看一下下面的代码:

var value = 500;
var obj = {
    value: 0,
    increment: function() {
        this.value++;

        var innerFunction = function() {
            alert(this.value);
        }

[……]阅读全文

Backbone.js

backbone

注:教程请参见 这里(本文有很多内容都是从这里翻译的),官方网站在 这里 ;综合例子参见 这里

Backbone.js 是一个前端 MVC 框架,model 能够绑定键值对和自定义事件,集合具备可枚举方法的富 API,视图具备事件处理能力,并且可以通过 RESTful 的 JSON 接口和你已有的 API 通信。

backbone2

View

Backbone 里的视图就是用来反映数据模型的,可以监听事件并响应,通过利用 Underscore.js(这个真是一个牛逼哄哄的东西,自己看),还支持了 JavaScript 模板技术,把数据和模板分离开。

“el”属性就是浏览器创建的一个 DOM 对象的引用,是供 backbone 渲染的画布,每一个 view

[……]阅读全文

CommonJS

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

image

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

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

[……]阅读全文

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 是前台代码中重要组成部分,随着版本的延续,产品越做越 [……]阅读全文

JSConf 2010

一年一度的 JSConf 大会又召开,这是 2010 的官网:http://2010.jsconf.us/

image

其中的 Sliders 请看这里:http://devthought.com/2010/05/03/jsconf-2010-slides

Chris Williams 和 Iterative Designs 创立了 JSConf,这是 JavaScript 开发者的第一个专业会议。09 年其实还有 Mix09、Velocity09、YUIConf2009 等会议引人耳目。

来看看 JConf2010 都提到了哪些东西?

Google Chrome Frame 是一个 Google 浏览器的内嵌框架,大致是一个运行在客

[……]阅读全文

back to top