- 博客(45)
- 收藏
- 关注
RSS订阅转载 webpack 入门三
webpack各种优化 上一章节我们已经掌握了webpack常见的所有配置 这一节我们来看看如何实现webpack中的优化，我们先来编写最基本的webpack配置，然后依次实现各种优化！ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require("h...
2019-09-18 16:33:00
180
转载 weboack 入门二
Webpack中必须掌握的配置 loader主要用于把模块原内容按照需求转换成新内容，可以加载非 JS 模块！ 通过使用不同的Loader，Webpack可以把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等。 我们来看看这些我们必须掌握的loader! 1.loader的编写 1.1 loader的使用 test：匹配处理文件的扩展名的正则表达式 use：loader名称，...
2019-09-18 16:32:00
250
转载 webpack 入门一
最近报了个webpack班,此博客为上课笔记 从0搭建自己的webpack开发环境 1.什么是Webpack？ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 ...
2019-09-18 16:30:00
133
转载 输入一个url发生了什么
DNS解析 TCP连接 发送http请求 服务器处理请求 浏览器解析渲染页面 连接结束 DNS解析 什么是DNS? DNS是一种组织成域层次结构的计算机和网络服务命名系统，他用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换成IP地址的工作。DNS就是这样的一位"翻译官"，它的基本工作原理可以用下图来表示。 根域名服务器(root Name server) 是互联网...
2019-08-04 11:46:00
151
转载 http详解
http http是超文本传输协议，是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息， 客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息，不仅可用于Web访问，也可以用于其他因特网/内联网应用系统之间的通信，从而实现各类应用资源超媒体访问的集成。 HTTP三点注意事项 HTTP是无连接...
2019-07-14 23:05:00
224
转载 JavaScript对象详解
Object.create Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。Object.create()是一个静态函数，而不是提供给某个对象调用的方法。 语法 Object.create(proto, [propertiesObject]) 参数 proto:新创建对象的原型对象。 可选。如果没有指定为 undefined，...
2019-07-07 23:37:00
85
转载 javaScript垃圾回收机制
什么是垃圾回收 js具有垃圾回收机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。而在c和c++之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。在边写js程序时开发人员不用在关心内存的使用问题，所需内存的分配以及无用内存的回收完全实现了自动化管理。这种垃圾收集机制的原理其实也很简单：找出那些不再继续使用的变量，然后释放掉其占用的内存...
2019-06-26 00:00:00
84
转载 js数据类型与隐式类型转换
执行环境 执行环境是js中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。 全局执行环境 全局执行环境是最外围的一个执行环境。根据ECMAScript实现所...
2019-06-24 22:41:00
113
转载 建造者模式加策略模式计算个人工资
定义 建造这模式 又名生成器模式，是一种对象构建模式。它可以将复杂对象的建造过程抽象出来（抽象类别），使这个抽象过程的不同实现方法可以构造出不同表现（属性）的对象 建造者模式 是一步一步创建一个复杂的对象，它允许用户只通过指定复杂对象的类型和内容就可以构建它们，用户不需要知道内部的具体构建细节。 建造者模式优点 客户端不必知道产品内部组成的细节，将产品本身与产品的创建过程解耦，...
2019-06-22 23:03:00
225
转载 适配器模式
适配器模式 适配器模式的作用是解决两个软件实体间的不兼容问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发种有许多这样的场景：当试图调用没款或者对象的某个接口时，却发现这个接口的格式并不符和目前的需求。这个时候有两种解决办法，第一种时修改原来的接口实现，但如果原来的模块很复杂，或者...
2019-06-12 20:01:00
78
转载 基于策略模式简单实现element表单校验
什么是策略模式 在策略模式中定义了一系列算法，将每一个算法封装起来，并让他们可以互相替换。策略模式让算法独立于使用它的客户而变化，也称为政策模式。策略模式是一种对象行为型模式。 策略模式的优点： 策略模式利用组合、委托和多态等技术思想，可以有效的避免多种条件选择语句 策略模式提供了对开放封闭原则的完美支持，将算法封装在独立的strategy中，使得它易于切换，易于理解，易于拓展 策...
2019-06-08 14:39:00
237
转载 跨域
同源策略 含义 A 网页设置的Cookie，B网页不能打开，除非这两个网页同源。所谓同源是指 协议相同 域名相同 端口相同 举个来说，http://www.abc.com/index这个网址,协议是http://,域名是www.abc.com,端口是80(默认端口可以省略) http://www.abc.com/index2 : 同源 https://www.abc.com/i...
2019-06-06 19:52:00
146
转载 原型模式
介绍 原型模式是创建型模式的一种，其特点在于通过复制一个已经存在的实例来返回新的实例。被复制的实例就是我们所称的原型，这个原型是可定制的。原型模式多用于创建复杂的或者耗时的实例，因为这种情况下，复制一个已经存在的实例使程序运行更高效；或者创建值相等，只是命名不一样的同类数据。 对于原型模式，我们可以利用JavaScript特有的原型继承特性去创建对象的方式，也就是创建的一个对象作为另...
2019-06-05 20:40:00
68
转载 单例模式
介绍 在应用单例模式时，生成单例的类必须保证只有一个实例的存在，很多时候整个系统只需要拥有一个全局对象，才有利于协调系统整体的行为。比如在整个系统的配置文件中，配置数据有一个单例对象进行统一读取和修改，其他对象需要配置数据的时候也统一通过该单例对象来获取配置数据，这样就可以简化复杂环境下的配置管理。--摘自维基百科 核心 保证一个类仅有一个实例，并提供一个访问它的全局访问点。 ...
2019-06-03 20:46:00
62
转载 vue-router进阶篇
导航守卫 正如其名，vue-router提供的导航守卫主要来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的。 注意：参数或查询的改变并不会差法进入/离开的导航守卫。可以通过观察$route对象来应对这些变化，或者使用beforeRouteUpdate 的组件内守卫。 全局前置守卫 const router = new Router({...
2019-05-31 20:36:00
118
转载 vue-router
简介 vue-router和vue.js是深度集成的，适用于单页面应用，传统的路由是用一些产链接来实现页面切换和跳转。而vue-router在单页面应用中，则是组件之间的切换，其本质就是：建立并管理url和对应组件之间的映射关系。 动态路由匹配 定义路由 const router = new Router({ routes: [ { path: '/', ...
2019-05-30 21:42:00
325
转载 h5深度剖析
移动端适配方案 Media Queries meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优点 media query可以做到设备像素比的判断，方法简单...
2019-05-27 23:18:00
87
转载 js中同步异步，任务队列
单线程 浏览器是多线程运行的，它给js分配一个线程；js就是单线程运行的【一次只干一件事】 所谓单线程，就是只一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，在执行后面一个任务，以次类推。 js执行分为同步和异步，其中异步来自于浏览器提供的异步队列，在浏览器中分为两个任务队列，一个是主任务队列【同步编程】，一个是等待任务队列【异步编程】 了解js的异步我们应该...
2019-05-23 19:30:00
195
转载 js同步异步，任务队列
单线程 浏览器是多线程运行的，它给js分配一个线程；js就是单线程运行的【一次只干一件事】 所谓单线程，就是只一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，在执行后面一个任务，以次类推。 js执行分为同步和异步，其中异步来自于浏览器提供的异步队列，在浏览器中分为两个任务队列，一个是主任务队列【同步编程】，一个是等待任务队列【异步编程】 了解js的异步我们应该...
2019-05-23 19:30:00
312
转载 node.js之fs模块
fs模块 fs模块用于对系统文件及目录进行读写操作。 fs中的同步异步 模块中所有方法都有同步和异步两种形式,异步方法中回调函数的第一个参数总是留给异常参数（exception），如果方法成功完成，该参数为null或undefined fs模块中的方法 fs.mkdir(路径，回调函数) : 创建文件夹 fs.readdir(路径，回调函数) : 读取文件目录 fs.readF...
2019-05-14 23:23:00
141
转载 ES6之async await
含义 内置执行器 Generator函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行fn()。 更好的语义 async和await,比起星号和yield，语义更清除了。async表示函数里又异步操作，await表示紧跟在后面的表达式需要等待结果。 更广的适用性 co模块规定，yield命令后面...
2019-05-08 19:57:00
89
转载 ES6 Proxy
概述 Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种'元编程'，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层'拦截'，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写，Proxy 这个次的原意是代理，用在这里表示由它来'代理'某些操作，可以译为'代理器' let obj = ne...
2019-05-07 18:46:00
66
转载 RSA加密，解密，加签，验签
RSA加密解密 RSA加密，解密我使用的是jsencypt，具体的使用参考："https://github.com/travist/jsencrypt" 加密、签名 简介 数据加密：用公钥加密，只有用私钥解开，因为私钥只有你自己有，所以他保证了数据不能被别人看到 数据签名：用私钥加密，只能用公钥解密，任何人都可以用公钥验证。因为私钥只有你自己有，所以它可以保证数据只能是你发出的...
2019-05-07 18:29:00
523
转载 vue 生命周期
vue生命周期 Vue实例从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、写在等一系列过程，我们称这是Vue的生命周期，各个阶段有相对应的事件钩子 1.生命周期钩子函数 下面这张图是vue生命周期各个阶段的执行情况 生命周期钩子 组件状态 最佳实践 beforCreate 实例初始化之后，this指向创建的实例，不能访问到data、com...
2019-04-24 16:17:00
55
转载 钉钉扫码登录
扫码登录第三方网站 使用钉钉客户端扫码并确认登录您的web系统，在您的系统内获得正在访问用户的钉钉身份，而用户无需输入账户密码。 注意：此功能与企业自建应用/第三方企业应用无关，只能用扫码登录打开第三方网站，并且不是钉钉内的应用免登，此流程只能做到获取到用户身份（无手机号和企业相关信息）。 获取appId及appSecret 点击进入钉钉开发者平台 的页面，点击左侧菜单的【移动接入...
2019-04-24 15:56:00
2180
转载 Set 和 Map 数据结构
set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构。 let set = new Set() let arr = [2, 1, 3, 2, 4, 5, 2, 1] arr.forEach(item=>set.add(item)) console.log(set) // Set(5...
2019-04-20 12:58:00
43
转载 观察者模式
概述 观察者模式用于建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象做出反应。在观察者模式中，发生改变的对象成为观察目标，而被通知的对象成为观察者，一个观察目标可以对应多个观察者，而这些观察者之间可以没有任何相互联系，可以根据需要增加和删除观察者，是的系统更易于扩展。一个软件系统常常要求在某一个对象的状态发生变化的时候，其他对象做出相应的改变。观察者模式...
2019-04-19 20:56:00
70
转载 es6对象扩展
属性的简洁表示法 ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 let a = 'name' let obj = {a} console.log(obj) // {a: "name"} 上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子。 方法也可以简写 let obj = { fn...
2019-04-14 22:52:00
50
转载 正则
定义 正确的规则,它是专门处理字符串的 正则分为修饰符和元字符【两次元字符，和特殊元字符】，其中两个斜杠中属于元字符，斜杠后面是属于修饰符 # 如何创建一个正则 通过字面量方式来创建 let reg = /\d/ 通过实例化的方式来创建,通过new关键字执行正则类，返回一个正则的实例；如果你创建的正则中有变量，我们必须通过实例化的方式来创建，通过实例化的方式创建，第一个参数式元...
2019-04-12 19:33:00
150
转载 函数扩展
1.函数参数的默认值 function fn(x,y){ y = y || 2 console.log(x,y) // 1 2 } fn(1) 上面代码中，如果函数fn的参数y没有的话，则制定默认值位2。这种写法的缺点在于，如果参数y赋值了，但对应的布尔值为false，则该赋值不起作用 es6允许为函数的参数设置默认值，即直接写在参数定...
2019-04-11 20:29:00
100
转载 前端常用的正则表达式
银行卡号 @keyup.native="form.account=form.account.replace(/\D/g,'').replace(/....(?!$)/g,'$& ')" 每隔4位自动添加一个空格 身份证号 /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20...
2019-04-02 13:09:00
59
转载 websocket
为什么需要WebSocket? 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。 WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动...
2019-03-25 20:31:00
103
转载 vue Api
Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的 DOM 应用场景 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 <template> <div> <span ref="hello">111<...
2019-03-22 13:00:00
103
转载 js中的作用域，this指向，原型链
作用域 定义：在作用域中找到一个变量，优先在当前的作用域中查找，如果自己的作用域没有的话，会到上级[就看当前作用域在哪里定义的，跟在哪执行的没有关系]查找，如果上级还没有，会一直找到全局，全局也没有会直接报错[xxx is not defined] 全局作用域 浏览器一打开就形成一个全局作用域[会自动生成一个全局对象window]，在全局作用域下声明的变量属于全局变量 let a...
2019-03-21 22:23:00
175
转载 Promise
特点 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Prom...
2019-03-17 19:43:00
71
转载 es6 数组的扩展
es6数组的扩展 1. 扩展运算符 扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 基本使用 console.log(...[1,2,3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 函数的扩展 function add(a,b){ ...
2019-03-13 22:31:00
82
转载 面向对象的7大原则及其实例
单一职责原则 定义 一个对象应该只包含单一的职责，并且该职责被完整地封装在一个类中。 就一个类而言，应该仅有一个引起它变化的原因。 分析 一个类（或者大到模块，小到方法）承担的职责越多，它被复用的可能性越小，而且如果一个类承担的职责过多，就相当于将这些职责耦合在一起，当其中一个职责变化时，可能会影响其他职责的运作。 类的职责主要包括两个方面：数据职责和行为职责，数据职责通过其属性来体现...
2019-02-25 22:48:00
142
转载 flex 布局
基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉...
2019-02-20 22:46:00
130
转载 js-工厂模式
首先需要说一下工厂模式。工厂模式根据抽象程度的不同分为三种 简单工厂模式 工厂方法模式 抽象工厂模式 1.简单工厂模式 简单工厂模式:又称为静态工厂方法模式，它属于类创建型模式。 在简单工厂模式中，可以根据参数的不同返回不同类的实例。 由工厂对象决定创建某一种产品对象类的实例。 let Ball= function(name){ let A = new Objec...
2019-02-19 22:42:00
110
转载 js中call、apply、bind的区别
call call 函数上的公共方法，主要是用来改变this call的第一个参数，改变call前面函数中的this 让call前面的函数执行 call方法中第二个及第二个以后的参数作为实参传给call前面的这个函数 function a(){ console.log(this) // A console.log(arguments) // [1,2,3] 这...
2019-02-19 22:01:00
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人