kyle lee

深圳,腾讯,全栈工程师


  • 首页

  • 归档

  • 标签

Java语言

发表于 2016-12-18   |  

Java语言

Java基本语法

  • 大小写敏感
  • 类名:大驼峰命名法(首字母大写)
  • 方法名:小驼峰命名法(首字母小写)
  • 源文件名:类名必须和源文件名一致
  • 主程序入口:public static void main(String []args)

Java修饰符

  • 访问修饰符
修饰符 当前类 同一包内 子孙类 其他包
public Y Y Y Y
protected Y Y Y N
default Y Y N N
private Y N N N
  • 非访问修饰符
修饰符 说明
static 用来创建类方法和类变量
final 用来修饰类、方法和变量,final 修饰的类不能够被继承,修饰的方法不能被继承类重新定义,修饰的变量为常量,是不可修改的。
abstract 用来创建抽象类和抽象方法
transient 序列化的对象包含被 transient 修饰的实例变量时,java 虚拟机(JVM)跳过该特定的变量。
synchronized 主要用于线程的编程,Synchronized 关键字声明的方法同一时间只能被一个线程访问。
volatile 主要用于线程的编程,Volatile 修饰的成员变量在每次被线程访问时,都强制从共享内存中重新读取该成员变量的值。而且,当成员变量发生变化时,会强制线程将变化值回写到共享内存。这样在任何时刻,两个不同的线程总是看到某个成员变量的同一个值。

Java数据类型

  • 内置数据类型

    • byte:8位、有符号,以二进制补码表示的整数(-2^7~2^7-1)
    • short:16位、有符号,以二进制补码表示的整数(-2^15~2^15-1)
    • int:32位,有符号(-2^31~2^31-1)
    • long:64位,有符号(-2^63~2^63-1)
    • float:32位,单精度
    • double:64位,双精度
    • boolean: 一位,true/false
    • char:单一的16位Unicode字符(0~2^16-1,\u0000~\uffff)

    可以通过程序直接获取到类型的长度和取值范围,比如:
    Integer.SIZE、Integer.MIN_VALUE、Integer.MAX_VALUE

    自动类型转换顺序:
    byte,short,char-> int -> long -> float -> double

  • 引用数据类型
    • 对象和数组都是引用类型
    • 默认值是null

Java变量类型

  • 局部变量

    • 声明在方法、构造方法或者语句块中;
    • 在方法、构造方法、或者语句块被执行的时候创建,当它们执行完成后,变量将会被销毁;
    • 访问修饰符不能用于局部变量;
    • 只在声明它的方法、构造方法或者语句块中可见;
    • 是在栈上分配的。
    • 没有默认值,所以局部变量被声明后,必须经过初始化,才可以使用。
  • 实例变量

    • 声明在一个类中,但在方法、构造方法和语句块之外;
    • 当一个对象被实例化之后,每个实例变量的值就跟着确定;
    • 在对象创建的时候创建,在对象被销毁的时候销毁;
    • 实例变量的值应该至少被一个方法、构造方法或者语句块引用,使得外部能够通过这些方式获取实例变量信息;
    • 实例变量可以声明在使用前或者使用后;
    • 访问修饰符可以修饰实例变量;
    • 对于类中的方法、构造方法或者语句块是可见的。一般情况下应该把实例变量设为私有。通过使用访问修饰符可以使实例变量对子类可见;
    • 实例变量具有默认值。数值型变量的默认值是0,布尔型变量的默认值是false,引用类型变量的默认值是null。变量的值可以在声明时指定,也可以在构造方法中指定;
    • 实例变量可以直接通过变量名访问。但在静态方法以及其他类中,就应该使用完全限定名:ObejectReference.VariableName。
  • 类变量(静态变量)

    • 类变量也称为静态变量,在类中以static关键字声明,但必须在方法构造方法和语句块之外。
    • 无论一个类创建了多少个对象,类只拥有类变量的一份拷贝。
    • 静态变量除了被声明为常量外很少使用。常量是指声明为public/private,final和static类型的变量。常量初始化后不可改变。
    • 静态变量储存在静态存储区。经常被声明为常量,很少单独使用static声明变量。
    • 静态变量在程序开始时创建,在程序结束时销毁。
    • 与实例变量具有相似的可见性。但为了对类的使用者可见,大多数静态变量声明为public类型。
    • 默认值和实例变量相似。数值型变量默认值是0,布尔型默认值是false,引用类型默认值是null。变量的值可以在声明的时候指定,也可以在构造方法中指定。此外,静态变量还可以在静态语句块中初始化。
    • 静态变量可以通过:ClassName.VariableName的方式访问。
    • 类变量被声明为public static final类型时,类变量名称必须使用大写字母。如果静态变量不是public和final类型,其命名方式与实例变量以及局部变量的命名方式一致。

Java异常

  • 检查性异常:最具代表的检查性异常是用户错误或问题引起的异常,这是程序员无法预见的。例如要打开一个不存在文件时,一个异常就发生了,这些异常在编译时不能被简单地忽略。
  • 运行时异常: 运行时异常是可能被程序员避免的异常。与检查性异常相反,运行时异常可以在编译时被忽略。
  • 错误: 错误不是异常,而是脱离程序员控制的问题。错误在代码中通常被忽略。例如,当栈溢出时,一个错误就发生了,它们在编译也检查不到的。

所有的异常类是从 java.lang.Exception 类继承的子类。
Exception 类是 Throwable 类的子类。除了Exception类外,Throwable还有一个子类Error 。
Java 程序通常不捕获错误。错误一般发生在严重故障时,它们在Java程序处理的范畴之外。
Error 用来指示运行时环境发生的错误。
例如,JVM 内存溢出。一般地,程序不会从错误中恢复。
异常类有两个主要的子类:IOException 类和 RuntimeException 类。

