Ray
## Vue组件系统简析 Vue version: 2.5.16 `Vue`的组件系统是`Vue`最为核心的功能之一。它也是构建大型的复杂的web应用的基础能力。接下来就通过这篇文章去分析下`Vue`组件系统是如何工作的。这篇文章主要是讲组件系统的渲染。 ### 组件注册 在组件的注册使用过程当中，有2种使用方式： * 全局组件 ```javascript Vue.component('component-name', { // options }) ``` 通过全局方式注册的组件，可在模板根实例下使用。 * 局部组件 ```javascript var Parent = { template: 'A custom component!',...
## 父子组件通讯 在`Vue`中，父子组件基本的通讯方式就是父组件通过`props`属性将数据传递给子组件，这种数据的流向是单向的，当父`props`属性发生了改变，子组件所接收到的对应的属性值也会发生改变，但是反过来却不是这样的。子组件通过`event`自定义事件的触发来通知父组件自身内部所发生的变化。 ### Vue props 是如何传递以及父 props 更新如何使得子模板视图更新 还是从一个实例出发： ```javascript // 模板 // js Vue.component('child-component', { props: ['message'] template: 'this is child component, I have {{message}}', }) new Vue({...
## Vue数据更新异常处理机制 Vue 数据根据异常处理机制主要是聊下关于 Vue 对于 Object 类型的响应式数据添加属性，以及对于 Array 类型数据变更的监测。由于Vue 是使用 Object.defineProperty 来做数据劫持，当被劫持的 key 所对应的 value 为基本类型时，那么每次对这个 key 的 value 做修改的时候，都会调用这个 key 所定义的 setter 函数，这样也就能触发相关的订阅者的更新。但是如果 key 所对应的 value 为引用类型，例如 plain...
# [email protected] 插件系统简析 [email protected] 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架，[email protected] 采用了一套基于插件的架构，它将部分核心功能收敛至 CLI 内部，同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置。接下来我们就通过 [email protected] 的源码来看下这套插件架构是如何设计的。 整个插件系统当中包含2个重要的组成部分： * @vue/cli，提供 cli 命令服务，例如`vue create`创建一个新的项目； * @vue/cli-service，提供了本地开发构建服务。 ## @vue/cli-service 当你使用 `vue...
## Require源码粗读 最近一直在用`node.js`写一些相关的工具，对于`node.js`的模块如何去加载，以及所遵循的模块加载规范的具体细节又是如何并不是了解。这篇文件也是看过`node.js`源码及部分文章总结而来： 在`es2015`标准以前，`js`并没有成熟的模块系统的规范。`Node.js`为了弥补这样一个缺陷，采用了`CommonJS`规范中所定义的[**模块规范**](http://wiki.commonjs.org/wiki/Modules/1.1.1)，它包括： 1.require `require`是一个函数，它接收一个模块的标识符，用以引用其他模块暴露出来的`API`。 2.module context `module context`规定了一个模块当中，存在一个require变量，它遵从上面对于这个`require`函数的定义，一个`exports`对象，模块如果需要向外暴露API，即在一个`exports`的对象上添加属性。以及一个`module object`。 3.module Identifiers `module Identifiers`定义了`require`函数所接受的参数规则，比如说必须是小驼峰命名的字符串，可以没有文件后缀名，`.`或者`..`表明文件路径是相对路径等等。 具体关于`commonJS`中定义的`module`规范，可以参见[wiki文档](http://wiki.commonjs.org/wiki/Modules/1.1.1) 在我们的`node.js`程序当中，我们使用`require`这个**看起来是全局**(后面会解释为什么看起来是全局的)的方法去加载其他模块。 ```javascript const util = require('./util') ``` 首先我们来看下关于这个方法，`node.js`内部是如何定义的： ```javascript Module.prototype.require = function () {...
## Node.js几种创建子进程方法 * exec 其中`exec`可用于在指定的`shell`当中执行命令。不同参数间使用空格隔开，可用于复杂的命令。 ```javascript const { exec } = require('child_process') exec('cat *.js bad_file | wc -l') ``` `exec`方法用于异步创建一个新的子进程，可以接受一个`callback`。 ```javascript exec('cat *.js bad_file | wc -l', (err, stdout, stderr)...
## Lie源码解读 这篇文章是通过`lie.js`的源码一起去了解下如何实现`Promise`相关的规范。 首先是`Promise`的核心的构造函数的实现。 ```javascript function INTERNAL() {} var REJECTED = ['REJECTED']; var FULFILLED = ['FULFILLED']; var PENDING = ['PENDING']; var handlers = {} function Promise (resolver) { if (typeof...
In my project, I use requirejs to load my modules. But when I used oclazyLoad.js to load 'controllers', it will get the error 'controller get undefined', I used oclazyLoad.require.js to...
1. 新增 `@mpxjs/template-engine` 模板引擎，用以驱动在编译阶段收集的基础节点； 2. 优化 `template/compiler` 生成 `vdom tree` 逻辑，运行时组件嗅探逻辑等一系列问题；
除了抓取title和href属性后抓取author时只能抓取一部分的author. 没整明白是什么原因。 app.get("/",function(req,res,next){ superagent.get("https://cnodejs.org/") .end(function(err,sres){ //常规的错误请求 if(err){ console.log(err.message); return res.redirect("/"); } var $=cheerio.load(sres.text); var item=[]; $("#topic_list .topic_title").each(function(idx,element){ var $element=$(element); var href=$element.attr("href"); item.push({ title:$element.attr("title"), href:$element.attr("href") }); superagent.get("https://cnodejs.org"+href).end(function(err,ssres){ var $$=cheerio.load(ssres.text); item[idx].author=$$("div.changes").find("span:nth-child(2) a").text();...