其他 - 随笔分类(第6页) - 【艾伦】

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

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

posted @ 2013-07-18 10:09 【艾伦】阅读(2881) 评论(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 【艾伦】阅读(1441) 评论(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 【艾伦】阅读(3950) 评论(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 【艾伦】阅读(7995) 评论(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 【艾伦】阅读(1528) 评论(0) 推荐(2) 编辑

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

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

posted @ 2013-07-12 12:40 【艾伦】阅读(1498) 评论(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 【艾伦】阅读(1955) 评论(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 【艾伦】阅读(12297) 评论(45) 推荐(35) 编辑

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

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

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

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

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

posted @ 2013-07-03 15:16 【艾伦】阅读(28395) 评论(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 【艾伦】阅读(3961) 评论(3) 推荐(10) 编辑

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

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

posted @ 2013-07-02 12:41 【艾伦】阅读(4010) 评论(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 【艾伦】阅读(974) 评论(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 【艾伦】阅读(683) 评论(0) 推荐(1) 编辑

关于异步Promises

摘要：英文原文：What's The Point Of Promises?迄今为止，可能每个JavaScript开发者和他们的祖母都听说过Promises。如果你没有，那么你即将会。promises的概念是由CommonJS小组的成员在 Promises/A规范中提出来的。Promises被逐渐用作一种管理异步操作回调的方法，但出于它们的设计，它们远比那个有用得多。事实上，由于它们的多种用法，有无数人告诉我——在我写过一些关于promises的东西后——我“遗漏了promises的重点”。那么什么是promises的重点呢？一点关于Promises的东西在我开始promise的“重点”之前阅读全文

posted @ 2013-06-30 19:47 【艾伦】阅读(6052) 评论(1) 推荐(2) 编辑

bootstrap-modal 学习笔记源码分析

摘要：Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/我博客的定位就是把这些年看过的源码给慢慢的总结出来,才疏学浅,不到位的见谅~css部分呢Bootstrap由动态CSS语言Less写成，在很多方面类似CSS框架BlueprintBootstrap自带了13个jQuery插件，jquery这个东东，也是个版本帝，现在都10.1了…一直做移动app,都是用的自己的框架或者zepto,jquery就没正儿八经的用过,源码就看过1.42的后来改动太大了,具体慢慢分析看看源码吧引入 1: ... 阅读全文

posted @ 2013-06-28 14:53 【艾伦】阅读(55901) 评论(4) 推荐(15) 编辑

深入HTML5 Web Worker应用实践：多线程编程

摘要：HTML5 中工作线程（Web Worker）简介至 2008 年 W3C 制定出第一个 HTML5 草案开始，HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能，而且还增加了对本地数据库等 Web 应用功能的支持。其中，最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程（Web Worker）的概念，并且规范出 Web Worker 的三大主要... 阅读全文

posted @ 2013-06-27 12:42 【艾伦】阅读(618) 评论(0) 推荐(0) 编辑

深入理解javascript事件

摘要：使用setInterval调度 1: var fireCount = 0; 2: var start = new Date; 3: var timer = setInterval(function() { 4: if (new Date - start > 1000) { 5: 6: clearIn... 阅读全文

posted @ 2013-06-27 12:40 【艾伦】阅读(653) 评论(0) 推荐(2) 编辑

JavaScript富应用MVC MVVM框架

摘要：对框架的挑选 Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js ， Angular.js1. 轻量级的应用选择哪一个会比较好？2. 那一个比较简单，容易上手3. 哪一个开发周期最短？具体可以看 (英) Rich JavaScript Applications – the Seven Frameworks Web前端开发：为何选择MVVM而非MVC由于工作关系~一直没时间细细研究下这些框架的源码~ 早期就看过Backbone.js与EXT4的MVC最近开始研究业界小有名气司徒正美的mvvm框架avalon 为什么放着Angular，Ember 阅读全文

posted @ 2013-06-22 10:52 【艾伦】阅读(7070) 评论(4) 推荐(7) 编辑

javascript 中的 delete

摘要：原文:http://justjavac.com/javascript/2013/04/04/understanding-delete-in-javascript.html下面翻译其中的主要部分。书中声称“函数就像一个普通的变量那样——可以拷贝到不同变量，甚至被删除”并附上了下面的代码片段作为说明：>>> var sum = function(a, b) {return a+b;};>>> var add = sum;>>> delete sum;true>>> typeof sum;"undefined" 阅读全文

posted @ 2013-06-21 20:00 【艾伦】阅读(4501) 评论(4) 推荐(3) 编辑

随笔分类 - 其他