VueJS-组件通信

前端在处理交互时,经常会遇到一个问题:组件之间如何通信?
下面介绍几种常用的组件通信方式,包括父子组件,兄弟组件,复杂组件下的不同通信方式

  1. 现代通信方式: FLUX VUEX

    FLUX将一个应用分成四个部分:文档

阅读更多

前端工具-webpack

不多说吧,先贴一份完整的webpack配置文件,如果有问题可以加群讨论微博私信

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
vendor: ['moment', 'lodash']
},
output: {
path: path.resolve(__dirname, './assets'),
filename: '[name].[hash:8].js'
},
module: {
loaders: [
{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /\.css$/, loader: "ExtractTextPlugin.extract('css') : 'style!css';"}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new ExtractTextPlugin("styles.css"),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true
},
comments: false
})
]
};

阅读更多

事件循环

参考:http://blog.csdn.net/alex8046/article/details/51914205
消息队列:是一个先进先出的队列,它里面存放着各种消息。(消息就是注册异步任务时添加的回调函数。)
事件循环:事件循环是指主线程重复从消息队列中取消息、执行的过程。

阅读更多

异步模型

异步模型:

  1. 同步模型:遇到网络IO等耗时较长的操作时,进程会一直等待,导致CPU空闲,整个系统资源被浪费
  2. 多线程模型:在上述情况下,可能会同时等待多个IO请求,导致系统资源被严重浪费
  3. 异步模型:主线程会正常执行同步代码,遇到异步任务时交给工作线程,等异步任务执行完成,工作线程通知主线程,主线程后触发callback

阅读更多

前端工具-NPM

npm(node package manage),node包管理工具

官方文档:https://docs.npmjs.com/

阅读更多

Promise

Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口。:阮老师博客

阅读更多

模块化-AMD-CMD-CommonJS

JS模块系统:AMD,CMD,CommonJS规范

同步策略:

CommonJS

    阅读更多

    设计模式-发布订阅模式

    前端事件的发布订阅模式十分普遍,
    包括原生的addEventListener,dispatchEvent,或者angular vuejs中的emit on都属于发布订阅模式
    下面我将简单的实现一下订阅发布模式,更多的设计模式可以再我的github design-magic项目中看到

    阅读更多

    设计模式-DI依赖注入

    在绝大多数后端框架,以及前端的angular框架中都有实现依赖注入
    下面我将简单的实现一下依赖注入模式,更多的设计模式可以再我的github design-magic项目中看到

    阅读更多

    数组

    虽然在 JavaScript 中数组是是对象,但是没有好的理由去使用 for in 循环 遍历数组。
    相反,有一些好的理由不去使用 for in 遍历数组。

    注意: JavaScript 中数组不是 关联数组。 JavaScript 中只有对象 来管理键值的对应关系。但是关联数组是保持顺序的,而对象不是。
    由于 for in 循环会枚举原型链上的所有属性,唯一过滤这些属性的方式是使用 hasOwnProperty 函数, 因此会比普通的 for 循环慢上好多倍。

    阅读更多