Justified Gallery 是一个方便你创建瀑布流照片的 JavaScript 库，它可以帮助你优雅的排列图片显示，使用它的网站有 500px、Flickr 和 Google.

官网地址：https://miromannino.github.io/Justified-Gallery/

如何使用

下载地址：https://github.com/miromannino/Justified-Gallery/releases

这个库使用的前提是引入 jQuery 如果你的浏览器不是旧的很离谱它都可以很好的工作。

1
2

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

阅读更多

笔记2：面向对象部分

这是阅读《JavaScript 高级程序设计》书籍的学习笔记，整理和归纳，方便自己今后复习和查阅，这里总结的基本上都是一些比较特殊的知识点，和 Java 等其他高级语言重复的地方不在归纳范围内。建议先阅读第一部分 非面向对象部分。此部分主要是理解 JavaScript 中的面向对象的实现思路以及如何实现继承。

理解对象

ECMAScript 中有两种属性：数据属性和访问器属性。

数据属性

数据属性有 4 个描述其行为的特征。

[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Enumerable]]：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined.

1
2
3

var person = {
    name : "XiaoMing"
}

阅读更多

笔记1：非面向对象部分

这是阅读 《JavaScript 高级程序设计》 书籍的学习笔记，整理和归纳，方便自己今后复习和查阅，这里总结的基本上都是一些比较特殊的知识点，和 Java 等其他 高级语言 重复的地方不在归纳范围内。第一部分是基础部分（即非面向对象部分），基本上是围绕变量和函数展开的。

分号

ECMAScript 中的语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾，如下例所示：

1
2

var sum = a + b                 // 即使没有分号也是有效的语句——不推荐 
var diff = a - b;               // 有效的语句——推荐

推荐使用封号

变量

ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var 操作符（注意var是一个关键字），后跟变量名（即一个标识符），如下所示：

1

var message;

此时变量 message 会保存一个特殊的值 undefined， 定义变量的时候可以赋予初始值：

1
2

var message = "hi";
message = 100;   //有效，不推荐

虽然支持松散类型，但是不推荐给变量设置不同类型的值

阅读更多

webpack 是什么

webpack 是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含 less / sass）、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其他都是细枝末节了。

安装 webpack

前提，你的电脑需要安装 node 和 npm.

使用 npm install webpack 安装 webpack.

入门示例

我们创建两个 js 文件：

src/bar.js

1
2
3

export default function bar() {
  //
}

src/index.js

1
2
3

import bar from './bar';

bar();

阅读更多

对于 Nodejs 框架和开源软件来说，2018 年是非常有趣的一年。开发者社区讨论了企业赞助对开源项目的作用以及如何维护那些没有经济支持却有数百万人使用的项目。在 Github 星标数量方面，Sails、Koa 和 Express 明显高于其他框架。

Nodejs 框架的 Github star 数量统计

不得不说，Express 和 Koa 是 Nodejs 目前炙手可热的2大框架。

Express 诞生已有时日， 是一个基于 Nodejs 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能，使用人数众多。

Koa 相对更为年轻， 是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题，大受开发者欢迎。

阅读更多

本书籍是针对 Java 开发人员提供的入门 JavaScript 面向对象，本系列处于未完结状态，还在持续更新中。

作者在写作和整理过程中花费了大量时间和精力，另外服务器费用也是一笔不小的开支，如果你觉得我的文章和书籍对你有所帮助，可以请我喝杯咖啡或者农夫山泉：

如果在阅读过程中有任何疑问，可以去作者博客对应页面留言， 你也可以从我的体系树中找到对应文章。

阅读更多

概述

看了几天 Vue 文档了，今天应该实践一下了，做一个个人书签页面，记录自己的常用书签。

书签页构思草图

创建工程

1

vue install webpack "hellovue"

启动预览

1

npm run dev

值得注意的是 npm run dev 实际上执行的是 package.json 中的 script 脚本的如下命令：

1

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

也许你已经猜到了， 这个 webpack.dev.conf.js 文件是配置开发过程中的webpack构建文件。

接下来我们就开始修改 HelloWorld.vue 来实现书签页。

阅读更多

插槽

Vue 中提供插槽来让你替换组件中的部分内容, 例如你定义了一个组件 <navigation-link> :

1
2
3

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

这里的 <slot> 就是可以替换的内容部分，如果你这样使用：

1
2
3

<navigation-link url="/profile">
  Your Profile
</navigation-link>

阅读更多

组件基础

组件是可复用的 Vue 实例， 每个组件都有一个名字，我们可以直接使用名字来引入一个组件。

定义一个名为 button-counter 的新组件:

1
2
3
4
5
6
7
8

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

阅读更多

安装

第一步： 安装 nodejs 环境。

第二步： 配置淘宝 npm 镜像。

1

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

这样就可以使用cnpm 命令来安装模块了。

安装 vue-cli

1

npm install vue-cli -g 

查看vue-cli是否成功，不能检查vue-cli, 需要检查vue:

1

vue -V 

阅读更多

绑定 style 样式

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

1
2
3

.active{
    color: red;
}

1
2
3

<div id="app">
    <div v-bind:class="{ active: isActive }">我不一定是红色的DIV</div>
</div>

1
2
3
4
5
6

new Vue({
    el: '#app',
    data: {
        isActive: true
    }
})

我不一定是红色的DIV

阅读更多

开始

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

1
2
3
4

<div id="app">
    <p>{{ foo }}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
</div>

1
2
3
4
5
6
7
8
9

<script>
    var obj = {
        foo: 'bar'
    }
    new Vue({
        el: '#app',
        data: obj
    })
</script>

阅读更多