democ

前台模板编写

设计资料准备

• 四张设计稿: 主页,列表页,文章页,封面页
• Banner广告图
• logo图

根据设计图完成以下四个基本页面:

• index.htm
• cover_article.htm
• list_article.htm

democ

都说JS是一种class free语言.但是目前对这个认知还不是很深刻.以下一种模拟classd的方法,平时也经常用:

 var Car = function(name){
  this.name = name;
 } 

 Car.prototype.run = function() {
  console.log('Woonnnnnnn');
 }

democ

挖坑缘由:

学习bootstrap > 改变其中的variable.less > 编译新的bootstrap.css

bootstrap本身是使用grunt来做自动化编译的,所以需要本地配置一下才可以编译出定制的bootstrap

依赖

• grunt-cli npm安装, grunt-cli只是起到调用grunt的作用,所以下面还要安装grunt
• grunt package npm安装

democ

每次和你吵架之后,一想到以后不能在一起就会觉得自己没有了未来. 离开了你,就像离开了未来,只能过着活一天就是一天的生活.

democ

依赖

• nodejs
• grunt-cli
• package.json, Gruntfile.js

使用npm生成 package.json

  npm init

democ

优化上网体验类

Vimium
使用键盘快捷键进行网页浏览操作,强烈推荐.点击下载

Adblock plus
有效的屏蔽页面广告,效果显著.点击下载

web开发类

素材收集类

democ

要达到的效果

• As with the first example, a developer working on an HTML template should be able to make basic changes to the markup without fear of it breaking essential functionality.

不要让一个class承担太多的责任

  <button class="add-item">Add to Cart</button>

这里你会用add-item作为样式的定位,同时也用它来作为JS的hook.这时候建议这么做:

democ

I believe the goals of good CSS architecture shouldn’t be that different from the goals of all good software development. I want my CSS to be predictable, reusable, maintainable, and scalable.

Predictable

Reusable

CSS需要足够的抽象和解耦从而能够很快利用存在的部分建立新的components.而不需要从头开始写那些你已经写过的模式和已解决的问题来完成这项任务.

Maintainable

When new components and features need to be added, updated or rearranged on your site, doing so shouldn’t require refactoring existing CSS. Adding component X to the page shouldn’t break component Y by its mere presence.

democ

国内:

• http://www.liyao.name/
• 前端观察
• tina的前端技术博客

国外:

• Nicole Sullivan
• []

博文推荐:

democ

都说所有的function是一个object?

看下面这段代码很难把function与一个object相联系在一起,以为object最本质key/value没有体现出来:

  var greet = function(){
    alert('Heloo, my friend.');
  }

在这里所创建的function只是包裹了statement,然后可以执行的代码罢了.好像根本和object没关系啊.

但是function在JS中确实表现的跟普通的object没区别. 可以作为变量的值,可以存在object,array中.可以当做函数的参数.可以被其他函数当做值返回.function还可以有方法(method).问题就出在当function作为一个可以被调用的东西时我们就觉得function不是object了.就是以上那个例子.