低代码布道师的博客

今天刷朋友圈，发现都在转发TDesign，出于好奇心，看了一下是个啥。官方体验地址：https://tdesign.tencent.com/浏览了一下应该是一套前端的UI框架，去年我研究了elemnetui和antd，这两个UI框架各有千秋吧。今年腾讯就发布了属于自己的开源UI框架，对于我们这种新手小白来说，还真是一个福音呢。那要从哪开始呢？首先就是先选定技术路线，目前前端么有两种路线可以选择，一种是VUE，一种是React。从学习成本上来说，vue要好上手一些，react偏难。书山有路勤为径，学

CSS样式中可以设置盒子的阴影，阴影有四个可选值，分别为X轴的偏移量，Y轴的偏移量，模糊半径，扩散半径，和颜色示例：box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);效果给图标的Y周方向有一个黑色的阴影...

javascript存在this丢失的情况let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); }};setTimeout(user.sayHi, 1000); // Hello, undefined!这里的this就丢失了，为了解决这个问题，可以使用bind语法let user = { firstName: "John"};function func() {

JavaScript运行程序运行时绑定this并且传递参数，具体可以调用call方法function say(phrase) { alert(this.name + ': ' + phrase);}let user = { name: "John" };// user becomes this, and "Hello" becomes the first argumentsay.call( user, "Hello" ); // John: Hello和call类似还有一个apply方

