走在大前端的路上-优快云博客

原创第二十一章：多媒体和图形编程

在浏览器中动态生成复杂图形是非常重要的，因为：用于在客户端生成图形的代码大小要比图片本身小很多，这样可以减少部分带宽。通过一些实时数据来动态生成图形，需要消耗大量的CPU周期。而如果把这个任务放到客户端做，就可以有效地减轻服务器的负担，某种程度上也是节约了硬件开销。在客户端生成图形也是符合现代Web应用的架构：服务器提供数据，然后客户端负责展现这些数据。脚本化图片如下的HTML代码段是一个非常简单的例子：它创建一张图片，并在鼠标指针经过的时候改变该图...

2021-08-13 13:47:18 314

原创第二十章：客户端存储

客户端存储概述 web应用允许使用浏览器提供的API实现将数据存储在用户电脑上。客户端存储遵循“同源策略”，因此不同站点的页面是无法读取对于存储的数据。而同一站点的不同的页面之间是可以互相共享存储数据的。 web应用可以选择他们存储数据的有效期：有临时存储的，可以让数据保存至当前窗口关闭或浏览器退出；也有永久存储，可以将数据永久地存储在硬盘上，数年或者数月不失效。客户端存储有以下几种形式：web存储先是作为HTML5的一部分被定...

2021-08-02 17:46:38 527

原创第十九章：jQuery类库

jQuery作为js最流行和广泛采用的类库之一，具有如下特性：丰富强大的语法（CSS徐选择器），用来查询文档元素；高效的查询方法，用来找到与CSS选择器匹配的文档元素集；一套有用的方法，用来操作选中的元素；强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个；简洁的语言用法（链式调用），用来表示一系列顺序操作。jQuery基础 jQuery类库定义了一个全局函数：jQuery()。该函数使用频繁，因此在类库中还给它定义了一个快捷别名：$。调...

2021-07-30 18:10:03 532

原创第十八章：脚本化HTTP

HTTP概述超文本传输协议(http)规定web浏览器如何从web服务器获取文档和向web服务器提交表单内容，以及web服务器如何响应这些请求和提交。通常http并不在脚本的控制下，只是当用户单击链接，提交表单和输入URL时才发生。但是用js来操纵http是可行的，当脚本设置window对象的location属性(当然改变location的hash锚点不算)或调用表单对象的submit方法时，都会初始化http请求。 Ajax（Asynchronous JavaSc...

2021-07-28 15:32:31 305

原创第十七章：事件处理

事件处理概述客户端JavaScript程序（浏览器）采用了异步事件驱动编程模型（我的理解是交互驱动）。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web浏览器就会产生事件（event）。如果JavaScript应用程序关注特定类型的事件，那么它可以注册当这类事件发生时要调用的一个或多个函数。这种风格并非Web编程独有，所有使用图形用户界面的应用程序都采用了它。一些重要的定义：1⃣️事件类型（event type）：是一个用来说明发...

2021-07-28 11:34:44 1033

原创第十六章：脚本化CSS

CSS概览层叠样式表（Cascading Style Sheet，CSS）是一种指定HTML文档视觉表现的标准。使用CSS可以精确地指定文档元素的字体、颜色、外边距、缩进、边框，甚至定位。 HTML文档的视觉显式包含很多变量：字体、颜色、间距等。CSS标准列举了这些变量，我们称之为样式属性。CSS定义了这些属性以指定字体、颜色、外边距、边框、背景图片、文本对齐方式、元素尺寸和元素位置。有两种方式将一组定义视觉表现的CSS属性和对应的HTML元素...

2021-07-27 14:54:21 244

原创第十五章：脚本化文档

文档对象模型DOM(Document Object Model)，文档对象模型。简单的说就是一套操作文档内容的方法。文档：D 如果没有document(文档)，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它将根据你编写的网页文档创建一个文档对象。对象：O javascript中的对象分为三种：用户自定义对象（用户自己创建的对象）；...

2021-07-26 18:00:48 158

原创第十四章：Window对象