java exception

  • throws/throw

    如果一个方法没有捕获一个检查性异常,那么该方法必须使用 throws 关键字来声明。
    throws 关键字放在方法签名的尾部。也可以使用 throw 关键字抛出一个异常,无论它是新实例化的还是刚捕获到的。

  • 自定义异常

    所有异常都必须是 Throwable 的子类。
    如果希望写一个检查性异常类,则需要继承 Exception 类。
    如果你想写一个运行时异常类,那么需要继承 RuntimeException 类。

Java数据结构和集合

  • 枚举(Enumeration)
  • 位集合(BitSet)
  • 向量(Vector)
  • 栈(Stack)
  • 字典(Dictionary)
  • 哈希表(Hashtable)
  • 属性(Properties)
  • 集合(Collection)

java collection

Java多线程

  • 线程生命周期
    java thread

  • 创建线程的方法

    • 通过实现 Runable 接口
    • 通过继承 Thread类本身
    • 通过 Callable 和 Future 创建线程

Java vs CSharp

  • 常量

    • Java

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      static final int K = 100; // compile time

      // 不能给常量设置set方法,也不能在构造函数中设置常量值
      class Test{
      final int afield = 5;
      final int workday = 256;
      ...
      int getAfield(){
      return afield;
      }
      }
    • C#

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      const int K = 100; // compile time
      readonly int K = 100; // runtime

      // 不能设置set方法,但是可以在构造函数中给readonly类型赋值
      class Test{
      readonly int afield;
      const byte workday = 256;

      Test(int n){
      afield = n;
      }
      ...
      int getAfield(){
      return afield;
      }
      }
  • 继承

    • Java
    1
    2
    3
    class B extends A implements Comparable{
    ...
    }
    • C#
    1
    2
    3
    class B : A,IComparable{
    ...
    }
  • 多态和重写

    • Java

      1
      2
      3
      4
      5
      6
      7
      8
      // java中所有方法都可以覆盖
      // 声明为final的方法不能被重写。声明为static的方法不能被重写,但是能够被再次声明。
      public class B extends A{
      @Override
      public void method(){
      ...
      }
      }
    • C#

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      // C#中必须严格哪些方法是虚方法
      public class A{
      public virtual void method(){
      ...
      }
      }

      public class B : A{
      public override void method(){
      ...
      }
      }
  • 单文件多类

    • Java
      java中一个文件只能有一个public类型的类,且必须跟文件保持同名

    • C#
      C#中没有严格要求,可以有多个public类

  • 导入类库

    • Java

      1
      2
      import java.io.*;
      import java.util.*;
    • C#

      1
      2
      using System;
      using System.IO;
  • 枚举(Enum)

  • 属性

    • Java

      1
      2
      3
      4
      5
      6
      7
      8
      // 必须通过get或set方法来读取或设置属性值
      public int getSize(){
      return size;
      }

      public void setSize(int size){
      this.size = size;
      }
    • C#

      1
      2
      3
      4
      // 通过get/set关键字,编译器会自动生成对应的get或set方法
      public int Size{
      get;set;
      }
  • 传递引用

    • Java
      java只能传递值类型参数给方法

    • C#
      C#通过out、ref类传递引用类型

  • 委托

    • Java
      java 没有委托,但可以通过反射来模拟
    • C#
      C#通过关键字delegate来实现
  • 事件

    • Java

    • C#

  • 内部类和匿名类

    • Java
      java 通过内部类来解决多重继承的问题。同时,内部类也是处理事件监听器的方式,因为内部类可以访问对象内部变量。

    • C#

  • 可变参数
    • Java
      1
      2
      3
      4

      public static void printMax(double ... numbers){
      ...
      }
  • C#

    1
    2
    3
    public static void printMax(params double[] numbers){
    ...
    }

Java8新特性

  • Lambda 表达式
    Lambda允许把函数作为一个方法的参数(函数作为参数传递进方法中)。
  • 方法引用
    方法引用提供了非常有用的语法,可以直接引用已有Java类或对象(实例)的方法或构造器。与lambda联合使用,方法引用可以使语言的构造更紧凑简洁,减少冗余代码。
  • 默认方法
    默认方法就是一个在接口里面有了一个实现的方法。
  • 新工具
    新的编译工具,如:Nashorn引擎 jjs、 类依赖分析器jdeps。
  • Stream API
    新添加的Stream API(java.util.stream) 把真正的函数式编程风格引入到Java中。
  • Date Time API
    加强对日期与时间的处理。
  • Optional 类
    Optional 类已经成为 Java 8 类库的一部分,用来解决空指针异常。
  • Nashorn, JavaScript 引擎
    Java 8提供了一个新的Nashorn javascript引擎,它允许我们在JVM上运行特定的javascript应用。

参考

  • Comparison of C Sharp and Java
  • Java and C# Comparison
  • 菜鸟教程

Java生态系统

发表于 2016-12-02   |  

Java生态系统

