前端体系构建
文章平均质量分 50
通过学习,形成一个自己结构清晰的前端体系。
xiaobangsky
茶飘香,酒罢去,聚朋友,再回楼!
展开
-
前端之扇形图实现案例
1.利用echarts实现直接上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>扇形图实例</title></head><body></body></html><html lang="en"><head> <meta n原创 2022-04-03 00:22:37 · 1284 阅读 · 2 评论 -
微信小程序入门
准备工作注册好微信小程序的账号,填写好个人信息申请小程序微信小程序会指导你安装微信小程序的开发工具,等安装后,建立工程后,你可以用vscode或者webstorm进行开发。做一个简易的最终密码如图:代码分析怎么开发,很简单,看微信小程序的开发文档,用CRM学习法进行代码开发即可。小程序开发帮助文档了解一下项目目录index.wxml:就相当于html页面,类似于xml文件,里面使用的也是各种标签index.wxss:就相当于css,里面的写法和css是一样的index.js原创 2021-03-10 18:12:40 · 49 阅读 · 0 评论 -
Vue2.0 v-for 中 :key的作用
Vue2.0 v-for 中 :key的作用:key的用法举例说明解决办法不能用index作为key没有id怎么办Vue为什么不自增id:key的用法代码示例<ul> <li v-for="item in arr" :key="user.id" > {{ item.name }} </li></ul>举例说明假设有三个组件,每个子组件里面有一个「有状态的」孙子组件,如图:用户点击删除按钮,把第二个子组原创 2021-03-09 10:18:26 · 197 阅读 · 0 评论 -
Vue中的v-if和v-show
Vue中的v-if和v-show构建DOM时的区别场景应用场景1:如何重置组件场景2:多个页面同时运行, 只显示当前一个页面场景3:多个页面切换,保持切换前的状态构建DOM时的区别两者都是可以用来控制标签的隐藏和显示v-if的控制是:在构建DOM的时候,如果是true,就进行显示,如果是false,就进行隐藏,这里要分清楚v-if是控制标签存不存在DOM上面。v-show的控制是:在构建DOM的时候,一直存在DOM上,通过true或者false来进行显示或者隐藏场景应用场景1:如何重置组件原创 2021-03-09 09:38:01 · 144 阅读 · 0 评论 -
Vue中的v-if和v-for
Vue中的v-if和v-for理解两者的优先级两种应用场景先遍历,再判断时先判断再遍历时理解两者的优先级v-for的优先级高于v-if两种应用场景先遍历,再判断时由于v-for优先级大于v-if,所以,可以利用计算属性进行过滤优化<ul> <li v-for = 'item in arr' v-if = 'item.isActive' :key = 'user.id'> {{item.name}} </li></ul&原创 2021-03-09 09:27:14 · 600 阅读 · 0 评论 -
虚拟 DOM 和 DOM diff
虚拟 DOM 和 DOM diff虚拟DOM虚拟DOM的优点虚拟DOM的缺点DOM diffDOM diff优点DOM diff缺点虚拟DOM一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听、子元素,以及其他属性虚拟DOM的优点能减少不必要的DOM操作能跨平台渲染记住:虚拟DOM和实际DOM的操作,作比较时,要有具体的例子。实际上实际的DOM操作并不慢,但是很多教科书和资料介绍说DOM操作慢,这个说法太片面虚拟DOM的缺点需要额外的创建函数,如createElement或原创 2021-01-10 10:47:17 · 86 阅读 · 0 评论 -
Node.js之Stream
Node.js之Stream例子1Steam-流例子2\3管道Stream对象的原型链Stream的分类自创流例子1const fs = require("fs");const stream = fs.createWriteStream("./big_file.txt");for(let i = 0; i < 10000; i++){ stream.write(`这是${i}行内容,测试测试\n`);}stream.end();console.log('done');Ste原创 2021-01-10 10:27:56 · 109 阅读 · 0 评论 -
Node.js操作数据库的相关知识
Node.js操作数据库的相关知识Windows安装Docker新版旧版Docker安装mysqlDocker的一些命令Mysqlmysql的一些命令数据库(Database)DBMS(数据库管理系统)Node.js连接数据Mysql 数据类型ORM SequelizeWindows安装Docker新版注册https://hub.docker.com/下载Docker for Windows Installer安装好后,docker --version设置国内镜像,访问快点,https://d原创 2021-01-10 09:45:54 · 117 阅读 · 0 评论 -
利用Node开发一个翻译工具
先去百度翻译免费接口平台注册账户百度翻译免费接口调用百度免费翻译接口的核心代码 const options = { hostname: 'api.fanyi.baidu.com', port: 443, path: '/api/trans/vip/translate?' + query, method: 'GET' };参考代码翻译工具发布到NPM//查看源nrm ls//使用npm的源nrm use npm//登录原创 2021-01-06 20:47:05 · 461 阅读 · 0 评论 -
node的一些工具和开发工具配置
node的一些工具和开发工具配置node-devts-nodets-node-devnode-devyarn global add node-dev当文件更新时自动重启node避免每次改完代码都要重新运行的麻烦不宜在生成环境使用ts-nodeyarn global add ts-node让node支持直接运行TypeScript代码不宜在生成环境使用ts-node-devyarn global add ts-node-dev该工具结合了node-dev、ts-node可以原创 2021-01-05 22:24:29 · 91 阅读 · 0 评论 -
如何调试Node.js程序
WebStorm 调试 Node.jsrun模式debug模式VSCode 调试 Node.jsrun模式debug模式命令行和 Chrome 调试 Node.js命令行:node --inspect-brk cli.js add task 200打开浏览器开发者工具,如图:原创 2021-01-05 22:03:40 · 149 阅读 · 0 评论 -
NPM发布项目
本篇文章主要是用来记录如何将写好的一个node.js的项目发布到npm,并且可以供大家下载,然后按照后直接可以使用命令执行先查看用的是什么源nrm ls一般要用原始源比较快nrm use npm注册npm地址使用npmnpm add user//然后输入注册的npm账号,密码和邮箱上传发布npm publish如果没有报错,就说明上传成功,发布成功。报错的话,自行搜索错误进行解决。发布完成,进行下载yarn add 上传的npm的name...原创 2021-01-03 16:59:14 · 148 阅读 · 0 评论 -
React Hooks浅析
React Hooks浅析代码分析实现React.useState多个useState的用法图示总结useRefuseContext总结代码分析const React = window.React;const ReactDOM = window.ReactDOM;const App = props=>{ const [n,setN] = React.useState(0); const onClick = ()=>{ setN(n+1); }原创 2020-12-26 15:41:39 · 136 阅读 · 0 评论 -
React组件学习(三)
React组件学习[三]函数组件函数组件代替class组件面临两个问题没有state没有生命周期自定义 Hook 之 useUpdate函数组件代码示例const Hello = (props)=>{ return <div>{props.msg}</div>}const Hello = props=> <div>{props.msg}</div>function Hello(props){ return <d原创 2020-12-26 12:30:43 · 61 阅读 · 0 评论 -
React组件学习(二)
@TOCClass组件先来学下英语,方便后面使用这些术语derived:导出的,派生的 render:渲染super class:超类,父类 property:属性state:状态 mount:挂载创建Class组件的方式ES5方式(过时)//由于ES5不支持class,才会有这种方式const React = window.React;const ReactDOM = window.ReactDOM;const App =原创 2020-12-26 11:27:17 · 80 阅读 · 0 评论 -
React 组件学习(一)
React 组件学习(一)组件React两种组件函数组件类组件的理解代码示例添加props(外部数据)添加state(内部数据)类组件注意事项函数组件注意事项复杂的state事件绑定类组件的事件绑定React 和Vue的对比共性差异组件//React组件const Div = ()=>React.createElement('div'..);能跟其他物体组合起来的东西就是组件就上述代码示例而言,一个返回React元素的函数就是组件在Vue里面,一个构造选项就是一个组件React两种原创 2020-12-25 00:22:31 · 94 阅读 · 0 评论 -
React初体验
React初体验React初体验React的引入CND引入通过webpack引入React新手可以用create-react-appReact元素和函数组件React元素()=> React元素JSX使用JSX的注意事宜JSX的条件判断JSX的循环JSX的总结React的引入CND引入代码示例 <body> <div id="app"></div> <!--引入React--> <script src="htt原创 2020-12-24 22:58:30 · 105 阅读 · 1 评论 -
Vue Router
Vue RouterVue Router什么是路由先说说路由器前端路由前端实现路由的思路代码示例hash模式history模式memory模式三种路由的优缺点hash模式history模式memory模式Vue RouterVue Router什么是路由先说说路由器前端路由路由的概念:通过互联的网络把信息从源地址传送到目的地址的活动。通常由路由表来控制。路由的作用:分发请求。路由表:存储路径的表。路由器:就是分发请求的硬件图示分析:前端实现路由的思路代码示例hash模式&l原创 2020-12-22 23:39:42 · 71 阅读 · 0 评论 -
Vue表单和v-model
Vue表单和v-modelVue表单介绍一些form表单中的基础组件用法inputtextareacheckboxradioselectform修饰符.lazy.number.trimv-model代码示例自定义input总结ant-design-vue的使用Vue表单主要是按照Vue的文档,进行CRM操作,文档链接文档链接介绍一些form表单中的基础组件用法form表单中有哪些基本组件,如:input/textarea/checkbox/radio/select/forminput//ht原创 2020-12-22 00:45:17 · 280 阅读 · 0 评论 -
Vue的进阶属性
Vue的进阶属性Directives(指令)自定义指令代码示例directiveOptions指令的作用mixins(混入)【其实就是复制】作用extends(继承)作用provide(提供)和inject(注入)作用代码示例Directives(指令)自定义指令代码示例import Vue from "vue";import App from "./App.vue";Vue.config.productionTip = false;//声明一个全局指令Vue.directive("y",原创 2020-12-21 07:21:34 · 102 阅读 · 1 评论 -
Vue的模板、指令与修饰符
Vue的模板、指令与修饰符Vue的模板模板template三种写法Vue完整版,写在HTML里Vue完整版,写在选项中Vue非完整版,配合xxx.vue文件模板总结Vue的指令(Directive)指令Vue的修饰符代码示例有些指令支持修饰符修饰符列表Vue的模板模板template三种写法Vue完整版,写在HTML里<div id="app"> {{n}} <button @click="add">+1</button></div>原创 2020-12-21 06:02:43 · 149 阅读 · 0 评论 -
Vue的computed和watch
Vue的computed和watchcomputed(计算属性)用途代码示例缓存watch(监听)用途代码示例immediate和handler的用法deepcomputed(计算属性)用途被计算出来的属性就是计算属性代码示例// 引用完整版 Vue,方便讲解import Vue from "vue/dist/vue.js";Vue.config.productionTip = false;new Vue({ data: { user: { email: "12232原创 2020-12-19 17:33:48 · 121 阅读 · 2 评论 -
Vue学习笔记(一)
Vue学习笔记Vue实例Vue实例图optionsel-挂载点el写在实例里面$mount挂载data-内部数据data用对象形式体现data用函数形式体现methods事件处理函数普通函数components生命周期钩子props-外部数据Vue实例Vue实例图optionsel-挂载点el写在实例里面$mount挂载data-内部数据data用对象形式体现data用函数形式体现methods事件处理函数普通函数components生命周期钩子props-外部数据Vue实例原创 2020-12-19 00:57:00 · 249 阅读 · 4 评论 -
初识Vue
Vue的历史读做view,意为MVC中的VMVC中的V是Vue的重点,M和C则被简化Vue你可以认为它是一个MV*框架,为啥是MV*框架,从Vue的发展来看,它首先是一个MVM的框架,到后来它演变成了一个MVC框架2013年,0.6版,0.7版2014年,0.8~0.11版本2015年,1.0版本(MVM框架)2016年,2.0版本(MV*框架)2019年,2.6版本2020年,3.0版本Vue的开发者尤雨溪Linkedin主页github主页个人域名主要作品:Vu原创 2020-12-17 23:47:47 · 87 阅读 · 0 评论 -
webpack使用详解(二)
webpack历史前端工具的极速发展grunt打包工具,速度太慢,快死了gulp打包工具,速度可以,但没webpack繁荣require.js 快死了sea.js 死了Browserify 已经挂了与webpack竞争的工具Rollup比webpack的打包体积小但生态不够丰富适合库的开发-Parcel比webpack配置简单适合demo学习webpack做了什么?webpack loader和 plugins翻译:loader = 加载器 plugi原创 2020-12-17 22:18:26 · 102 阅读 · 0 评论 -
webpack使用讲解(一)
安装webpack终端查看版本:npm info webpack命令安装:npm i -g webpack@4 webpack-cli@3本地预览:webpack -dev -serverwebpack转译成jsnpm init -ynpm install webpack webpack-cli --save-dev新建src/index.js 放上console.log(‘hi’)./node_modules/.bin/webpack --versionnpx webpack 得转载 2020-12-14 23:51:26 · 249 阅读 · 0 评论 -
我对MVC的理解
前言我对于MVC的理解,应该是从大学开始学习JAVA的时候开始的。那个时候ssh三大框架还比较流行。从数据库建表,到前端和后台的开发,其中印象最深的就是后台创建一张表的时候,JAVA中的Hibernate建立表的实例对象,这就是像一个数据模型一样,然后我们会建立一些Sevice的服务,这些服务,可以利用接口类定义,然后到接口类的实现类(ServiceImpl)来进行表数据的增删改查,到前端的话,就是展示数据。那个时候,就感觉这就是一个MVC的模型。后来,参加了工作,由于工作的需要,转向了前端,2015年原创 2020-12-13 23:22:00 · 132 阅读 · 0 评论 -
前端跨域(跨域、CROS、JSONP)
跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。特别注意:不同源的页面之间,不准相互访问数据同源策略同源定义源window.origin或location.origin 可以得到当前源源 = 协议 + 域名 +原创 2020-12-13 14:26:53 · 364 阅读 · 0 评论 -
JavaScript之axios
Axios 作弊表(Cheat Sheet)GET 请求//get请求, 字符串请求axios.get('/user?ID=1234').then((response)=>{ console.log(response);}).catch((error)=>{ console.log(error);})//get请求,param请求axios.get('/user',{ params:{ ID:12345 }}).then((resp转载 2020-12-06 19:51:21 · 1587 阅读 · 0 评论 -
Promise对象
Promise的含义Promise 是目前前端解决异步问题的统一方案所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理特点对象的状态不受外界影响【1】.Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)【2】.只有异步操原创 2020-12-06 19:21:19 · 75 阅读 · 0 评论 -
jQuery的ajax
总结一句话总结:ajax函数中层级关系如下://最底层的封装方式:$.ajax();//第二层:.load(),$.get(), $.post()//最高层:$.getscript()和$.getJSON();serialize()方法的作用是什么(最后生成的序列化字符串长什么样)使用serialize()方法序列化表单元素值使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:$原创 2020-12-06 18:39:22 · 50 阅读 · 0 评论 -
JavaScript之AJAX
AJAX(Async JavaScript AND XML)用JS发送请求和接收响应,这就是AJAX的全部内容AJAX是浏览器上的功能浏览器可以发送请求,接收响应浏览器在window上加一个XMLHttpRequest函数用这个构造函数(类)可以构造出一个对象JS通过实现它来发送请求,接收响应AJAX应用的四个步骤创建XMLHttpRequest对象(全称是XMLHttpRequest)调用对象的OPEN方法监听对象的onload&onerror事件,当然用onreadys原创 2020-12-06 16:09:09 · 118 阅读 · 0 评论 -
HTML5本地存储localStorage与sessionStorage详解
本文转自本地存储localStorage与sessionStorage详解文章目录前言 HTML API 基本使用方法 作用域 生存期 数据结构 过期时间 容量限制 域名限制 异常处理 如何测试用户当前浏览器是否支持localstorage 浏览器兼容性 如何调试 在ios设备上无法重复setItem() 相关插件推荐 参考文章前言在最近的项目中用到了html5的本地存储,下面总结一下。1、html5几种存储形式本地存储(localStorage&.转载 2020-12-06 15:48:31 · 284 阅读 · 0 评论 -
DOM 事件模型和事件委托
先了解下点击事件//.爷爷>.爸爸>.儿子, 给3个div分别添加事件监听fnYe/fnBa/fnEr<div class="爷爷"> <div class="爸爸"> <div class="儿子">文字</div> </div></div>/*其中文字(示例代码中)就是事件监听和事件冒泡的目标.因此DOM事件模型分为3个阶段:(1)捕获阶段:事件从window对象自上而下向目标原创 2020-12-04 16:58:26 · 136 阅读 · 1 评论 -
jQuery小知识
jQuery的介绍jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有90%使用jQuery。jQuery 如何获取元素//id选择器、css选择器$(document) //选择整个文档对象$('#id') //选择ID为id的网页元素$('div.myClass') // 选择class为myClass的div元素$('input[name=first]') // 选择name属性等于first的input元素//特有选择$('a:firs原创 2020-12-04 14:27:40 · 69 阅读 · 0 评论 -
JavaScript之实现jQuery
术语链式风格也叫jQuery风格特殊函数jQueryjQuery(选择器)用于获取对应元素但它不返回这些元素它返回一个对象,称之为jQuery构造出来的对象这个对象可以操作对应的元素一些理解jQuery是构造函数,因为它构造出来一个对象jQuery不是构造函数,因为它不需要通过new jQuery()构造一个对象总结:jQuery是一个不需要加new的构造函数jQuery不是常规意义上的构造函数jQuery用了一些技巧最后推荐一篇不错的博客jQuery 都过时了,那我还原创 2020-12-04 14:01:08 · 195 阅读 · 0 评论 -
JavaScipt实现Dom
js实现dom实现一个dom,要求如下:window.dom是我们提供的全局对象//增dom.create(`<div>hi</div>`);dom.after(node,node2);dom.before(node,node2);dom.append(parent,child);dom.wrap(`<div></div>`);//删dom.remove(node);dom.empty(parent);//改dom.attr(node原创 2020-12-04 13:23:26 · 54 阅读 · 0 评论 -
JavaScript之编程接口
DOM编程网页的数据结构是树(Tree)<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no原创 2020-12-02 11:39:34 · 215 阅读 · 0 评论 -
算法和数据结构在JS中的运用(二)
举例//找出两个数中较小的那个let min1 = (nums) => { if( nums[0] < nums[1] ) { return nums[0]; } else { return nums[1]; }}//优化代码let min1 = nums => nums[0] < nums[1] ? nums[0] : nums[1];//再次优化代码let min1 = ([x,y]) => x < y ? x : y;//调用min原创 2020-12-01 00:20:27 · 76 阅读 · 0 评论 -
数据结构在JS中的运用(一)
数据结构数据与数据之间的关系和结构数据结构 = 数据形式 + 操作数据结构是抽象的//伪代码let str = `Hi,I'm Jack`;let hash = {};for(let i = 0; i < str.length; i++){ let key = str[i]; let value = hash.get(key,0) + 1;//规定空+1 hash.set(key,value);}console.log(hash);for key,原创 2020-11-30 23:02:48 · 201 阅读 · 0 评论