Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-02-27T15:04:45.719045+00:00Blogbe a geek 8:无处不在的三剑客2014-03-12T00:57:23+00:002014-05-14T16:32:26.703958+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/be-a-geek-chapter-8-anywhere-css-html-javascript/#无处不在的三剑客#
这时我们终于了解了我们的三剑客,就这么可以结合到一起了,HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、Ruby等等的最后都会变成上面的结果,当然还有Coffeescript之类的语言都是以此为基础,这才是我们需要的知识。
##Hello,Geek##
有了一些些的基础之后,我们终于能试着去写一些程序了。也是时候去创建一个像样的东西,或许你在一些见面设计方面的书籍看过类似的东西,可能我写得也没有那些内容好,只是这些都是一些过程。过去我们都是一点点慢慢过来的,只是现在我们也是如此,技术上的一些东西,事实上大家都是知道的。就好比我们都觉得我们可以开个超市,但是如果让我们去开超市的话,我们并不一定能赚钱。
学习编程的目的可能不在于我们能找到一份工作,那只是在编程之外的东西,虽然确实也是很确定的。但是除些之处,有些东西也是很重要的。、
过去没有理解为什么会一些人会不厌其烦地去回答别人的问题,有时候可能会想是一种能力越大责任越大的感觉,但是有时候在写一些博客或者回答别人的问题的时候我们又重新思考了这些问题,又重新学习了这些技能。所以这里可能说的不是关于编程的东西而是一些编程以外的东西,关于学习或者学习以外的东西。
##从源码学习##
过去总会觉得学了一种语言的语法便算是学了一种语言,于是有一天发现到了这个语言的项目上的时候,虽然会写上几行代码,但是却不像这语言的风格。于是这也是这一篇的意义所在了:
###HTML###
写好HTML的一个要点在于看别人写的代码,这只是一方面,我们所说的HTML方面的内容可能不够多,原因有很多,很多东西都需要在实战中去解决。读万卷书和行万里路,分不清哪个有重要的意义,但是如果可以同时做好两个的话,成长会很快的。
写好HTML应该会有下面的要点
- 了解标准及遵守绝大多数标准
- 注重可读性,从ID及CLASS的命名
- 关注SEO与代码的联系
或许在这方面我也算不上很了解,不过按笔者的经验来说,大致就是如此。
多数情况下我们的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树形结构图#
###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){
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库显然不合适。
a,
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盒模型图#
诸如
* {
margin: 0px;
padding: 0px;
font-family: Helvetica;
}
这样的通用器用来进行全局选择的工具和我们用于抵消某个body对于子选择器的影响一样值得注意得多。
##笔记##
写博客似乎是一个不错的好习惯,作为一个不是很优秀的写手。对于来说,有时候发现原来能教会别人对于自己的能力来说算是一种肯定。有些时候教会别人才算是自己学会的表现,总会在项目上的时候需要自己去复述工作的一个过程,我们需要整理好我们的思路才能带给别人更多的收获。我们的笔记上总会留下自己的学习的一些过程,有些时候我们想要的只是一点点的鼓励,有时是诸如评论一类,有时可能是诸如访问量。更多的可能是我们可以重新整理自己的知识,好好复习一下,以便于好好记住,写出来是一个好的过程。
无处不在的三剑客就这样到了这里,写得似乎很多也很少,但是还是没有做出来一个东西,于是我们朝着这样一个方向前进。be a geek 7:无处不在的css 22014-03-07T01:00:51.269542+00:002014-05-14T15:50:35.863169+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/be-a-geek-chapter-7-anywhere-css-2/##样式与目标##
下面也就是我们的样式
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
我们的目标就是
如果没有一个好的结构
所以样式和目标在这里牵手了,问题是他们是如何在一起的呢?下面就是CSS与HTML沟通的重点所在了:
###选择器###
我们用到的选择器叫做类选择器,也就是class,或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器,不过这个适用于比较高级的场合,诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:
p.para{
color:#f0f;
}
将代码添加到style.css的最下面会发现“如果没有一个的结构”变成了粉红色,当然我们还会有这样的写法
p>.para{
color:#f0f;
}
为了产生上面的特殊的样式,虽然不好看,但是我们终于理解什么叫层叠样式了,下面的代码的重要度比上面高,也因此有更高的优先规则。
而通常我们可以通过一个
p{
text-align:left;
}
这样的元素选择器来给予所有的p元素一个左对齐。
还有复杂一点的复合型选择器,下面的是HTML文件
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<div id="content">
<p class="para2">那么以后可能就是这样子。。。。</p>
</div>
</body>
</html>
还有CSS文件
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
p.para{
color:#f0f;
}
div#content p {
font-size:22px;
}
##更有趣的CSS##
一个包含了para2以及para_bg的例子
<div id="content">
<p class="para2 para_bg">那么以后可能就是这样子。。。。</p>
</div>
我们只是添加了一个黑色的背景
.para_bg{
background-color:#000;
}
重新改变后的网页变得比原来有趣了很多,所谓的继承与合并就是如上面的例子。
我们还可以用CSS3做出有趣的效果,而这些并不在我们的讨论范围里面,因为我们讨论的是be a geek。
或许我们写的代码都是那么的简单,从HTML到Javascript,还有现在的CSS,只是有一些东西才是核心的,而不是去考虑一些基础的语法,基础的东西我们可以从实践的过程中一一发现。但是我们可能发现不了,或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法,这些可以从观察一些比较好的设计的代码中学习到。复杂的东西可以变得很简单,简单的东西也可以变得很复杂。be a geek 6:无处不在的css 12014-03-06T02:48:43+00:002015-02-27T15:04:45.719045+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/be-a-geek-chapter-6-anywhere-css/#无处不在的CSS#
CSS或许你觉得他一点儿也不重要,HTML好比是建筑的框架,CSS就是用于装修房子。那么Javascript呢,我听到的最有趣的说法是小三,先让我们回到代码上来吧。
##CSS##
下面就是我们之前说到的代码,css将Red三个字母变成了红色。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="para" style="color:red">Red</p>
</body>
<script src="app.js" type="text/javascript"></script>
</html>
只是,
var para=document.getElementById("para");
para.style.color="blue";
将字体变成了蓝色,CSS+HTML让页面有序的工作着,但是Javascript打乱了这些秩序,不过却也让生活多姿多彩,小三不都是这样的么——终于可以理解,为什么以前人们对于Javascript没有好感了?不过这里要讲的是正室,也就是CSS,这时还没有Javascript。
![Red fonts][1]
##关于CSS##
这不是一篇好的关于讲述CSS的书籍,所以不会去说CSS是怎么来的,有些东西既然我们可以很容易从其他地方知道,也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码,不过有些重复是不可少的,也是有必要的,而通常这些东西可能是由其他地方复制过来的。
到目前为止我们没有依赖于任何特殊的硬件或者是软件,对于我们来说我们最基本的需求就是一台电脑,或者可以是你的平板电脑,当然也可以是你的智能手机,因为他们都有个浏览器,而这些都是能用的,对于我们的CSS来说也不会有例外的。
CSS是来自于(Cascading Style Sheets),到今天我也没有记得他的全称,CSS还有一个中文名字是层叠式样式表,翻译成什么样的可能并不是我们关心的内容,我们需要关心的是他能做些什么。作为三剑客之一,它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面,也可以像我们的书本一样简单,不过如果要和我们书本一样简单的话,可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的,我们还可以继续用上面说到的编辑器,又或者是其他的。如果你喜欢DreamWeaver那也不错,不过一开始使用IDE可无助于我们写出良好的代码。
忘说了,CSS也是有版本的,和windows,Linux内核等等一样,但是更新可能没有那么频繁,HTML也是有版本的,JS也是有版本的,复杂的东西不是当前考虑的内容。
##代码结构##
对于我们的上面的Red示例来说,如果没有一个好的结构,那么以后可能就是这样子。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p>
<p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p>
</body>
</html>
虽然我们看到的还是一样的:
<img src="http://www.phodal.com/static/media/uploads/nostyle.png" width="600"/>
于是我们就按各种书上的建议重新写了上面的代码
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style type="text/css">
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
</style>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
总算比上面好看也好理解多了,这只是临时的用法,当文件太大的时候,正式一点的写法应该是下面:
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style href="style.css" type="text/css"></style>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
我们需要
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
然后我们有一个像app.js一样的style.css放在同目录下,而他的内容便是
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
这代码和JS的代码有如此多的相似
var para={
font_size:'22px',
color:'#f00',
text_align:'center',
padding_left:'20px',
}
而22px、20px以及#f00都是数值,因此。。
var para={
font_size:22px,
color:#f00,
text_align:center,
padding_left:20px,
}
目测差距已经尽可能的小了,至于这些话题会在以后讨论到,如果要让我们的编译器更正确的工作,那么我们就需要非常多的这种符号,除非你乐意去理解:
(dotimes (i 4) (print i))
总的来说我们减少了符号的使用,但是用lisp便带入了更多的括号,不过这是一种简洁的表达方式,也许我们可以在其他语言中看到,或者说用这个去。。
\d{2}/[A-Z][a-z][a-z]/\d{4}
没有什么会比一开始不理解那是正则表达式,然后去修改上面的代码,为的是去从一堆数据中找出某日/某月/某年。
这门语言可能是为设计师而设计的,但是设计师大部分还是不懂编程的,不过相对来说还是比其他语言好理解一些。
[1]: /static/media/uploads/redfonts.png