React的设计经常被讨论，但因为相关文件很多，源代码读起来比较累。正好最近看到Under the hood:ReactJS这个项目分享了React核心代码的流程图(MIT协议)，取其中几张写成这篇文章供阅读源码时作为目录索引。 文章分4部分： ReactDOM.render&ReactMount Transaction Mount this.setState 源码以v15.6.1为例，不会直接复制大段代码，主要是以超链接链到github源码对应的位置——通常是链到函数被调用的位置，少数情况会链到申明的位置。核心代码当然会涉及VDOM和事件代理，网上相关文章非常多，本文不再赘述，官方文档中已有的内容也会尽量省略。流程图是svg格式，图形填充颜色根据不同文件使用不同颜色。以iframe标签嵌入。这是兼容性最好的方式，但不知道这篇文章会被爬虫带到哪，以及各种RSS阅读器是否支持，所以附上原文地址：dmyz.org/archives/983
标签：Javascript
初学前端的MVC架构
Web应用的功能越来越强，Javascript代码也越来越多，大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案，虽然它定义不明确需要很多时间来思考如何组织，崇尚代码分离增加了调试难度，但毕竟脸熟（……），从用CakePHP的时候就接触过这个概念，以我能理解的方式描述就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来连接这两者。所以一个Web应用的流程通常是这样的: 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮 2. Controller处理这个动作 3. Controller通过Model对数据进行增删改查，将其传递到View 4. View将数据展示给用户 以上描述来自Javascript Web Applications一书，其中有用MVC组织JS代码的具体方法。如果想偷懒的话，也有一些现成的JS框架来做这件事。说到JS框架可能最先想到的是jQuery，这类MVC框架和jQuery解决的问题不同，jQuery主要用来对页面元素进行操作上，比如我要移动 …
HTML5+Javascript开发Android应用
这篇文章不像之前的一些文章那么详细，更接近索引的性质，因为只是折腾出了一种对我有用的方案，不是一种单一的技术，工具，或是经验。如果各位像我一样，想做一个简单的移动应用(不仅限于Android)，又没有那么多时间去研究如何开发，甚至是从头学习一门语言(比如JAVA)，这会是一种比较好的方案。 现在有一个Web应用，功能很简单，输入一串条形码，查询出对应的商品价格和编号。直接在移动设备上访问它也能工作，但浏览网页时的缩放按钮会影响网站的显示效果。所以第一步要在head部分的meta信息中加上这一句：
|
1 |
<meta name="viewport" content="user-scalable=no, width=device-width" /> |
这样网页就能适应屏幕大小，而且没有缩放按钮了。某些网站的“手机版”，其实就是加上这一句，然后调整了一些样式而已。接下来把网页元素——文本框/列表/按钮等——变成移动设备上的样式。我比较熟悉jQuery，于是先尝试了jQTouch和jQMobile。引入jQMobile的方式如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> <script type="text/javascript"> //初始化 $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar }); }); </script> <div data-role="header" data-position="inline"> <h1>Dmyz</h1> </div> |
jQTouch也类似，引入相应的js/css文件，初始化。jQTouch可以有不同的主题，因此外观的可定制性 …
