di77307-CSDN博客

转载 Vue中的scoped及穿透方法

何为scoped？在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。scoped的实现原理vue中的scope...

2018-08-03 10:22:00 226

转载巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3...

2018-08-03 10:14:00 246

转载 webpack中require和import的区别

转载自https://www.cnblogs.com/raind/p/8601984.htmlcommonjs同步语法经典的commonjs同步语法如下：var a = require('./a');a.show();此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形，不必赘述。 commonjs异步加载在commonjs中有一个...

2018-07-18 15:40:00 208

转载第一次的面试题

react生命周期setState（）第二个参数console.log(0.1+0.2==0.3)map,forEach,for的区别react高阶组件flex布局react的component可以优化的点有哪些vue钩子函数设计模式有哪些双向绑定原理重绘和repaintjsonp是什么请求http和https哪个传输更快，https过程...

2018-07-06 17:44:00 111

转载 node事件循环

https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/转载于:https://www.cnblogs.com/qiqi105/p/9229792.html

2018-06-26 16:31:00 83

转载太原面经分享：如何在vue面试环节，展示你晋级阿里P6+的技术功底？

环环相扣的面试提起vue面试环节，你不得不提vue的生态，它的全家桶，像什么vue-router、vuex、vue ssr等。但是看一个前端er对vue的研究深度，不能仅仅停留在表面，更要深入它的原理背后，探究它的源码。比较唬人的开场白，你不妨先照着这个结构图大概说一下，以便向面试官展示你对vue生态的全局观，然后再娓娓道来。最起码的，先从简单的聊起，请说出vue.cli...

2018-06-25 11:39:00 71

转载 JavaScript中的this陷阱的最全收集

当有人问起你JavaScript有什么特点的时候，你可能立马就想到了单线程、事件驱动、面向对象等一堆词语，但是如果真的让你解释一下这些概念，可能真解释不清楚。有句话这么说：如果你不能向一个6岁小孩解释清楚一个东西，那么你自己也不懂这个东西。这句话或许有点夸张，但是极其有道理。个人觉得，如果需要掌握一门语言，掌握它的API只是学了皮毛，理解这门语言的精髓才是重点。提及JavaScript的...

2018-06-25 11:25:00 82

