![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
tony_jx
软件从业者
展开
-
JavaScript异常捕捉
JavaScript捕捉异常,示例程序如下:function testErr(){ var s = "hello world"; try{ var ob = JSON.parse(s); console.log(ob); }catch(err){ console.log(typeof err); //object console.log(err.message); //JSON.parse: Parse原创 2021-11-26 17:51:30 · 366 阅读 · 0 评论 -
npm配置本地仓库-减少占用系统C盘的空间
npm配置本地仓库-减少占用系统C盘的空间安装node和npm下载地址:https://nodejs.org/en/, 建议使用稳定版本. 查看安装是否成功原创 2021-04-11 13:03:32 · 3325 阅读 · 3 评论 -
单机软件常用界面逻辑
单机软件常用界面逻辑原创 2021-03-10 10:47:06 · 214 阅读 · 0 评论 -
Browsersync调试前端工具
Browsersync能让浏览器实时、快速响应您的文件更改。链接地址:http://www.browsersync.cn/原创 2021-03-01 19:09:47 · 115 阅读 · 0 评论 -
js是成为全栈开发的一个捷径
大前端是趋势,js是成为全栈开发的一个捷径桌面开发-Electron App开发-React Native 网页开发-vue, react 后端开发-node.js(Koa框架)原创 2021-02-18 11:58:55 · 122 阅读 · 0 评论 -
从MVC到MVVM
从MVC到MVVM是从无到有,从有到优的一个过程。Web1.0时代使用单一语言开发,如java(jsp),php,ASP.NET等。这种架构的优点是简单快捷,缺点是难以维护。MVC开发模式,如SpringMVC框架。这种架构优点分层设计,职责清晰,前后端有一定的分离。缺点是前端开发效率不高,前后端职责不清晰。Web2.0时代ajax的出现jQuery是该时期最经典的框架。使得页面部分刷新,减少了服务端的负载和流量消耗。前后端分离MVC(即后端使用MVC框架,前端也原创 2021-02-18 10:33:20 · 301 阅读 · 0 评论 -
ajax的异步作用
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:xmlhttp.open("GET","ajax_test.asp",true);对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。通过 AJAX,Ja原创 2021-02-18 10:11:31 · 192 阅读 · 0 评论 -
JS数组遍历的效率比较
链接地址:https://www.cnblogs.com/woshidouzia/p/9304603.html原创 2021-01-05 10:29:03 · 679 阅读 · 1 评论 -
js使用字符串为什么会出现双引号?
js使用字符串时,有时会出现双引号?原因链接:https://www.cnblogs.com/lqj12138/p/3987945.html原创 2020-12-05 16:47:31 · 829 阅读 · 0 评论 -
前端html使用总结-1
html用来编写前端页面,一直在发展和更新。html5的新特性在增加绘图的canvas标签。 增加媒体处理video和audio元素。 对本地离线存储有更好的支持。 新增特殊内容:footer,header,nav等。 新增表单控件,calendar,date,time,email,search等。 使用<!DOCTYPE html>来声明。html元素从开始标签到结束标签的所有内容。 支持嵌套。 标题级别设置:<h1>... 段落:<p>原创 2020-11-02 19:54:15 · 170 阅读 · 0 评论 -
Vue和React对比
Vue和React对比需要简单和能用就行,请使用Vue。 需要尽可能小的块,请使用Vue。 构建大型应用程序,请使用React。 同时使用与Web和原生App的框架,请使用React。 想要更大的生态圈,请使用React。上述说明仅供参考。...原创 2020-11-02 17:22:49 · 76 阅读 · 0 评论 -
Vue和React的应用场景
原创 2020-10-29 09:40:27 · 472 阅读 · 0 评论 -
React组件的生命周期方法
生命周期的方法组件运行中,React为这些不同的阶段提供了钩子方法,允许开发自定义每个阶段的执行函数,这些方法统称为生命周期方法。具体方法import React from 'react';class User extends React.Component{ //构造方法 constructor(props) { super(props); console.log("constructor"); } //组件挂载后调用原创 2020-09-29 14:02:59 · 194 阅读 · 0 评论 -
React的状态(state)概念和使用
概念React的每个组件都有一个状态,其保存在this.state中,当状态值发生变化时,React会自动调用render()方法重新渲染页面。 this.state的值要要在构造函数中完成。 不能直接对state的值进行修改,需要调用this.setState()完成。实例代码import React from 'react';class TestState extends React.Component { constructor(props) { super原创 2020-09-21 10:51:43 · 616 阅读 · 0 评论 -
React使用自定义组件+传递参数
React支持自定义组件+传递参数,详细说明如下:自定义组件文件-User.jsimport React from 'react';//定义组件//属性传递:this.props.key//标签内容传递,标签中包裹的内容:this.props.childrenclass User extends React.Component{ render() { return <div> <p>我是{this.props.nam原创 2020-09-19 15:02:31 · 2055 阅读 · 1 评论 -
创建umi+react项目
随着前端开发中使用node,前端就可以开发模块化和大型化的项目,本文结合umi+react来创建前端项目。创建步骤初始化:tyarn init -y 添加umi:tyarn add umi --dev 创建config/config.js全局配置文件--export default {}; 创建src/pages/HelloWorld.js等页面 添加umi-plugin-react插件:tyarn add umi-plugin-react --dev或者tyarn add @umijs/p原创 2020-09-19 14:42:38 · 1475 阅读 · 0 评论 -
jsx基础语法
概念jsx就是在js文件中插入html片段,是React自创的一种语法。 jsx会被Babel进行转码,会得到正常的js代码。基础语法html的标签必须是闭合的,如<div>hello</div>是正确的,<div>hello是错误的。 jsx语法中,只能有一个根标签。 html中插入js,需要使用{}。...原创 2020-09-19 14:25:34 · 212 阅读 · 0 评论 -
umi创建前端项目
umi创建项目-入门级别umi创建项目步骤安装node,yarn 新建项目文件 初始化:tyarn init -y 添加umi依赖(--dev添加开发环境依赖):tyarn add umi --dev(tyarn add umi -D) 创建config文件夹和config/config.js配置文件,该路径为umi的默认全局配置 在config.js中添加语句:export default{}; 创建src/pages/HelloWorld.js页面,umi的默认的页面路径 在H原创 2020-09-19 14:12:49 · 973 阅读 · 0 评论 -
ES6转码器
ES6和ES2017有些语法在浏览器中不支持(如修饰器的使用),使用时浏览器会报异常,这就需要转码器,将ES6或ES2017转为ES5执行。常用转码器Babel Traceur umi(阿里),umi集成了Babel。umi优点插件化,由大量插件组成,按需加载。 开箱即用,无需安装react,label等。 约定路由,无需手动配置。umi安装安装node,验证node正常安装命令:node -v 安装yarn,yarn是优化的npm,tyarn是使用淘宝国内镜像作为源的yarn原创 2020-09-19 13:27:06 · 260 阅读 · 0 评论 -
前端开发经历的变化
前端开发的变化前端开发经历了很多变化,逐步适应了模块化和大型化开发的场景。静态页面阶段(使用jsp) 页面仅仅是展示功能和飞来飞去的广告。 ajax阶段 前端可以和后台服务进行互动,前端的脚本变得复杂。前后端可以实现分离。 前端MVC阶段 把MVC设计模式搬到前端,只有M(model,数据层)和V(view,展示层),没有C,也称作MVVM模式。 SPA阶段(single page application) SPA:单张网页应用程序。 网页就是一个应用程序,有前端页面原创 2020-09-18 14:23:52 · 130 阅读 · 0 评论 -
umi3添加react-plugin变化
umi3版本之后,package.json和config.js的内容需要按照新要求进行更新和配置,链接如下:https://umijs.org/docs/upgrade-to-umi-3#packagejson原创 2020-09-18 11:33:17 · 1358 阅读 · 1 评论 -
ES6--新特性2(类)
ES6新特性定义类//定义类class User { //构造方法 constructor(name, age) { this.name = name; this.age = age; } //方法 sayHello() { console.log(("hello " + this.name)); } //静态方法 static isAdult(age) { if原创 2020-09-16 20:18:53 · 94 阅读 · 0 评论 -
ES6--新特性1(变量+函数)
ES6吸收了面向对象语言的特点,优化了很多使用方式。新特性如下。let定义变量var是全局变量。 let只在声明的代码块中有效。 const类似于java final关键字,定义常量,不能修改。字符串方法扩展includes():是否包含子字符串。 startsWith():判断开始 endsWith():判断结尾解构表达式//定义数组-实现解构表达式let arr=[1,2,3];//a,b,c将获取数组每个位置对应的值let [a,b,c]=arr;//也可以匹原创 2020-09-16 16:30:09 · 207 阅读 · 0 评论 -
js保存数据到本地
js将数据保存到本地,最常用的方式是localStorage。localStorage概述大小限制5M,更大数据需要浏览器的数据库indexDB和webSql。 受同源限制,不允许跨域访问。 在浏览器隐私模式中无法使用。 因为在本地保存,网络爬虫无法爬取。 只能存放字符串(需要json转化)。localStorage常用方法// 增加元素localStorage.setItem("key1", "value1");// 获取元素console.log(localStorage.原创 2020-09-16 11:12:11 · 5244 阅读 · 0 评论 -
Typescript定义类
js中定义类-传统方式//定义类function City(cName, cLevel) { //定义属性 this.name = cName; this.level = cLevel; // 定义方法 this.about = function () { console.log("name=" + this.name + ", level=" + this.level); }}//使用类let c1 = new City("be原创 2020-09-16 10:58:10 · 400 阅读 · 0 评论 -
Typescript定义函数
Typescript中可以使用函数注意:实参和形参的类型要一致。 实参和形参的数量要一致。定义标准函数// 指定返回值类型function fun1():string{ return "hello";}console.log(fun1());//设置函数形参function fun2(a:number, b:number):void{ console.log(a+b);}fun2(1,4);定义函数-包含可选参数function fun1(num?:原创 2020-09-15 10:17:39 · 717 阅读 · 0 评论 -
Typescript变量
数据类型原有类型string number boolean null undefined Array Object新增类型tuple:元组 enum:枚举 any:任意类型 void:无 never:不会出现的值类型使用基本类型使用let b:boolean=false;let n1:number=2;// n1="123"; // 赋值类型错误let x:any=4;定义数组保存一组相同元素let arr1:string[]=["aa原创 2020-09-15 09:52:37 · 116 阅读 · 0 评论 -
TypeScript概念,安装和编译
TypeScript概念TypeScript是由微软开发,吸收了js的优点,是js的超集,系统和完整地增加了面向对象的语法,使项目更健壮,更容易维护。原创 2020-09-14 12:41:11 · 98 阅读 · 0 评论 -
js使用rgb和argb
js中自定义颜色有如下3中方式:直接使用颜色名称:'red' 使用RGB:'rgb(255,0,0) 使用RGBA:'rgba(255,0,0,1)原创 2020-09-12 19:40:39 · 2527 阅读 · 0 评论 -
ECharts热力图指定颜色
ECharts是便捷使用的图标框架,绘制热力图和方便:热力图官方链接https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian&theme=light自定义热力图颜色设置visualMap中的inRange,源码如下: visualMap: { min: 0, max: 15, calculable: true, orient:原创 2020-09-12 19:37:32 · 6962 阅读 · 0 评论 -
html跳转页面携带数据
html跳转页面携带数据,源码如下:第一个页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page 1</title></head>&l原创 2020-09-12 17:01:03 · 3184 阅读 · 3 评论 -
js实现从一个页面跳转到另一个页码
在html页面中,经常需要从一个页面跳转到另一个页面,可以通过js代码来实现。源码如下:第一种:(跳转到b.html)<script language="javascript" type="text/javascript">window.location.href="b.html";</script>第二种:(返回上一页面)<script language="javascript">window.history.back(-1);</scr原创 2020-09-12 16:32:43 · 965 阅读 · 0 评论 -
npm配置国内镜像
npm是node.js库的包管理工具,因为镜像地址在国外,安装库会比较慢,可以将镜像地址修改为国内地址,来提供安装库的速度。配置国内镜像命令如下:// npm配置淘宝镜像npm config set registry https://registry.npm.taobao.org// 查看npm镜像是否配置成功npm config get registry// npm回复镜像npm config delete registernpm config edit// npm安装cnpm,原创 2020-08-20 19:45:03 · 6905 阅读 · 0 评论 -
node,npm和cnpm的区别
node.js是javascript的一种运行环境,是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。 node和npm之间是包含关系,nodejs中含有npm。 npm是nodejs的包管理器(package manager)。 cnpm把npm上面的库复制到 国内的服务器上取,就会快很多了。...原创 2020-08-20 19:21:09 · 466 阅读 · 0 评论 -
js删除对象的指定属性
js创建对象可以动态添加属性,也可以动态删除属性,代码如下:// 创建对象var ob=new Object();// 动态添加属性ob.name="test";ob.age=18;console.log(ob);// 动态删除属性delete ob.age;console.log(ob);结果如下图:...原创 2020-08-15 19:17:45 · 734 阅读 · 0 评论 -
Vue独立编写html和js文件
Vue编写复杂界面时,可以将html和js分离,使程序逻辑更加清晰。代码如下:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti原创 2020-08-10 09:21:37 · 2144 阅读 · 0 评论 -
Vue网络访问-axios
axios是功能强大的网络库,可以与Vue结合在一起使用。axios使用规则:添加库:<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script> get请求:axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){}) post请求:axios.post(地址,{key1:value1&.原创 2020-08-10 09:08:16 · 413 阅读 · 0 评论 -
js操作数组方法-2
js支持数组结构数据,提供了一系列的方法,代码如下:var arr1 = new Array();var i = 0;for (i = 0; i < 6; i++) { arr1.push("1" + i)}console.log(arr1);// 返回子数组,范围为:左闭右开。// 不修改原来数组console.log(arr1.slice(2, 5));// splice:向数组中添加/删除元素// 1:起始位置,2:删除数量,3:可选,添加元素// 向数组指定位原创 2020-08-09 19:14:07 · 91 阅读 · 0 评论 -
js操作数组方法1
js支持数组结构数据,提供了一系列的方法,代码如下:var arr1 = new Array();var i = 0;for (i = 0; i < 3; i++) { arr1.push("1" + i)}var arr2 = new Array();for (i = 0; i < 4; i++) { arr2.push("2" + i);}console.log(arr1);console.log(arr2);// concat连接两个或者多个数组,方原创 2020-08-09 18:56:31 · 134 阅读 · 0 评论 -
js处理Number类的方法
js提供了一系列理Number的方法:var str="1.2345";// 将字符串转为整数,方法原型:parseInt(string, radix)// radix的作用是解析数字的基数,支持2~36,代表转成数据的进制,默认是10机制console.log(parseInt(str));// 将字符串转为浮点数,方法原型:parseFloat(string, radix)console.log(parseFloat(str));var num=1.234;// 将数字转为字符串,原创 2020-08-09 15:34:20 · 534 阅读 · 0 评论