成长过程(历史)

  • 作者:James Gosling(詹姆斯·高斯林)

    James Gosling

  • 1995.5 Sun公司推出Java语言,2010被Oracle收购

    名称由来:最早叫Oak(橡树),但因为被别的公司注册,所以决定再重新起名,排名第一的 Silk(丝绸) 遭到Gosling反对,第二、第三(Lyric(抒情诗))没有通过商标律师,排名第四的 Java 最终通过,Java是印度尼西亚爪哇岛的英文名称,因盛产咖啡而闻名,国外的许多咖啡店用Java来命名或宣传,以彰显其咖啡的品质。Java语言中的许多库类名称,多与咖啡有关,如JavaBeans(咖啡豆)、NetBeans(网络豆)以及ObjectBeans (对象豆)等等。

  • 语言特性:OO、跨平台、泛型编程

  • 号称“Write Once, Run Anywhere”
  • 版本:

    • JDK 1.0 (January 21, 1996)
    • JDK 1.1 (February 19, 1997)

    技术:JAR文件格式、JDBC、JavaBeans、RMI。
    语法:内部类(Inner Class)和反射(Reflection)。

    • J2SE 1.2 (December 8, 1998)
    • J2SE 1.3 (May 8, 2000)
    • J2SE 1.4 (February 6, 2002)
    • J2SE 5.0 (September 30, 2004)

      重大更新,泛型支持、基本类型的自动装箱、改进的循环、枚举类型、格式化I/O及可变参数

    • Java SE 6 (December 11, 2006)
    • Java SE 7 (July 28, 2011)
    • Java SE 8 (March 18, 2014)

    java release dates

    java features

    SE : Standard Edition,包含Java语言核心的类。比如:数据库连接、接口定义、输入/输出、网络编程。
    EE : Enterprise Edition,包含JSE中的类,并且还包含用于开发企业级应用的类。 比如:EJB、servlet、JSP、XML、事务控制。
    ME : Micro Edition,包含嵌入式开发或者移动应用开发所需要的类,包括一些JSE的核心代码和一些无线设备的API。


    JDK : Java Development Kit,软件开发工具包,包含JRE和java工具(编译器javac、打包jar、文档生成器javadoc、调试jdb、运行java)
    JRE : Java Runtime Environment,java运行时环境,包含JVM和java核心库及支持文件
    JVM : Java Virtual Machine,java虚拟机,Java虚拟机有自己完善的硬体架构,如处理器、堆栈、寄存器等,还具有相应的指令系统。
    JVM屏蔽了与具体操作系统平台相关的信息,使得Java程序只需生成在Java虚拟机上运行的目标代码(字节码),就可以在多种平台上不加修改地运行。
    所以,除了java外,也可以运行其他语言,比较流行的如:Scala、Groovy

    jdk-jre-JVM

    jdk jre jvm difference


    JDK : 默认指的是Sun公司发布的jdk,但也有很多公司和组织自己研发专属的jdk
    Open JDK : JDK的开放原始码版本

    jdk-openjdk

    区别:

    | | JDK | Open JDK|
    |— |—|—|
    |协议 | JRL(JavaResearch License,Java研究授权协议)| GPL(General Public License) V2|
    |代码完整度| 完整 | 从JDK7开始差距不大,缺少 SNMP |
    |工具 | 完整 | 缺少部分工具,并且尽量分离|

    JCP : Java Community Process,开放性国际组织
    JSR : Java Specification Requests,新功能或特性需提交JCP整理并规范为JSR,然后经过JCP执行委员会投票决定。

繁衍子嗣(社区及衍生品)

  • Web:Spring MVC、Spring Boot、JSF、Structs
  • RPC:Dubbo、Dubbox、Thrift
  • ORM:Hibernate、MyBatis
  • J2EE:Spring
  • 移动:Android
  • JSON:fastjson
  • 全文搜索:Lucene
  • ETL工具:Kettle
  • 模板引擎:Velocity、thymeleaf
  • 构建:Maven、Gradle、Ant
  • 应用服务器:Tomcat(Apache基金会)、Jetty、Wildfly、JBoss(Redhat)、WebLogic(Oracle)、WebSphere(IBM)
  • 持续集成:Jenkins
  • 分布式存储:Cassandra
  • 消息服务:ActiveMQ、RabbitMQ
  • 作业调度:Quartz
  • 单点登录:OpenSSO
  • 分布式搜索:ElasticSearch
  • 日志管理:Logstash
  • 动态脚本语言:Groovy
  • 单元测试:JUnit

应用开发

  • Spring vs Java EE

    spring vs java ee

微服务

  • Spring Boot VS Java EE

    spring boot vs java ee

    spring cloud vs java ee

大数据

Hadoop Ecosystem

开源项目

大众脸?还是美人胚子?(流行度)

语言

  • Redmonk

redmonk languages rank

  • Tiobe

tiobe languages rank

tiobe languages rank

Java工具和技术调查

原文链接

  • 总览:

    68% 的开发者用 Maven;
    68% 的在用 Git;
    46% 的在用 Intellij IDEA;
    43% 的在用 Spring MVC
    34% 的在用 微服务架构;
    32% 的在用 Docker;

总览

62% 的在用 Java 8;
60% 的在用 Jenkins;
42% 的在用 Tomcat;
39% 的在用 Oracle DB;
31% 的在用 Java EE 7;
29% 的在用 Spring Boot;

总览

  • 工作年限

    大部分在5-20之间

v

  • 项目类型

    67%是全栈

项目类型

  • 微服务
    微服务

  • JVM语言

JVM语言

  • Java版本

Java版本

  • Java EE版本

Java EE版本

  • IDE

IDE

  • 构建工具

构建工具

  • 应用服务器

    蓝色:生产环境,黄色:开发环境

应用服务器

  • 数据库

数据库

  • 总结

    2040 名开发者参与调查;
    做全栈Web项目的开发者,平均大约有 10 - 12 年的工作经验;
    63% 的在大企业或中型工作就职;
    74% 的自认为高于业界平均水平;
    34% 采用了微服务架构;
    66% 并没有采用微服务,其中仅有 12% 的在未来有计划试试;
    Java 8 是主流,62% 的参与者已经在生产环境用上了;
    Java EE 7 , 31% 的参与者已经在用新版本了;
    42% 的根本不用 Java EE;
    46% 的在用 IntelliJ IDEA,已超过了 Eclipse 的 41%;
    68% 的在用 Maven ,Gradle 只有 16%.
    Tomcat 是最受欢迎的应用服务器,高达 42%;
    39% 的参与者在用 Oracle DB ,稍微比 MySQL 的 38% 高了一点;
    MongoDB 在最受欢迎的 NoSQL DB ,比例是 15% ;
    Spring 依旧主宰着 Web 框架市场, Spring MVC 和 Spring Boot 的比例是 43% 和 29%;
    Jenkins 主宰着 CI Server 市场,比例是 60% ;
    Git 有 68% 份额,而 SVN 仅有 23%;
    New Relic 在 APMs 有着 11% 份额;
    32% 的参与者在用 Docker ,但 54% 的根本没用虚拟化环境;
    71% 的参与者宣称自己是 Agile 的;

  • 过去4年变化

    Eclipse 的份额持续下降,而 IntelliJ 却稳步持续上升,已经在使用率超越了 Eclipse;
    Maven 依旧保持着绝对的领先优势;
    Gradle 增长缓慢,暂时还不足以挑战 Maven;
    Spring 主宰着 Web 框架市场,从 2012 年到 2016 年持续增长中,特别是 Spring Boot 可以称为剧增;
    JSF 在缓慢下降。Stripes、Tapestry、Wicket 和 Play 1 看样子要退出历史舞台了;
    Git 展示了强劲的增长,从 27% 到 68%。而 SVN 却从 55% 降到 23%;

  • 常用开发工具

    popular java frameworks and tools

