- 博客(28)
- 收藏
- 关注
RSS订阅原创 常见设计模式
设计模式遵循的原则单一职责原则，即一个部分负责补个功能，如果多个功能划分为多个部分最少知识yuanze，每个部分尽量减少与其他部分之间的联系，如果两个对象之间必须要有联系的话，可以把这种联系交给第三方封闭开放原则，程序功能的修改可以增加代码而不能直接修改代码常见的设计模式单例设计模式确保只有一个实例，提供全局的访问方式：通过立即执行函数const getIns = (function() { let ins = null; return () => { if (!ins)
2021-11-04 11:39:03
99
原创 vite学习
一、 为什么使用vite，vite的好处原生的js是没有模块机制的，到了ES6才提出ES的模块机制，所以人们习惯使用打包工具对代码进行处理，使其可以直接再浏览器中使用，但是随着代码的指数级增长，造成了服务启动慢，HMR慢，对我们的程序开发造成了非常不好的体验。vite旨在解决以上的问题改变服务器启动vite吧打包氛围两个部分，用esbuild打包依赖，然后用ES模块的方式提供源码，源码部分可以做到根据路由的方式按需引入改变HMR更新方式的变化，初级整个模块重新打包更新，之后热更新某个模块，vite
2021-10-15 11:17:52
194
原创 transition, transform 和 animation？三者的区别
transition, transform 和 animation？三者的区别transition 过渡,浏览器自动计算过度效果transform 变形,直接从一个状态变化到另一个状态animation 动画,可以多帧之间进行过渡效果简单动画: transition + transformtransform 写变形的效果,然后使用transition 加上过渡动画复杂动画: animation + @keyframes处理中间多个状态的效果...
2021-10-13 15:50:38
101
原创 Http和浏览器
httphttp 超文本传输协议https 在http的基础上添加了SSL加密，是的传输变得安全Tcp 三次握手C发起连接请求S收到请求之后，对C发起确认收到以及可以传出的报文C收到S发送的确认请求，确认自己可以接收S的请求，并发送报文报文告诉CS收到报文连接建立TCP和UDP的区别TCP： 面向连接，可靠，无差错，不丢失，不重复，按序到达；面向字节流；一对一UDP： 无连接，不可靠， 尽最大努力的交付；面向报文；一对多结构不同，首部不同BOM 属性对象的方法locationl
2021-09-08 22:27:29
181
原创 前端性能优化
一、资源的合并和压缩性能优化就是在整个http请求的时候进行资源的优化核心：1. 减少http请求数量2. 减少请求的资源的大小主要方式：html、css、js 文件的压缩使用html-minifier对HTML中的HTML、CSS、Js进行压缩使用clean-css对CSS进行压缩使用uglify.js2对js进行压缩代码优化文件合并优点： 文件合并减少HTTP请求的数量，减少丢包的情况缺点：增加首屏加载的时间和压力建议： 对公共的组件库进行合并，对同一个页面内的文件进行合并
2020-12-11 22:07:11
90
原创 vue 面试题
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 do
2020-07-01 09:51:46
353
原创 webpack 配置详情
entryconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { index: ['./src/index.js', './src/count.js'], add: './src/add.js' }, output: { filename: '[name].js', pa.
2020-05-30 20:14:58
546
原创 webpack 优化配置
HMRconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/built.js', path: resolve(__dirname, 'build') },.
2020-05-30 20:07:42
222
原创 webpack基础
一、 五个核心概念entryoutputloaderpluginsmode （两种模式选择： development、production）二、 基础初始化项目 package.json： npm init安装webpack ： npm install webpack webpack-cli -D命令行使用，可以指定模式webpack src/js/index.js -o build/js/built.js --mode=developmentwebpack src/js/ind
2020-05-30 19:54:25
207
原创 Vue引入外部css, 作用域是局部的解决方案
问题描述了解css文件的引入方式，寻找解决css文件通过引入，只在当前的vue组件当中有效，不影响其他组件样式的解决方案引入方式js文件中引入import 'iview/dist/styles/iview.css'此时样式在全局生效style当中引入<style scoped>@import "../static/css/user.css";.user-content{ background-color: #3982e5;}测试@import只是 动态引入
2020-05-14 14:34:53
4817
原创 VUE动态组件component以及keep-alive
component<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"
2020-05-14 14:15:17
441
原创 Karma+mocha+chai
三种工具简介KarmaKarma官方网址Karma为前端自动化测试提供了跨浏览器测试的能力，可以自动在Chrome,Firefox,IE等主流浏览器依次跑完测试用例，同时也支持headless浏览器(入phantomJs)中运行测试用例。webpack+babel可以主动为想要适配的浏览器提供转码和垫片补丁引入能力，而Karma可以为最终的结果提供验证能力。Karma的配置方式可以阅读《...
2020-03-06 12:28:49
226
原创 .md文件在页面上功能展示以及代码展示
.md文件在页面上功能展示以及代码展示简单来说就是：一个.md文件既展示页面又展示代码逻辑：相关技术：markdown-it 渲染 markdown 基本语法，转化为htmlmarkdown-it-anchor 为各级标题添加锚点markdown-it-container 用于创建自定义的块级容器vue-markdown-loader 核心loader过程：配置markdow...
2020-02-26 12:34:03
4825
1
原创 test
你有用过哪些前端性能优化的方法？（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化jav...
2019-10-15 16:38:57
97
原创 vue之基础组件的自动化全局注册
某些组件需要在组件中频繁的使用就需要注册到全局例如是一个按钮或者一个数个输入框import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default { components: { B...
2019-10-14 10:50:50
200
原创 vue修饰符
表单修饰符.lazy光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新.trim过滤首尾的空格！首尾，中间的是不会过滤的.number限制输入数字或者输入的东西转换成数字事件修饰符.stop相当于调用了event.stopPropagation()方法。由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。.prevent用于阻止...
2019-10-12 17:27:40
122
原创 Vuex
Vuex简介Vuex是专门为Vue开发的状态管理工具，采用全局单例模式，集中管理Vue项目中所有组件的状态，并以一定的规则保证状态以一种可预测的方式发生变化Vue的好处（即与全局对象的差别）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 s...
2019-10-11 17:03:52
290
原创 异步编程之Promise
Promise 简介Promise 为异步编程提供了一种新的解决方案。简单说Promise 是一个对象，在创建时结果是未知的，他允许你为异步操作返回成功和失败后的处理方法，这样就可以使异步方法像同步方法样有自己的返回值，只是他的返回值不是立即返回，而是一个代表未来出现结果的Promise对象。三种状态pending（待定的）、fulfilled（已解决/以实现）、rejected（已拒绝/...
2019-10-09 16:03:33
113
原创 MongoDB简介
一、传统数据库回顾数据库存在的意义数据库有行列的概念，可以存放数据的关系；例如结构性 数据库MySql、Oracle、SqlServer、Access数据库提供良好的接口，让增删改查变得方便，以至于便利管理你的数据数据库可以供PHP、。Net、jsp等使用二、NoSql在传统的数据库中有行和列的概念，不利于以后的修改例如：以前定义的格式之后要添加一个字段，就需要在以前的所有的数据...
2019-09-19 22:35:13
223
原创 Node框架之Express
● 原生Node开发，会发现有很多问题。比如：■ 呈递静态页面很不方便，需要处理每个HTTP请求，还要考虑304问题■ 路由处理代码不直观清晰，需要写很多正则表达式和字符串函数■ 不能集中精力写业务，要考虑很多其他的东西EXPRESS是在你的想法和服务器之间充当薄薄的一层。这并不意味着他不够健壮，或者没有足够的有用特性，而是尽量少干预你，让你充分表达自己的思想，同时提供一些有用的东西。E...
2019-09-16 14:06:22
88
原创 Node之文件上传（formidable）
// 实现上传文件并修改文件的名字var http = require("http");var formidable = require('formidable');var util = require("util");var fs = require("fs");var sd = require("silly-datetime");var path = require("path")...
2019-09-08 14:05:59
147
原创 Node之post请求
固定代码：var http = require("http");var querystring = require("querystring");//创建服务器var server = http.createServer(function(req,res){ //如果你的访问地址是这个，并且请求类型是post if(req.url == "/dopost" &&...
2019-09-08 14:04:12
213
原创 CommonJs、AMD、CMD、ES6模块
模块化简介模块化就是把系统分离成独立功能的方法，这样我们需要什么功能，就加载什么功能每个模块都是独立的，良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护可以重复利用，而不用经常复制自己之前写过的代码模块化主要解决两个问题，“命名冲突”、“文件依赖”命名冲突// a.jsvar a = 1;// b.jsvar a = 2;文件依赖// b.js依...
2019-09-08 13:59:00
90
原创 Node之静态服务器
在Java构成的apache和tomcat服务中把文件夹放入服务器的某个文件夹就可以直接在浏览器中访问，但是在Node中不行，Node中必须自定义路由指向想要公开的文件。即自己实现apache和tomcat自带的功能。在express已经实现了var http = require("http");var fs = require("fs");var url = require("url")...
2019-09-08 11:46:34
284
原创 Node之文件系统fs
读取文件var fs = require("fs");// 异步读取fs.readFile('input.txt', function (err, data) { if (err) { return console.error(err); } console.log("异步读取: " + data.toString());});// 同步读取var ...
2019-09-06 11:15:26
100
原创 Node安装及helloword
Node安装官网下载直接下一步；安装之后会直接直接写入到环境变量中可以直接在cmd中node -V来测试是否安装成功运行node： node 路径名（直接cd到文件目录，而不是写完整的路径名）ctrl+c，就可以打断挂起的服务器程序HelloWord//require表示引包，引包就是引用自己的一个特殊功能var http = require("http");//创建服务器，参数...
2019-09-05 10:18:32
114
原创 node开始之node特点简介
1.1 简介V8引擎本身就是用于Chrome浏览器的JS解释部分，但是Ryan Dahl这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。Node.js是一个专注于实现高性能Web服务器优化的专家，几经探索，几经挫折后，遇到V8而诞生的项目。Node.js是一个让JavaScript运行在服务器端的开发平台，它让JavaScript的触角伸到了服务器端，可以与PHP、JSP、P...
2019-09-04 10:13:54
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人