一步步搭建物联网系统——无处不在的三剑客

无处不在的三剑客

这时咱们终于了解了咱们的三剑客，他们也就这么能够结合到一块儿了，HTML+Javascript+CSS是这一切的基础。而咱们用到的其余语言如PHP、Python、Ruby等等到最后都会变成上面的结果，固然还有Coffeescript之类的语言都是以此为基础，这才是咱们须要的知识。

Hello,Geek

有了一些些基础以后，咱们终于能试着去写一些程序了。也是时候去建立一个像样的东西，或许你在一些界面设计方面的书籍看过相似的东西，可能我写得也没有那些内容好，只是这些都是一些过程。过去咱们都是一点点慢慢过来的，只是如今咱们也是如此，技术上的一些东西，事实上你们都是知道的。就比如咱们都以为咱们能够开个超市，可是若是让咱们去开超市的话，咱们并不必定能赚钱。

学习编程的目的可能不在于咱们能找到一份工做，那只是在编程以外的东西，虽然确实也是很肯定的。可是除此之处，有些东西也是很重要的。

过去老是不理解为何会一些人会不厌其烦地去回答别人的问题，有时候可能会想是一种能力越大责任越大的感受，可是有时候在写一些博客或者回答别人的问题的时候咱们又从新思考了这些问题，又从新学习了这些技能。因此这里可能说的不是关于编程的东西而是一些编程之外的东西，关于学习或者学习之外的东西。

从源码学习

过去总以为学了一种语言的语法便算是学会了一种语言，直到有一天接触运用该语言的项目的时候，虽然也会写上几行代码，可是却不像这种语言的风格。因而这也是这一篇的意义所在了：

浏览器渲染过程

基本的渲染引擎的过程以下图所示:

• 解析HTML去构建DOM树
• 渲染树形结构
• 生成渲染的树形图布局
• 绘制树形图

对于Webkit浏览器来讲，他的过程以下所示:

HTML

写好HTML的一个要点在于读别人写的代码，这只是一方面，咱们所说的HTML方面的内容可能不够多，缘由有不少，不少东西都须要在实战中去解决。读万卷书和行万里路，分不清哪一个有重要的意义，可是若是能够同时作好两个的话，成长会更快的。

写好HTML应该会有下面的要点

• 了解标准及遵照绝大多数标准
• 注重可读性，从ID及CLASS的命名
• 关注SEO与代码的联系

或许在这方面我也算不上很了解，不过按笔者的经验来讲，大体就是如此。

多数状况下咱们的HTML是相似于下面这样子的

html<div class="col-md-3 right">
    {% nevercache %}
    {% include "includes/user_panel.html" %}
    {% endnevercache %}
    <div class="panel panel-default">
    <div class="panel-body">
    {% block right_panel %}
    {% ifinstalled mezzanine.twitter %}
    {% include "twitter/tweets.html" %}
    {% endifinstalled %}
    {% endblock %}
    </div>
    </div>
</div>

换句话说HTML只是基础，而不是平常用到的。咱们的HTML是由template生成的，咱们能够借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML，因此这里只是一个开始。

还须要了解的一部分就是HTML的另一个重要的部分，DOM树形结构

DOM树形结构图

DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指经过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。

javascript

这里以未压缩的jQuery源码和zepto.js做一个小小的比较，zepto.js是兼容jQuery的，所以咱们举几个有意思的函数做一简单的比较，关于源码能够在官网上下载到。

在zepto.js下面判断一个值是不是函数的方面以下，

javascriptfunction isFunction(value) { return type(value) == "function" }

而在jQuery下面则是这样的

javascriptisFunction: function( obj ) {
    return jQuery.type(obj) === "function";
}

而他们的用法是同样的，都是

javascript$.isFunction();

jQuery的做法是将诸如isFunction,isArray这些函数打包到jQuery.extend中，而zepto.js的也是这样的，只不过多了一行

javascript$.isFunction = isFunction

遗憾的是我也没去了解过为何，以前我也没有看过这些库的代码，因此这个问题就要交给读者去解决了。jQuery里面提供了函数式编程接口，不过jQuery更多的是构建于CSS选择器之上，对于DOM的操做比javascript自身提供的功能强大得多。若是咱们的目的在于更好的编程，那么可能须要诸如Underscore.js之类的库。或许说打包本身经常使用的函数功能为一个库，诸如jQuery

javascriptfunction isFunction(value) { return type(value) == "function" }
function isWindow(obj)     { return obj != null && obj == obj.window }
function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
function isObject(obj)     { return type(obj) == "object" }