就业

全文涉及的城市包括: 北京、上海、深圳、广州、杭州、成都、南京、武汉、西安、长沙、苏州 。
涉及的语言包括:Java、Python、PHP、C#、C++
数据来源:使用Python爬取的拉勾网的招聘信息(共计15059条招聘信息)

主流:Java、PHP、C++

数据:按照拉勾网上薪资区间最低的价格来进行统计展示
Python语言以11.9k的薪资领跑,最低的是C#的8.6k

C++的招聘看重学历,大部分企业需要开发者有硕士及以上学历
PHP的招聘基本上不注重学历
对Java开发者的要求是本科学历即可

各城市的Java需求都很大
北上深三城市对C++的需求是相对较多的,这三个城市是C++开发者的最佳选择
北京对Python开发者需求也较大,其它城市需求量不是特大
C#在所有城市普遍需求不大
北上广深杭对PHP的需求极大仅次于Java的需求

成都、南京、武汉、西安、长沙只要你是个程序员不管你用什么语言做开发,平均工资都是那么点6-9k,南京完完全全的几乎重叠。
因此,想安稳拿高薪啊:学Java去北上深杭吧!
长沙这个城市为什么C#开发者平均薪资最高啊?!对了,Python开发者千万别去长沙,最低平均薪资。

大公司使用情况

  • 阿里 占90%
  • 百度、腾讯,主流:C、C++
  • 华为
  • Twitter 2012年开始从Ruby on Rails转向到Java+Scala
  • Amazon、Google、eBay

A-Z

  • A : AspectJ(AOP框架)
  • B : Spring Boot
  • C : Clojure(运行在JVM上的动态语言)
  • D : Dagger(Android平台的依赖注入框架)
  • E : Ektorp(Ektorp is a Java persistence API that uses CouchDB as storage engine)
  • F : Felix(Apache Felix is a community effort to implement the OSGi Framework and Service platform and other interesting OSGi-related technologies under the Apache license)
  • G : Groovy & Grails(Groovy是Java平台上设计的面向对象编程语言。 这门动态语言拥有类似Python、Ruby和Smalltalk中的一些特性,可以作为Java平台的脚本语言使用。Grails : Web application framework, Groovy version of Ruby on Rails, to use in Java development. )
  • H : Spring HATEOAS(Create REST representations that follow the HATEOAS principle from your Spring-based applications.)
  • I : Ivy(Apache Ivy™ is a popular dependency manager focusing on flexibility and simplicity.)
  • J : Jetty(Jetty provides a Web server and javax.servlet container, plus support for HTTP/2, WebSocket, OSGi, JMX, JNDI, JAAS and many other integrations.)
  • K : Kotlin()
  • L : Lucene(Apache Lucene and Solr are distributed under a commercially friendly Apache Software license)
  • M : Morphia(The Java Object Document Mapper for MongoDB)
  • N : Nashorn(Nashorn is a JavaScript engine developed in the Java programming language by Oracle.)
  • O : OpenXava(OpenXava is an AJAX Java Framework for Rapid Development of Enterprise Web Applications.)
  • P : Play(The High Velocity Web Framework for Java and Scala)
  • Q : QPid(Apache Qpid makes messaging tools that speak AMQP and support many languages and platforms. )
  • R : Rave(Apache Rave moved into the Attic in January 2016. Apache Rave was a web and social mashup engine that aggregated and served web widgets. It was targeted as an engine for internet and intranet portals.)
  • S : Stripes(Stripe provides a set of unified APIs and tools that instantly enable businesses to accept and manage online payments.)
  • T : Thymeleaf(Thymeleaf is a modern server-side Java template engine for both web and standalone environments. )
  • U : UIMA
  • V : VertX
  • W : Wookie
  • X : Xindice
  • Y : YamlBeans
  • Z : Zookeeper(Apache ZooKeeper is an effort to develop and maintain an open-source server which enables highly reliable distributed coordination.)

参考

  • 维基百科
  • 2016 年 Java 工具和技术的调查:IDEA 已超过 Eclipse
  • Java/Python/PHP/C#/C++各大城市招聘状况分析
  • 语言流行度调查-redmonk
  • 语言流行度调查-tiobe
  • 极客学院|《2016年中国程序员职业薪酬报告 》完整版发布
  • The Hadoop Ecosystem Table
  • Java Tools and Technologies Landscape Report 2016
  • Awesome Microservices

React使用过程中问题汇总

发表于 2016-07-22   |  

问题列表

  1. 集合内容变了(增加、更新或删除),如何让视图重新刷新?
  2. 嵌套和递归的视图如何处理(比如树形)?

CSS3进阶(三)

发表于 2016-06-13   |  

需要了解的内容

  • vw,vh,vmin,vmax,em,rem
  • flex
  • box-sizing
  • transform
  • transition
  • animation
  • gradient

3. box-sizing

盒模型(box model)