window对象是BOM（浏览器对象模型）中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。全局的window对象 JavaScript中的任何一个全局函数或变量都是window的属性。 <script type="text/javascript">let name = "Windows BOM";document.write(window.name);</script>window与self对象...

2021-07-26 15:40:59 431

原创第十章：正则表达式的匹配模式

正则表达式的定义正则表达式(regular expression)是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式是一个描述字符模式的对象。RegExp对象更多的是通过一种特殊的直接量语法来创建。正则表达式的模式规则是由一个字符序列组成的,包括所有字母和数字在内，大多数的字符都是按照直接量仅描述待匹配字符的。可以使用以下两种方法之一构建一个正则表达式： ①直接量语法 let pattern = /s$/;...

2021-07-26 13:31:22 857

原创第九章：类和模块

原型和原型链是JavaScript中的难点也是重点，这里建议先阅读第六章中关于原型和原型链的部分再来阅读此处。原型所有对象（null除外）都拥有__proto__属性，该属性是一个指针，指向该对象的构造方法（对象）的prototype对象（隐式原型）。所有函数拥有prototype属性（显式原型，仅限函数），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（该对象叫做原型对象）。原型对象也有一个属性，叫做constructor，...

2021-07-23 17:53:48 204 1

原创第八章：函数

函数创建函数的最大作用是提供代码复用，将需要重复使用的代码块定义成函数，提供更好的代码复用。函数可以有返回值，可以没有返回值。函数的创建有三种方式，分别为使用Function的构造函数、函数声明、函数表达式：①Function构造函数这种方式是直接new出来一个Function 实例，通过使用Function的构造函数进行创建函数。Function构造函数可以接收任意多个参数，但是最后一个参数会被认为是函数体，前面的所有参...

2021-07-23 16:23:01 152

原创第七章：数组

数组的创建 //创建一个数组let colors = new Array(); //Array []//创建一个数组并指定长度let colors = new Array(20); //Array(20)//创建一个数组并赋值let colors = new Array("red","blue","green");//Array(3)["red","blue","green" ]在创建数组的时候，最好采用省略new操作符的形式，数组中可以存储不同类型的元素，如下： ...

2021-07-23 11:21:51 190

原创第六章：对象

对象是JavaScript的一个基本数据类型，是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值，即属性的无序集合。对象的创建 1、对象直接量 / 字面量 let obj = { name: 'yh', age: 18}console.log(obj.name);2、构造函数（1）系统自带的，如： let o = new Object(); //相当于 let o = {};o.name= "yh";...

2021-07-22 16:02:36 316

原创第五章：语句

表达式语句具有副作用的表达式是JavaScript中最简单的语句，这里的副作用指的是对变量产生的影响，最显著的是改变其值。赋值语句是一类比较重要的表达式语句，例如：let a = 1;a += 1;a++; //递增++和递减--运算符和赋值语句有关，它们的作用是改变一个变量的值， //就像执行一条赋值语句一样a--; 函数调用是表达式语句的另一个大类，例如：let a = "Hello";alert(a);win...

2021-07-21 15:09:18 211

原创第四章：表达式和运算符

表达式概述表达式是javascript中的一个短语，javascript解释器会将其计算出一个结果。程序中的常量是最简单的一类表达式。变量名也是一种简单的表达式，它的值就是赋值给变量的值。复杂的表达式是由简单的表达式组成的。比如数组访问表达式是由一个表示数组的表达式，方括号、一个整数表达式构成。它们所组成新的表达式运算结果是该数组特定位置的元素值。同样的，函数调用表达式由一个表示函数对象的表达式和0个多个参数表达式构成。将简单表达式组成复杂表达式最常用的方法就是使用运算符...

2021-07-21 09:46:29 332 2

原创第三章：类型、值和变量

在编程语言中，能够表示并操作的值的类型称为数据类型（type）。 JavaScript的数据类型分为两类：原始类型和对象类型。5种原始类型：数字、字符串、布尔值、null（空）、undefined（未定义）。原始类型之外的就是对象类型了，对象是属性的集合，每个属性都由“名/值对”（值可以是原始值、也可以是对象）构成。普通的JavaScript对象是“命名值”的无序集合，特殊对象--数组表示带编号的值的有序集合。另一特殊对象--函数是具有与它相关...

