2013 年 7月随笔档案 - 【艾伦】

前端MVVM框架avalon揭秘 - HTML编译器

摘要：MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离，因为，很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离所以出现了一大堆自定义的声明式的语法：如:Avalon作用域绑定(ms-controller, ms-important)模板绑定(ms-include)数据填充(ms-text, ms-html)类名切换(ms-class, ms-hover, ms-active)事件绑定(ms-on，……)显示绑定(ms-visible)插入绑定(ms-if)双工绑定(ms-duplex，原来的ms-model)样式绑定(ms-css)数阅读全文

posted @ 2013-07-31 20:10 【艾伦】阅读(10641) 评论(4) 推荐(9) 编辑

轻量级前端MVVM框架avalon源码分析-总结

摘要：距avalon0.7版本发布有一段时间，由于之前的稳定性，就停止一段时间更新，期间研究了下Knockout源码，也尝试写了一个小型的mvvm的实现模型，仅仅只是仿造ko的核心实现，把无关的东西给剥离掉了，有时间总结一下发布出来。ko算很早就出现的MVVM库了，实现是手段也是异常的巧妙，但是把监听的东西都转成函数表达，调用的时候也必须是函数形式，但使用习惯上，我就不太喜欢了Knockout监控属性通过observable内部转换成后，返回带有一个观察者模式的的函数(执行调用与赋值的时候都会有不同的处理)，所以在使用的时候还要 this.firstName()执行才行，observable() 是阅读全文

posted @ 2013-07-27 11:05 【艾伦】阅读(4139) 评论(2) 推荐(5) 编辑

JavaScript 中介者模式与观察者模式有何不同？

摘要：http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp感觉二者非常像，都是pub/sub机制，如何进行区分？分别在什么不同的场景中进行应用？在Obsever模式中，不存在封装约束的单一对象。Observer 和 Subject 必须合作才能维持约束。Communication(通讯)模式由观察者和目标互联的方式决定：单一目标通常有很多观察者，有时一个目标的观察者是另一个观察者的目标Mediator 和 Observer 都能促进松耦合，然后Mediator 模式通过限制对象严格通过Mediator 进阅读全文

posted @ 2013-07-18 21:08 【艾伦】阅读(5376) 评论(3) 推荐(2) 编辑

Knockout 新版应用开发教程之"text"绑定

摘要：目的 DOM元素显示文本的值是你传递的参数，前提是text先绑定到该元素上典型的常用元素或者习惯性的用来显示文本，但是在技术上来说你可以用任何元素的。例子：Today's message is: 参数主要参数 Knockout 会把参数值设置到元素文本节点上，节点上任何存在的内容将会被覆盖重写这个参数是一个监控属性值，任何时候在值被改变的时候它绑定元素text将会触发更新，假如不是一个监... 阅读全文

posted @ 2013-07-18 10:09 【艾伦】阅读(2886) 评论(0) 推荐(0) 编辑

Knockout 新版应用开发教程之"visible"绑定

摘要："visible" 绑定用途DOM元素的显示或者隐藏是根据绑定的值来的，前提是将visible绑定给该元素例子 You will see this message only when "shouldShowMessage" holds a true value. 参数主要参数当这个参数是一个假值时（举例来说，布尔值的false , 数值0，或者null,或者undefined），绑定时候设置你的元素的style.display是none,从而使之隐藏起来。这个优先级要高于CSS中定义的当这个参数是一个真值时（举例来说，布尔值是true,或者非空对象与数组阅读全文

posted @ 2013-07-17 13:36 【艾伦】阅读(1442) 评论(0) 推荐(2) 编辑

Knockout 新版应用开发教程之Observable Arrays

摘要：假如你想到侦测和相应一个对象的改变，假如你想要侦测和响应一一组合集的改变，就要用observableArray在许多场景都是很有用的，比如你要在UI上需要显示/编辑的一个列表数据集合，然后对集合进行添加和删除。Examplevar myObservableArray = ko.observableArray(); // Initially an empty arraymyObservableArray.push('Some value'); // Adds the value and notifies observers去看下怎么能绑定observableArray... 阅读全文

