- 博客(65)
- 收藏
- 关注
RSS订阅
原创 部分目录参考
前端网络完成博客：解决浏览器跨域的几种方式iframe内联及其巧妙跨域cookie使用http状态码200/304浏览器缓存机制：待更H5完成博客：canvas基础客户端存储：cookie存储 && storage存储请求动画帧、历史记录、worker拖拽小练习canvas刮刮卡webpack完成博客：webpa...
2019-04-10 17:01:30
186
原创 redux与react-redux
Store:Store是保存数据的地方，可以看成一个容器。整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。import { createStore } from 'redux';const store = createStore(fn);createStore函数接受一个函数作为参数，返回新生成的 Store 对象。State:S...
2019-07-14 00:49:32
207
原创 出行助手Vue项目中高德API的使用
本文章是出行助手项目使用高德API的一些经验，见程序代码及注释，详情请查看高德API高德地图初始化加载定位到当前城市（具体位置）：设置一个div挂载高德地图：<div id="map" style="width:900px; height: 900px;border: 1px solid red"></div>引入高德API：<script type="te...
2019-07-03 20:46:48
964
原创 出行助手Vue项目中echarts的使用
引入：本项目搭建完成之后，根据官网的提示，在webpack中使用echarts，通过npm安装echarts:npm install echarts --save使用：echarts可以作为一个正常的vue组件使用：<template> <div class="echarts"> <div id="main" class="echarts-canv...
2019-07-03 20:45:33
236
原创 webCpmponent
传统的组件开发：代码由四部分构成：引入CSS组件样式部分<link rel="stylesheet" href="***.css">JS组件封装逻辑部分<script src="***.js"></script>HTML组件模板代码<div></div>JS组件创建脚本代码<script></scri...
2019-07-01 21:12:36
254
原创 高质量代码规范及架构思维
写出JQuery架构简单分析jquery通过调用入口模块，创建工厂，将功能模块的功能注入到jquery对象中，而功能模块通过多个模块通过extends继承，互不影响。jquery的模块分离、接口模块的设计正是值得学习的地方。// jQuery整体上被包裹在一个匿名函数中，这个匿名函数再作为另一个匿名函数的参数被传入.(function(window){ var ...
2019-06-29 23:14:53
357
原创 简单数据响应式原理（数据双向绑定）
什么是数据响应式即数据双向绑定，改变Model时，View自动更新。改变View时，Model也会自动更新。数据响应式原理在Vue2.x版本中，利用Object.defineProperty()重新定义对象获取属性值（get）和设置属性值的操作实现数据响应。在Vue3.0版本中，采用ES6的Proxy对象来实现。数据响应简单实现Object.defineProperty()实现数据...
2019-06-29 01:51:02
2030
原创 TS进阶
类型别名：使用 type 创建为类型创建别名，常用于联合类型。type Name = string; //为string创建别名Nametype NameResolver = () => string; //TS中=>左边是参数，右边是返回值，所以类型是一个 返回字符串的函数，且该函数没有参数type NameOrResolver = Name | NameResolve...
2019-06-28 02:01:16
1346
原创 TS高级语法
上篇简单介绍了TS及其类型定义。类型推断：如果没有明确的指定类型，TS会依照类型推论（Type Inference）的规则推断出一个类型：let myFavoriteNumber = 'seven'; //无错myFavoriteNumber = 7; //Type 'number' is not assignable to type 'string...
2019-06-27 01:25:11
15820
原创 Vue/cli 2与3
写在正文之前： 查了许多教程，网上大多都是2.*之前版本的cli，而官网也说明了Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。因此我自己总结了一份。and新版的@vue/cli要求node版本在8.9以上，如未达到请更新node版本，这里我使用的是node10.15.3老版本vue-cli创建一个项目全局安装老版本的vue-cli：npm install --glo...
2019-05-26 18:08:10
1134
原创 WebStorm的Git流程
写在正文之前： WebStorm被广大JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。在使用过一段时间的VSCode、SublimeText3之后，我也投身到了webstorm的怀抱。本文仅介绍webstrom中Git的使用规范。若需了解Git的基本操作，可查看Git入门笔记。...
2019-05-21 00:55:55
985
原创 Vue组件
定义组件的两种方式全局定义组件局部定义组件 <div id="demo"> <!--使用组件--> <my-component></my-component> </div>Vue.component("my-component",{ // 全局定义组件 template:`<div...
2019-05-19 17:59:04
152
原创 每日一题之闭包20190504
<script type="text/javascript"> var a=0,b=0; function A(a){ var A = function(b){alert(a + b++)} alert(a++); } A(1); A(2); </script>如果这样写，显然易见为1和2，因为整个运行中并没有运行var...
2019-05-04 18:21:57
443
原创 fetch(新一代ajax)
是基于的p基本使用：fetch(url ,{method:'GET'}).then(data => data);fetch(url ,{ method:'POST', headers : new Headers({ "Content-Type" : 'application/x-www-from-urlencoded' }), body : new URLSearchParm...
2019-04-28 19:21:24
292
原创 深入Promise对象及其封装源码实现
Promise的含义Promise是一个状态集，有三种状态，关系如下：pending(就绪状态) -----> resolved (成功状态)pending(就绪状态) -----> rejected (失败状态)其中初始为就绪状态，然后转为成功或失败态！2. 基本用法var p = new Promise(function(resolved,rejected...
2019-04-28 18:51:56
673
原创 深入class类
引言：JavaScript当中并没有构造函数的概念，只是我们为了方便区分，就人为的约定了方法名首字母大写的为构造函数。在ES6之前，如果写一个构造函数像下面这样：function Person1(name,age){ this.name = name; this.age = age; this.show = function(){ console.log(this.name,thi...
2019-04-28 00:37:45
139
原创 深入原理：块级作用域、解构赋值
块级作用域：特点： 不存在变量声明提升；作用域仅在所在的{}之内（称为暂时性死区）；不允许重复声明；letlet i= 10;for(let i = 0;i<10;i++){ let i= 20;}// 本段代码并不会报错（不允许重复声明错误），因为是三个层级的i,注意for循环的()与{}属于两个层级// 即：let i = 10{ let i =0; {...
2019-04-20 01:39:35
299
原创 Promise解决node与mysql的异步问题
继上篇文章之后MySQL管理与node连接之后，进行密码登陆验证时，发现连接sql进行查询时可以查询的到，但是与业务进行整合时由于异步的原因，总是稍慢一步。调试了一天之后终于使用Promise解决了此问题。首先在项目导入mysql模块：npm install mysql接下来就是代码了：var mysql = require('mysql');let databaseConfig =...
2019-04-17 18:37:50
1105
原创 MySQL(一)数据库管理及node连接踩坑指南
之前在学校学习的是sqlserver2008，后来又在亚信实习使用Oracle,近期因为毕设项目，我选择了火热的MySQL,一下是使用中的一些记录；MySQL的安装与初始化有许多教程，不在赘述；开始使用MySQL登陆本机的数据库,在本机的命令行输入：mysql -u root -p，然后回车并输入密码，不出意外就成功连接上了数据库；（一般登陆数据库使用mysql -h 主机名 -u 用户名...
2019-04-16 22:33:55
331
原创 drag&drop
用于各种拖动操作中。使用前介绍一下两个基本概念：在一个元素上添加属性draggable="true",该元素就成为一个被拖拽元素将被拖拽元素拖入目标元素拖拽事件（加粗元素才拥有该事件）dragstart：被拖拽元素开始被拖拽时触发。dragend：被拖拽元素拖拽完成时触发。dragenter：被拖拽元素进入目标元素时触发。（实际上是鼠标进入目标元素才会触发，即使拖拽元素部分进入...
2019-04-13 17:27:56
1762
原创 storage存储
cookie详见：cookie介绍与使用storage只在本地，不参与网络传输,存储的都是字符串localstorage/seesionstorage存储/取出数据：localstorage.name = "tanjw"//可以利用json的方法将对象转为字符串，方便存取使用。localstorage.name //就取出了有效期localstorage，永久存储（除非手动删...
2019-04-12 18:15:20
2230
原创 canvas应用之刮刮乐实现
<!DOCTYPE html><html><head> <title>刮刮乐</title></head><body> <canvas id="can" width="500" height="500"></canvas> <script type="text/javas...
2019-04-11 15:29:35
523
原创 canvas基础及svg
canvas的使用页面上有一个canvas标签获取到这个标签var canvas = decument.ElementsByTagName(“canvas”);得到一个用于在画布上绘图的环境。var ctx = canvas.getContext(“2d”) //目前只支持2d在CanvasRenderingContext2D 对象的原型链上编程，例如画一个扇形C...
2019-04-11 11:06:09
298
原创 防抖节流源码实现
关于防抖节流基础介绍及基础实现参见上篇博客：函数防抖与节流，本节为扩展功能源码防抖源码封装：<!DOCTYPE html><html><head> <title></title></head><body> <input type="text" name=""> <button&g...
2019-04-10 16:23:17
676
原创 iframe内联
iframe是什么？就是一个标签，dom元素。有什么作用？网页嵌套网页；如：导航栏tab切换页、在线编辑器、广告植入。历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案。跨域通信等；iframe 优缺点？iframe会阻塞页面加载；（页面阻塞）当一个页面的iframe标签过多时，会导致刷新图标一直转圈，给人一种迟迟没有加载好的感觉。因为window的onload事件只...
2019-04-08 22:16:43
233
原创 拖拽源码
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; top: 50px; left: 50px; position: absolut...
2019-04-08 14:12:13
510
原创 cookie介绍及使用
cookie是什么？是由服务器端生成，发送给User-Agent(一般指浏览器)，浏览器将cookie以键值对的形式保存到某个目录下的文本文件内。下次请求该网站时就把cookie发送回服务器。（cookie就是一个小文件，浏览器对其大小一般限制在4k,用来记录一些信息（一般用作标识））为什么有cookie?web应用程序是使用Http协议传输数据的，而Http协议是无状态的，一旦数据交换...
2019-04-07 23:56:34
12661
1
原创 解决浏览器跨域问题
不管是何种跨域请求方式，ajax都一样，不同的是服务器端的配置Flash技术老旧，过气服务器代理中转浏览器发送ajax给服务器，服务器再发送请求给另一个服务器，然后将请求结果在给浏览器。josnp只支持get请求json实际上是利用<script>引入js文件不受同源跨域策略的影响。事实上，凡是拥有src属性的标签，都拥有跨域的能力。如：<scrpit> ...
2019-04-06 23:24:51
1131
原创 Less基础使用
声明变量@a= 300px;.border(@width){ border:@width solid red;}使用变量.box{ width:@a; .border(20px);}样式计算.box{ width:300px; .tri{ width:100% +30px; }}此处css解析结果为父级的130%，即390px,很显然这是错误的，我...
2019-04-05 17:52:15
223
原创 webpack的初级使用
**注意：webpack4.+版本不向下与3.+版本兼容，此处使用3.5.5版本npm install webpack@3.5..5 -g简单步骤：目录进入项目文件夹下，名称必须为英文（避免不必要的错误）运行命令npm init,然后一路回车，此时会在项目文件下生成一个package.josn文件新建一个webpack.config.js文件如下代码：（配置文件，定义一些打包的规则）...
2019-04-05 14:00:56
181
原创 HTTP状态码200/304
HTTP状态码（HTTP Status Code）是一种表示网页服务器响应状态的三位数字编码。通过这些数字，可以简化状态的表达。状态码有几十种。其中首位数字为1-5。根据这5个数字，状态码可以分为5类。1开头的表示请求正在处理；2开头请求已经成功处理；3开头表示重定向；4开头表示请求错误；5开头表示服务器错误。200在嗅探抓包过程中，常见的有两种200和304。这两个状态码都关系到能否...
2019-03-22 19:21:17
8584
1
原创 尾调用与尾递归
尾调用当一个函数执行时的最后一个步骤是返回（return）另一个函数的调用时，就叫做尾调用。函数调用会在内存形成一个"调用记录"，又称"调用帧"（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用记录上方，还会形成一个B的调用记录。等到B运行结束，将结果返回到A，B的调用记录才会消失。如果函数B内部还调用函数C，那就还有一个C的调用记录栈，以此...
2019-03-22 18:39:46
328
原创 深度克隆剖析
// 深度遍历// 思路：// 遍历对象 for (var key in object)// 判断是否是原始值 typeof // 判断是对象还是数组 instanceof看原型链有无其原型 toString constructor (因父子域问题最好使用toString) // 建立相应的数组或对象function d...
2019-03-22 15:24:07
134
原创 不知道的js——函数防抖与节流
老规矩，什么是防抖？（节流在下面）首先，在某些界面中有些用户行为会被频繁触发，而这些行为往往又伴随着DOM操作、AJAX请求等涉及页面重绘重排这些耗费性能的处理，极可能导致界面卡顿，甚至浏览器奔溃，例如：使用百度搜索学习资源时，当向输入框输入 搜索词 后，才会在搜索框推荐与你搜索词相关的字词。而不是你每输入一个字就推荐一下。函数防抖就是解决实时搜索（kepup）、拖拽(mousemov...
2019-02-16 00:28:47
419
原创 不知道的js——性能优化之函数记忆
说优化之前，先讲点题外话首先利用递归计算数的阶乘，话不多说上代码：var count = 0;function factorial(num){ count++; //此处利用count计算此函数被调用的次数 if( num == 0 || num == 1){ return 1; } return num * factorial(num...
2019-02-15 21:18:32
265
原创 MyUtil.js
// 因为有原始值和引用值之分，原始值直接 a = b,修改b,a不会改变；// 引用值 a = b,修改一个另一个也会改变，因为引用值赋予的是地址空间。// 所以克隆分为浅层克隆和深层克隆。// 深层克隆：function deepClone(origin,target){ var target = target || {}, toStr = Object.prototype...
2019-02-15 15:50:17
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人