- 博客(34)
- 收藏
- 关注
RSS订阅原创 【常用】1、本地创建项目添加到远程仓库
1、新建本地项目 pro2、 cd pro3、git init // 项目初始化4、git remote add origin https://gitee.com/xx/xxx.git // 关联远程仓库5、git add . // 将本地文件夹中的内容添加到本地仓库6、git commit -m 'initial project' // 提交并添加说明7、git push -u origin master // 将代码推送到远程仓库...
2021-06-21 17:25:30
169
原创 在线测试跨域请求
需要做跨域测试，想简单做怎么办？chrome中打开一个页面，打开的页面要同你访问的页面的协议保持一致，打开F12，在页面中输入以下代码// http://xxx.xxx.com/ 后端提供的请求地址var xhr = new XMLHttpRequest();xhr.open('GET', 'http://xxx.xxx.com/');xhr.send(null);xhr.onload = function(e) { console.log(e);}后端首先设置允许你
2021-06-21 16:09:51
1822
原创 【部分通用】关于提交或删除按钮等的总结 - Angular版本
背景说明：日常开发中，常用按钮(也是常用功能)包含增删改查。增：又名 新增、新建、添加等 删：删除 改：又名修改、更新等，很多时候会同新增公用一个form或者说按钮 查：查询查询没有对数据库进行任何修改，不需要过多考虑。修改编辑虽然对数据库进行了改变，但是因为你填的信息不变，改变多次只是多调用几次接口，并不会报错，问题不大，但是还是应该避免；但是另外2种的话，有几种情景会出现问题：1、连续点击2、网络速度慢、页面卡顿3、其他原因，比如：你忘记在提交之后关闭窗口等；.
2021-06-11 18:31:07
285
2
原创 【读书笔记】第1章“自律100天”的华丽开启
第1节 “自律100天”的底层逻辑时间律是指，在这个世界上，有些东西是没有办法通过投机取巧的方式获得，即买不来、拿不来、要不来、抢不来，获得它的唯一方法，就是用时间来换习惯就非常典型地符合“时间律”，即花再多钱都无法瞬间获得，只能用时间换，尤其是我们特别期待的那些好习惯。爱默生说，习惯如果不是最好的仆人，它就是最坏的主人。习惯应该成为我们的仆人，它要为我们所用。但是你如果没有意识到习惯的力量有多大的话，它会翻天的，它会倒过来支配你，尤其是那些坏习惯。很多人之所以陷入困局，恰恰就是因为他们让坏
2021-06-10 22:15:10
1716
原创 【读书笔记】自律100天，穿越人生盲点 - 杨晓霞
OHTT——穿越人生盲点的最简单方法论OHTT”是我自创的一个概念，是指：One Hundred Days（100天）、Two methods（2个方法）和Three things（3件事） ，即做人生中最重要的3件事，通过记录和复盘这2种方法，持续做够100天，在这一过程中穿越人生盲点。习惯具有无穷的力量习惯，让你做起事来云淡风轻游刃有余，因为不再需要花时间思考，也不会感到无比别扭。然而，罗马不是一天建成的，习惯也一样。三五天是养不成一个习惯的，只有经过一段时间的刻意...
2021-06-09 22:07:45
662
2
原创 【前端工程化学习笔记】2-1 自动化构建简介
一、1、自动化构建是前端工程化当中重要的组成部分自动化：通过机器代替手工完成工作构建：理解为转换，把一个东西转换成另一个东西自动化构建：把源代码自动化转换成生产环境中可以运行的代码，这个过程称为自动化构建工作流作用：脱离运行环境的问题，在开发阶段使用提高效率的语法、规范和标准，比如ES最新标准sass借助模板引擎创建重复的文件等-2、npmscripts实现自动化构建最简单的方式（package.json中添加scripts:{}），适合构建简单的，复杂的会非常吃力...
2021-06-08 07:45:21
143
原创 12、对象的几个扩展方法之 Object.assign
一、Object.assign()const target = { name: 'Judy', age: 4}const source1 = { name: 'tiger', sex: 'male'}const source2 = { name: 'carl', height: 100}// const result = Object.assign(target, source1)// target中有，source中没有的，则保持
2021-06-07 06:43:49
140
原创 11、对象字面量增强
ES2015升级了对象字面量的语法// 传统// 1 对象里面使用 属性名:属性值 的语法，即便是使用变量也必须是 属性名:变量名// 2 为对象添加方法// 3 添加动态属性，属性名必须是个明确的值或者规范的变量名称，只能在对象声明过后通过索引器的方式动态添加属性const age = 4const randomKey = Math.random()const obj = { name: 'carl', age: 4, method1: function() {
2021-06-07 05:53:49
310
原创 【前端工程化学习-创建项目】1-3 开发一款脚手架(yeoman)
不同的Generator生成不同的项目，那我们也可以定义自己的Generator生成自己需要的项目，特别是当你一部分基础代码或业务代码还是重复的时候，可以在别的脚手架形成的项目结构之上再封装，加入自己的代码，形成新的脚手架。-公共的部分全部放到脚手架中生成-1、创建Generator模块，实质上就是创建一个npm模块，但是Generator它有特定结构|-generators//生成器目录|-app//默认生成器目...
2021-06-06 07:38:34
220
原创 【前端工程化学习-创建项目】1-4 plop生成部分文件
1简介：一个小而美的脚手架工具，一般用于创建项目中特定类型文件，一般不会独立使用，会集成到项目中，自动化重建同类型文件。-2场景：-每个文件夹中创建相同类型的文件，每个文件有相同的基础代码，当有plop自动化创建时，只要根据配置运行对应命令即可-3使用：-a:首先安装依赖到开发目录yarnaddplop--dev-b:创建文件夹plop-templates，文件夹里面创建.hbs的模板备用-c:项目根目录新建plopfil...
2021-06-06 07:28:10
185
原创 【工程化学习笔记-创建项目】1-2 通用型脚手架yeoman
1、Yeoman简介-（1）定义：用于创造现代化web应用的脚手架工具-（2）作用/优点：Yeoman更像一个脚手架运行平台，搭配不同的generator（webapp-generator->webappstructure、chrome-extensiongenerator->chrom-extensionstructure、nodegenerator->nodemodulestructure）实现不同的应用、创建任何类型的项目。也就是...
2021-06-06 07:19:55
102
原创 【工程化学习笔记-创建项目】1-1脚手架
*一、定义*-脚手架的本质作用是帮我们自动的创建项目基础结构、提供项目规范和约定。*二、作用*-快速搭建特定类型项目的骨架，基于这个骨架进行后续的相应开发工作。-相同类型项目的开发约定：-相同的组织结构-相同的开发范式-相同的模块依赖-相同的工具配置-相同的基础代码*三、常用脚手架工具*-1、特定项目类型脚手架工具:根据开发者提供的信息创建对应的项目基础结构（特定文件及基础配置），只适用于自己服务的框架的项...
2021-06-06 07:01:57
116
原创 【工程化学习笔记-创建项目】1-5 通过nodejs开发小型的脚手架工具
简介：脚手架工具实际是nodecli应用，创建脚手架工具就是创建cli应用-步骤：-a:mkdirsample-b:cdsample-c:yarninit-d:打开目录```package.json修改{"name":"sample","version":"1.0.0",...
2021-06-05 22:15:25
111
原创 10、箭头函数
// 1、定义函数表达式 // 传统 function inc(n) { return n + 1 } // ES2015:简化了定义函数的代码 const incNew = n => n + 1 console.log(inc(1)) // 2 console.log(incNew(1)) // 2 //2、箭头函数语法说明 // 箭头左边是参数列表，多个参数用圆括号包起来 // 箭头右边是函数体,只有一句表达式，表达式的结果会作为结果返回；如果使用{}...
2021-06-01 07:13:07
111
原创 9、...操作符扩展数组的用法
// 展开数组 ...// 函数参数展开：将数组里面的元素依次传递给函数const arr = ['cat', 'yoyo', 'tiger']// 传统方法// 已知数组个数console.log(arr[0], arr[1], arr[2]) // cat yoyo tiger// 未知数组个数console.log.apply(console, arr) // cat yoyo tiger// ES2015之后用...展开数组console.log(...arr) /...
2021-06-01 06:38:42
225
原创 8、函数形参列表拓展的新语法
1、参数的默认值直接在形参后面通过等号设置默认值// 注意有多个参数的，有默认值的参数要放到最后，跟ts一样// ES2015之前设置默认值function paramFn(switcher) { // 设置默认值 switcher = switcher === undefined ? true : switcher; // 注意此处使用短路运算符是有问题的，例如switcher = switcher || true console.log('paramFn
2021-05-29 22:34:23
113
原创 【前端工程化学习笔记】0、前端工程化简介
一、定义*-前端工程化是指遵循一定标准和规范，通过工具提高效率、降低成本的手段。*二、被广泛关注和探讨的原因*-1、前端应用功能要求不断提高，业务逻辑日益复杂-2、前端开发在开发行业举足轻重，涉及范围广，包含传统网站、H5、移动APP、桌面应用、小程序等-3、对前端开发的要求越来越高*三、解决的问题或者说好处*-1、传统语言或语法的弊端-开发过程中想使用ES6等新特性，兼容有问题-想使用sasslesspostcss增强cs...
2021-05-29 21:53:42
163
4
原创 7、字符串的常用扩展方法
1、includes() starsWith() endsWith() 一组方法，更方便的判断字符串中是否有指定内容const str = 'Error: aa is not defined.'// 字符串中间是否有指定内容console.log(str.includes('aa')) // true// 字符串开头是否有指定内容console.log(str.startsWith('Error')) // true// 字符串结尾是否有指定内容console.log(str.endsWi
2021-05-27 06:37:32
91
原创 6、模板字符串
传统定义字符串的方式是单引号或双引号，ES2015中增强了定义字符串的方式，新增了模板字符串，用反引号标识··一、模板字符串与传统定义字符串相同之处如果直接使用跟普通字符串没什么区别，如果要在内容中使用反引号也可以用\去转义// 模板字符串方式，内部使用反引号const str = 'hello, \`ECMA\` world'console.log(str) // hello, `ECMA` world// 单引号方式，内部使用反引号const str1 = 'hello, \`E
2021-05-26 07:20:50
165
原创 5、对象解构
1、数组解构与对象解构对比因为数组中的元素有下标,是有顺序规则的，所以数组的解构可以通过位置进行提取，而对象里的成员没有固定次序，不能像数组一样按照位置提取,那么对象的解构是通过属性名进行提取的2、对象解构基本用法书写方式及匹配原则：对象解构使用花括号，花括号里面的变量名要匹配解构对象中的属性名去提取其中的值，如果不能匹配到则返回undefined 设置默认值：对象解构同数组解构一样也可以设置默认值 重命名：由于解构的变量名用来匹配被解构对象中的属性名的，如果碰到作用域中有同名成员会产生冲
2021-05-25 12:33:20
1227
原创 4、数组的解构
解构是ES2015新增的从数组或对象中获取指定元素的一种快捷方式，这是一种新的语法。数组解构的基本使用：const arr = ['Judy', 'Alex', 'Carl']// ES2015之前获取指定元素需要通过索引获取然后放到一个变量当中const user1 = arr[0]const user2 = arr[1]const user3 = arr[2]console.log(user1, user2, user3) // Judy Alex Carl// ES2
2021-05-23 22:22:51
1234
原创 3、const
const 声明一个只读的恒量或常量，变量声明过后不许允许被修改,也就是说const在声明的同时就必须赋值const name = 'Judy'name = 'Carl' // TypeError: Assignment to constant variable.const声明的成员不能被修改，实质上是不允许声明后的变量指向一个新的内存地址，并不是不允许修改恒量中的属性成员。const obj = {}obj.a = 1console.log(obj) // { a: 1 }o..
2021-05-23 21:39:28
76
原创 2、let 和 作用域
一、作用域概念：代码中的某个成员能够起作用的范围分类：全局作用域 函数作用域 块级作用域（ES2015加入，{}一对大括号代表一个块级作用域）：二、变量声明1、var 在块内定义的成员，外部可访问，对于复杂的代码这是非常不利且不安全的 存在变量提升，在声明之前打印的话结果是undefined if(true) { var name = 'Judy'}console.log(name) // Judy2、let 声明的变量只能在代码块内使用,
2021-05-22 07:43:59
277
原创 小工具
一、NODEJS环境1、Nodemon作用：修改代码后自动重新执行安装：yarn add nodemon --dev使用：yarn nodemon 文件名备注：如果全局安装课直接使用nodemon命令备注： 个人笔记，提供思路。
2021-05-22 06:46:59
59
原创 1、ES6开篇
一、ECMAScript 与 JavaScript ECMAScript也是脚本语言，简称es,通常将它看作js的标准规范，但实际上js是ECMAScript的扩展语言。因为ECMAScript只是提供了最基本的语法，停留在语言层面，并不能直接用来完成业务1、了解语言和平台的关系 （1）在浏览器中，js包含ECMAScript和WEB APIS(BOM DOM) （2）在nodejs中，js包含ECMAScript和NODE APIS(fs net etc.)二、ECMAScri...
2021-05-21 12:46:59
83
原创 【vant】van-steps自定义图标
背景：要自定义步骤条的图片，但是官网上并没有找到相关示例，官网的自定义步骤条icon使用的是属性及vant的icons，我想要的是随便写什么，那就要用官网提供的slot解决：1、官网(vant官网)截图2、实现：直接上代码，注意template的使用位置，内部使用div，用了背景图，so，完全定制。<van-steps direction="vertical" :active="active"> <!--这里使用循环--> .
2021-05-20 06:45:35
4680
2
原创 iconfont导出的iconfont.svg逆操作
一、背景有一个半路接手的项目，项目中只有iconfont.css iconfont.svg等必要文件，在iconfont官网中没有对应项目图标，但是需要新增图标，因此就想拥有一个完整的图标库，以后有需要添加即可。重点：这里涉及到iconfont.svg转换成单个svg文件，及svg文件导入iconfont图标库的过程。二、怎么做1、打开链接https://icomoon.io/app/#/select2、接下来的步骤参照图片顺序说明：如果你需要生成可使用的文字图标可以点击Gene
2021-04-30 16:40:26
2107
2
原创 BUG篇：关于Blob文档下载----浏览器兼容性问题
描述问题：今天测试发现一个问题，就是文件下载在chrome浏览器中正常，但是在火狐浏览器中不正常，代码中也没有对浏览器进行限制，那是什么导致了这个问题呢？解决过程：点击 导出 按钮，此时火狐浏览器报错如下：重新一步步找到报错的代码 // Blob文件转换下载 downFile(result, fileName, fileType?) { let da...
2019-05-16 18:45:18
5889
原创 Angular实际项目路由使用:Component-less routes结合loadChildren实现方式（一）
先看一下项目结构项目结构如何主要看公司团队，同一个团队的项目结构也有不同，在实践中尝试、进步。另外一个项目结构，按照模块划分→ → → 实际步骤开始：Component-less routes同loadChildren同时使用安装 Angular Routeryarn add @angular/router# ORnpm i --save @an...
2019-05-13 16:16:06
2066
原创 vue中引入全局scss变量
第一： 问题 先说一说为什么会碰到这个问题？ 当我在尝试进行动态换肤的时候，发现只有部分组件的样式会变，但是我写的div不会变，那么就尝试在main.js中引入了scss样式文件，想要尝试通过js来控制scss变量值的变化，以期望用另一种方式即js控制scss变量值的方式实现换肤，此时就先要解决在vue组件中能够使用scss文件中的变量，进行了如下尝试：此时此时在其他的...
2019-05-10 11:02:16
8388
原创 前端动态换肤方式: vue + element-ui（一）
1、新建vue项目（由于目前公司采用的是vue2，因此采用此方式）// 全局安装npm install -g @vue/cli-init// 新建项目vue init webpack project-name2、打开项目准备进行换肤实现第一步：// 安装element-ui框架npm install --save element-ui// 在main.js中进行引用...
2019-05-10 10:00:49
2895
原创 Ruby 更换gem源ssl异常问题 解决方案
根据sass官网更换gem源时，进行到第二步出现问题：步骤：//1.删除原gem源gem sources --remove https://rubygems.org///2.添加国内淘宝源gem sources -a https://ruby.taobao.org///3.打印是否替换成功gem sources -l//4.更换成功后打印如下*** CURRENT S...
2019-05-08 11:10:04
2577
2
原创 初识Angular----数据绑定及事件绑定等(一)
1、常用单向数据绑定（1）单向:数据到视图绑定{{}}及管道操作符xx.component.html:<li> <h3>双花括号引用组件中的属性---也叫单向数据到视图绑定</h3> {{title}} <p>我是英雄：{{hero.name}}</p> <p>用于调试绑定----...
2018-12-27 19:51:53
691
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人