js前端
关注
分享
扫一扫
文章平均质量分 54
丰柏林
一生清贫怎敢误佳人
展开
-
一文解决redux在react中的初步使用
本文采用倒叙，希望能够看完后在进行redux的实现，有助于理解。这里先放置好展示组件和容器组件。因为归根结底我们还是要知道这个东西怎么用。我这里展示了class和hook中两种不同的使用方法，如果觉得有帮助可以点个赞或者收藏！如果你是从来没有接触过redux的开发者，希望您能够有耐心的看一看，我也是看好很多博客慢慢自己总结的！！！！比大佬们一个一个分布找要强一点。import React, { Component, Fragment } from 'react';//Class引入impor原创 2021-06-07 14:07:52 · 341 阅读 · 3 评论 -
从0开始搭建一个react-native项目
按照官网的步骤如果你没有Brew那么献上一篇文章安装brew安装nodebrew install node安装watchmanbrew install watchman更换镜像源npx nrm use taobao安装yarn包管理工具npm install -g yarn下载Xcode在 Xcode 中安装 iOS 模拟器，安装模拟器只需打开 Xcode > Preferences… 菜单，然后选择 Components 选项，即可看到各种可供安装的不同的 iOS原创 2021-05-31 18:05:42 · 771 阅读 · 6 评论 -
react+taro实现省县区三级联动
案例在React.FC中实现。视图代码import Taro from "@tarojs/taro";import {View, Picker} from "@tarojs/components";import {AtList, AtListItem, AtTextarea} from "taro-ui";import React, {useEffect, useState} from "react";import addressData from "./addressData";const原创 2021-05-25 22:34:59 · 1106 阅读 · 0 评论 -
前端项目数据层面的架构应该怎么搭建（以taro+react）为例
前沿：实际上在我前8个月的开发生涯中，比较关注的视图的展示和功能的实现。虽然说我会从项目的结构上分为[ components config api assets src page tsx ts scss util request imageList store ...]但是这种结构仅仅是划分了里面的资源，对文件本身做了一个归类。写到后面总感觉自己的代码里面不够优雅。一个月前杰哥给我写了一个数据和视图分离、数据分层的demo。由于当时没看明白，总觉得原创 2021-05-19 18:42:07 · 433 阅读 · 2 评论 -
使用js写一个播放语音提示的功能
利用window自带的speechSynthesis编写一个播放语音提示的功能之前利用百度的在线语音合成发现改不了其中的per属性，自己装了一下node包，发现cnpm引入的时候会与vue-admin-element里面的模块相冲突，导致项目崩掉。重新cnpm install之后项目跑起来了，于是开始使用window自带的编写。<template> <button @click="playVoice">播放通知</button></template>原创 2020-09-21 15:46:29 · 1602 阅读 · 0 评论 -
git初步使用
##初始化Git仓库//在新建的文件夹里面打开cmd 运行以下代码git init##配置用户信息在git中设置当前使用的用户是谁git config --global user.name "fbl"设置邮箱git config --global user.email "fbl@.com"存储代码第一步，放到门口git add ./文件名第二部，放进仓库-m 注释，...原创 2019-10-16 18:20:22 · 208 阅读 · 0 评论 -
复习js创建动态创建元素的三种方式
1.document.write()document.write会把整个页面替换，不建议使用这种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body&...原创 2019-05-16 18:03:18 · 288 阅读 · 0 评论 -
split(), reverse(),join()等函数用法
split()函数，join()函数：split函数是将一个字符串分割成字符串数组。join函数是将数组中的所有元素放入字符串中。例如：比如我们有个字符串"a",“b”,“c"我们要输出为a,b,c这样的格式，那么我们可以这样：var a = [“a”,“b”,“c”];document.write(a); //a,b,c若使用join，那必须得这样：var a = [“a”,“b”,“...转载 2019-05-16 18:19:23 · 641 阅读 · 0 评论 -
Ajax发送请求的四个步骤
<script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn'); btn.onclick = function(){ //使用Ajax发送请求需要如下几步 //1、创建XMLHttpRequest(); var xhr =...原创 2019-06-15 12:41:26 · 1566 阅读 · 0 评论 -
用post进行Ajax传输步骤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>初识Ajax开发</title> <script type="text/javascript"> window.onload = functi...原创 2019-06-17 11:32:33 · 2197 阅读 · 0 评论 -
css隐藏文本溢出省略
1.单行文本溢出隐藏<!DOCTYPE html><html><head> <title>单行文本溢出隐藏</title> <style type="text/css"> p{ white-space: nowrap; /*强制文本一行显示*/ overflow: hidden; /*超出...原创 2019-08-12 00:37:50 · 164 阅读 · 0 评论 -
css使盒子垂直居中的方法
<!DOCTYPE html><html><head> <title>盒子垂直居中的方法</title> <style type="text/css"> /* 1.先让子盒子的上边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一半距离(父级相对定位，子级绝对定位) 2.使用表格的vertical...原创 2019-08-12 10:39:55 · 1073 阅读 · 0 评论 -
div盒子水平居中的方法
<!DOCTYPE html><html><head> <title>盒子水平居中的方法</title> <style type="text/css"> /* 1.使用margin: 0 auto; 2.使用margin左右边距 3.先让盒子左右边缘和父盒子垂直的中心线重叠，然后再把盒子往回移动自...原创 2019-08-12 11:08:29 · 2990 阅读 · 0 评论 -
dom操作下的节点树属性以及内方法的重写
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //遍历原创 2019-03-10 18:39:51 · 216 阅读 · 1 评论 -
querySelector()和getelementsByClassName()的区别
在js里面querySelector()选择的标签是静态的也就是说在选中之后，能够一直保存，也就是脱离了被选择的成为副本，除非是要保存选中的标签，否则不会轻易地使用querySelector()。在js里面getelementsByClassName()选择的标签是动态的，所以是相互映射，在调用时，我们一般使用这种标签，因为可以及时的反映在页面上。...原创 2019-03-09 22:55:28 · 2274 阅读 · 2 评论 -
如何快速利用js的dom操作实现选项卡功能
在这里利用到了闭包和立即执行函数<!DOCTYPE html><html lang='em'><head> <meta charset="utf-8"> <title>dom初探</title> <style type="text/css"> .content原创 2019-03-03 22:04:55 · 440 阅读 · 0 评论 -
call是如何改变this指向的？
// this call // call能改变函数里面的this指向 let obj = { num : 234; } function test() { let num = 123; console.log(this.num); function a() {} } test.call(obj); /*当调用call方法时...原创 2019-02-27 22:11:52 · 2546 阅读 · 0 评论 -
js实现push方法的重写
如何重写js里面的push方法<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title> &原创 2019-02-24 14:29:25 · 4354 阅读 · 0 评论 -
let和var的区别，解密ES6
一、变量提升var存在变量提升，而let不存在变量提升，所以用let定义的变量一定要在声明后再使用，否则会报错。var//var定义的变量存在变量提升，变量会把声明提升到整个作用域的最前面//例子1console.log(a); //undefinedvar c=10;//等价于var c;console.log(a); //undefinedc=10;/----------...转载 2019-02-28 20:29:04 · 196 阅读 · 0 评论 -
如何利用css制作旋转魔方
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <style> /*最外层容器样式*/ .wrap { width: 200px; height: 200px; margin: 200px; position: relative; }...转载 2019-03-05 10:06:49 · 417 阅读 · 4 评论 -
如何运用js给对象排序
#如何用JS来给对象排序，代码下方有方法的解释 //按对象的其中一个值来给对象排序 let zhang = { name : "zhang", age : 18, face :"handsome" } let wang = { name : "wang" , age : 21, face : "amazing" } let g...原创 2019-02-25 21:48:05 · 2862 阅读 · 0 评论 -
类数组小记
//类数组 和数组类似 但是数组所有的方法类数组它都没有 /*test(1,2,3,4,5); function test(){ console.log(arguiments); arguiments.push(7); } */ /* 属性要为索引(数字)属性，必须有length属性，最好加上push方法 当加上splice之后 长得越来越像数组 ...原创 2019-02-26 09:47:39 · 159 阅读 · 0 评论 -
如何遍对象中非原型链上的属性
#如何遍对象中非原型链上的属性//遍历对象和子对象 var obj = { name: "zhang" , age: 18, son : { name: "wang", age: 2 } } for(var prop in obj){ //排除原型链上的属性 if(obj.hasOwnProperty(prop)) { c...原创 2019-02-26 19:24:37 · 900 阅读 · 2 评论 -
js必须了解的闭包私有化变量原理
//闭包的私有化变量 function Person() { /* var this = { makeMoney : function () {}, offer : function () {} } 此时的Person里面只有两个方法, 如果想通过Person访问money是访问不到的， 如果你想通过方法调用来访问(Perso...原创 2019-03-02 18:46:16 · 1484 阅读 · 0 评论 -
try{}catch(){}用法和对应的六种错误类型
如何使用try{}catch(){}/*当里面有错误时不抛出错误，而且运行catch里面的语句，try里面错误语句的后续代码不再运行，但是不影响后续代码运行*/ try{ console.log('a'); console.log(b); console.log('c'); } catch(e){ console.log(e.name + " :" + e....原创 2019-03-02 19:53:17 · 32813 阅读 · 0 评论 -
利用JS封装type
/* 小知识点： 封装type typeof([]) -- array typeof({}) -- object typeof(function) -- object typeof(new Number()) -- number Object typeof(123) -- number 如何处理typeof(new Number()) Ob...原创 2019-02-26 19:51:32 · 306 阅读 · 0 评论 -
js实现数组去重
#如何实现数组去重（在原型链上编程）//数组去重 //要求在原型链上编程 //Array.prototype.unique = function (){ // //} // // let arr = [1,1,1,2,2,2,3,3,3]; //arr.unique() -->[1,2,3]; function type(target) {...原创 2019-02-26 20:16:22 · 260 阅读 · 0 评论 -
sblime text3如何安装插件
相信很多同学在安装sblime text3的插件的时候都心如刀割下面我用及其简单的步骤教会大家安装先下载我网盘里面给大家的两个文件，有两个文件链接：https://pan.baidu.com/s/1z7WQ6oD_cUcYXPteHSb6LQ提取码：pxrd1.将Package Control.sublime-package放入你的installed Packages里面。2.启动你...原创 2019-03-05 23:00:52 · 399 阅读 · 0 评论 -
es5.0和es3.0有什么不同
//es5.0严格模式的启动 在要执行es5.0js代码块最顶端加上"use strict"; /*"use strict"; function test() { console.log(arguments.callee); } test();*/ /* var obj = { name : 'obj' } var name = 'window...原创 2019-03-03 11:11:29 · 782 阅读 · 0 评论 -
原始值是如何调用属性和方法的
//原始值是如何调用属性和方法的 let num = 123 ; num.abc = 'abc' ; //调用属性或者方法时先new一个对象，并且在new完之后进行销毁 //new Number(num).abc = 'abc' ; --> delete // //当要调用属性或者方法的时候，会自动再new一次， //和上次new的不是同一个，所以会打印u...原创 2019-02-27 21:54:21 · 292 阅读 · 0 评论