基于HTML和JS教你一步步搭建物联网系统

  了解标准及遵守绝大多数标准

  注重可读性,从ID及CLASS的命名

  关注SEO与代码的联系

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

  多数情况下我们的HTML是类似于下面这样子的

  

 

  {% nevercache %}

  {% include "includes/user_panel.html" %}

  {% endnevercache %}

  

 

  

 

  {% block right_panel %}

  {% ifinstalled mezzanine.twitter %}

  {% include "twitter/tweets.html" %}

  {% endifinstalled %}

  {% endblock %}

  

 

  

 

  

 

  换句话说HTML只是基础,而不是日常用到的。我们的HTML是由template生成的,我们可以借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML,所以这里只是一个开始。

  还需要了解的一部分就是HTML的另外一个重要的部分,DOM树形结构

  5.4 DOM树形结构图

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

  

 

  DOM Tree

  5.4.1 javascript

  这里以未压缩的jQuery源码和zepto.js作一个小小的比较,zepto.js是兼容jQuery的,因此我们举几个有意思的函数作一简单的比较,关于源码可以在官网上下载到。

  在zepto.js下面判断一个值是否是函数的方面如下,

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

  而在jQuery下面则是这样的

  isFunction: function( obj ) {

  return jQuery.type(obj) === "function";

  }

  而他们的用法是一样的,都是

  $.isFunction();

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

  $.isFunction = isFunction

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

  function 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的原因之一,在于不知道背后发生了什么,即使是开源的,我们也无法了解真正的背后发生什么了。对于不是这个工具、软件的用户来说,开源更多的意义可能在于我们可以添加新的功能,当然还有免费。如果没有所谓的危机感,以及认为自己一直在学习工具的话,可以试着去打包自己的函数,打包自己的库。

  var 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测试一下代码。

  $ ./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行添加一个分号。

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

  有意思的是多数情况下,我们可能会用原型去开发我们的应用,而这也是我们需要去了解和掌握的地方,

  function Calc(){

  }

  Calc.prototype.add=function(a,b){