讲box-sizing之前,先了解一下css中重要的概念:盒模型
盒模型就是元素的宽(width)、高(height)和内容(content)、外边距(margin)、内边距(padding)、边框(border)之间的计算关系。
主要分为两类:W3C标准模型和IE传统模型。

  • W3C标准盒模型

    1
    2
    3
    4
    5
    6
    /*外盒尺寸计算(元素空间尺寸)*/
    Element 空间高度 = content height + padding + border + margin
    Element 空间宽度 = content width + padding + border + margin
    /*内盒尺寸计算(元素大小)*/
    Element Height = content height + padding + border (Height为内容高度)
    Element Width = content width + padding + border (Width为内容宽度)
  • IE传统模型(IE6以下)

    1
    2
    3
    4
    5
    6
    /*外盒尺寸计算(元素空间尺寸)*/
    Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
    Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
    /*内盒尺寸计算(元素大小)*/
    Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
    Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

对比上面的两个公式,可以发现:外盒尺寸=内盒尺寸+margin,而不同的地方就在:内盒尺寸的计算方式不同。
如果打开IE和chrome的调试窗口,观察盒子模型的计算就可以发现不同之处(以宽度示例):IE下定义元素的宽度是包含了padding、border的宽度的,而chrome下是不包含的,这样如果定义了padding、border的话,会导致元素的实际宽度比定义的要宽。

为了解决这个差异,css3就定义了box-sizing样式:
box-sizing : content-box || border-box || inherit

content-box: 是默认值,即W3C标准模型,width=定义的元素width+padding+border
border-box:IE传统模型,width=定义的元素width
看一张图片就很明显了,特别是在有padding、margin、border的情况下,元素的宽度差别还是挺大的:
box-sizing

4. transform

2D 转换(2D transform)

3D 转换(3D transform)

5. transition

6. animation

ReactJS使用入门

发表于 2016-06-05   |  

React

先来看一段代码,直观感受一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>

);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);

JSX转义后的js

1
2
3
4
5
6
7
8
9
10
11
12
13
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);

概述

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
React 的核心思想是:封装组件。
各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI。
React 大体包含下面这些概念:

  • 组件
  • JSX
  • Virtual DOM
  • Data Flow

组件

创建

在构建组件之前,需要根据功能将用户界面拆分为一个组件树,比如下面的评论区功能:
comments

组件树划分完成后,就可以进行具体的开发工作。

引入react.js和react-dom.js,如果是开发环境可以通过browser.min.js在线转换JSX语法,大概的html模板样例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>

</body>
</html>

可以将代码直接写入script标签内,也可以作为外部文件引入:
<script type="text/babel" src="scripts/helloworld.js"></script>

创建组件通过 React.createClass方法,将组件渲染到指定DOM节点内:ReactDOM.render

props、state

父元素(组件)是通过props传递数据给子元素(组件)的,子元素通过this.props.xxx访问具体的属性值。

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。

state是元素自身的状态属性,通过组件生命周期中的getInitialState设置默认值。

两者区别:this.props 表示那些一旦定义,就不再改变的特性,而 this.state是会随着用户互动而产生变化的特性。

ref、findDOMNode