posted @ 2013-07-16 08:45 【艾伦】阅读(3961) 评论(1) 推荐(2) 编辑

Knockout 新版应用开发教程之Computed Observables

摘要：Computed Observables如果你有监控属性firstName和lastName的话，此时如果你想要显示全名？这个时候computed(以前叫做依赖)监控属性就出马了，这是一个函数用来依赖一个或者多个监控属性，并且当其中的任何一个依赖对象被改变的时候都将会自动更新。例如，view model类function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith');}你可以增加一个computed计算依赖的来得到一个全阅读全文

posted @ 2013-07-15 15:39 【艾伦】阅读(8016) 评论(2) 推荐(3) 编辑

Knockout 新版应用开发教程之Observable与computed

摘要：KO是什么？KO不是万能的，它的出现主要是为了方便的解决下面的问题：UI元素较多，用户交互比较频繁，需要编写大量的手工代码维护UI元素的状态、样式等属性？UI元素之间关系比较紧密，比如操作一个元素，需要改变另外一个元素的状态？DOM元素与Js对象之间的数据同步？前端javascript代码组织不理想？用户输入数据校验、DOM操作、后台交互…,交织在一起？基础概念一：viewModel负责处理UI事件的响应，响应用户操作。负责保存领域模型在前端的变体Model’，比如:Student模型，在UI元素与Model之间同步数据(用户修改input-->ko修改model,反之亦然)在需要的时候阅读全文

posted @ 2013-07-13 10:18 【艾伦】阅读(1531) 评论(0) 推荐(2) 编辑

前端MVC框架Backbone 1.1.0源码分析系列

摘要：Backbone.js 是一个在JavaScript环境下的模型-视图-控制器 (MVC) 框架。任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑、以及金字塔般的代码。而且，在传统的Web应用程序代码中，不可避免的都有在应用逻辑中加入显示数据的代码的情况。当项目规模愈发变大时，这种形式的代码变得越发的难以维护，因为任何在主干逻辑中的变更都可能影响到数据显示逻辑，反之亦然。 Backbone就是要来解决这样的代码耦合的问题。它通过提供一个控制层-显示层的框架，以及模版(template)来分离各自逻辑。这样的MVC框架类似于传统意义上桌面程序以及服务器端程序的程序框架。第一篇. 阅读全文

posted @ 2013-07-12 12:40 【艾伦】阅读(1501) 评论(1) 推荐(4) 编辑

Knockout 新版应用开发教程之创建view models与监控属性

摘要：最近抽出点时间研究MVVM，包括司徒正美的avalon，google的angular，以及Knockout，博客园Tom的Knockout指南时隔2年了，ko更新了不少，所以文档也相应的变化了，所以本人从学习的角度就翻译下官方的新的教程文章。avalon就是从KO演变过来的，不过加入ng,emberjs等框架的特色，加入许多巧妙的设计，算是很短小精悍的框架了，大家有兴趣可以对比下。Knockout是构建在3个核心的特性上的：监控属性（Observables）和依赖跟踪（Dependency tracking）声明式绑定（Declarative bindings）模版（Declarative 阅读全文

posted @ 2013-07-12 10:50 【艾伦】阅读(1963) 评论(3) 推荐(2) 编辑

看看国外的javascript题目,你能全部做对吗?

摘要：叶小钗的博客最近都在讨论面试题目正好以前也看过一篇,就借花献佛拿出来分享一下 http://perfectionkills.com/javascript-quiz/附带了自己的理解,答案有争议的地方欢迎大家指出题目一(function(){ return typeof arguments; })(); 答案"object"arguments是对象,伪数组有两件事要注意这里：参数不是数组，它是一个数组一样的物体,你可以使用方括号和整数索引的元素，但方法通常可在一个如推上不存在参数数组Array.prototype.slice.call(arguments); 转成数组当然ar 阅读全文