2021-07-20 16:27:25 423 1

原创第二章：词法结构

字符集JavaScript程序是用Unicode字符集编写的。 JavaScript是区分大小写的语言。即关键字、变量、函数名和所有标识符（identifier）都必须采取一致的大小写形式。如：“name”和“Name”是不同的变量。在JavaScript中，会忽略程序中标识之间的空格。而对于换行符， JavaScript在多数情况下也会忽略，但有一种情况例外：当在return、break、 continue语句后添加换行符时，JavaScr...

2021-07-19 16:59:37 142

原创第一章：JavaScript概述

前言最近几个月忙着做公司的项目重构，坑比较多，项目重构没有使用任何框架（vue或react），而是采用原生html + js + jQuery的形式，js基础还是很重要的，所以整理了一下自己刚入职时学习犀牛书的学习笔记。第一章：JavaScript概述通过方括号定义数组元素和通过花括号定义对象属性名和属性值之间的映射关系的语法称为初始化表达式。表达式是JavaScript中的一个短语，这个短语可以通过运算得出一个值。通过" . "和" [ ]...

2021-07-19 16:32:11 176 1

原创使用pkg打包nodejs项目并解决本地文件读取问题

使用pkg打包nodejs项目使用pkg对nodejs程序进行打包，能对项目源码和重要文件进行一定的保护，也能提升程序运行的便捷性，使用npm install -g pkg全局安装pkg。这里我的所有代码写在一个js文件（anyAPIcheck.js）中，并包含一些依赖文件：实际上这是一个非常小的项目，项目主体也只有一个js文件，使用pkg可将该项目主体文件及其引用文件打包为一个可执行文件。进入项目根目录，执行命令pkg anyAPIcheck.js 可同时打包windows、Linux及macos

2021-01-20 16:02:43 8730 1

原创 react中使用reflux进行全局状态管理最简单的案例

之前写过一个react中使用reflux进行全局状态管理的博客，由于刚从vue转到react，还有很多不熟悉的地方，有一些问题没有理解透彻，今天再写一个简单案例描述一下reflux是如何进行全局状态管理的。#创建react项目并进入项目根目录create-react-app refluxtestcd refluxtest#安装refluxnpm install reflux#创建action与store相关文件countAction.js//引入reflux模块import Reflux

2020-12-31 13:09:35 509 1

原创解决某些浏览器（例如谷歌）window.open(url)无效问题

在项目中需要用到预览功能，一开始采用window.open(url)直接打开链接进入预览界面，但是在谷歌浏览器中不生效，网上查了一下相关问题，原因总结有两点：在ajax请求的回调函数中window.open(url)是不生效的（尝试在回调函数外面调用window.open(url)，还是不行，坑）window.open(url)在用户操作事件中才能生效，否则浏览器判定该操作不是用户操作，会阻止窗口弹出。（这个比较靠谱）但是预览的URL是通过ajax请求得到的，倒是可以增加一个预览按钮绑定点击事件

2020-12-17 17:05:41 7616 1

原创 react中教你如何快速使用reflux进行全局变量管理

前言就目前网上一些关于react中使用reflux的教程，坑比较多，解释的也不够通俗，代码也非常零碎，结合自己踩过的坑，给大家举个简单易懂的react中使用reflux的基础例子,希望对vue转react或者只接触过react的朋友一点帮助。安装reflux我自己采用的是ts + react的开发模式，不管你采用的是js还是ts，我这里不做赘述，假定你的开发环境全都安装好了，接下来我们需要安装reflux插件，执行命令：npm install refluxReflux是根据React的flux创建

2020-12-04 14:59:01 1150

原创 react + typescript解决TS2339:Property ‘..‘ does not exist on type ‘Readonly＜{}＞‘错误