在js中要特别注意，如果是旧代码，变量的定义是使用var，使用该关键字定义变量会有两种作用域，一种是全局作用域，一种是函数作用域1、全局作用域if (true) { var test = true; // use "var" instead of "let"}alert(test); // true, the variable lives after if2、函数作用域function sayHi() { if (true) { var phrase = "Hello";

数组的解构// we have an array with the name and surnamelet arr = ["John", "Smith"]// destructuring assignment// sets firstName = arr[0]// and surname = arr[1]let [firstName, surname] = arr;alert(firstName); // Johnalert(surname); // Smith除了数组，也可以对字

WeakMap的key不能是基本类型let weakMap = new WeakMap();let obj = {};weakMap.set(obj, "ok"); // works fine (object key)// can't use a string as the keyweakMap.set("test", "Whoops"); // Error, because "test" is not an object如果key指向了null，则key会被自动回收let john

Map类似于Object，但是和Object不同的地方是Map的key可以是任意值，常用的Map的apinew Map() 创建Mapmap.set(key, value) 存储值map.get(key) 取值map.has(key) 判断key是否存在map.delete(key) 删除keymap.clear() 清空map.size 获取元素的数量例如：let map = new Map();map.set('1', 'str1'); // a string keyma

为了存储有序的集合，javascript中有一种数据结构叫数组。数组的定义：let arr = new Array();let arr = [];let fruits = ["Apple", "Orange", "Plum"];数组的下标从0开始，可以用中括号的语法访问数组中的某个值let fruits = ["Apple", "Orange", "Plum"];alert( fruits[0] ); // Applealert( fruits[1] ); // Orangealert

可以使用单引号、双引号、反引号来定义字符串let single = 'single-quoted';let double = "double-quoted";let backticks = `backticks`;反引号里可以嵌套表达式，表达式要以${}包裹function sum(a, b) { return a + b;}alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.此外，反引号允许字符串以多行出现let guestList =

javascirpt中的基本类型：string、number、bigint、boolean、symbol、null和nudefined除了基本类型，另外一种类型就是对象，通常以{}的语法定义比如{name: "John", age: 30}包装类型：String、Number、Boolean、Symbol、Bigint四舍五入有时候需要保留两位小数，那么我们可以先乘后除let num = 1.23456;alert( Math.round(num * 100) / 100 ); // 1.2

javascript中有基本类型和复杂类型，对象就是一种复杂类型，如果对对象做加法、减法、输出会发生什么事情呢？会进行类型转换，比如使用alert语句输出对象alert(obj);会先将对象转换为字符串，然后再输出如果对对象做算术运算或者比较运算，那么会将对象转换为数值// explicit conversionlet num = Number(obj);// maths (except binary plus)let n = +obj; // unary pluslet delta

Symbol用来标识一个唯一标识例如idlet id = Symbol();Symbol也可以按名字命名// id is a symbol with the description "id"let id = Symbol("id");即时描述一样，也表示为不同的值let id1 = Symbol("id");let id2 = Symbol("id");alert(id1 == id2); // falseSymbol不能自动转换为字符串let id = Symbol("id")

可选链操作符?.可以安全的访问对象中嵌套的属性，即时属性不存在也不会报错常规情况下，如果我们访问不存在的属性会报错let user = {}; // a user without "address" propertyalert(user.address.street); // Error!如果确实想访问属性怎么办，可以使用三元表达式let user = {};alert(user.address ? user.address.street : undefined);但是如果属性嵌套比较

javascript中对象的this只自己本身，看如下代码let user = { name: "John", age: 30, sayHi() { // "this" is the "current object" alert(this.name); }};user.sayHi(); // John这里的this只user对象，this.name翻译成user.name所以结果是John那为什么不直接用user.name，因为如果直接使用外部变量有可能会报

谈这个话题特指javascript中的对象，我们使用赋值的语法来定义一个对象，其实只是获取了这个对象的引用let user = { name: "John"};这里的user变量只是指向了对象，是对象的一个引用如果我们再定义一个变量，并且把user赋值给变量let user = { name: "John" };let admin = user; // copy the reference这里的admin也指向了变量，user和admin都是对象的引用let user = { na

对象的定义方法let user = new Object(); // "object constructor" syntaxlet user = {}; // "object literal" syntax一般使用对象字面量的方法创建对象对象里边可以放置键值对来代表对象的属性let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "

我们日常在编程的过程中调试是不可避免的，学会调试也是作为开发需要掌握的必备技能。那如何调试js呢？在浏览器中打开你需要调试的页面，按下F12，就会打开开发者工具我这个现在是左右结构的，使用起来不是特别方便，我们可以点击三个点的图标可以修改一下布局调试的时候先需要切换到source页签，这样就会显示源代码左侧的page是列出了目前网页加载的源文件，包括html、css、js、图片等素材，可以选中其中的js中间部分就显示了js的源代码，可以在代码的行号旁边点击一下鼠标左键，就打了一个断点。

定义函数还有一种方式箭头函数let func = (arg1, arg2, ..., argN) => expression这种语法等价于let func = function(arg1, arg2, ..., argN) { return expression;};例子let sum = (a, b) => a + b;/* This arrow function is a shorter form of:let sum = function(a, b) { r

在javascript中定义函数除了使用function关键字外，还可以使用函数表达式let sayHi = function() { alert( "Hello" );};使用该语法可以将函数赋值给变量，sayHi。特别需要注意的是，如果使用函数表达式定义的，结尾处需要有;号，采用function关键字的则不需要回调函数将函数名作为参数进行传递，称之为回调函数function ask(question, yes, no) { if (confirm(question)) yes()

通常对于条件判断，我们可以用if/esle的语法来实现，如果有多个条件的可以使用多段if/else来实现。除了if/else我们还可以使用switch语法进行替代，语法格式为：switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break]

函数的命名js中可以将一段通用的代码封装到函数中，后续调用的时候可以直接使用名字进行调用，语法是function name(parameter1, parameter2, ... parameterN) { ...body...}比如：function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();这里通过封装的技术将弹出信息封装为了showMessage函数，在脚本中就可以直接

javascript中通过循环来重复执行一段命令，语法如下:for(开始;条件;步进) 循环体一段循环代码for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2 alert(i);}执行过程语句对应的代码解释开始let i=0进入循环时执行一次条件判断i<3每次循环执行之前检查条件，如果为假则循环结束循环体alert(i)循环体，每次循环都执行步进器i++循环

??空值合并运算符，a??b 的返回结果是，如果a被定义了，那就返回a，如果a没有被定义，那么就返回b。返回第一个不是null/undefined的参数let user;alert(user??"Anonymous")//返回Anonymouslet user = "John";alert(user ?? "Anonymous"); //返回Johnlet firstName = null;let lastName = null;let nickName = "Supercoder";

字符串转换avascript中可以进行类型转换，比如boolean类型和string类型进行转换let value = true;alert(typeof value); // booleanvalue = String(value); // now value is a string "true"alert(typeof value); // string第一段的类型是boolean 第二段通过String(value)方法将boolean转换成字符串类型数值转换数值计算时可以进行自动

javascript中有三种方式可以和用户进行交互，分别是alert、prompt、confirmalertalert是一个消息对话框，弹出之后页面被锁定，直到点击确认按钮才解锁alert("Hello");prompt可以允许用户输入，当点击确定后可以获取用户的输入，如果用户取消则返回nulllet age = prompt('How old are you?', 100);alert(`You are ${age} years old!`); // You are 100 years

javascript中有8中数据类型number 数值类型 整型、浮点型，整型的范围在±(2^53-1)bigint 任意长度的整数string 字符串boolean 真、假 true or falsenull 不知道值undefined 未赋值object 对象 可以存储复杂的数据结构symbol 唯一的标识符typeof用来判断类型，有 typeof x 或者 typeof(x)的用法typeof undefined // "undefined"typeof 0 // "nu

变量类型中有字符类型，不同于C语言或者Java语言，char类型在javascript中是没有的，字符串可以是空串或者一个或者多个。let str = "Hello";let str2 = 'Single quotes are ok too';let phrase = `can embed another ${str}`;字符串的三种定义，双引号、单引号、反引号。单双引号都表示字符串，但是反引号比较特殊。它用了一种特殊的语法${str} 其中的str既可以是一个变量也可以是一个表达式，这样会计算结

变量变量可以理解为一个容器，用来存放我们需要的值，比如定义个变量的名字为姓名，往里边放值张三变量的定义方法是使用关键字letlet name = '张三'为了保持代码的可读性，如果有多个变量时，每个变量定义都需要占一行let user = 'John';let age = 25;let message = 'Hello';变量的命名规则字母、数字、$、_是合法字符首字母不能为数字不能使用系统保留字如果涉及到多个单词，采用驼峰法let myFristName驼峰命名规则，

在javascript中语句是以分号为结尾的，如：alert('hello');当然也可以不加分号，可以这样写alert('hello')但也不总是成功，如下：alert("Hello")[1, 2].forEach(alert);js不会把他们解释为两句话，而是进行合并，变成这样alert("Hello")[1, 2].forEach(alert);这就会导致hello正常输出了，后边报了个错还有一种情况，表达式也不会分开执行alert(3 +1+ 2);并不会变成

日常开发中免不了要进行调试，使用浏览器自带的调试器可以发现javascript运行时报的错误，以chrome为例打开这个带有错误的代码有错误的代码表面上看这个网页没有错误，但是错误影藏在下边。我们需要按键盘上的F12红色字体表示有错误，给出了代码的行数，现在是12行有错误蓝色的小三角表示可以输入javascript的代码，如果是单行代码可以按回车进行执行，如果是多行代码可以先按shift+enter键切换成多行模式，输入完毕之后再按回车...

昨天在安装react脚手架的时候报了个错，报错信息是提示电脑上没有安装python，所以需要先安装一下python的环境找到官网，下载最新的安装包按照程序是个exe程序，直接点击安装即可默认是安装到C盘，一般系统盘不要安装软件，保持空间足够，以免操作系统更新的时候提示空间不足。我们选择自定义安装最好是把python加入到系统环境变量里，免去了后续的配置，下边的安装保持默认安装位置可以自己选择，选择空间大的盘符等待安装的完成安装完成后关闭就可以安装完毕后在控制台验证一下是否安装成

低代码web开发中常常需要自定义组件，而自定义组件的前提是需要掌握react的开发，我今天就从网上找了一个课程，照着课程先把react练起来。课程的地址react课程地址我选择这个课程的原因是因为MDN的教程的质量是比较高的，课程对新手友好，非常详细。学习的起点教程推荐是使用脚手架，需要电脑安装nodejs环境，安装成功后npm基本就可以使用了。教程中介绍npm是包管理器，而npx是包的运行期。我感觉和java里的java是编译，javac是运行是一个道理。我们需要做的是先在电脑上创建一个空的目录，然后

有幸参加了《打造企业创新团队》读书营，书本中的一句话让我印象特别深刻，就是逃离痛苦，奔向美好。从小在应试教育中在千军万马中脱颖而出，本以为生活就像老师描述的那么美好，只要吃得读书的苦就可以享受生活的甜。真正工作之后，发现老师说的也不是那么对。我们天天被公司领导和客户逼迫着生活，要努力学习，要努力工作，要完成绩效目标。生活仿佛被工作裹挟了，脑门上写的大大的两个字，麻烦。小时候喜欢过节，是因为过节可以吃好吃的，有节日的气氛。长大之后更热爱过节，因为只有到了节假日，你的老板和你的客户才会给你稍稍喘息的时间。往

【审问环节】本章主要介绍了在职业成长过程中，职场人会遇到的各个阶段和各种问题与挑战，并且给出了针对性的解决方案。职业发展可以分为三个阶段：1）第一阶段，通过做事得到认可2）第二阶段，通过带领团队做事获得信任3）第三阶段，通过“找到未被满足的社会需求，整合社会资源加以满足，并形成商业模式”赢得尊重在职业转换章节分别介绍了职场中的三个场景包括换工作、升职、转岗。通过具体的案例分析了主人公在具体的事件当中遇到的问题并给出了针对性的建议。除了职场场景也讲解了职业遇到天花板时候出现的问题和解决方案，尤其创

【审问环节】打造创新团队的公式，创新团队=有雄心的领导+有个性的人才+允许犯错的机制+足够的耐心做好带将3招中的知人善用可以找到个性的人才；用好人才，必须用好领兵5式，个性激励比较关键；构建允许犯错的机制离不开统帅两手中的文化塑造。打造创新团队要分三步走：第一步，夯实团队战斗力；第二步，提升团队战斗力；第三步，激发团队创新。创业的基本原则：1） 做熟不做生，隔行不取利2） 避实就虚，集中优势兵力打歼灭战创业的注意事项：1） 小步走、走一步看一步，避免贪功冒进2） 高筑墙、广积粮、缓称王，注

【审问环节】本章介绍了统帅2手，包含准确定位和文化塑造。1、准确定位准确定位就是明确自己与相关人的责权关系。如何做到准确定位1） 共识是一切2） 必须从上到下一以贯之3） 具体方法：一图一表2、文化塑造团队文化是以团队创始人为核心的团队全体成员对自己所在团队的认知与行为习惯的总和。使命、愿景、价值观是团队文化的3个核心。使命，回答的是“为什么要组建这个团队”。愿景，回答的是“要把这个团队发展成什么样”。价值观，回答的是“在发展过程中要遵循哪些原则”。文化塑造的路径：1） 明确的

【审问环节】文章讲解了领导水平提升的三个方面，包括知人善用、有效沟通和时间管理。1、知人善用成为中高层领导后必须把知人善用作为提高的必修课，因为中高层领导是间接领导，所以选对人就是一门必须课，选对了人才能保证团队的效率提高。文中介绍了知人的方法，包括从做事、处人、职业发展几个方面去评估。而善用主要是要求给予合适的岗位和帮助对方适应并驾驭新岗位。2、有效沟通在有效沟通章节主要介绍了一对一沟通的几个方面，包括沟通的技术、沟通的前提和沟通的过程管理。其中也介绍了破解暴力沟通的各种技巧。在使用会议沟通

本周仔细阅读了领导5式相关章节的内容，领导5式包括目标共识、心态辅导、个性激励、能力训练和有效反馈。书中分章节介绍了每一式的具体内容，作者结合咨询过程中的具体案例讲解了每一式的具体应用，读后很有感触。第一个案例分享了如何从业务骨干成长为领导，结合我自身的经验确实感同身受。我刚开始入职的时候是一名程序员，因为技术能力比较突出，而且在项目上表现优异，逐渐的老板就比较器重我。刚开始是让我独立承担项目，项目做得比较好后就逐步的分配了一些成员给我带。当时也确实不愿意带，大部分都是自己亲自上，那个时候的认知是与其给

语法标识符采用驼峰命名，第一个单词首字母小写，第二个单词首字母大写doSomthing不要使用系统的保留字，尽量命名时能望文知义，命名时还是采用英文单词比较好，使用汉语拼音也不利于阅读注释分为单行注释和多行注释//为单行注释/***/ 为多行注释严格模式在首行添加"use strict" 启用严格模式变量变量定义使用var，在函数中用var定义的变量为局部变量，不能在函数外使用<!DOCTYPE html><html lang="en">&l