Tech

隐介藏形——ReactJS源码索引

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

Continue Reading
Front

初学前端的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主要用来对页面元素进行操作上,比如我要移动 …

Continue Reading
Tech

HTML5+Javascript开发Android应用

这篇文章不像之前的一些文章那么详细,更接近索引的性质,因为只是折腾出了一种对我有用的方案,不是一种单一的技术,工具,或是经验。如果各位像我一样,想做一个简单的移动应用(不仅限于Android),又没有那么多时间去研究如何开发,甚至是从头学习一门语言(比如JAVA),这会是一种比较好的方案。 现在有一个Web应用,功能很简单,输入一串条形码,查询出对应的商品价格和编号。直接在移动设备上访问它也能工作,但浏览网页时的缩放按钮会影响网站的显示效果。所以第一步要在head部分的meta信息中加上这一句:

这样网页就能适应屏幕大小,而且没有缩放按钮了。某些网站的“手机版”,其实就是加上这一句,然后调整了一些样式而已。接下来把网页元素——文本框/列表/按钮等——变成移动设备上的样式。我比较熟悉jQuery,于是先尝试了jQTouch和jQMobile。引入jQMobile的方式如下:

jQTouch也类似,引入相应的js/css文件,初始化。jQTouch可以有不同的主题,因此外观的可定制性 …

Continue Reading