转载箭头函数的this指向问题

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。箭头函数转成ES5的代码如下。function foo() { setTimeout(() => { console.log('id:', this....

2018-06-22 16:37:00 92

转载 vue 和react中子组件分别如何向父组件传值

vue子组件和父组件双向传值：子：Vue.component("childComponent",{ template:`<div><p @click='postData'>向父组件传值:点击我</p>{{result?'开':'关'}}<p @click='handleData'>子组件改变父组件的数值</p&gt...

2018-06-21 15:43:00 147

转载 es5和es6中的this指向问题

const test ={ id:2, a:function(){ var a_this=this; setTimeout(function(){ console.log('a:',this,a_this) }) }, a1:()=>{ var a1_this=this; setTimeout(function(){ c...

2018-06-14 10:04:00 176

转载关于行内元素，内联元素before和after的大小设置问题

:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的转载于:https://www.cnblogs.com/qiqi105/p/9144250.html

2018-06-06 11:33:00 670

转载函数异步模拟实现ajax

//模拟ajax function getData(callback){ setTimeout(function(){ var name='leo' callback(name) },1000) return true } console.log(getData(function(data){ console.log('data:',data) })); //promis...

2018-06-01 17:31:00 124

转载浏览器如何减少 reflow/repaint

1.不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。2）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM。先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。...

2018-05-30 08:21:00 153

转载正则表达式中的\2和\1和\3不仅分组还占位

首先你要理解正则中的分组和捕获的概念，用（）括号括起来的匹配会是可获取的，js里总共可以放9个对应用\1....\9来获取重用。var s = 'abbaabae3ee3abbfd43aaabbby65aabb3a';var pattern1=/([a-z])/g;在这里小写字母就是一个组，正则匹配结果为：s.match(pattern1)如果pattern1变...

2018-05-18 10:16:00 540

转载正则分组和捕获

2018-05-17 11:01:00 97

转载 Ubuntu14.04(nginx+php+mysql+vsftp)配置安装流程

Ubuntu14.04(nginx+php+mysql+vsftp)配置安装流程1.先切换到root用户sudo su2.更新软件源apt updateapt-get upgrade3.开始安装nginx和php a.因为Ubuntu默认的源中就有Nginx，所以可以直接安装; 在安装之前先检查一下是否已经安装，如果安装了先卸载（apt-get remov...

2018-05-08 11:07:00 155

转载 hashRouter and BrowserRouter

<html><body><div> <button class="btn" onclick="btnFun();">点击新增一条历史记录</button> </div> <script> var num=0; console.log('增加历史记录前 s...

2018-05-07 16:43:00 90

转载从前端角度出发有哪些注意事项有利于SEO?

1、提高页面加载速度。能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。2、结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通...

2018-05-04 11:09:00 120

转载 web前端架构师学习流程

JavaScript 开发（高级）系统知识1.1ECMAScript标准的发展过程，ES6语言对JavaScript的改进；1.2ES6中语法层面的新特性（let、const、参数扩展、模块化等）；1.3ES6中数组、字符串等各类新方法的使用（map、reduce、filter、forEach、startsWith等）;1.4OOP(面向对象)开发，ES5...

2018-04-25 16:45:00 163

转载 React 全新的 Context API

Context API 可以说是 React 中最有趣的一个特性了。一方面很多流行的框架（例如react-redux、mobx-react、react-router等）都在使用它；另一方面官方文档中却不推荐我们使用它。在 Context API 的文档中有下面这段话：The vast majority of applications do not need to use cont...

2018-04-19 11:05:00 278

转载浏览器渲染原理及流程

转载，原文https://www.cnblogs.com/slly/p/6640761.html　　我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚...

2018-04-13 16:56:00 80

转载如何对react进行性能优化

{...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，也请慎用spread attributes（<Component {...props} />）)。::this.handleChange()。(请将方法的bind一律...

2018-04-13 16:28:00 75

转载学习路线

先实现react功能，socket,在学习jq,在学习服务器端渲染，再看一遍webpack，包括react和vue,最后在学php，然后学习算法，如果还有时间在学习react-native平时也要看一些例如html5和css3;转载于:https://www.cnblogs.com/qiqi105/p/8819374.html...

2018-04-13 11:37:00 58

转载如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数？

React绑定onClick为什么要用箭头函数？https://segmentfault.com/q/1010000010918131如何优雅地在React中处理事件响应https://segmentfault.com/a/1190000010308456一：事件处理函数使用es6写法：在使用ES6 classes或者纯函数时，React不会自动绑定this到当前...

2018-04-13 10:02:00 523

转载使用extract-text-webpack-plugin处理css文件路径问题

首先看到我们的文件夹目录如下：webpack.config.js//解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-plugin')plugins: [//最后的css文件打包路径 new ExtractTextPlugin('css/[name].[hash:8].css') ...

2018-04-08 13:39:00 203

转载前端所需要了解的东西

webpacknodees6scoketmongodbcanvasreactcss3html5转载于:https://www.cnblogs.com/qiqi105/p/8726930.html

2018-04-06 09:57:00 118

转载 webpack4导入jQuery的新方案

本文的目的拒绝全局导入jQuery！！拒绝script导入jQuery！！找到一种只在当前js组件中引入jQuery，并且使用webpack切割打包的方案！测试环境以下测试在webpack3.8.1，jQuery3.2.1，react16+中进行思路分析如果说要我在react中全局引入jQuery，我是十分感动，然后拒绝的。但是，有时候可能react的一些...

2018-04-06 09:53:00 200

转载使用await写异步优化代码

使用promise：function readMsg(){ return dispatch=>{ axios.post('/msgList').then(res=>{ console.log(res.data) }) }}使用async+await：function readMsg(){ return async (dispatch)=>{ cons...

2018-03-26 16:12:00 120

转载 Provider

import React from 'react';import PropTypes from 'prop-types';class Provider extends React.Component { static childContextTypes = { store:PropsTypes.object } constructor(props,context){ super(...

2018-03-26 15:09:00 77

转载 context的作用

看下面的一个简单的组件：import React from 'react'class Sidebar extends React.Component { render(){ return(<div> <p>我是Sidebar</p> <ul> <li> <Navbar user={this.pr...

2018-03-26 15:01:00 152

转载迷你redux实现，redux是如何进行实现的？

export function createStore(reducer){ let currentState={} let currentListeners=[] function getState(){ return currentState } function subscribe(listener){ currentListeners.push(listener) } func...

2018-03-26 14:27:00 101

转载 react服务端渲染

react服务端渲染原理：用react生成的app在服务端( node 环境中 )进行渲染，得到完整的html内容，直接返回给浏览器可以呈现的html内容。转载于:https://www.cnblogs.com/qiqi105/p/8648653.html...

2018-03-26 09:18:00 56

转载 webacp4.0

'use strict';const path = require('path');var APP_PATH = path.resolve(__dirname, 'src');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWe...

2018-03-25 17:02:00 65

转载不错的视频学习网站

http://www.sucaihuo.com/video/305.htmlhttp://www.gxlife.net.cn/U00564QQ号码登陆的转载于:https://www.cnblogs.com/qiqi105/p/8531930.html

2018-03-09 08:25:00 154

转载如何打开mongo运行环境

新建一个文件夹，例如我的在E:\2016web\myapp\src\database打开数据库mongod --dbpath=E:/2016web/myapp/src/database在新开一个窗口：输入mongo就可以对数据库进行操作了转载于:https://www.cnblogs.com/qiqi105/p/8527433.html...

2018-03-08 11:33:00 245

转载如何将自己的代码上传至github

前提条件：有个github账号，电脑安装了git;首先在自己的账号里新建一个仓库：https://github.com/qiqi105/littleAlbum.git进入到你要上传的文件夹内部:建立git仓库git init将项目的所有文件添加到仓库中git add .git add README.md提交到仓库git commit -m "这是我的第一个代码块"将本...

2018-03-06 16:19:00 61

转载最新版的node安装和配置注意事项

node在安装的时候，如果你不想用默认的安装路径，可以自定义路径进行安装，例如我的安装路径如下：F:\Program Files\nodejs安装完成后，要对node进行配置：在F:\Program Files\nodejs新建两个文件夹node_global和node_cache执行如下命令：npm config set prefix "F:\Program Files...

2018-02-27 17:37:00 175

转载 webpack从入门到精通（一）

1.webpack的使用背景：目前国内前端开发都是基于模块化的2.webpack的作用有哪些：3.webpack四大核心理念：entry，output，loaders，plugins4.使用webpack的方法：webpack命令行、webpack配置文件、webpack脚手架webpack配置文件：新建一个固定名字的文件webpack.config.js...

2018-02-10 14:21:00 110

转载如何从零搭建一个webpack+react+redux+react-redux的开发环境一入门

阅读本文章的时候，你要有一定的基础知识储备，简单的es6知识，模块化思想知识，js基础知识，node基础知识,react等首先执行npm init,此时我的文件叫case;下面安装一些需要的npm包：npm install react --savenpm install webpack --save-dev说明一下：--save:是用于生产和上线环境--sa...

2018-02-06 16:18:00 140

转载点击页面的按钮，使之打开一个新窗口，加载一个页面的方法有哪些呢？

1.<base target="_blank" />页面只要有a标签，都会打开一个新的页面；2.<input type='button' value='new' onclick="window.location='new.html';">当前页面进行跳转3.<input type="button" value="new" onclick="w...

2018-02-05 11:38:00 3732

空空如也

空空如也