自我修炼来到了第59天,还有一天就两个月了,距离自我设定的期限还有35天,明天出发去成都九寨玩5天,回来刚好剩下最后一个月。离设定的期限越近,不免出现了焦躁和不安的情绪,竟然路已经走到了现在这里,最后或者再试一次吧,我想做有趣的事,我想成为有故事的人,我下了这个决定,还是先来点鸡汤歌词来打一下气吧:
我不好也不坏 不特别出众 我只是敢不同
我的人生就是 一错再错 错完了再重头
也许放弃掉一些 活得更轻松 我却不再是我
我不愿一生 晒太阳吹风 咸鱼也要有梦
—五月天《咸鱼》
最近看了韩寒导演的电影《后会无期》,貌似其实当导演也不是一件难事吧,但当初我却放弃了,不过已经不再重要了,我已经找到我要走的路了。我不是韩迷,但我一直都觉得韩寒是一个有自己想法,对生活敏感,对自己诚实的人。《后会无期》是他的处女作,先不论他在技术层面,电影语言上的运用如何,但我觉得他讲了一个不错的故事,也抛出了很多值得思考的问题。一千个人就有一千个哈姆雷特,一千个观众也会有一千个后会无期。对于电影抛出的问题我思考了很多,我并不准备在这里展开叙述,但有一个感触想在这里分享:每个人都走在一条平凡之路上,在这条路上会遇见很多擦身而过的人,他给你留下或深或浅的印记,这些交集会影响着你下一步的选择,你会成长,你会改变,但你一定要对自己诚实、勇敢和坚定,不然你只会成为别人故事里的配角,甚至是路人甲乙丙。
总结一下从上次文章到现在的学习,在这20多天里,主要有以下几个内容:
- 巩固了CSS方面的知识,以前有很多知识点都是模模糊糊的,通过这次的学习,清晰了很多内容,也学到了之前不曾接触的,后文会展开记录;
- 学习了一些web开发的小技巧,主要来自《web开发秘方》一书;
- 了解了移动端重构方面的基础知识;
- 对node.js进行了较为完整的学习;
- 对BackBone.js框架有了初步的认识(BackBone.js的相关文章:Backbone使用总结,Backbone first glance,认识BackBone系列文章);
- 对Angular.js框架进行较为基础的学习,因为接下来的项目将会使用上,(Angular.js学习资料:七步从Angular.JS菜鸟到专家系列文章,Build custom directives with AngularJS,shaping-up-with-angular-js)后文展开记录;
- 对Hybrid App的框架Framework7,ionic和onsenUI进行了技术选型,搭建好了phonegap的开发环境(phonegap开发环境的搭建可以参见如下两篇文章:Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)和PhoneGap 3 CLI Setup on Mac & Windows)。
一、关于CSS方面的学习记录
以下记录是《CSS设计指南》的学习笔记,相关章节也是书中的章节
- 第2章:(1)特指到最明确的元素样式,为最终计算显示样式,ICE计算特指值;(2)::after和::before为元素为默认在指定的元素增加inline类型的子元素,可修改为block属性或inline-blockline属性。
- 第3章:(1)float令子元素特破了父元素的包裹,浮至父元素的左上端或右上端,其他同级元素在父元素的大小内尽力与浮动元素并排,父元素继续包裹其他子元素。(2)没有显示设定宽度的block元素总宽度(外边距+边框+内边距+内容)与父元素等宽;若设定则是设定了元素的内容宽度。(3)理解好定位元素的上下文;(4)color是前景色,默认影响边框颜色,background-color后景色;(5)前景-背景-背景颜色,背景范围默认包括外边距,通过background-clip设置;(6)多背景通过逗号分隔每一层图片设置。
- 第4章:(1)字体相对大小用em时,通过逐层计算父元素大小继承,基本是body为首先基础,1em为16像素,如不对父元素设置绝对大小,则每一个子元素相同的em值对应的像素值不等;(2)text-indent直接继承父元素的计算缩进值;(3)文本属性默认只对文本或inline元素有影响,因文本内容有一个inline-box包裹,不可设置高度和宽度,line-height是设置一行inline-box的高度,与字体大小相互作用影响行间距;(4)text-align设置文本水平对齐位置,center属性值并可设置在有固定宽度且较小的元素和图片;(5)vertical-align只对行内元素有影响;(6)fontssquirrel.com转换字体格式,用于@font-face引入。
- 第5章:(1)960px的width是最理想的;(2)box-sizing改变盒子的宽度计算范围(3)max-width控制包含元素的宽度;(3)display:table-cell。
- 第6章:(1)父元素 子元素 + 子元素选择法;(2)表单<label>可包含控件也可不包含,用for来默认对应id;(3)表单legend元素的定位机制不明,在入面嵌入<span>来控制定位,再设定为block;(4)transition属性跟踪相关属性变化的过渡,实现搜索框的变化;(5)<figcaption>在<figure>中必须是唯一的,并且是第一个子元素或最后一个子元素;(6)行内元素的定位基准为文本基线;(7)z-index对除static之外的元素有效;(8)使用border及::before和::after形成三角形。
- 第7章:(1)没有宽度的元素水平居中,父元素为text-align:center,子元素为display:inlineblock;(2)垂直居中,文本line-height与父元素同高,为display:row,vertical-align:middle(middle只对单元格有效);(3)inline-block外边距不能为auto。
二、关于HybridApp应用的框架选型
HybridApp是采用HTML5技术开发通过Phonegap等相关工具打包成类NativeApp的应用,其特点是采用前端语言进行开发,一次开发跨平台部署,但却是以牺牲应用性能为代价,用于相关开发的框架现在比较多,如jQueryMobile,senchaTouch等,但通过网上资料显示,这两个框架优化并不是特别好,目前较为流行的有以下三个:Framework7,ionic和OnsenUI,下文从文档,学习成本,社区,跨平台性,component和其他特性六个方面进行比较:
- 文档:三个框架都具备较为完整的文档,通过文档学习起来并没有太大问题,估计Framework7框架出现得较为晚,所以文档方面仍在不断更新;
- 学习成本:Framework7并不具备MVC的模式,就像普通的webapp框架,学习成本较低;ionic和OnsenUI比较依赖AngularJS,采用MVC模式,比较适合用于应用类型的开发,但学习成本较高;
- 社区:ionic的社区较为活跃,Framework7和OnsenUI相对欠缺;
- 跨平台性:Framework7主要针对的是iOS平台,虽然也可用于Android平台,但考虑到Android平台的混乱,支持效果不可保证;另外两者都号称对于android平台有不错的支持并且支持Android2.3以上;
- component:只能说三者都有足够使用的component;
- 其他特性:OnsenUI有个在线的IDE monaca,并且支持直接在移动设备上Debbug,但经过试验可以支持另外两种框架;OnsenUI还有个主题自定义工具。
三、关于AngularJS学习的记录
关于Angular学习方面,上面已经记录了我的相关学习资料,现在讲讲我的一些理解:
- angular的适用范围是针对那些AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。
- 使用好angular系统定义的directive,每一个directive都可以理解成一个功能区域,都是一个controller和view的绑定;
- 利用自定义的directive来简化应用架构;
- 使用好$scope service来设定数据的有效范围;
- 使用serveice概念来扩充controller的功能,并实现controller间的数据共享;
- 忘记对DOM的操作;
- 表达式对于数据的展现功能;
接下来,将会以开放一个应用来结束这次的修炼,作为期末考试。抓紧和珍惜剩下的时间。然后开始一次新的尝试。