posted @ 2013-07-05 20:24 【艾伦】阅读(12314) 评论(45) 推荐(35) 编辑

移动web app开发必备 - Deferred 源码分析

摘要：姊妹篇移动web app开发必备 - 异步队列 Deferred在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码!观察者模式观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一.它定义了一种一对多的关系让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。使用观察者模式的好处：支持简单的广播通信，自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。在这种模式中，有两类对象，分别是“观察者- 阅读全文

posted @ 2013-07-04 09:32 【艾伦】阅读(3949) 评论(3) 推荐(2) 编辑

移动web app开发必备 - zepto事件问题

摘要：问题描述:项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页正常状态下：用户在子元素上有交互动作时,默认状态下都是会冒泡到祖先元素响应特定情况下：子元素单独绑定了事件特性情况下需要阻止全局事件常规的做法就是stopPropagation阻止即可但如果子元素绑定的是 click,touchmove,touchend这类事件的话,问题就来了全局的touchstart事件也会被冒泡触发发一段项目图：/** * ppt事件接口 * * 允许用户自定义其行为 * 1 支持14种操作行为 * 2 默认对象都具有滑动翻页... 阅读全文

posted @ 2013-07-03 15:16 【艾伦】阅读(28403) 评论(4) 推荐(8) 编辑

移动web app开发必备 - 异步队列 Deferred

摘要：背景移动web app开发,异步代码是时常的事,比如有常见的异步操作：Ajax（XMLHttpRequest）Image Tag，Script Tag，iframe（原理类似）setTimeout/setIntervalCSS3 Transition/AnimationHTML5 Web DatabasepostMessageWeb WorkersWeb Socketsand more…后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操作比如本人的一个phonegap项目,操作HTML5本地数据库（HTML5 Web Database）就是一个异步的过程,如果同时执行多个查阅读全文

posted @ 2013-07-03 09:04 【艾伦】阅读(3964) 评论(3) 推荐(10) 编辑

轻量级前端MVVM框架avalon - 控制器

摘要：引子：最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧不过angular的的文档中用词还是很优雅：HTML编译器指令编译链接过滤器注入器控制器管道等等…看起来觉得老高级,其实avalon也间接的部分实现,原理也不是很复杂avalon版本更新很快,新版的加入了AMD规范的模块加载器,还修复了很多BUG,不过相信短期内实现的核心还是不会变化,所以我依然以现在的版本分析为主编译期视图背后的代码就是控制器,在mvvm中就是vm视图模型,它的主要工作就是构造模型,并把模型与回调方法一并发送到视图,视图可以看作作用到模版.. 阅读全文

posted @ 2013-07-02 12:41 【艾伦】阅读(4019) 评论(2) 推荐(6) 编辑

前端技术

摘要：随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变。尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力。尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力。Web移动终端开发。JavaScript的兄弟们。百花齐放的类库和框架。工程化的Web前端开发规范。Web移动终端开发PhoneGap 一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。它使开发者能够利用iPhone、Android、 Palm、Symbian、BlackBerry、Wi.. 阅读全文

posted @ 2013-07-01 18:05 【艾伦】阅读(978) 评论(2) 推荐(1) 编辑

《javascript模式》容易踩中的那些坑

摘要：1 链式赋值的陷阱 1: function func(){ 2: var innerVar = globalVar = 20; 3: } 4: func(); 5: console.log(typeof globalVar); //输出结果为？上面最后的输出结果是？相信不少人会毫不犹豫地说undefined，确定？真相是：number原因：从右至左操作符的优先级。首先，优先级较高的是表达式b＝0，此时b未经声明。表达式的返回值为0，它被赋给var声明的局部变量a，如以下代码所示var a ＝ (b = 0);建议：对链式赋值的所以变量都进行声... 阅读全文

posted @ 2013-07-01 08:19 【艾伦】阅读(688) 评论(0) 推荐(1) 编辑

积分与排名

随笔分类 (320)

随笔档案 (265)

阅读排行榜

评论排行榜

推荐排行榜

最新评论