说来比较惭愧，已经两个多月没有更新博客了，由于身体不太好，而且手头上的项目也快进入收尾阶段了，一直没有时间与欲望更新博客，前几天boss又下发了一个新的项目，采用taro + react + reflux + typescript + taroUI做一个微信小程序，说多了都是眼泪啊，微信小程序我做过，挺熟的，之前用DCloud的HbuildX + uni-app做的vue微信小程序，还比较好用，可惜不支持react，现在要转投react阵营了，就目前使用taro的情况来看，个人感觉没有DCloud好用，不

2020-12-04 13:33:52 14907 1

原创 uni-app中使用plus.io进行持久化保存

最近在使用uni-app做APP开发，项目中有个需求：用户可以自己按需配置服务器链接，即APP可动态选择后台服务器。在uni-app中自带存储API – uni.setStorage(OBJECT)与uni.getStorage(OBJECT)，感兴趣的同学可以访问uni-app官网查看。但是我在使用这个API时发现退出APP后再进入，保存的数据会被清除，同步和异步的API我都试了，都不行。网上查找相关资料，说是uni-app框架本身有这个bug，至于到底是不是有bug这里不讨论，反正使用不了这个API。

2020-09-18 11:23:34 7085 1

原创使用ajax或XMLHttpRequest实现文件上传

使用ajax或XMLHttpRequest实现文件上传前言方法一：使用ajax方法二：使用XMLHttpRequest前言方法一使用ajax封装XMLHttpRequest对象，方法二更加原生，直接创建并使用XMLHttpRequest对象，两种方法均使用formData上传文件。HTML：<div> <input type="file" id="file" name="myfile"/> <input type="button" @click="UploadM

2020-09-08 16:47:23 803

原创 uni-app设置APP启动页显示时长

最近在使用uni-app开发APP，发现打开APP后启动页总是一闪而过（因为首页已经渲染完成，会自动从启动页跳转到首页），很显然这不符合我们预定的时间要求。官方对于启动页的相关设置如下：但是在实际使用过程中发现设置delay延迟启动页关闭根本不起作用，很多使用uni-app开发的人都遇到了这个问题。这里可以使用plus.navigator.closeSplashscreen()函数来自定义启动页的关闭。首先在manifest.json的App启动界面配置中取消勾选“等待首页渲染完毕后再关闭Splas

2020-08-17 15:20:38 9467 2

原创 JavaScript合并多个对象

JavaScript合并两个对象$.extend()遍历赋值Obj.assign()合并对象的浅拷贝与深拷贝$.extend()let obj1 = {'a': 1};let obj2 = {'b': 1};let obj3 = $.extend(obj1, obj2);console.log(obj1); // {a: 1, b: 1} obj1已被修改console.log(obj1); // {b: 1}console.log(obj3); // {a: 1, b: 1}obj1 =

2020-08-03 20:34:33 710

原创使用原生HTML+CSS制作一个分割线

2020-07-29 17:43:13 1083

原创 Vue项目中刷新当前页面的四种方法

Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法this.$router.go(0)location.reload()跳转空白页再跳回原页面使用provide / inject组合控制的显示（推荐）前记有时候，在当前页面添加或删除一条记录的时候希望当前页面可以刷新一下，从而更新页面数据。我们知道，在路由到另一页面的时候会重新加载该页面，相当于刷新了页面，但是使用vue-router重新路由到当前页面，页面是不进行刷新的。下面介绍几种刷新页面的方法。刷新当前页面的四种方法this.$ro

2020-07-24 18:30:08 55670 5

原创 Vue项目中使用路由$router在页面间传输对象数据

