javascript
关注
分享
扫一扫
文章平均质量分 85
原鑫@博客
目前工作于北京，担任前端开发，小菜鸟的进阶路程！！
展开
-
#项目: electron仿客户端QQ简易版
简单讲解electron的起源 — 学习 – 从入门到放弃！仿qq项目地址启动npm installnpm run dev进度：已完成 – 简易登录页，简易聊天页目的：学习electron的开发技术栈：electron + vue全家桶 + elementUi + frozenui学习参考文章：苏南大叔的博客–electron官网–electron-VUE官网e...原创 2019-07-18 10:03:33 · 2529 阅读 · 0 评论 -
vue diff算法 patch
1、diff比较算法图示：diff比较只会在同层级进行, 不会跨层级比较。代码示例<!-- 之前 --><div> <!-- 层级1 --> <p> <!-- 层级2 --> <b> aoy </b> <!-- 层级3 --&原创 2018-11-19 17:25:00 · 807 阅读 · 0 评论 -
vue双向数据绑定的实现
总所周知，侦测一个对象变化的方法，常用的两种是Object.defineProperty，和es6的proxy，下面就基于Object.defineProperty实现简单的双向绑定其实vue主要是通过Object.defineProperty实现的，至于vue3.0会不会重写就不得而知，这也是为什么对象的新增属性不好检测的原因！<!DOCTYPE html><html...原创 2018-11-22 12:00:24 · 802 阅读 · 0 评论 -
vuex常见用法
/** * vuex for VisPanel */import Vue from 'vue'import Vuex from 'vuex'import * as types from './type'import store from '@/store'Vue.use(Vuex);const state = { listLenght: '111'}const mut...原创 2018-11-16 12:41:00 · 206 阅读 · 0 评论 -
Token 的作用和原理
Token，就是令牌，最大的特点就是随机性，不可预测。一般黑客或软件无法猜测出来。那么，Token有什么作用？又是什么原理呢？Token一般用在两个地方:1)防止表单重复提交、2)anti csrf攻击（跨站点请求伪造）。一般的做法是请求接口的时候，获取最新的Token，然后在发送请求的时候，把Token传过去。一般是在全局的$ajax或者axios中封装抵挡csrf攻击的方法1)T...原创 2018-11-08 19:03:30 · 5999 阅读 · 0 评论 -
Javascript中的valueOf与toString
Javascript中的valueOf与toString基本上，javascript中所有数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍，有需要的朋友可以参考下。toString()toString()函数的作用是返回object的字符串表示，JavaScript中object默认的toStrin...原创 2018-11-13 23:26:14 · 355 阅读 · 0 评论 -
css设置文字不能被选中
通过简单的css设置页面的文字无法被选定。1.html:<div class="select">我不能被选中复制</div>2.css:.select{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none...原创 2018-11-13 15:37:37 · 303 阅读 · 0 评论 -
js深冻结
function deepFreeze (o) { var prop, propKey Object.freeze(o) // 首先冻结第一层对象 for (propKey in o) { prop = o[propKey] if (!o.hasOwnProperty(propKey) || !(typeof prop === "...原创 2018-11-05 20:25:36 · 729 阅读 · 0 评论 -
vue项目开发中使用mixins
mixins的使用个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改1.在assets文件夹下创建一个js文件// 创建一个需要混入的对象 export const mixinTest1 = { created() { this.hello(); }, methods: { he...原创 2018-11-10 13:38:58 · 1718 阅读 · 0 评论 -
原生ajax的封装
手写原生ajax ajax(url, data, method, success) { // 异步对象 let ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method == 'get') { /...原创 2018-11-07 15:29:09 · 228 阅读 · 0 评论 -
浅谈javascript的Event Loop(事件循环)
浅谈javascript的Event Loop(事件循环)无论是面试还是开发，我们总是有一些疑问你：什么疑问？如：不是说好了JavaScript是单线程么，处理的异步代码？为什么我写的一个ajax请求，但是却先执行的下面的console.log？再或者这样,面试官：小王啊，你知道什么是事件循环么？小王：emm…五分钟后…你这次表现的很优秀，但是和我们单位这个岗位有一些偏差，江湖再...原创 2018-11-09 11:52:51 · 405 阅读 · 0 评论 -
git 基于某个分支创建分支
1、拷贝源代码git clone git@git地址cd 项目目录2、根据已有分支创建新的分支git checkout -b yourbranchname origin/oldbranchname3、推送到gitgit push origin yourbranchname...原创 2018-11-19 19:10:15 · 12966 阅读 · 0 评论 -
JS懒加载
当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，试问谁会一直耐心的等待着页面的加载？另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。针对这种情况，就需要运用懒加载技术...原创 2018-12-02 16:00:23 · 814 阅读 · 0 评论 -
webpack4.0+版本练习
webpack安装确保安装 Node.js 的最新版本本地安装(对于大多数项目，官方建议本地安装。这可以使我们在引入破坏式变更的依赖时，更容易分别升级项目)最新的webpack版本是：// 要安装最新版本或特定版本，请运行以下命令之一：npm install --save-dev webpacknpm install --save-dev webpack@<vers...原创 2018-11-28 08:05:41 · 825 阅读 · 0 评论 -
Electron环境搭建
Electron 简介Electron是什么？Electron 是一款用于开发桌面应用的程序，适用于前端开发人员Electorn核心概念Electorn 是基于谷歌内核创建的一个开发工具，可以理解为是一个嵌套谷歌浏览器的盒子。所以，这一设置给前端开发人员带来了便利，也正是因为如此，Electorn分为主进程和渲染进程主进程和渲染进程简单理解渲染进程就是我们前端开发时候的前端...原创 2019-04-28 16:27:44 · 504 阅读 · 0 评论 -
HTML5原生拖拽/拖放 Drag & Drop实现一个拖拽交换组件
如果不是很了解h5拖拽api的一些特性，请移步->掘金大佬讲h5拖拽的一个帖子由于项目需求，需要实现一个拖拽组件，是一个基于html5实现的一个组件，h5的功能相对来讲已经比较完善了，因为还是在demo阶段，所以目前没有什么定制化功能，只是实现了交换功能目录结构：箭头为我们的组件demo代码：组件源代码<template> <div clas...原创 2019-04-17 11:19:25 · 2523 阅读 · 1 评论 -
react注册事件的时候，为什么要手动用bind改变this
import React, { Component } from 'react';class App extends Component { constructor() { super(); this.aa = 'aaaaa' this.state = { number: 0, xIsNext: true, }; this.ad...原创 2019-04-16 11:52:29 · 526 阅读 · 0 评论 -
vscode中eslint的校验
文中为vue中eslint的校验新版本的vscode和老版本的不同，采用的可视化界面教程：开始->首选项->设置，搜索eslint把代码复制过去，就OK了{ "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "...原创 2019-04-08 18:20:45 · 5037 阅读 · 0 评论 -
react 文档笔记
react学习1.构造函数中需要手动改变this方法 一：class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.hand...原创 2019-04-08 10:04:21 · 357 阅读 · 0 评论 -
深入浅出设计模式 - 创建型设计模式 - 1.简单工厂模式
引言：最近在学习设计模式，于是仔细研究了一下，决定整理成文章分享出来，对于没有设计模式的小白，再合适不过了，看招吧！盗个图片~ ~ ~~什么是设计模式：我理解的设计模式，就是一种编程的风格和规范，这个概念最早是出现在建筑学中，认为设计风格是一种美学，那我们就把设计模式，当成是编程的美学吧！设计模式分类:创建型设计模式结构型设计模式行为型设计模式技巧型设计模式结构型设计...原创 2019-04-11 14:25:11 · 182 阅读 · 0 评论 -
git记住密码
git记住密码git config --global credential.helper store即使记住密码了，但是第一次还会让你输入一次密码，后续就好了原创 2019-03-28 18:41:43 · 236 阅读 · 0 评论 -
Yeoman安装和使用详解
Yeoman安装和使用详解转自：https://www.cnblogs.com/weixing/p/6305837.htmlYeomangenerator-react-webpack一 什么是Yeoman Yeoman帮助我们创建项目，提供更好的工具来使我们的项目更多样化。Yeoman提供generator系统，一个generator是一个插件，在我们在一个完整的项目上使用‘yo’命...原创 2019-03-18 15:54:09 · 5181 阅读 · 0 评论 -
Tree-Shaking
https://juejin.im/post/5a4dc842518825698e7279a9转载 2019-03-18 15:33:33 · 2091 阅读 · 0 评论 -
JavaScript arguments对象
在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。arguments非常类似Array，但实际上又不是一个Array实例。可以通过如下代码得以证实（当然，实际上，在函数funcArg中，调用arguments是不必要写成funcArg.arguments，直接写arguments即可）。 Array.prototype.testArg = ...原创 2019-01-23 17:15:09 · 156 阅读 · 0 评论 -
javascript 怎么把值转换为Boolean类型
Boolean（表达式）!!（表达式）原创 2018-11-06 19:20:59 · 1241 阅读 · 0 评论 -
javascrip的this指向问题
javascrip的this指向问题总结，永远记住。this指向父级的对象，除了父级的对象什么影响不了（call，apply除外），什么块级作用域，函数作用域，统统没用，只有调用的对象能影响！只有调用的对象能影响！只有调用的对象能影响！ 在非严格模式。foo（）等于window.foo(),严格模式报错！this永远指向调用它的那个对象，如果是window则this指向window '...原创 2018-11-06 19:18:56 · 225 阅读 · 0 评论 -
js的new操作符做了哪些事情
js的new操作符做了哪些事情new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。原创 2018-09-28 14:43:59 · 2299 阅读 · 0 评论 -
es6之数组的扩展
es6之数组的扩展文章目录es6之数组的扩展1.扩展运算符1.扩展运算符...[1,2,3] // 可以变为参数序列。// ES5的 写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];Array.prototype.push.apply(arr1, arr2);// ES6 的写法let arr1 = [0, 1, 2];let arr2...原创 2018-10-03 12:48:47 · 141 阅读 · 0 评论 -
generator生成器
generator生成器函数末尾如果没有return，就是隐含的return undefined; let fbnq = (max)=>{ // 手写斐波那契数列 let a = 0 ; let b = 1; let c; let arr = [0,1] ...原创 2018-09-19 11:28:30 · 1052 阅读 · 0 评论 -
vue之watch的踩坑
vue之watch的踩坑watch中箭头函数和function的区别在上述代码中，当watch中allobj是箭头函数时，访问不到data中的this.allobj，但是参数val是有值的，普通函数function可以访问到外部的值，也就是说：vue的watch中，最好使用function，箭头函数有局限性。访问不到外部的data！...原创 2018-09-18 11:48:04 · 2067 阅读 · 0 评论 -
es6之数值的扩展
es6之数值的扩展es6之数值的扩展1.二进制和八进制2.Number.isFinite()和Number.isNaN()方法3.Number.parseInt()，Number.parseFloat()方法4.Number.isInteger()方法5.Number.EPSILON6.安全整数和Number.isSafeInteger()7.math 对象的扩展8.指数...原创 2018-09-10 19:05:55 · 388 阅读 · 0 评论 -
vue的Vue.set方法的使用
vue的Vue.set方法的使用vue为了更加简洁，当data的数据是数组或者对象时，动态的添加或删除，视图将不会更新其实有些时候，当我们想动态的给data中的属性设置默认值的时候也需要用Vue.set如图所示，想通过created给设置默认值，但是默认值可以设置成功，v-model的动态效果将会失去，这时候需要用Vue.set方法当然了，上面也相当于给data中的数据添加...原创 2018-09-17 23:50:24 · 33847 阅读 · 5 评论 -
vue动画之轮播图
<template> <div class="lunbo"> <transition-group tag="ul" name="image"> <li :key="0" v-show="lunboIndex === 0"><img src原创 2018-09-17 01:28:02 · 2705 阅读 · 0 评论 -
es6之函数的扩展
es6之函数的扩展es6之函数的扩展1.函数参数的默认值1.1基本用法1.2与解构赋值默认值结合使用开始啦！！！ 1.函数参数的默认值1.1基本用法 可以在参数中通过等号=设置默认值 let fun1 = (x = 5) =&amp;amp;amp;amp;amp;gt; { return x; } console.log(fun1原创 2018-09-11 16:34:05 · 159 阅读 · 0 评论 -
vue的slot组件的入门
slot组件的入门原创 2018-08-30 00:46:14 · 2858 阅读 · 0 评论 -
javascript的纯函数
javascript纯函数javascript纯函数1.什么是纯函数？2.例子 :1.什么是纯函数？ 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。用人类的话讲，纯函数的特性： 1.调用这个函数，只要我参数不变，这个函数的值始终不改变。 2.数值，对象使用这个函数，使用前后，自身的值不会发生变化，这...原创 2018-08-31 00:10:53 · 798 阅读 · 1 评论 -
执行instanceof的时候发生了什么，以及局限性！
执行instanceof的时候发生了什么! console.log('**********1') console.log([] instanceof Object) let a = [] console.log(a instanceof Array) Array = { [Symbol.hasInsta...原创 2018-09-28 15:49:05 · 569 阅读 · 0 评论 -
观察者模式
观察者模式 const queuedObservers = new Set(); const observe = fn => queuedObservers.add(fn); const observable = obj => new Proxy(obj, { set }); function set(target, key, va...原创 2018-10-08 15:02:05 · 194 阅读 · 0 评论 -
你不知道的JavaScript!
你不知道的JavaScriptfunction(){ var a = 0; var b = 0;}1.数运行时候，a,b都存在哪？函数运行时，会创建一个执行环境，叫执行上下文，会创建一个变量对象的特殊对象，变量对象也存在堆内存中，由于有特殊职能，仍然要和堆内存区分开、Javascript的回收机制Javascript的回收机制主要是采取"引用的方法“,当一块空间的数据能够被...原创 2018-10-18 19:25:04 · 162 阅读 · 0 评论 -
vue-cli中如何引入less
安装less依赖，npm install less less-loader --save第二步：进入到build的webpack.base.conf.js加入如下代码 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },然后<style lan...原创 2018-11-06 17:10:16 · 2524 阅读 · 0 评论