HansExploration-CSDN博客

转载 CSS Modules 用法教程

作者：阮一峰日期： 2016年6月10日学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程...

2019-02-11 22:04:25 377

原创 Javascript实现冒泡排序与快速排序以及对快速排序的性能优化

冒泡排序介绍重复遍历要排序的元素列，依次比较两个相邻的元素，前一个元素若比后一个元素大则互换位置。以升序排序为例，最大的元素会在第一次遍历后“冒泡”到数组的末端。假如数组长度为n，在n-1次遍历后可完成排序。实现let arr = [1, 5, 2, 9, 7, 4, 2, 3, 6, 8]function bubbleSort(arr) { let time = arr...

2019-02-10 15:01:55 397

原创 ES6 -- Set，reduce特性计算html中的标签类型数以及各标签的数量

let tags = document.querySelectorAll('*')let tagNames = Array.from(tags).map(tag => tag.tagName)// tag的类型数console.log(new Set(tagNames).size)// 每个tag类型各有多少个let res = tagNames.reduce((holder...

2019-02-03 11:05:06 414

原创简单实现vue中的依赖收集与响应

开始声明一个对象man，可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式，只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例，将man作为参数扔进去。这里的proxyData是将man的属性代理到以m...

2019-02-02 15:58:16 349

转载 Vue基于“依赖收集”的响应式原理

转载自知乎用户：前端荣耀 - 李斌https://zhuanlan.zhihu.com/p/29318017每当问到VueJS响应式原理，大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter，当属性被访问或修改时通知变化”。然而，其内部深层的响应式原理可能很多人都没有完全理解，网络上关于其响应式原理的...

2019-01-27 11:18:59 356

原创 Object.defineProperty使用小记

本来想实现下vue的源码，结果刚开始就踩了个坑，记录下。let obj = { name: 'Han'}Object.defineProperty(obj, 'name', { get() { return obj.name }})控制台打了下报错说是栈溢出。原因是get方法不能直接返回obj.name，这样相当于又调用了一次get方法，然后继续返...

2019-01-26 19:40:14 309

原创 html中如何引用webpack编译出来的js中的变量

js代码：class H_Vue { constructor(obj) { } }html代码：<body> <script> window.onload = () => { let a = new H_Vue console.log(a) } </script></...

2019-01-24 17:26:37 3511

转载使用editorconfig配置你的编辑器

摘要：　　在团队开发中，统一的代码格式是必要的。但是不同开发人员使用的编辑工具可能不同，这样就造成代码的differ。今天给大家分享一个很好的方法来使不同的编辑器保持一样的风格。　　不同的编辑器也有设置代码风格的，例如我们前端人员最喜欢使用的sublime text 2编辑器。你可以在preferences中选择Settings-User，然后输入自定义的风格，比如：{　　"de...

2019-01-21 17:59:00 655

Error: The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you shou...

2019-01-07 12:00:46 1486

原创 React项目中热加载

第一步配置webpack-dev-serverconfig.devServer = { contentBase: path.resolve(__dirname, '../../dist'), host: 'localhost', port: '1111', hot: true } config.plugins.push(new webpack.Ho...

2019-01-05 20:51:28 1416

转载 cross-env设置NODE_ENV

1. 什么是cross-env呢？它是运行跨平台设置和使用环境变量的脚本。2. 它的作用是啥？当我们使用 NODE_ENV = production 来设置环境变量的时候，大多数windows命令会提示将会阻塞或者异常，或者，windows不支持NODE_ENV=development的这样的设置方式，会报错。因此 cross-env 出现了。我们就可以使用 cross-env命令，这样...

2019-01-05 15:45:43 3823

转载 Linux端口占用,nodejs 监听80端口，Error: listen EADDRINUSE

linux服务器启动node监听80端口遇到以下错误Error: listen EADDRINUSE端口被占用了查看80端口占用情况sudo netstat -apn | grep 80结果为tcp 0 0 0.0.0.0:8000 0.0.0.0:* LISTEN 1060/ss-server tcp ...

2019-01-02 17:07:58 580

原创 Nginx反向代理 & 设置二级域名（CentOS）

nginx 配置whereis nginx/usr/sbin/nginx -> 执行文件/etc/nginx/conf.d -> 自定义.conf文件的存放位置常用操作举例：重启：$ /usr/local/nginx/sbin/nginx –s reload停止：$ /usr/local/nginx/sbin/nginx –s stop...

2018-12-29 10:50:33 4062

转载 centos添加全局变量

今天重装了服务器上的系统，由ubuntu16.04换成了centos7.4，在装完nginx后，执行下面命令时：nginx -tnginx -s reload报错：nginx不是命令，无奈只能使用/usr/local/nginx/sbin/nginx -t/usr/local/nginx/sbin/nginx -s reload这样每次都挺麻烦的，解决这一问题的方法是将ng...

2018-12-28 17:39:22 2073

转载 vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数

前言很多时候用$emit携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。找到了两种方法可以同时添加自定义参数的方法。方法一子组件传出单个参数时：// 子组件this.$emit('test',this.param)// 父组件@test='test($event,userDefined)'方法二子组件传出多个参数时...

2018-12-26 17:18:08 2683

转载 Fetch / ajax 不能获取response中的所有headers的解决方法(适用nginx)

来源： https://www.aliyun.com/jiaocheng/123788.html起因笔者在用Fetch进行react开发的时候用到了chrome跨域插件Allow-Control-Allow-Origin: *, 因为后端和前端的开发是同时进行的, 并且不在同一台机子上. 为了能够在前端方便地调试后端api, 我使用了这个插件. 姑且是能够进行cors请求了. 但...

2018-12-18 10:11:20 6365

转载基于 Token 的身份验证：JSON Web Token

最近了解下基于 Token 的身份验证，跟大伙分享下。很多大型网站也都在用，比如 Facebook，Twitter，Google+，Github 等等，比起传统的身份验证方法，Token 扩展性更强，也更安全点，非常适合用在 Web 应用或者移动应用上。Token 的中文有人翻译成 “令牌”，我觉得挺好，意思就是，你拿着这个令牌，才能过一些关卡。文章先介绍了一下传统身份验证与基于 JWT 身份...

2018-12-17 18:02:37 234

转载 fetch的get和post传参

转自 https://blog.csdn.net/dylan_zeng92/article/details/75371034?utm_source=blogxgwz8原生get请求是在网址链接后加上？key=value&key=value进行传参。原生fetch中一般用法为fetch（url，{配置}).then((res)=>{}).catch((res)=>{}); ...

2018-12-17 10:16:22 29462

转载彻底理解js中的&&和||

来源： https://www.cnblogs.com/sgzs/p/7977208.html javascript中，&&和||的用法比较神奇，经常用在对象上，例如a || b，如果a不存在，则返回b。a && b，如果a存在，则返回b，否则返回a。光这样看，感觉他的概念还挺复杂的，这样去想的话，不但会在脑子里多出一个无用的概念，而且越记越混乱。看问题还是...

2018-12-15 19:32:11 324

转载 webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不同的js文件）

2018-12-13 14:39:20 1037

转载 Vue keep-alive实践总结

转自：https://www.cnblogs.com/sysuhanyf/p/7454530.html <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-aliv...

2018-12-11 18:05:20 170

转载 webpack中配置es7编译

Babel Runtime Transform特点：局部垫片为开发框架准备如何使用：npm install @babel/plugin-transform-runtime --save-devnpm install @babel/runtime --save新建.babelrc文件配置{ "presets":[ ["@babel/preset-...

2018-12-11 11:26:37 857

转载详解Object.defineProperty方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。参见Object.defineProperty语法。在vue.js是通过它实现双向绑定的。俗称属性拦截器。1、语法：Object.defineProperty(obj, prop, descriptor)参数说明：// obj：必需。目标对象// p...

2018-11-28 15:04:19 345

转载 vue-router 实现组件的缓存之 keep-alive

2018-11-22 10:20:41 338

转载 Git忽略规则和.gitignore规则不生效的解决办法

　Git忽略规则：在git中如果想忽略掉某个文件，不让这个文件提交到版本库中，可以使用修改根目录中 .gitignore 文件的方法（如果没有这个文件，则需自己手工建立此文件）。这个文件每一行保存了一个匹配的规则例如：# 此为注释 – 将被 Git 忽略*.sample 　　 # 忽略所有 .sample 结尾的文件!lib.sample 　　 # 但 lib.sample 除外/T...

2018-11-14 10:31:18 120

转载 node-mysql连接mysql失败Error: ER_NOT_SUPPORTED_AUTH_MODE

报错信息{ Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client1这是自己在我的linux机器上，安装了mysql Ver 8.0.12 for Linux on x86_6...

2018-11-07 15:55:15 1264

转载 document.ready和onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）二是onload，指示页面包含图片等文件在内的所有元素都加载完成。用jQ的人很多人都是这么开始写脚本的：$(function(){// do something});其实这个就是jq...

2018-11-06 11:31:22 193

转载 nodejs+multiparty 文件上传

转自 https://www.cnblogs.com/leijee/p/7457802.html通过表单提交上传文件: html代码<form action="/uploadFile" method="post" enctype="multipart/form-data"> <input type="file" class="files&quot

2018-11-05 14:49:51 2261 1

转载什么时候使用Try Catch(转)

几条建议：　　如果无法处理某个异常，那就不要捕获它。　　如果捕获了一个异常，请不要胡乱处理它。　　尽量在靠近异常被抛出的地方捕获异常。　　在捕获异常的地方将它记录到日志中，除非您打算将它重新抛出。　　按照您的异常处理必须多精细来构造您的方法。　　需要用几种类型的异常就用几种，尤其是对于应用程序异常。　　把低层次的异常封装成层次较高程序员较容易理解的异常。　　...

2018-11-03 22:26:52 3030

转载使用jquery的ajax提交文件上传。FormData， beforeSend

以前的项目大多的使用jquery的插件来进行文件上传，对于就只引用jquery而不使用插件来上传文件之前未有写过，最近项目里有写到和用到，就记录一下，以后方便查找。提示：存在浏览器皆容问题，谨慎使用。HTML代码：<form id="infoLogoForm" enctype='multipart/form-data'> <div class="cnt-...

2018-10-30 10:40:22 671

转载 vue中引入jquery

1、在项目中安装jquery。npm install jquery --save-dev2、在项目根目录下的build/webpack.base.conf.js文件中：① 先写以下代码var webpack = require("webpack")②在module.exports的最后写 plugins: [ new webpack.optimize....

2018-10-24 17:37:29 189

转载 NodeJS中的require和import

转自https://www.cnblogs.com/guanghe/p/6560698.htmlES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。不把require和import整清楚，会在未来的标准...

2018-10-23 22:30:06 313

转载 Vue中的Render函数

节点、树以及虚拟 DOM在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例： <div> <h1>My title</h1> Some text content </div> 当浏览器读到这些代码时，它会建立一个“DOM 节...

2018-10-11 11:49:24 875

转载如何对vue中的组件进行点击事件监听

2018-09-28 11:10:03 8844

转载 jest js 测试框架-简单方便人性化

转自https://www.cnblogs.com/rongfengliang/p/8182464.html注意：注意：当你安装 Jest 时，babel-jest 是会被自动安装的，并且如果你的项目下存在一个 Babel 配置文件时，它将会自动对相关文件进行转义。如果要避免这个行为，你可以显式的重置 transform 配置项：// package.json{ "jes...

2018-09-27 11:19:31 2908

转载 webpack 配置 babel-loader

babel-loader查看原文|查看仓库|编辑此页This package allows transpiling JavaScript files using Babel and webpack.Notes: Issues with the output should be reported on the babel issue tracker.安装webpack 3.x ...

2018-09-19 23:19:08 2454

转载关于 -128 ，+128，-0，+0，-1 的反码补码

转自：https://www.cnblogs.com/flowerslip/p/5933833.html一.反码的范围反码表示法规定：正数的反码与其原码相同。负数的反码是对其原码逐位取反，但符号位除外。在规定中，8位二进制码能表示的反码范围是-127~127。-128没有反码。那么，为什么规定-128没有反码呢?下面解释。首先看-0，[-0]原码=1000 000，其中1是...

2018-09-13 01:09:37 362

转载 ES6开发环境配置【转载】

转自https://blog.csdn.net/chhpt/article/details/74131380 随着时间的推移，浏览器对ES6支持度已经越来越高了，超过90%的 ES6 语法特性都实现了。虽然有些浏览器对ES6的支持程度已经很高了（Chrome59 97%，Safari10 99%），但是很多人使用的IE对ES6的支持任然很不理想（IE11 11%），所以在实际工程应用中，我...

2018-09-06 10:58:54 211

转载 jQuery的详细解析以及用法

jQueryjQuery是一个js库，免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作DOM常遇到的一些问题，强大的选择器，简化我们的操作jQuery的特点：a. 轻量级b. 富应用c. DOM操作、事件处理、运动动画、AJAXd. 跨浏览器（不再考虑浏览器兼容）e. 链式调用f. 隐式迭代g. 丰富的插件库 .........jQuery基本使用...

2018-07-29 17:34:24 237

转载 AMD及requireJS

转自：https://www.cnblogs.com/xiaohuochai/p/6847942.html 前面的话　　由CommonJS组织提出了许多新的JavaScript架构方案和标准，希望能为前端开发提供统一的指引。AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制，完整描述了模块的定义，依赖关系，引用关系以及...

2018-07-26 21:42:00 241

空空如也

空空如也