SHiny-Jun-CSDN博客

原创运用react插槽，自定义Madal插件

手摸手写一个Modal插件首先封装一个组件modal,其中各个参数的作用在上面都进行了解析主角组件modal.jsimport { Fragment, Component } from 'react';import c from './index.less';/* * @visible {Boolean} 是否展示 * @closeName {String} 取消键...

2020-01-08 17:34:31 316

原创【翻页计时器动画】手摸手写一个时间翻页计时器animation动画，基于js、css、vue

项目需要写了一个翻页的计时器，项目基于vue，里面内容涉及组件知识，样式如下图：本组件分成两个组件，一个是单独的一个反转的数字，另一个是把这个翻页组成一个计时器。先分析单独翻转的数据动画：（先抛代码）countTurn.vue<template> <div id="stage-1" class="stage stage-state-default"&...

2019-09-06 14:34:16 1101

原创 Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题

最近公司在做项目的时候需要用到横向瀑布流布局，在实现的过程中还遇到了object-fit兼容性问题，这里记录一下整个过程，想直接复制代码可以直接滚到底部。在此先上个效果图：（希望不要吐槽里面的小哥哥）下面正题：用的框架是vue，v-for一下：<section> // v-for就是根据imagesList数组去循环下面这个div部分。 <div c...

2018-11-08 14:56:30 11414 4

原创轻量应用服务器，基于LAMP+CentOS(Linux)，前端小白服务器部署+网络部署全过程

过程很详细，希望对一些迷茫的同学有帮助，耐心读完就可以用自己的电脑操作服务器了。一、介绍环境1.首先进入操控台找到轻量应用服务器（若找不到可以在下方）产品与服务里面搜。2.进入轻量应用服务器，找到重置系统，应用镜像选择LAMP，系统镜像选择CentOS，点击确认更换3.在远程管理里面可以查看到你的IP地址和账号，并设置密码,假设此密码是密码A（下面还有地方需要用到密码）...

2018-08-04 00:23:02 3249

原创 vue用命令直接修复ESLint

步骤如下：1、打开package.json，在script里找到修改为：（中间插入--fix）"lint": "eslint --fix --ext .js,.vue src test/unit"， 2、终端运行npm run lint修改代码样式3、最后终端运行npm run dev就不会报ESLint错误了。 ...

2018-05-18 16:11:24 43021

原创 mpvue开发小程序时小程序报错：Do not have login handler in current page……

记一个自己遇到的小bug：报错如下：Do not have login handler in current page: pages/me/main. Please make sure that login handler has been defined in pages/me/main, or pages/me/main has been added into app.json在小...

2018-12-04 18:12:07 3719

原创 vue 非父子组件间传值通讯

当有非父子关系的组件进行通信是我们可以通过一个vue实例来作为中转站步骤如下：1.新建bus.js作为中转站import Vue from 'Vue';export default new Vue;2.在需要触发事件的组件a中加入：import bus from './bus.js'bus.$emit('change','HelloWorld')3.在组件b监听事...

2018-10-31 15:45:12 155

原创个人Blog遇到的Bug修补过程记录

个人Blog: www.shiny-jun.cn一、兼容1. axios 在safair测试中遇到 can't find variable: promise解决参考：axios 在单元测试中遇到 can't find variable: promise 解决方法2.在ie、safair、Firefox中遇到new Date()的值为Invalid Date、NaN-NaN解决参...

2018-08-23 18:10:56 203

转载 HTTP协议详解

HTTP（Hyper Text Transfer Protocol）超文本传输协议，是一种建立在TCP上的无状态连接。整个基本的工作流程：客户端发送一个HTTP请求，说明客户端想要访问的资源和请求的动作，服务端收到请求之后，服务端开始处理请求，并根据请求做出相应的动作访问服务器资源，最后通过发送HTTP响应把结果返回给客户端。其中一个请求的开始到一个响应的结束称为事务，当一个事物结束后还会...

2018-08-21 15:11:46 245

原创关于MVVM的面试问题

一.了解mvvm框架吗？vue.js react.js angular.js(一定要想好说哪个，后面的话题都会围绕该框架继续延伸) 二.谈谈你对MVVM的认识？1.先说mvc：所有通信都是单向的：提交一次反馈一次，通信一次相互制约。视图（View）：用户界面。（传送指令到 Controller）控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Mode...

2018-08-16 15:31:02 13291 2

原创面试二面/三面涉及的知识——错误监控

错误监控1.前端错误的分类即时执行错误：代码错误资源加载错误（js加载失败，css加载失败...） 2.错误捕获方式即时执行错误捕获方法： 1）try...catch 2)window.onerror(他不能捕获资源加载错误)资源加载错误捕获方法：1）object.onerror 2)performance.getEntries()（返回一个数组，这个数...

2018-08-16 10:26:35 219

原创面试二面/三面涉及的知识——页面性能

页面性能1. 提升页面性能的方法有哪些？资源压缩合并，减少HTTP请求非核心代码异步加载——异步加载的方式——异步加载的区别利用浏览器缓存——缓存的分类——缓存的原理使用CDN 预解析DNS： <meta http-equiv="x-dns-prefetch-control" content="on"> // 强制打开<a>的预解析<l...

2018-08-15 16:14:22 454

原创面试二面/三面涉及的知识——JS运行机制

JS运行机制1.如何理解JS单线程一个时间之内只能干一件事。2.什么是任务队列同步任务、异步任务，先执行完同步在执行异步。3.什么是Event Loop主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。什么时候回开启异步任务setTimeout和setInterval DOM事件 ES6中的...

2018-08-15 15:03:02 355

原创面试二面/三面涉及的知识——浏览区的渲染机制

一、渲染机制1.DOCTYPE的作用DOCTYPE是用来声明文档类型的DTD（一系列的语法规范）规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。（大白话：DOCTYPE通知浏览器当前的文档包含哪个DTD，也就是哪个文档类型）常见的DOCTYPE有哪些？html5： <!DOCTYPE html> html4 st...

2018-08-15 11:29:35 274

原创 JavaScript 清除childNodes中的#text

我们一般为了代码整洁代码都会换行，像这样：获取div1节点下的childNodesvar div = document.getElementById('div1')var child = div.childNodesconsole.log(child)打印出来结果：重点：如何其中的text？注意: child[0].nodeType // 3 ...

2018-07-26 13:24:42 1612

原创 angular6修改端口号port

报错：Port 4200 is already in use. Use '--port' to specify a different port.因为4200端口已被使用，请使用“--port”修改不同的端口号。方法1：命令直接使用命令：ng serve --port 4201或简写：ng serve -p 4201方法2：修改属性在目录下node_modules/...

2018-07-26 10:38:14 5767

原创 angular报错:can't bind to 'ngModel' since it isn't a know property of 'input'

angular4 慕课课程里面一条是这样的：<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">但是报出错误：can't bind to 'ngModel' since it isn't a know property of 'input' 解决办法：app.module.tsimpo...

2018-07-25 18:33:43 396

原创关于vue项目在build部署出现的一些问题

1、文件路径不对找到config文件夹下的index.js文件修改一下build中的assetsPublicPath: '/',改为assetsPublicPath: './',（在/前加.）2、背景图片路径不对在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下 if (options.extract) ...

2018-07-17 15:26:59 2379

1.当提供器声明在模块中时：（它是对所有组件可见的，所有组件都可以注入它）先注册服务shared/product：输入命令：ng g service shared/product（生成一个服务在shared包中）product.service.ts：import { Injectable } from '@angular/core';@Injectable() //装饰器：这个ProductS...

2018-07-01 17:23:20 532

原创 Angular路由守卫

情景：只有等用户已经登录并拥有某些权限时才能进入某些路由。一个由多个表单组件组成的导向，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。当用户未执行保存操作而试图离开当前导航时提醒用户。分层路由介绍：　　CanActivate：处理导航到某路由的情况　　CanDeactivate：处理从当前路由离开的情况　　Resolve：在路由激活之前...

2018-07-01 11:37:29 482

原创 Angelar与VueJs的简单对比

vue的优点： 1.简单（vue的目标就是通过尽可能简单的api实现响应的数据绑定和组合的视图组件，而且vue的开发者是中国人，文档都是中文，所以很好入门） 2.灵活（vue官方提供了构建工具来协助你构建项目，但它不限于你去如何构建） ps：相对于AngularCli，它包办了所有的非开发工作，如编译、构建等 3.性能（vue尺寸非常小只有10几k，vue用了类似于...

2018-06-29 11:57:46 3524

转载 Node.js Buffer专门存放二进制数据的缓存区

Buffer 与字符编码Buffer 实例一般用于表示编码字符的序列，比如 UTF-8 、 UCS2 、 Base64 、或十六进制编码的数据。通过使用显式的字符编码，就可以在 Buffer 实例与普通的 JavaScript 字符串之间进行相互转换。const buf = Buffer.from('runoob', 'ascii');// 输出 72756e6f6f62console.l...

2018-05-20 19:50:41 822

转载 Node.js EventEmitter

Node.js里面的许多对象都会分发事件：一个net.Server对象会在每次有新连接时分发一个事件，一个fs.readStream对象会在文件被打开的时候发出一个事件。所有这些产生事件的对象都是 events.EventEmitter 的实例。EventEmitter 类events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件触发...

2018-05-19 13:47:05 140

转载 Node.js REPL(交互式解释器)

Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应多行表达式Node REPL 支持输入多行表达式，这就有点类似 JavaScript。接下来让我们来执行一个 do-while 循环：$ node> var x = 0unde...

2018-05-19 10:28:22 135

原创 mpVue的基本介绍

1、快速上手先甩一个官方的教程：http://mpvue.com/mpvue/quickstart/2、目录的基本介绍 src下的目录：其中main.js可以修改我们的TitleBar和颜色，相当于app.json3、事件处理映射表...

2018-05-18 16:04:12 2395

原创 ES6常用语法

一、ES6是什么？新的JavaScript语法标准使用babel语法转换器，支持低端浏览器流行的库基本都基于ES6构建，React、vue默认使用ES6新语法开发二、ES6语法概览 1、块级作用域、字符串、函数作用域：定义变量使用let替代var const定义不可修改的变量 ...

2018-05-18 10:54:11 329

原创原生小程序相关笔记

1、rpx单位是微信小程序中css的尺寸单位rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2....

2018-05-18 09:33:32 575

SHiny_Jun的博客