React 支持一种非常特殊的属性,你可以用来绑定到 render()输出的任何组件上去。这个特殊的属性允许你引用 `render()`` 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

做法很简单:
1、绑定一个 ref 属性到 render 返回的东西上面去,例如:
<input ref="myInput" />
2、在其它代码中(典型地事件处理代码),通过 this.refs 获取支撑实例( backing instance ),就像这样:
this.refs.myInput
你可以通过调用 this.refs.myInput.getDOMNode() 直接获取到组件的 DOM 节点。

当组件加载到页面上之后(mounted),你都可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。

生命周期

  • Mounting (已插入真实 DOM)
    • getInitialState
    • componentWillMount
    • componentDidMount
  • Updating (正在被重新渲染)
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate
  • UnMounting (已移出真实 DOM)
    • componentWillUnmount

JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。

利用 JSX 编写 DOM 结构,可以用原生的 HTML 标签,也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分,小写的字符串是 HTML 标签,大写开头的变量是 React 组件。

为什么要使用JSX?

你不需要为了 React 使用 JSX,可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
对于非专职开发者(比如设计师)同样比较熟悉。
XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读,优于方法调用和对象字面量的形式。
它没有修改 JavaScript 语义。

HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

如同开篇的例子一样,JSX及转换后的JS:

1
2
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

1
2
3
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

注意:
由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性

属性表达式

要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。

1
2
3
4
5
6
7
// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);

注释

JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

延展属性

如果你事先知道组件需要的全部 Props(属性),JSX 很容易地这样写:

1
var component = <Component foo={x} bar={y} />;
1
2
3
4
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

Data Flow

Flux

React 标榜自己是 MVC 里面 V 的部分,那么 Flux 就相当于添加 M 和 C 的部分。
Flux 是 Facebook 使用的一套前端应用的架构模式。
一个 Flux 应用主要包含四个部分:

  • the dispatcher
    处理动作分发,维护 Store 之间的依赖关系
  • the stores
    数据和逻辑部分
  • the views
    React 组件,这一层可以看作 controller-views,作为视图同时响应用户交互
  • the actions
    提供给 dispatcher 传递数据给 store

针对上面提到的 Flux 这些概念,需要写一个简单的类库来实现衔接这些功能,市面上有很多种实现,这里讨论 Facebook 官方的一个实现 Dispatcher.js

单向数据流

先来了解一下 Flux 的核心“单向数据流“怎么运作的:
Action -> Dispatcher -> Store -> View

更多时候 View 会通过用户交互触发 Action,所以一个简单完整的数据流类似这样:

Alt text

整个流程如下:

  • 首先要有 action,通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher
  • View 层通过用户交互(比如 onClick)会触发 Action
  • Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数
  • Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了
  • View 会监听这个 change 事件,拿到对应的新数据并调用 setState 更新组件 UI

所有的状态都由 Store 来维护,通过 Action 传递数据,构成了如上所述的单向数据流循环,所以应用中的各部分分工就相当明确,高度解耦了。
这种单向数据流使得整个系统都是透明可预测的。

工具

预编译JSX(Precompiled JSX)

1. 安装babel:`npm install -g babel-cli`
2. 在项目目录中执行:`npm install babel-preset-es2015 babel-preset-react`
3. 然后就可以直接调用`babel --presets es2015,react --watch src/ --out-dir lib/`编译输出
4. 也可以通过`echo { "presets": ["es2015","react"] } > .babelrc`创建babel配置文件,这样就不需要每次指定`--presets`

插件

1. 动画

Q&A

1. 为什么手写的情况下,不会报唯一id的警告,循环就会报警告?
(http://react-china.org/t/key/5797)
2. Jsx怎么进行调试?

CSS3进阶(二)

发表于 2016-05-26   |  

需要了解的内容

  • vw,vh,vmin,vmax,em,rem
  • flex
  • box-sizing
  • transform
  • transition
  • animation
  • gradient

1. 宽、高度单位

vw,vh

名称 描述
vw 相对于视窗的宽度:视窗宽度是100vw
vh 相对于视窗的高度:视窗高度是100vh

vw、vh都是css3新增的长度单位。

以vw为例,先给个公式:
vw = 1/100 * viewport

这里的viewport指的视窗,也就是浏览器内的可视区域(不包含浏览器自己的状态栏、工具栏等)。
vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

vh的效果类似,就不再阐述。

特别注意:viewport单位会把滚动条宽度也包含在内

vmin,vmax

vh和vm总是与视口的高度和宽度有关,与之不同的,vmin和vmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为1100px宽、700px高,1vmin会是7px,1vmax为11px。然而,如果宽度设置为800px,高度设置为1080px,1vmin将会等于8px而1vmax将会是10.8px。

vh,vw的使用场景比较好理解,vmin,wmax到底什么时候使用呢?

场景一:

一个正方形的元素总是至少接触屏幕的两条边

1
2
3
4
.box {
height: 100vmin;
width: 100vmin;
}

场景二:

需要一个总是覆盖可视窗口的正方形

1
2
3
4
.box {
height: 100vmax;
width: 100vmax;
}

em,rem

em单位被定义为当前字体大小,但em存在嵌套被放大的问题,比如我们将div的样式定义为font-size:1.2em

1
2
3
4
5
6
7
8
9
10
11
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>

使用rem正好可以解决这个问题,r代表root,font-size大小相对于根元素,一般根元素是html元素。
有时候考虑将rem和em组合使用。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位 描述
em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
ex 依赖于英文子母小 x 的高度
ch 数字 0 的宽度
rem 根元素(html)的 font-size
vw viewpoint width,视窗宽度,1vw=视窗宽度的1%
vh viewpoint height,视窗高度,1vh=视窗高度的1%
vmin vw和vh中较小的那个。
vmax vw和vh中较大的那个。
%

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px * 像素 (1px = 1/96th of 1in)
pt point,大约1/72英寸; (1pt = 1/72in)
pc pica,大约6pt,1/6英寸; (1pc = 12 pt)

像素或许被认为是最好的”设备像素”,而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

2. Flex

概述

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

1
2
3
.box{
display: flex;
}

行内元素也可以使用Flex布局。

1
2
3
.box{
display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

1
2
3
4
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

基本概念

基本上,Flex项目是沿着main axis(从main-start向main-end)或者cross axis(从cross-start向cross-end)排列。

  • main axis:Flex容器的主轴主要用来配置Flex项目。注意,它不一定是水平,这主要取决于flex-direction属性。
  • main-start | main-end:Flex项目的配置从容器的主轴起点边开始,往主轴终点边结束。
  • main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度,Flex项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
  • cross axis:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
  • cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
  • cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度,Flex项目的侧轴长度属性是width或height属性,由哪一个对着侧轴方向决定。

容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。

1
2
3
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

1
2
3
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

1
2
3
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

1
2
3
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}


它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性
align-items属性定义项目在交叉轴上如何对齐。

1
2
3
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}


它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

1
2
3
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}


该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

元素属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

1
2
3
.item {
order: <integer>;
}

flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

1
2
3
.item {
flex-grow: <number>; /* default 0 */
}


如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

1
2
3
.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。

flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

1
2
3
.item {
flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

1
2
3
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

1
2
3
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}


该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

以上内容转自 阮一峰博客

使用示例

请参考

移动端支持情况

  • 无前缀:Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • 需要前缀:iOS 7.1+需要前缀-webkit-

引用列表

一个完整的Flexbox指南
今天就用Flexbox
时下Web App中的Flexbox应用
Flex 布局语法教程

CSS3进阶

发表于 2016-05-12   |  

最近要准备开发移动web app项目,之前一直是在做PC端的Web项目,为了在移动端有更好的体验,必须要重新学习html5和css3,写这篇文章的目的也是为了记录自己的学习历程。同时,会把自己觉得比较重要,且难以理解的知识做重点分析和示例。

1. 从border开始(CSS边框)

CSS3 圆角

一个用于设置所有四个边框- *-半径属性的速记属性

语法
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

值 描述
length 定义弯道的形状。
% 使用%定义角落的形状。

示例
比较简单,不再详述

1
2
3
4
5
div
{
border:2px solid;
border-radius:25px;
}

CSS3盒阴影

语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

示例

1
2
3
4
div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3边界图片

语法
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

border-image: source slice width outset repeat;

值 描述
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 这个例子演示了如何创建一个border-image 属性的按钮。

其中 border-image-slice 是比较难理解的一个属性,我们重点分析这个属性的使用
border-image-slice相当于剪切功能,将目标图片从上、右、下、左的顺序切了四刀,切的时候支持number或percentage两种方式,number就是像素数,percentage是百分比。

比如,边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%,那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小,如图所示:
按比例切割示例图片

也可以按像素:

切完之后就变成了一个九宫格,我们再来以W3C官网的图片为例:


切完之后,四个边角的图片是保持现状不变,不能应用round(平铺)、repeat(重复)、strength(拉伸)效果的(即:2,4,6,8位置的图片)。能够应用这三种效果的就是(1,3,7,9)四个位置的图片。

水平round效果

1
2
3
4
5
6
7
8
9
10
11
.border-image {
width: 150px;
height: 100px;
border: 27px solid orange;
}
.border-image-round {
-webkit-border-image: url("../images/border.png") 27 round stretch;
-moz-border-image: url("../images/border.png") 27 round stretch;
-o-border-image: url("../images/border.png") 27 round stretch;
border-image: url("../images/border.png") 27 round stretch;
}


水平repeat效果

1
2
3
4
5
6
.border-image-repeat {
-webkit-border-image: url("../images/border.png") 27 repeat stretch;
-moz-border-image: url("../images/border.png") 27 repeat stretch;
-o-border-image: url("../images/border.png") 27 repeat stretch;
border-image: url("../images/border.png") 27 repeat stretch;
}


水平拉伸效果

1
2
3
4
5
6
.border-image-stretch {
-webkit-border-image: url("../images/border.png") 27 stretch round;
-moz-border-image: url("../images/border.png") 27 stretch round;
-o-border-image: url("../images/border.png") 27 stretch round;
border-image: url("../images/border.png") 27 stretch round;
}


垂直方法的效果类似,不再展示。
注意:
repeat和round效果不一样,round会压缩或伸展border-image的背景图片以其刚好适应border-width的宽度,从而正好在边框区域内显示,而repeat就不一样了,他不管什么适合不适合,直接居中重复,我个人认为repeat是边框中间向两端重复。因此大家可记住了:round平铺可能会改变边框背景图片大小来适应边框宽度排列,repeat重复是不改变背景图片大小而直接从中间向两端排列。
另外,webkit(safari、chrome)下repeat和round效果是一样的,只有在Mozilla和Opera下有区别

应用场景

  • 制作Button
  • 制作Tabs
  • 圆角+Drop box shadow效果
  • 相框效果

更多说明,请参考W3CPLUS,里面写的很详细,非常感谢!

在sublime中使用markdown相关插件

发表于 2016-05-10   |  

安装Markdown Editing和Markdown Preview插件

按下键Ctrl+Shift+p调出命令面板,找到Package Control: install Pakage这一项。搜索markdown,找到Markdown Editing和Markdown Preview点击安装。

Markdown Preview插件介绍

安装完插件后,我们来看一下具体的使用:

使用

Markdown Preview较常用的功能是preview in browser和Export HTML in Sublime Text,前者可以在浏览器看到预览效果,后者可将markdown保存为html文件。

输入Ctrl+Shift+P调出命令窗口:
ctrl+shift+p调出命令窗口
选择Preview in Browser就可以在浏览器中查看html效果,当然,也可以通过设置快捷键来快速预览:
在Sublime中,Preferences->Key Bindings - User,输入以下内容:
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"}}
现在就可以通过快捷键alt+m快速预览效果了。

设置语法高亮和mathjax支持

在Preferences -> Package Settings -> Markdown Preview -> Setting - User中添加如下参数:

1
2
3
4
5
6
7
8
9
10
11
{
/*
Enable or not mathjax support.
*/
"enable_mathjax": true,

/*
Enable or not highlight.js support for syntax highlighting.
*/
"enable_highlight": true
}

Markdown Editing插件介绍

Markdown Editing插件安装完成后,具体的介绍可以查看github项目说明MarkdownEditing或者在Sublim通过Preferences->Package Settings->Markdown Editing->README 查看。

这里挑选几个个人感觉不错的功能介绍一下:

快捷键

Mac Windows/Linux 描述
⌘⌥B ⌘⌥I Ctrl Shift B Ctrl Shift I 将选中或未选中的文字加粗或变为斜体,或反向操作
⌘^ 1...6 Ctrl 1...6 插入标题1 .. 标题6

code snippet

输入 “mdi + tab” 会自动插入下面的图片标记
![Alt text](/path/to/img.jpg "Optional title")

输入 “mdl + tab” 会自动生成下面的链接标记
[](link)

使用hexo在github构建自己的博客

发表于 2016-05-08   |   分类于 blog   |  

使用hexo在github构建自己的博客

之前提到过使用jekyll搭建博客,并且使用boostrap-jekyll模版,但因为boostrap-jekyll项目长期未更新,已经跟不上jekyll的进度,再加上是国外作者设计的模版,跟国内大部分常见的模版还是有不小区别。
无意间看到一个github的博客,感觉风格不错,然后查看了github上的项目源码,发现只有已经生成的静态文件,并无jekyll相关脚本。于是在博客园搜了一下:zzk.cnblogs.com 搜 jekyll,看到一篇将博客从jekyll迁移到了hexo,说是一个台湾小伙使用nodejs开发的,赶紧跑到官网上体验了一把,果然找到了跟之前看到的博客一样风格的模板,看了下文档感觉上手很方便,说明文档也有中英文支持。

搭建步骤

1. 安装好node和git,注册好github账号

具体操作此处省略,查看对应的官方网站即可

2. 安装hexo

执行: npm install -g hexo
比较耗时,常常安装了一半就卡住装不下去了,fq后就ok了…

3. 创建hexo文件夹

自己找一个喜欢的路径,创建hexo文件夹,我的是安装在 E:\hexo 下的.
cmd窗口切换到对应的目录下,然后执行: hexo init
也可以在 E:\hexo 下右键,选择git bash,在窗口中执行 hexo init
它就自动安装了需要的文件.

4.安装依赖:

继续执行: npm install
安装好了所有的依赖

5.完成本地安装:

继续在 E:\hexo 下执行: hexo generate
继续执行: hexo server或hexo server --watch
然后在打开浏览器 localhost:4000 ,就可以看到,本地已经安装好了.

部署:

  • 安装 hexo-deployer-git时,必须在目标目录下(如D:\github\hexo.kyleleeli.github.io)
    $ npm install hexo-deployer-git –save
  • 执行 hexo deploy时,需要使用 git bash,同样需要定位到目标目录下

参考:

  • 使用hexo搭建github.io博客(一)
  • 基于Hexo+GitHub Pages 免费搭建个人博客最强教程

使用jekyll在github构建自己的博客

发表于 2016-05-07   |   分类于 blog   |  

现在越来越多的人,主要是程序员喜欢在Github上写博客,一切都任由你左右,一个commit就能提交一篇文章,还有着无限流量免费的空间,想想就惬意不止。

进入正题,如何利用Github和Jekyll搭建一个博客:


1. 关于Github

  • 如何高效利用Github
  • git - 简明指南

免费托管到GitHub页面(Free hosting with GitHub Pages)

阅读官方指引

  1. 在GitHub创建自己的库,名字必须是 username.github.io,
    注意:username必须是在github上注册的名称,而不能随意命名,否则访问 http://username.github.io 时会报404错误。
  2. 通过命令行或GitHub Desktop Clone库到本地;
  3. 创建一个index.html页面,并提交到github服务器;
  4. 通过浏览器访问 http://username.github.io ,如果正常显示index.html内容,则表示已经成功。

2. 关于Jekyll

  • Jekyll中文指导手册

阅读官方指引
GitHub Pages为了提供对HTML内容的支持,选择了Jekyll作为模板系统,Jekyll是一个强大的静态模板系统,作为个人博客使用,基本上可以满足要求,也能保持管理的方便,你可以查看Jekyll官方文档。

安装Jekyll

  • 安装Ruby,如果是windows系统,使用RubyInstaller安装,下载地址:http://rubyinstaller.org/downloads/,
    安装时指定一个路径地址即可(安装时选择将ruby路径写入到环境变量PATH)。
  • 安装Bundler,运行命令: gem install bundler。
    如果命令无法识别,则a步骤没有将ruby路径添加到PATH中,另外在办公网,尽量使用Staff-Wifi
  • 切换到github本地库目录下,创建名称为 Gemfile 的文件,并将以下内容粘贴到文件内,保存。
    source 'https://rubygems.org'
    gem 'github-pages'
  • 下载Ruby DEVELOPMENT KIT(http://rubyinstaller.org/downloads/),安装说明参考(https://github.com/oneclick/rubyinstaller/wiki/Development-Kit)
    将文件提取到某个目录,如D:\env\devkit
    cd D:\env\devkit
    ruby dk.rb init
    编辑 config.yml, 最后面加入 - D:/env/Ruby22-x64
    ruby dk.rb review,校验
  • 回到github本地库目录下,运行 bundle install,等待安装。

运行Jekyll

在github本地库根目录下,运行命令:bundle exec jekyll serve,启动后访问 http://localhost:4000 查看页面效果

更新Jekyll为最新版本

在github本地库根目录下,直接运行命令 bundle update 即可

安装python,http://www.python.org/download/

安装 ‘Easy Install‘

下载 ez_setup.py 并保存,然后从python运行 python “目录/ez_setup.py”

开始使用

基本的Jekyll结构如下:

1
2
3
4
5
6
7
8
9
10
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

_config.yml

配置文件,用来定义你想要的效果,设置之后就不用关心了。

_includes

可以用来存放一些小的可复用的模块,方便通过{ % include file.ext %}(去掉前两个{中或者{与%中的空格,下同)灵活的调用。这条命令会调用_includes/file.ext文件。

layouts

这是模板文件存放的位置。模板需要通过YAML front matter来定义,后面会讲到,{ { content }}标记用来将数据插入到这些模板中来。

posts

你的动态内容,一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定,必须是2012-02-22-artical-title.MARKUP这样的形式,MARKUP是你所使用标记语言的文件后缀名,根据_config.yml中设定的链接规则,可以根据你的文件名灵活调整,文章的日期和标记语言后缀与文章的标题的独立的。

site

这个是Jekyll生成的最终的文档,不用去关心。最好把他放在你的.gitignore文件中忽略它。

YAML Front Matter和模板变量

对于使用YAML定义格式的文章,Jekyll会特别对待,他的格式要求比较严格,必须是这样的形式:

1
2
3
4
---
layout: post
title: Blogging Like a Hacker
---

前后的—不能省略,在这之间,你可以定一些你需要的变量,layout就是调用_layouts下面的某一个模板,他还有一些其他的变量可以使用:

  • permalink 你可以对某一篇文章使用通用设置之外的永久链接
  • published 可以单独设置某一篇文章是否需要发布
  • category 设置文章的分类
  • tags 设置文章的tag
    上面的title就是自定义的内容,你也可以设置其他的内容,在文章中可以通过{ { page.title }}这样的形式调用。

使用Jekyll-Bootstrap模板

  • 安装 Jekyll-Bootstrap

    1
    2
    3
    4
    git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
    cd USERNAME.github.com
    git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
    git push origin master
  • 本地运行Jekyll
    $ gem install jekyll
    $ cd USERNAME.github.com
    $ jekyll serve

  • 创建日志
    $ rake post title="Hello World"

  • 部署
    $ git add .
    $ git commit -m "Add new content"
    $ git push origin master

注意:Jekyll-boostrap模板已经很长时间没有更新,建议不要直接使用该模板,可以根据ruby语言,自己构建模板

3. 给Github项目创建Jekyll站点

  • 在github.com进入到指定的repository
  • 创建gh-pages 分支即可
    分支的名称必须为:gh-pages
kyle lee

kyle lee

专注.NET开发,对移动开发、Web前端开发兴趣浓厚

10 日志
1 分类
14 标签
© 2016 kyle lee
由 Hexo 强力驱动
主题 - NexT.Pisces