有时候需要在后一个页面使用前一个跳转页面的对象，一般使用vuex用来管理对象的状态，但仅仅使用一次该对象的话是没有必要去使用vuex的，直接使用$router在跳转页面时携带对象一起跳转到下一页面会更加方便，这样下一页面接收到上个页面的对象后即可直接使用。1. 在前一页面的跳转路由中使用query关键字包裹对象this.$router.push({ path: "/CompanyEdit", query: { clickCorporateId: this.zTreeNode }}

2020-07-23 18:28:06 2710 1

原创 Windows下使用git提交代码到gitee

Windows下使用git提交代码到gitee下载并安装Git设置帐号信息上传本地代码到gitee上下载并安装Git可以在清华大学开源软件镜像站或在Git官网下载Git安装软件。下载完成后自己选择安装路径，然后一路next即可。检验安装是否成功：git --version设置帐号信息进入到提交代码的目录下：cd x:\dd\sdd\dddd… 自己的盘符（很重要）执行命令：git config --global user.name “your name”git config --gl

2020-07-22 10:56:06 1550

原创 Vue项目中使用class强行绑定计算属性函数

在vue开发中，有时候我们需要使用计算属性函数，但是又没有具体的调用方式，这时可以将该函数强行绑定到class中。例如有如下函数在computed计算属性中：options: function () { let companyListData = this.$store.getters.getCompanyData || []; console.log("companyListData:", companyListData); let list = []; for (let i = 0;

2020-07-21 19:03:55 3403

原创使用jQuery强制修改CSS设置

web移动端开发在使用cube-ui的input标签时发现使用class并不能完全覆盖ui中的CSS设定，这时采用jQuery的选择器可以很好的解决这个问题（项目中如何安装jQuery可自行百度，也可看我之前的文章）。jQuery提供了一系列的选择器帮助开发者快速高效地找到指定节点，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法，下面介绍jQuery基本选择器（更高深的自己百度）：查看cube-ui的源码（也可在浏览器后

2020-07-17 20:48:21 1218

原创 Vue项目中文件package.json和package-lock.json的区别

package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记

2020-07-17 20:36:09 1718

原创 cordova APP监听手机返回键、设置主界面双击返回退出及其他页面分层路由

安装物理返回按键插件：cordova plugin add cordova-plugin-backbuttonindex.html中添加：<div id='exit' style="display: none;"></div>在main.js中修改添加如下内容，监听物理返回按键：document.addEventListener('deviceready', function () { let vueInstance = new Vue( { el

2020-07-16 18:33:28 1330

原创 rem屏幕适配及px转rem

rem屏幕适配及px转rem屏幕适配px转rem屏幕适配在vue项目中的index.html页面head标签内插入这段代码：(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var

2020-07-15 20:26:05 595

原创 Android四种启动模式（standard，singleTop，singleTask，singleInstance）

Android四种启动模式（standard，singleTop，singleTask，singleInstance）为什么要研究启动模式任务栈四种启动模式Standard 标准模式SingleTop 栈顶复用模式SingleTask 栈内复用模式SingleInstance 单实例模式为什么要研究启动模式1.有时候我们的App需要生成给其他App调用的Activity，例如浏览器应用，照相机应用。2.解决生成重复页面等等Bug。3.任务栈过深的时候，避免一直按返回键也退不回想要的页面。任务栈任

2020-07-14 19:04:26 4070 1

原创 CSS属性强制覆盖

在前端开发过程中我们经常使用一些UI组件，这些UI组件都有自己的CSS配置，有时候我们需要使用自己的配置，这时可以在标签中添加class属性强行覆盖原来的属性。template中修改代码如下：<div style="width: 100%;height: 100%;margin: 0;padding: 0;border: 0;"> <cube-tab-bar v-model="selectedLabelDefault" :data="tabs" @click=

2020-07-13 19:28:00 8370

原创 zTree应用于vue+cordova移动端

zTree应用于vue+cordova移动端搭建vue+cordova开发环境应用zTree安装ztree与jQueryzTree官网下载demo项目添加zTree至项目搭建vue+cordova开发环境这里不做叙述，具体可查看我的文章：vue+cordova移动端Android开发环境配置应用zTree安装ztree与jQuerynpm install vue-ztree -snpm install jquery -s打开vue项目中的package.json文件，在dependencie

2020-07-10 20:06:52 1022

原创 JavaScript回车事件等键盘事件

JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表JavaScript键盘事件在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会

2020-07-09 21:31:09 22029

react中使用reflux进行全局状态管理最简单的案例

空空如也