zhutfly的博客

原创 Vue中自定义组件使用v-model

自定义组件中使用v-modelv-model是vue提供的语法糖，默认使用名为value的prop以及名为input中的事件实现数据双向绑定。一、使用props和input实现自定义组件的v-model父组件:<!-- template --><child v-model="myData"></child>// scriptdata() {...

原创 vue的整个实现流程

vue实现流程有以下4个步骤解析模板（本质是字符串）成render函数响应式开始监听首次显然，显示页面，绑定依赖data属性变化，触发rerender1. 解析模板成render函数模板如下：解析成render函数（源码中使用code.render）格式化后如下：this为vue实例,_c为实例的函数，对应createElement,返回VNode收缩后如下...

原创 JavaScript中new操作符经历了什么 --- 摘自红宝书

function Person(name, age) { this.name = name; this.age = age;}创建一个对象的新实例，必须使用new运算符，调用构造函数经历4个步骤创建一个新对象将构造函数的作用域赋给新对象（因此this指向了这个新对象）执行构造函数中的代码（为这个对象添加属性）返回新对象...

原创 JavaScript中的原型应用

JavaScript中的原型应用JQuery中的原型应用// 使用var $div = $("div")// JQuery源码中的实现(function(window){ var jquery = function(seletor) { // 构造函数 return new jquery.fn.init(seletor); }; //...

原创 mustache使用正则表达式实现

mustache使用正则表达式实现// this is {{name}} object; obj = { name: '123' }function render(template, data) { const reg = /\{\{(\w+)\}\}/g; if (!reg.test(template)) { return template; } const res...

原创 Vue依赖注入

