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

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

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

阅读更多

概述

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

创建工程

vue install webpack "hellovue"

启动预览

npm run dev

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

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

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

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

阅读更多

插槽

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

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

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

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

阅读更多

组件基础

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

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

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

阅读更多

安装

第一步： 安装 nodejs 环境。

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

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

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

安装 vue-cli

npm install vue-cli -g 

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

vue -V 

阅读更多

绑定 style 样式

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

.active{
    color: red;
}

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

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

我不一定是红色的DIV

阅读更多

开始

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

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

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

阅读更多

特别说明：本文是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

目录结构

Vue.js 的源码都在 src 目录下，其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

core

core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。

阅读更多

特别说明：本问是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。

为什么用 Flow

JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。之所以选择 Flow，主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。

阅读更多

参考文档：《深入理解js立即执行函数》

概述

很多时候我们需要创建一个私有的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可，如jQuery代码结构:

(function(window, undefined){ 
    //jquery code
})(window);

匿名函数和表达式

在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式：

//函数声明
function test(){  

}

//函数表达式
var test = function(){

}

//匿名函数
function(){

}

上面只有函数表达式是立即执行的。

阅读更多

Ajax全称为“Asynchronous JavaScript and XML” （异步JavaScript和XML）,它可以使浏览器不刷新而更新页面数据。Ajax的优势：

1. 不需要插件支持。
2. 优秀的用户体验。
3. 提供Web程序的性能。
4. 减轻服务器和宽带负担。

Ajax过程

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            console.log(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            console.log(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

request.open('GET', '/api/categories');
request.send();

阅读更多

全局对象

我们知道在对象方法内部可以使用this来表示对象本身。

var hero = {
    name:'Rafaelo',
    sayName:function(){
        return this.name;
    }
}

>>> hero.sayName();
>>> "Rafaelo"

接下来我们通过构造器函数来创建对象

function Hero(){
    this.occupation = 'Ninja';
}

>>> var hero = new Hero();
>>> hero.occupation;
>>> "Ninja"

我们可以看出构造器的函数来创建对象有两个比较好的特点： 1. 可以在创建对象的时候传参数。 2. 在使用的时候才真正创建和执行。

阅读更多

上一篇对继承进行了大量说明，回到我们的问题上，剩下的几个问题我们接下来看看

1. 在JavaScript中，有接口吗？
2. 在JavaScript中，如何使用函数这种特殊的对象？
3. 在JavaScript中，闭包是什么？
4. 在JavaScript中，有哪些奇技淫巧是Java所没有的？

JavaScript接口

在经典的 Java 面向对象语言中，可以用关键字 interface 来定义接口，用 implement 来实现接口，而 JavaScript 虽然也是面向对象语言，但是它并没有内置这些，不过由于 JavaScript 的灵活性，我们可以通过模拟来实现，方法是使用一个辅助类和辅助函数来协助完成这一过程。

阅读更多

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。那么，如果我们要把”属性”（property）和”方法”（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

作为多年使用Java的我，首先开始思考如下问题：

1. 在JavaScript中，类如何定义，如何创建对象？
2. 在JavaScript中，基本类型有对应的对象形式吗？
3. 在JavaScript中，数组和函数是对象吗？
4. 在JavaScript中，有继承和接口吗？
5. 在JavaScript中，如何使用函数这种特殊的对象？
6. 在JavaScript中，闭包是什么？
7. 在JavaScript中，有哪些奇技淫巧是Java所没有的？

类和对象

在JavaScript中，类的定义只是一个Map键值对，没有其他。

var person = {
    name : "xiaohong",
    age  : 18
}

那么JavaScript中的类中没有方法吗？有！但是也是键值对。

var person = {
    name : "xiaohong",
    age : 18,
    eat : function(){
        alert("i like eat meat");
    }
}

阅读更多

Demo演示

布局

<div class="all" id="all">
    <div class="screen">
        <ul id="ul">
            <li><img src="images/banner1.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner2.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner3.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner4.png" alt="" width="800" height="500"></li>
        </ul>
    </div>
</div>

阅读更多