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

移动终端开发必备知识（转载）

摘要：移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixels CSS pixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。 device pixels：显示屏幕的... 阅读全文

posted @ 2013-06-30 20:10 【艾伦】阅读(1225) 评论(0) 推荐(3) 编辑

关于异步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 【艾伦】阅读(6078) 评论(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 【艾伦】阅读(55921) 评论(4) 推荐(15) 编辑

浏览器的渲染原理简介

摘要：http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff http://taligarsiel.com/Projects/howbrowserswork1.htm 浏览器工作大流程从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种... 阅读全文

posted @ 2013-06-27 20:28 【艾伦】阅读(5234) 评论(2) 推荐(1) 编辑

CSS选择器

摘要：选择器是CSS的核心，从最初的元素、class/id选择器，演进到伪元素、伪类，以及CSS3中提供的更丰富的选择器，定位页面上的任意元素开始变得愈发的简单。1、元素选择器这是最基本的CSS选择器，HTML文档中的元素本身就是一个选择器：p {line-height:1.5em; margin-bottom:1em;}2、关系选择器E F：后代选择器，该选择器定位元素E的后代中所有元素F：ul li {margin-bottom:0.5em;}E > F：子选择器，该选择器定位元素E的直接子元素中的所有元素F，它将忽略任何进一步的嵌套：ul > li {list-style:none 阅读全文

posted @ 2013-06-27 16:23 【艾伦】阅读(581) 评论(2) 推荐(2) 编辑

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

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

posted @ 2013-06-27 12:42 【艾伦】阅读(642) 评论(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 【艾伦】阅读(657) 评论(0) 推荐(2) 编辑

CSS选择器、优先级与匹配原理

摘要：为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好废话就不多说了CSS 2.1 selectors, Part 1计算指定选择器的优先级:重新认识CSS的权重通配选择符的权值 0,0,0,0标签的权值为 0,0,0,1类的权值为 0,0,1,0属性选择的权值为 0,0,1,1 0,0,1,0伪类选择的权值为 0,0,1,0伪对象选择的权值为 0,0,0,1ID的权值为 0,1,0,0important的权值为最高 1,0,0,0使用的规则也很简单，就是选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS 阅读全文

posted @ 2013-06-26 16:28 【艾伦】阅读(22143) 评论(5) 推荐(12) 编辑

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 【艾伦】阅读(7073) 评论(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 【艾伦】阅读(4507) 评论(4) 推荐(3) 编辑

position 属性和 z-index 属性对页面节点层级影响的例子

摘要：转：http://www.neoease.com/tutorials/z-index/不设 z-index 属性单层节点双层节点多层节点阅读全文

posted @ 2013-06-21 19:19 【艾伦】阅读(563) 评论(1) 推荐(1) 编辑

Webkit CSS properties

摘要：Webkit CSS properties-webkit-animation-webkit-animation-delay-webkit-animation-direction-webkit-animation-duration-webkit-animation-fill-mode-webkit-animation-iteration-count-webkit-animation-name-webkit-animation-play-state-webkit-animation-timing-function-webkit-appearance-webkit-backface-visibili 阅读全文

posted @ 2013-06-21 13:44 【艾伦】阅读(594) 评论(0) 推荐(0) 编辑

轻量级前端MVVM框架avalon - 模型转换

摘要：接上一章 ViewModelmodelFactory工厂是如何加工用户定义的VM？附源码洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { 2: var skipArray = scope.$skipArray, //要忽略监控的属性名列表 3: model = {}, 4: Descriptions = {}, //内部用于转换的对象 5: json = {}, 6: ... 阅读全文

posted @ 2013-06-21 13:20 【艾伦】阅读(3814) 评论(2) 推荐(6) 编辑

ExtJS4 源码解析（一）带项目分析

摘要：Ext这个东东太大了,能看完就已经很不错了,完整的源码分析就不敢说了,大概就涉及了类管理,事件管理,数据结构缓存架构,UI组件核心机制,MVC这几个方面,只是挑着源码看的，没有实际完整的使用.公司的框架我是借鉴了EXT的结构..站在巨人的肩上我们可以走的更远,内部的结构我已经改动了,组件的形式去架构不适合咱公司~ 如图~ 昨天遇到个问题在mixins（向创建的类中要掺进其它类的信息）多个的时候就出问题了~ 顺便就发一下我的源码分析吧.当然是个人角度,有错误欢迎指出.发几本EXT的书，以前分析代码的时候看过了，感觉还行EXT3.4 到 4.0改动真心很大…以前是用3.4玩的,后来看到4.0又.. 阅读全文

posted @ 2013-06-21 09:41 【艾伦】阅读(9108) 评论(1) 推荐(7) 编辑

web app开发利器 - iscroll4 解决方案

摘要：存在即是道理,iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容,这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。幸运的是移动webkit提供了一种强大的硬件加速的CSS属性，这个属性可以用来模拟这个缺失的功能，Iscroll从这里开始了前进之路，但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难兼容万恶的IE6一样，作者希望通过写一个控件，让所有web浏览器支持这种滚阅读全文

posted @ 2013-06-20 23:45 【艾伦】阅读(14557) 评论(9) 推荐(10) 编辑

运用webkit绘制渲染页面原理解决iscroll4闪动的问题

摘要：原：http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题，我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获，还是使用transform来处理滚动，以及将cubic-bezier应用到transition上实现高效的平滑滚动，这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动一文。此文则来解释另一个被很多人误解为iScroll4 造成的问题，那就是内容多的.. 阅读全文

posted @ 2013-06-20 23:38 【艾伦】阅读(3607) 评论(0) 推荐(4) 编辑

吐槽：基于PhoneGap开发移动项目

摘要：目前，随着Google的Android手机和苹果的iphone手机的逐渐普及，越来越多开发者加入到移动应用开发的大军当中。其中，Android应用是基于Java语言基础上进行开发的，而苹果公司的iphone则是基于C语言开发的。如果开发者编写的应用需要同时在不同的移动设备上运行的话，则必须要掌握多种开发语言。而为了进一步简化移动应用的编程，Nitobi公司推出了一套开源的移动应用解决方案PhoneGap, 网址 http://phonegap.com/ 说白了就是一个用基于HTML，CSS和JavaScript的，做出类似原生态代码开发的软件应用, 36Kr上提到的http://www.36. 阅读全文

posted @ 2013-06-20 21:04 【艾伦】阅读(1438) 评论(6) 推荐(1) 编辑

轻量级前端MVVM框架avalon - ViewModel

摘要：废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制在MVVM中，数据是核心。而jQuery则以DOM为核心。而DOM只是HTML在JS的世界的抽象，是一个很易变的东西。因此如果业务代码遍历选择器表达式会非常难维护。但不可否认，jQuery是操作DOM的王者，让我们操作DOM顺手拈来。但如果不让你操作DOM，不是更好吗？就像jQuery不让你用getElementById，getElementsByTagName, querySelecterAll，大家都不知道里面有多少坑，短短几个字母$(expr)是背后sizzle选择器引擎1700行的实现！！！！jQuery其实是在用户代阅读全文

posted @ 2013-06-20 09:31 【艾伦】阅读(5961) 评论(3) 推荐(8) 编辑

轻量级前端MVVM框架avalon - 整体架构

摘要：官网提供架构图单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程如图左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.firstName = "模型"})既然是MVVM 那么还有个M跑哪里去了,M在MVVM定义中，M只是一个过客,被VM给再次包装,它与其他表示业务状态的东西融入VM（ViewModel）中,一个普通的ＪＳ对象阅读全文

posted @ 2013-06-19 09:50 【艾伦】阅读(5801) 评论(3) 推荐(6) 编辑

轻量级前端MVVM框架avalon - 执行流程2

摘要：接上一章执行流程1在这一大堆扫描绑定方法中应该会哪些实现？首先我们看avalon能帮你做什么？数据填充，比如表单的一些初始值，切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html)类名处理，如隔行变色，掠过变色(ms-class, ms-hover)事件绑定(ms-click)属性处理(ms-checked, ms-href, ms-disabled)数据格式化与验证(过滤器与$watch)将某个元素转为一些功能更强大的UI，如果拖动块，滑动块，弹出层，颜色选择器，手风琴，切换卡……有了avalon，做登录后无缝刷新页面这样操作毫无压力回顾到我们最开始的3个问题：阅读全文

posted @ 2013-06-18 14:52 【艾伦】阅读(3164) 评论(5) 推荐(5) 编辑

轻量级前端MVVM框架avalon - 执行流程1

摘要：基本上确定了avalon的几个重要元素的关系：Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.

j s o n 。 有 关 的 这 个

$json。有关的这个$ json的名字还在商讨V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的$js 阅读全文

posted @ 2013-06-18 09:49 【艾伦】阅读(5731) 评论(1) 推荐(7) 编辑

轻量级前端MVVM框架avalon - 初步接触

摘要：迷你简单易用的MVVM框架avalon的介绍http://rubylouvre.github.io/mvvm/按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，它就能动了！神奇的代码:如上图所示：开发者： 1 定义一个带有自定义标签的HTML结构 2 定义一个简单的JS代码用户操作：用户在input文本框中改变值时,你就会发现对应的多条相关联的记录都被同步修改问题：事件是什么时候绑定的,因为开发者都没有操作domjs代码中定义的值,如何关联到html代码中html代码中如何实现自动同步视图（input... 阅读全文

posted @ 2013-06-18 08:17 【艾伦】阅读(6933) 评论(2) 推荐(10) 编辑

(译)ECMAScript 5 Objects and Properties (二)

摘要：继 (译)ECMAScript 5 Objects and Properties 全文地址http://ejohn.org/blog/ecmascript-5-objects-and-properties/ @by Aaron新功能新增加一些有趣的新特性已经被引入到语言以下两个方法是非常有用的，用于收集所有的属性的数组对象。Object.keys( obj )将会返回一个字符串格式的数组表示所有可枚举的对象属性名,相同方法的一个实现代码实现：Object.keys = function( obj ) { var array = new Array(); for ( var prop in... 阅读全文

posted @ 2013-06-16 22:35 【艾伦】阅读(461) 评论(0) 推荐(0) 编辑

前端框架MVC/MVVM分析系列

摘要：Backbone Backbone.js 是一个在JavaScript环境下的模型-视图-控制器 (MVC) 框架。任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑、以及金字塔般的代码。而且，在传统的Web应用程序代码中，不可避免的都有在应用逻辑中加入显示数据的代码的情况。当项目... 阅读全文

posted @ 2013-06-16 12:20 【艾伦】阅读(11404) 评论(0) 推荐(20) 编辑

(译)ECMAScript 5 Objects and Properties (一)

摘要：原贴：http://ejohn.org/blog/ecmascript-5-objects-and-properties/ @by: Aaron 有一些新的API包含在规范中,但是更多有趣的功能发挥作用是对象/属性代码，如何使用能作用你的对象，通过私有的"getters" 和 "settses",阻止枚举,操作,或者删除,甚至防止添加新属性.简而言之:你将能够复制和扩展现有的基于JavaScript的api(如DOM)只使用JavaScript本身。也许最重要的是,尽管:这些特性将到达在所有主要的浏览器。所有主要的浏览器厂商从事规范并同意实施在他们阅读全文

posted @ 2013-06-16 11:11 【艾伦】阅读(785) 评论(0) 推荐(1) 编辑

前言:关于前端的MVVM架构

摘要：前言： Web应用的功能越来越强，Javascript代码也越来越多，大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案，虽然它定义不明确需要很多时间来思考如何组织，崇尚代码分离增加了调试难度，但毕竟脸熟（……），从用CakePHP的时候就接触过这个概念，以我能理解的方式描述就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来连接这两者。所以一个Web应用的流程通常是这样的:1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮2. Cont... 阅读全文

posted @ 2013-06-11 15:11 【艾伦】阅读(4117) 评论(3) 推荐(3) 编辑

js中两个感叹号的原理与用法分析

摘要：在javascript中有时会看到有两个!!的用法 Js代码varfoo;alert(!foo);//undifined情况下，一个感叹号返回的是true;alert(!goo);//null情况下，一个感叹号返回的也是true;varo={flag:true};vartest=!!o.flag;//等效于vartest=o.flag||false;alert(test); 这段例子，演示了在undifined和null时，用一个感叹号返回的都是true,用两个感叹号返回的就是false,所以两个感叹号的作用就在于，如果明确设置了变量的值（非null/undifined/0... 阅读全文

posted @ 2013-06-09 15:20 【艾伦】阅读(19587) 评论(3) 推荐(11) 编辑

javascript的类型默认转换机制.

摘要：javascript是一门弱类型语言它的函数形参不指定类型它的变量在赋值时连同类型一起覆盖所以不存在类型转换问题，等等，不存在类型转换问题？哦只是赋值时不存在类型转换问题。 javascript的类型转换主要存在于表达式运算过程中，更直接的说，js的类型默认转换几乎全是由运算符引起的，这篇文章里还会讨论显式转换。在js的运算符中有以下几类+运算符只作用于字符串和数字- * / %只作用于数字! 只作用于布尔型如果我们对2个变量a 和b使用+运算符 a+b那么 js解释器也许会面对这样一个问题： a和b也许不都是数字并且不都是字符串此时他将如何做呢？最基本的答案是调用a 和b的 v 阅读全文

posted @ 2013-06-08 11:33 【艾伦】阅读(599) 评论(0) 推荐(2) 编辑

积分与排名

随笔分类 (320)

随笔档案 (265)

阅读排行榜

评论排行榜

推荐排行榜

最新评论