咱们须要去了解一些故事背后的缘由，愈来愈惧怕GUI的缘由之一，在于不知道背后发生了什么，即便是开源的，咱们也没法了解真正的背后发生什么了。对于不是这个工具、软件的用户来讲，开源更多的意义可能在于咱们能够添加新的功能，固然还有免费。若是没有所谓的危机感，以及认为本身一直在学习工具的话，能够试着去打包本身的函数，打包本身的库。

javascriptvar calc={
    add: function(a,b){
        return a+b;
    },
    sub: function(a,b){
        return a-b;
    },
    dif: function(a,b){
        if(a>b){
            return a;
        }else{
            return b;
        }
    }
}

而后用诸如jslint测试一下代码。

bash$ ./jsl -conf jsl.default.conf
JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24)
Developed by Matthias Miller (http://www.JavaScriptLint.com)

app.js
/Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon
    }
........^


0 error(s), 1 warning(s)

因而咱们须要在第15行添加一个分号。

最好的方法仍是阅读别人的代码，而所谓的别人指的是一些相对较大的网站的，有比较完善的开发流程，代码质量也不会太差。而所谓的复杂的代码都是一步步构建上去的，罗马不是一天建成的。

有意思的是多数状况下，咱们可能会用原型去开发咱们的应用，而这也是咱们须要去了解和掌握的地方，

javascriptfunction Calc(){

}
Calc.prototype.add=function(a,b){
    return a+b;
};
Calc.prototype.sub=function(a,b){
    return a-b;
};

咱们彷佛在这里展现了更多的Javascript的用法，可是这不是一好的关于Javascript的介绍，有一天咱们还要用诸如qunit之类的工具去为咱们的function写测试，这时就是一个更好的开始。

若是咱们乐意的话，咱们也能够构建一个相似于jQuery的框架，以用来学习。

做为一门编程语言来讲，咱们学得很普通，在某种意义上来讲算不上是一种入门。可是若是咱们能够在其余的好书在看到的内容，就没有必要在这里进行复述，目的在于一种学习习惯的养成。

CSS

CSS有时候颇有趣，可是有时候有不少咱们没有意识到的用法，这里以Bootstrap为例，这是一个不错的CSS库。最使人兴奋的是没有闭源的CSS，没有闭源的JS，这也就是前端好学习的地方所在了，不过这是一个开源的CSS库，虽然是这样叫的，可是称之为CSS库显然不合适。

cssa,
a:visited {
  text-decoration: underline;
}
a[href]:after {
  content: " (" attr(href) ")";
}
abbr[title]:after {
  content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
  content: "";
}

这里有一些有趣的，值得一讲的CSS用法。

• 伪类选择器,如a:visited这样须要其余条件来对元素应用样式，用于已访问的连接。
• 属性选择器,如a[href]这样当a元素存在href这样的属性的时候来寻找应用元素。

其余的还须要去好好了解的就是CSS的盒模型，做为CSS的基石之一。

CSS盒模型图

(ps:如下内容来自于Mozilla Developer NetWorks)

CSS下这些矩形盒子由标准盒模型描述。这个模型描述元素内容占用空间。盒子有四个边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。

内容区域content area 是真正包含元素内容的区域。位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

若是 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。

内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部，一般有背景——颜色或图片（不透明图片盖住背景颜色）. 它的大小为 padding-box 宽与 padding-box 高。

内边距与内容边界之间的空间能够由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。

边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。

外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。

外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。

在 外边距合并 的状况下，因为盒之间共享外边距，外边距不容易弄清楚。

最后注意，对于行内非替换元素，其占用空间（行高）由 line-height 决定，即便有内边距与边框。

诸如

css* {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
}

这样的通用器用来进行全局选择的工具和咱们用于抵消某个body对于子选择器的影响同样值得注意得多。

笔记

写博客彷佛是一个不错的好习惯，做为一个不是很优秀的写手。对于来讲，有时候发现原来能教会别人对于本身的能力来讲算是一种确定。有些时候教会别人才算是本身学会的表现，总会在项目上的时候须要本身去复述工做的一个过程，咱们须要整理好咱们的思路才能带给别人更多的收获。咱们的笔记上总会留下本身的学习的一些过程，有些时候咱们想要的只是一点点的鼓励，有时是诸如评论一类，有时多是诸如访问量。更多的多是咱们能够从新整理本身的知识，好好复习一下，以便于好好记住，写出来是一个好的过程。

无处不在的三剑客就这样到了这里，写得彷佛不少也不多，可是仍是没有作出来一个东西，因而咱们朝着这样一个方向前进。

在线查看:一步步搭建物联网系统

图灵-电子书版一步步搭建物联网系统