当前标签 / JavaScript / 总共23篇

Nodejs 框架 Koa 介绍和使用

对于 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” 和麻烦的错误处理问题,大受开发者欢迎。

阅读更多

JavaScript 面向对象

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

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

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

阅读更多

VueJs + Elements + Axios 我的书签页

概述

看了几天 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 来实现书签页。

阅读更多

VueJs学习随笔--插槽和异步组件

插槽

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

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

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

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

阅读更多

VueJs学习随笔--组件化

组件基础

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

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

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

阅读更多

VueJs学习随笔--第一个Vue工程

安装

第一步: 安装 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 

阅读更多

VueJs源码学习[2]--源码构建

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

本文转载自: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 的灵魂,也是我们之后需要重点分析的地方。

阅读更多

VueJs源码学习[1]--Flow类型检测

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

本文转载自: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,主要是因为 BabelESLint 都有对应的 Flow 插件以支持语法,可以完全沿用现有的构建配置,非常小成本的改动就可以拥有静态类型检查的能力。

阅读更多

立即执行函数和模块化

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

概述

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

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

匿名函数和表达式

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

//函数声明
function test(){  

}

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

}

//匿名函数
function(){

}

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

阅读更多

Ajax在jQuery中的使用

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();

阅读更多