当子组件访问父组件的方法或者属性时，通常可以使用this.$parent,当存在多级组件时，这种方式显得力不从心。依赖注入在父组件中定义例如：provide() { return { getMap: this.getMap } },在子组件中定义例如： inject: ['getMap'], methods: { ha...

原创 Node统计各个文件夹中的文件

const fs = require('fs');const path = require('path');const htmlList = [];const cssList = [];const jsList = [];function getFiles(dir) { const folders = fs.readdirSync(dir); folders.forEa...

原创 Vue源码 --- 二维数组转换成一维数组

Vue源码中用到的二维数组 -> 一维数组function normalizeArr(children) { for(let i = 0; i< children.length; i++) { if(Array.isArray(children[i])) { return Array.prototype.concat.apply([], children)...

原创 Vue源码解析，用this可以访问data属性的原因

new Vue({ el: '#app', data: { message: 'this is message'; }})在编写代码中可以通过this.message访问到message的值，这不是魔法，直接上源码。在state.js的initData中，有如下代码function initData(vm: Component) { let data = vm.$option...

原创 使用commander构建CI工具

最近在构建一个CI的工具，第一个时间想到了webpack，下面就如何构建一个CI工具进行详细介绍0.准备工作命令行工具 命令行工具使用的是commander，关于commander的介绍，可以移步commander的github地址打包工具 webpack是目前主流的前端打包工具（姑且这么说），关于webpack的配置，可以移步webpack官网。...

原创 函数节流和防抖简单实现

原创 JavaScript语言精粹读书笔记

JavaScript运算符优先级 运算符的优先级，依次降低 运算符 含义 . &nbsp;[]&nbsp; () 提取属性与调用函数 delete new typeof + - ! 一元运算符 * &nbsp;/&nbsp; % 乘法、除法、求余 +&nbsp;- 加法/连接、减法 &gt;=&nbsp; &lt;...

原创 ES6中的async/await函数

async被称为终极的异步解决方案，避免了回调地狱，用同步的写法处理异步操作async和Generatorasync是Generator的语法糖，两者写法非常相似；Generator代码实例：function* gen(){ //声明一个Generator函数 yield '1' yield '2' yield '3'}let g = gen() /...

原创 ES6中的promise浅析

Promise基本概念 Promise 意为承诺，表示将来一定会发生的事情，是一种异步编程解决方案，最早由社区提出和实现； Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）；只能从pending变为fulfilled或者从pending变为rejected，且一旦状态发生改变，就不会再发生变化。Promise基本用...

原创 node中的http模块浅析

http模块是node中的核心成员之一，是客户端与服务端交互的基础。http模块不仅可以以极简的方式构建一个服务，还可以发起一个请求；来个简单的栗子：const http = require('http'); //引入http模块http.createServer((req, res) =&gt; { //创建一个Server对象，与new Server()功能相同 res....

原创 浅析日历控件的实现

浅析日历控件的实现 日历控件是在开发中常用的控件之一，在没有定制需求的情况下，使用第三方足以解决问题，那么就不需要自己开发；目前一个项目需要个性化定制，因此就梳理下开发一个日历控件的核心部分；日历数据的生成 日历数据包含3部分，上个月的数据、本月的数据以及下个月的数据，主要运用Date的API进行计算；几个关键点 定义数据结构存储日历数据：var list =...

原创 Express框架使用

Express简介 Express是一款基于Node.js平台的、极简的web开发框架，其核心是中间件。自动化构建一个Express应用程序 使用Express 应用生成器可以快速创建一个应用的骨架，前提是首先安装express-generator： npm install express-generator -g 安装依赖包： cd myapp ...

原创 跨站资源共享（CORS）

跨域http请求 当两个站点的协议（http、https、ftp）、域名、端口不同时，该两个站点构成跨域。出于安全原因， 浏览器会限制脚本发起跨域http请求（也有可能是正常发送，但是拦截返回值）。实际项目中常用的解决跨域的方法通常有JSONP、CORS等。使用CORS跨域 JSONP跨域比较简单，不需要服务器端配合，但是只能发送GET请求；CORS是目前使用最为广泛的跨...

原创 webApp优化心得

webapp性能优化 本文中提到的app前端采用的技术栈是Vue全家桶+原生jshttp请求优化：场景1： 当用户操作过快时，页面之间跳转时间缩短，在网络状态不可控的情况下，有可能造成在B页面中提示A页面的消息。 优化方案：在跳转页面的时候，对现有的且已经不需要的ajax请求进行abort操作；详细步骤如下： 1. 全局存储ajax：每次发送ajax请求时，返回一个x...

原创 JavaScript简单实现发布订阅模式

发布订阅模式主要涉及三个对象：发布者、订阅者、主题对象。function Dep(){ //主题对象 this.subs = []; //订阅者列表}Dep.prototype.notify = function(){ //主题对象通知订阅者 this.subs.forEach(function(sub){ //遍历所有的订阅者，执行订阅者提供的更新方法 su...

原创 vue中使用滚动到列表底部

vue中列表滚动到底部 使用原生js，通过div.scrollTop = div.scrollHeight;实现滚动到底部在vue中，可以使用不同的方式： 监听列表数据：当list发生变化时，执行滚动到底部的逻辑watch:{ list(val){ //执行滚动到底部的逻辑 this.$nextTick(() =&gt; { //必须...

原创 JavaScript实现事件原型

function Emitter(){ this._listener=[];}//绑定事件Emitter.prototype.bind=function(eventName,callback){ var listener=this._listener[eventName]||[] listener.push(callback); this._listener[...

原创 JavaScript中String类型的方法

String类型是字符串的包装类型，可以通过构造函数new String('abc')的方式来创建，也可以var str=’abc’字面量的方式创建。 所有的字符串值都可以访问String对象的方法valueOf()、toString()、toLocaleString()都返回对象所表示的基本字符串的值，length表示包含的字符数 String类型提供的方法有：...

原创 Vue源码阅读分享---工具函数

Vue是优秀的前端MVVM框架，阅读源码对于理解框架以及提高js编程水平有极大的帮助，所以把自己阅读的源码分享给大家！ 判断一个值是不是为空function isUndef (v) { return v === undefined || v === null} 判断一个值是不是不为空function isDef (v) { return v !== u...

原创 JavaScript中的基本数据类型

基本类型值：简单的数据段 引用类型值：多个值构成的对象 JavaScript中有5种基本数据类型，Undefined、Null、String、Number、Boolean、Symbol(ES6新增)在复制变量值的操作中：对于基本类型的值，例如var num1=5; var num2=num1通过这种方式将num1赋值给num2，num1与num2是完全独立的。对于引用类型值，例如v...

原创 JavaScript的操作数组的函数

改变原数组的函数（共7个） push:栈方法，在数组的尾部增加一个元素，返回值是新数组的长度 pop:栈方法，在数组的尾部删除一个元素，返回值是被删除的元素 unshift:队列方法，在数组的头部增加一个或多个元素，返回值是新数组的长度 shift:队列方法，在数组的头部删除一个元素，返回值为被删除的元素 reverse:重排序方法，颠倒数组的顺序 sort:...