javascript
关注
分享
扫一扫
文章平均质量分 50
水痕01
暂停更新博客
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript中正则表达式的总结
注意点:正则是使用到字符串上的,在javascript弱语言中有时候你可能会使用到数字的时候,注意也要转换成字符串一、定义正则的方式1、简单直接的定义方式(常用这种方式)var reg = /javascript/gi2、使用对象方式创建一个正则(这种方式的使用创建要匹配的内容是一个变量)var reg = new RegExp('javascript', gi)二、元字符的认识1、具有特殊意义的元字符\：转义字符，转义后面字符所代表的含义^：以某一个元字符开始$.原创 2021-03-03 08:05:56 · 452 阅读 · 0 评论 -
异步编程:rxjs入门到精通
一、常见的异步编程有1、回调函数2、promise3、事件监听/发布订阅4、rxjs二、使用promise和rxjs实现异步编程的对比1、使用promise异步编程的写法const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('promise成功了');...原创 2019-11-19 16:53:26 · 426 阅读 · 0 评论 -
js序列化url地址
export function param(data) { let url = ""; for (let k in data) { let value = data[k] != undefined ? data[k] : ''; url += `&${k}=${encodeURIComponent(value)}`; } re...原创 2018-07-23 22:41:06 · 3562 阅读 · 0 评论 -
JavaScript读书笔记(一正则的总结)
注意点:正则是使用到字符串上的,在javascript弱语言中有时候你可能会使用到数字的时候,注意也要转换成字符串一、定义正则的方式1、简单直接的定义方式(常用这种方式)var reg = /javascript/gi2、使用对象方式创建一个正则(这种方式的使用创建要匹配的内容是一个变量)var reg = new RegExp('javascript', gi)...原创 2018-06-28 10:29:18 · 433 阅读 · 0 评论 -
JavaScript读书笔记(一数组的总结)
数组的总结一、数组的介绍 javascript中数据集合有:数组、对象、Map集合、Set集合,数组中可以包括任意数据类型。二、创建数组方式1、使用字面量创建let arry = ['哈哈', '你好', 1, 2, {'name': '哈哈'}];2、使用类的实例创建let array = new Array('哈哈', 1, 24, {'name': ...原创 2018-06-25 14:57:01 · 1045 阅读 · 0 评论 -
javascript正则中字符的转义
const reg = (str) => str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')原创 2018-02-09 13:43:51 · 1519 阅读 · 0 评论 -
mobx前期配置工作让webpack支持ES7的修饰器的转码
MobX 是一个简单、方便扩展、久经考验的状态管理解决方案。使用了观察者(observable)与被观察者(observer)的概念，本人不介绍MobX的使用(本人也在努力研究之中)，仅仅是介绍webpack配置转码ES7的装饰器的写法.一、package.json文件 在之前的webpack支持ES6的基础上添加安装三个插件 "babel-plugin-transform-decora原创 2017-03-16 09:07:37 · 3849 阅读 · 0 评论 -
Es6中处理异步的方式
一、在javascript中造成异步的因素1、定时器2、事件二、使用Promise把异步变成同步 参考文档1、关于promise的基本使用/** * Promise需要实例化对象 * 里面是一个函数， * resolve是一个代表成功的函数,如果不调用这个函数，下面的函数无法继续进行 * 下面只能打印"第一个定时器" * reject是一个代表失败的函数 */var prom原创 2017-07-13 13:37:41 · 2645 阅读 · 0 评论 -
fetch下一代ajax请求数据的封装
传统使用回调函数的方式1.get请求方法的封装/** * get请求数据 * @param url url地址 * @param callback 回调函数 */let getJson = function (url,callback) { fetch(url).then((response) => response.json()) .then((data)=>{原创 2017-03-02 15:09:14 · 2202 阅读 · 0 评论 -
javascript中使用枚举定义一个对象进行数据转换
var ScheduleTypeEnum = { IPI: { value: 'IPI', description: '等额本金' }, EPI: { value: 'EPI', description: '等额本息' },原创 2017-09-01 17:44:08 · 3406 阅读 · 0 评论 -
typescript开发环境准备
一、软件的安装1、安装软件npm install -g typescript二、配置tsconfig.json1、命令行生成文件tsc --init yes2、附上我介绍的{ "compilerOptions": { /* 基本选项 */ "target": "es5", // 指定 ECMASc...原创 2018-08-27 12:24:00 · 798 阅读 · 0 评论 -
JavaScript读书笔记(对象的总结)
JavaScript读书笔记(对象的总结)一、创建对象的方式1、直接创建(常用)let obj = { name: '哈哈', gender: '男'}2、使用实例化对象的方式创建(比较少用)function Foo() { //}let foo = new Foo()3、内置对象的实例let x1 = new Object(); // A n...原创 2018-10-18 09:04:30 · 322 阅读 · 0 评论 -
一文搞懂typescript的装饰器
装饰器是一种特殊类型的声明，它能够附加到类、类的函数、类属性、类函数的参数上，以达到修改类的行为一、装饰器的种类1、根据装饰器的位置类装饰器类函数装饰器类属性装饰器类函数参数装饰器2、根据装饰器是否有参数无参装饰器(一般装饰器)有参装饰器(装饰器工厂)二、类的装饰器1、类装饰器的写法function desc(target) { consol...原创 2019-08-05 15:15:59 · 4670 阅读 · 0 评论 -
前端处理后端数据生成树数据的几种方式
现在前端开发过程中,使用到树结构的概率还是很高的,现在的后端开发往往是直接返回一个大的数组给你自己组合你想要的数据结构,而不会帮你组装你想要到数据结构返回的,那么就需求前端自己处理数据,将一个大的数组改装成一个树结构的数据。一、需求分析1、后端返回的数据let permissionFull = [ { name: 'fangyuan0', permis...原创 2019-06-17 14:32:26 · 5656 阅读 · 9 评论 -
读react源码模拟写一个JavaScript函数的事务
关于事务可能只有在SQL语句上才有的,react事务源码,在我们实际开发中也有可能遇到:不想改变原来的函数，但是想附加别的功能一、自定义一个函数的事务function setState() { console.log('setState函数');}// 定义一个事务的类class Transcation { constructor(wrappers) { this....原创 2019-05-05 15:56:47 · 260 阅读 · 0 评论 -
Eslint插件的配置及使用
一、eslint的介绍ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。本质就是javascript代码检测的工具二、安装及使用1、全局安装npm install eslint -g2、局部安装(项目中安装)npm install eslint --save-dev3、如...原创 2019-03-13 16:52:22 · 4062 阅读 · 0 评论 -
一文搞懂前端中对象的深拷贝与浅拷贝
在前端开发过程中常常会听到对象的深拷贝与浅拷贝,对于初学者来说,可能是傻傻的分不清楚,本人将详细介绍javascript中对象的深拷贝与浅拷贝。一、javascript中的数据类型基础数据类型字符类型数字类型布尔类型引用数据类型(地址的引用)对象数组二、浅拷贝的代码1、自己实现浅拷贝let obj1 = {name: '张三', gender: '男'...原创 2018-12-26 11:11:09 · 1213 阅读 · 0 评论 -
ES6可迭代对象与迭代器的理解
一、本文解决的问题ES6中新增了一个语法for...of语句,可能很多前端工程师只是看到文档或者博客上都有介绍,它可以用来遍历数组、字符串、Set集合、Map等,但是对其中原理不太清楚。本文章就是来答疑解惑的。二、可迭代对象如果学过python就知道,python中有可迭代对象及迭代器之分1、可迭代对象有1.Array2.String3.Map4.Set5.argume...原创 2018-12-29 17:42:47 · 2606 阅读 · 0 评论 -
使用ES6语法+工厂模式模拟一个jquery代码段
class jQuery { constructor(selector) { let splitSelector = selector.match(/([$#])(.*)/); if (splitSelector) { if (Object.is(splitSelector[1], '$')) { this.dom = document.queryS...原创 2018-12-28 16:07:47 · 563 阅读 · 0 评论 -
在JavaScript项目中正确是使用ES7的语法
现在前端工程师出去面试,不能避免的问到的是ES6的语法,但是所问到的都是一些比较简单的语法、或者在web开发中使用webpack构建的前端项目,作为一个全栈工程师来说,使用nodejs写后端项目,我们会使用到ES6的语法,自然会用来类、面向切面编程使用到装饰器等一些ES7的语法。一、在node项目中正确的使用ES7的配置1、创建一个项目文件夹2、初始化项目npm init --...原创 2018-12-07 15:12:45 · 1215 阅读 · 0 评论 -
使用http-proxy-middleware解决前端开发中跨域的问题
一、使用http-proxy-middleware中间件解决跨域问题 本案例中使用基本的webpack及axios请求数据的插件1、后端服务是用tornado创建的一个服务(可以根据自己熟悉的搭建一个后端服务器)...class JsonHandler(tornado.web.RequestHandler): def get(self): li = [原创 2017-08-30 12:57:12 · 23734 阅读 · 1 评论 -
JQ制作一个目录树菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于折叠菜单案例</title> <style> *{ margin: 0; padding:0; font-family: "Microsoft Y原创 2017-08-24 14:13:14 · 990 阅读 · 0 评论 -
js实现禁止浏览器后退
history.pushState(null, null, document.URL);window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);});原创 2017-07-05 09:18:25 · 687 阅读 · 0 评论 -
ajax实现上传文件进度条
<?php header('Content-type:text/html; charset="utf-8"'); $upload_position = 'uploads/'; if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){ exit_status(array('code'=>1,'msg'=>'错误提交原创 2017-07-12 16:56:54 · 1723 阅读 · 0 评论 -
封装一个常用的js工具类
/** * @author:水痕 * @timer:2016-07-28 * @email:332904234@qq.com * @version:1.0 * @title:封装一个自己常用的工具类js * @note: */;(function(window, document, $) { window.utils = { ////////////原创 2017-05-02 22:52:55 · 13505 阅读 · 0 评论 -
关于封装部分DOM操作的方法
window.utils = { /////////////////////////////关于DOM操作js开始///////////////////////////////////// /** * 定义一个获取元素的方法 * @param param * @returns {*} */ $$: function(param) {原创 2017-06-06 19:47:45 · 979 阅读 · 0 评论 -
javascript设计模式(二)-安全工厂方式
var Factory = function(type, content) { if (this instanceof Factory) { return new this[type](content); } else { return new Factory(type, content); }原创 2017-05-18 17:07:04 · 784 阅读 · 0 评论 -
javascript文本输入框中判断中文字与英文字符占位多少
/* *一个中文算2个英文，2个字节，计算字符串的长度 */var str_length = function (str) { var m = 0; var a = str.split(""); for (var i = 0; i < a.length; i++) { if (a[i].charCodeAt(0) < 299) {原创 2017-05-16 14:53:08 · 3178 阅读 · 0 评论 -
javascript面向对象的混入
一、单混入(单继承)function extend(sourceObj, targetObj) { for (var key in targetObj) { if (targetObj.hasOwnProperty(key)) { sourceObj[key] = targetObj[key]; } } return s原创 2017-04-24 17:24:08 · 997 阅读 · 0 评论 -
javascript设计模式(一)-简单的工厂模式
一、如果同一类型的类太多，可以封装在一个函数里面//定义一个弹出框 var LoginAlert = function() { }; LoginAlert.prototype.show = function() { return "我是简单alert提示语句"; }; //定义一个确认框 var LoginConfirm = functio原创 2017-05-12 17:29:46 · 719 阅读 · 0 评论 -
$.ajax()方法详解
jquery中的ajax方法参数总是记不住，这里记录一下。ajax主要参数1、url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2、type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3、timeout: 要求为Number类型的参数，设置请原创 2017-06-26 13:50:55 · 567 阅读 · 0 评论 -
前端js性能测试工具(JSLitmus)的使用
一、js下载地址二、页面中引入js<script src="./JSLitmus.js"></script>三、测试数据<div id="domTestWrap"> <div class="dom-test-content"> <span class="dom-test-text"></span> </div> <div class="dom-test-con原创 2017-06-28 09:16:32 · 5266 阅读 · 0 评论 -
高效的使用DOM操作
一、DOM操作影响性能的原因 前端性能优化主要是DOM操作的优化，DOM优化的总原则是减少DOM的操作。造成DOM影响性能的主要原因1、DOM的实现和ECMAScipt的实现是分离的，通过Javascript代码调用DOM接口实际上相当两个独立的模块之间的交互。2、对DOM的操作会影响浏览器的重绘和重排。 增加、删除和修改可见的DOM元素页面初始化的渲染移动DOM元素修改CSS样式，改原创 2017-06-28 09:19:34 · 1891 阅读 · 1 评论 -
typescript总结笔记二
一、泛型的认识 泛型可以简单理解为类型变量，它是一种特殊的变量，只用于表示类型而不是值。二、定义一个简单的泛型1、定义泛型function identity<T>(arg: T): T { return arg;} identity就叫泛型函数2、直接调用这个函数(推荐)console.log(identity('hello'));console.log(identity(2原创 2017-07-27 15:09:42 · 667 阅读 · 0 评论 -
前后端分离开发中处理跨域问题汇总
一、通过CROS跨域 客户端不需要处理,只是服务器端需要添加一个头部1、服务器端设置Access-Control-Allow-Originres.set('Access-Control-Allow-Origin', 'http://localhost:3000');2、详细代码见01(01-CORS)二、使用JSONP处理跨域的问题 jsonp实质就是利用回调函数的处理方式,需要服务端配原创 2017-07-27 10:19:19 · 966 阅读 · 0 评论 -
JavaScript操作cookie
let jsCookie = (function() { //读取cookies function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); return arr != null ? unescape原创 2017-07-24 16:56:35 · 736 阅读 · 0 评论 -
Base64加解密的方法
//1.加密解密方法使用：//1.加密 var str = '123'; //需要加密的文字var base = new Base64(); var result = base.encode(str); console.log("加密后:"+result);//2.解密 var result2 = base.decode(result); //2.加密、解密算法封装：co原创 2017-07-16 12:12:32 · 2380 阅读 · 0 评论 -
常见文件的mime类型
可以直接复制过去创建一个mime.json文件{ ".323":"text/h323" , ".3gp":"video/3gpp" , ".aab":"application/x-authoware-bin" , ".aam":"application/x-authoware-map" , ".aas":"application/x-authoware-seg" , ".acx原创 2017-07-16 16:48:17 · 17348 阅读 · 0 评论 -
nodejs密码加密中生成随机数
方法一：Math.random().toString(36).substr(2)运行后的结果就是11位数的随机数方法二:1、定义函数function randomWord(randomFlag, min, max){ var str = "", range = min, arr = ['0', '1', '2', '3', '4', '5', '6',原创 2017-07-16 12:24:47 · 4739 阅读 · 0 评论 -
javascript中寄生组合式继承
在ES6之前类的继承终极大招寄生组合式继承一、改写原型继承function inheritObject(o) { function F() { } F.prototype = o; return new F(); }二、创建继承组合式继承/** * subClass 子类 * superClass父类原创 2017-05-12 17:07:58 · 784 阅读 · 0 评论