- 博客(52)
- 资源 (1)
- 收藏
- 关注
原创 Angular--服务
使用服务可以轻松的实现跨组件跨模块共享数据@Injectable({ providedIn:'root' // 服务的作用域在“根”,任何一个模块一个组件都使用同一个服务实例对象 // providedIn:ModuleName // 模块级别注册服务,该模块下的所有组件使用同一个服务实例对象})@NgModule({ // 模块级别注册服务,该模块下的所有组件使用同一个服务实例对象 providers:[ServiceName],})@Component({ //
2021-10-02 22:57:59
243
原创 依赖注入DI
面向对象的一种设计原则,用来减少代码之间的耦合度,增加了代码的可维护性。在A类的外部实例化B类,在实例化A类的时候,将它的依赖项通过contructor构造函数参数的形式注入到类的内部。这样在修改B类的时候,不需要修改A类。Angular框架帮助我们实例化依赖类。DI的四个核心概念:1)、Dependency:组件要依赖的实例对象(服务实例对象)2)、Token:获取服务实例对象的标识3)、Injector:注入器,负责创建维护服务类的实例对象并向组件中注入服务实例对象。...
2021-10-02 22:38:32
159
原创 Angular生命周期
一、初始化阶段1、constructorAngular在实例化组件类时执行,可以用来接收Angular注入的服务实例对象;可以获取到引入的实例,还获取不到接收的属性值2、ngOnInit在首次接收到输入属性值后执行,在此处可以执行请求操作在此可以打印接收到的属性值3、ngAfterContentInit在内容投影渲染后调用(@ContentChild("ContentName") content:ElementRef<类型>)4、ngAfterViewIn
2021-10-02 22:37:26
571
原创 异步是如何实现的?
Javascript是单线程语言,实现异步操作是在事件循环中进行的#mermaid-svg-cqh2uFQOlxP4VzuH .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-cqh2uFQOlxP4VzuH .label text{fill:#333}#mermaid-svg-cqh2uFQOlxP4VzuH
2021-09-26 15:41:25
265
原创 js是一门什么样的语言
1、脚本语言,不需要编译,可以由解释器直接运行2、弱类型语言,声明时不需要明确变量的类型,赋值给它什么类型,它就是什么类型3、面向对象。将事物当做一个对象来看待,对象中有属性和方法,使用对象的时候不需要考虑具体的实现过程,只需要调用其中的方法即可...
2021-09-26 15:02:51
229
原创 React componentWillReceiveProps()在props不改变的情况下被调用
componentWillReceiveProps在初始化渲染阶段并不会被调用。props发生变化的时候会调用componentWillReceiveProps,但是这并不意味着props的值发生了变化。componentWillReceiveProps在props发生变化的时候被调用。为了避免深层比较(代价昂贵),react在父组件渲染的时候,就检测为props改变了,故而调用子组件的componentWillReceiveProps方法。因此,componentWillReceiveProp
2021-09-25 18:43:58
613
原创 Angular的依赖注入
3、react为什么使用单向数据流4、react的生命周期5、componentWillReceiveProps6、setState()依赖注入(DI)是一种重要的应用设计模式。依赖,当类需要执行其功能时,所需要的服务或对象。DI是一种编码模式,其中的类会从外部源中请求获取依赖,而不需要我们自己创建它们Angular系统中通过类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。...
2021-09-24 19:45:39
557
原创 为什么使用Angular
1、强大的前端开源框架 包含了组件化方案、模块化方案、测试方案、表单验证、路由、国际化方案和安全方案等,vue(渐进式)和react需要自己进行组装,例如【Angular = Vue + vue-router + axios + kama + 表单验证插件 + i18n...】定制的自由也可能会带来不断重构架构的噩梦,另外,我们公司不能访问外网,不能随意的下载依赖,针对这一点,angular是一个很不错的选择2、成熟的文档:Angular更强势更主观,它的文档对于如何完成某个功能给...
2021-09-24 17:43:31
145
原创 Ember controller之间通信
Ember controller之间通信使用Ember做项目有一段时间了,查看项目之前的代码,当一个controller用到另一个controller的数据时,总是使用将变量存到localStorage中的方法,虽然这种方式是可以实现功能的,但是有很多局限性:1、无法直接监听localstorage的变化2、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,导致页面变卡3、在浏览器隐私模式下,不能读取localStorage4、localStorage不能被爬虫抓取
2021-04-11 15:46:34
129
原创 Ember调用资源container.lookup
Ember调用资源例如:this.container.lookup(`route:${routeName}`);this.container.lookup(`view:${viewName}`);this.container.lookup(`controller:${controllerName}`);this.container.lookup(`adapter:${adapterName}`);
2021-04-11 15:25:31
116
原创 阻止action冒泡
应用场景封装了table组件后,在tr上有点击事件,在td上传入点击事件时会冒泡到tr上,触发tr的点击事件。这时使用`bubbles=false`可以阻止td上的点击事件冒泡。使用使点击‘按钮’的时候只执行click2不执行click1<tr {{action 'click1'}}> <td {{action 'click2' bubbles=false}}>按钮</td>{{/tr}}...
2021-03-16 16:39:15
182
原创 input光标的移动和选中
方法一input.setSelectionRange(opsStart,opsEnd);setSelectionRange方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。当opsStart和opsEnd相同时,可用于定位光标位置。setSelectionRange实际上是改变了selectionStart 和 selectionEnd属性,所以也可以通过直接修改这两个属性来实现方法二input.selectionSt
2020-12-03 17:13:51
2883
原创 数组字符串常用操作总结(一)
1、数组合并--concat()将两个数组合并成一个新的数据,不影响原来数组的值let arrA = [1,2,3];let arrB = [4,5,6];let arrC = arrA.concat(arrB); // arrC [1,2,3,4,5,6]2、数组过滤--filter()筛选出的数据生成一个新的数组,不影响原来数组的值let arrFilter = arrC.filter(item=>{ return item > 4});//
2020-11-30 19:07:43
173
原创 正则拼接字符串
// 直接写正则;let reg_1 = /aabc/;// 拼接字符串let text = 'aa';let reg_2 = RegExp(text + 'bc'); let reg_3 = RegExp(text + 'bc','gi'); console.log(reg_2); // /aabc/console.log(reg_3); // /aabc/gi
2020-11-30 17:41:35
2583
原创 jsPDF in Emberjs: 导出界面为pdf
在Ember项目中,引入jspdf实现前端界面导出成pdf界面,出现以下问题:Uncaught Error: an unsupported module was defined, expected `define(name, deps, module)` instead got: `1` arguments to define`搜索解决办法如下: if (typeof module === 'object') { module.exports = callback(); } else i
2020-10-16 11:09:08
147
原创 Ember项目引入js依赖
1、每个ember-cli managing dependencies,第三方库,jQuery插件等通过bower安装2、bower install --save http://example.com/js/myjsfile.js以jsPDF和html2canvas为例:# 下载安装bower install --save https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.jsbower install --save
2020-10-16 11:07:58
234
原创 slideDown和slideUp初始状态设置,使用animate替代
使用jquery的slideDown展开效果时,需要使用slideUp效果关闭,才能使用slideDown效果展示,在处理初始状态时,需要先执行收起操作,会出现界面闪动的问题,造成界面不干净。slideDown和slideUP的实质是{display:show}和{display:none}如果使用{display:none}设置初始状态,slideDown的效果并不能展示所以,经研究使用了animate方法来代替slideDown和slideUP方法// jS文件function s
2020-09-23 11:09:17
951
原创 火狐浏览器title显示不全
title = 'http://111.111.111.111/index/aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffgggggggggghhhhhhhhhh'火狐浏览器中的title遇到长单词不会自动换行,导致title显示不全。解决思路:由于遇到空格会自动换行,所以,先将字符串按空格划分,然后判断每一部分的长度,(经实验发现一般长度超出68~70就会出现显示不全的问题),如果长度超过68,则添加一个空格,这样...
2020-09-22 18:20:15
1003
原创 常用JS dom操作
1、元素1、创建元素let para = document.createElement("p"); // 创建新元素<p>let node = document.createTextNode("这是一个新的文本节点"); // 创建一个新的文本节点para.appendChild(node); // 将文本节点添加为p元素的子节点2、添加元素parent.insertBefore(child1, child0); // 在parent节点的子节点child1节点之前添加child
2020-05-19 20:10:54
155
原创 网页变灰
今年国家哀悼日,几乎所有的网站都变灰了,哀悼失去的人们。实现的代码如下:.css { -webkit-filter: grayscale(100%); /* chrome */ filter: grayscale(100%); /* firefox */}...
2020-04-29 18:29:14
181
原创 div--可滚动但不显示滚动条
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>可滚动但...
2020-04-29 17:59:58
1513
原创 合并数组并去重
let a = [1, 2, 3, 4];let b = [2, 4];let c = new Set([...b, ...a]); // Set对象的特性,成员的值是唯一的,从而达到去重的目的let s = Array.from(c); // Array.from() 把Set对象在转化为数组console.log('d',d); // [ 2, 4, 1, 3 ]...
2020-04-15 18:41:35
739
原创 localStorage和sessionStorage
localStorage用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除 sessionStorage用于临时保存统一窗口(或标签页)的数据,在关闭窗口或标签之后将会删除这些数据属性(方法) 描述 length 返回存储对象中包含多少条数据 key(n) 返回存储对象中第n个键的名称 getItem(keyname) 返回指定键的值 se...
2020-03-10 16:45:07
106
原创 Cookie
学习cookie首先要明白,cookie是为什么而产生的。1、什么是cookie?cookie 实质上是存储在计算机硬盘上某个目录下的文本文件。2、cookie的常见应用1)、网站记住用户名、密码的功能、自动登录的功能等等2)、网站的一键换肤功能,记录相关信息,在刷新界面时仍然保留当前皮肤3)、网站不同用户登录的权限不同,保存权限信息3、cookie的特点1)、存储...
2020-03-10 16:15:48
192
原创 HTML学习(一)
<!DOCTYPE>声明作用:明确声明html版本,有助于浏览器正确显示网页特性:1、不区分大小写2、没有结束标签3、位于文档中最前面的位置,处于标签之前通用声明** HTML5 **<!DOCTYPE html>** HTML 4.01**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti...
2020-02-22 16:27:41
85
原创 网页刷新方式
1、reload重新加载当前文档(刷新当前界面)document.location.reload([bForceGet]);bForceGet,可选参数,默认false,从客户端缓存中获取当前页;true,以GET方式,从服务端取最新的页面,相当于F5刷新2、replacedocument.location.replace(url);...
2020-02-20 17:22:19
465
原创 数组添加移除某个元素
let arr = [1, 2, 3, 4, 5, 6, 7];// 移除3let itemIndex = arr.findIndex(item => { return item === 3;});arr.splice(itemIndex, 1);console.log('arr', arr); // [ 1, 2, 4, 5, 6, 7 ]// 添加元素...
2019-12-30 10:52:14
307
原创 base64转码后的字符串应用于url
问题:base64转化后的字符串中会含有‘+’、‘/’、‘=’这些字符,当把该字符串应用于url中时,会影响url的解析解决:将‘+’、‘/’、‘=’转化为base64转化不会生成且不影响url解析的的字符,如‘*’、‘_’、‘-’、‘.’// Base64实现var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef...
2019-12-24 10:13:52
674
原创 对象变成了[object Object]
如果你的对象变成了[objectObject],说明他被强制类型转换为了字符串。let a = {};console.log(a+''); // [object Object]console.log(typeof (a+'')); // string可是有的方法,确实只接受字符串参数,所以要将对象转化为对象字符串,进行传递console.log(JSON.stringify(...
2019-12-23 14:49:08
5080
1
原创 文件上传时:NET:ERR_CONNECTION_RESET
"NET:ERR_CONNECTION_RESET" (错误链接重置)浏览器中上传文件时,报以上错误。原因是:文件大小被限制,导致文件上传失败
2019-09-10 17:03:32
6250
原创 linux系统大小写敏感
url="/form/formdef/formDefPreview.html?key=RecordListManagement&id={{data.RecordListManagement.id}}&isClose=true"同样的url在本地部署的程序上是可以运行的,但是在线上部署却显示`404-找不到`而下面的这个网址在线上线下都可以访问:...
2019-09-09 11:11:15
4173
原创 js和jQuery获取点击按钮的属性
<html><head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function getByJs(that) { ...
2019-09-03 15:35:31
2981
原创 实现angular页面的更新
$scope(上下文模型)视图和控制器之间的桥梁用于在视图和控制器之间传递数据利用$scope暴露数据模型(数据,行为)$watch(监听函数)$watch(watchModel,watchFunc,watchDeep)// watchModel--被监听的数据// watchFunc(newValue,oldValue,scope) 数据发生变化时的回调函数// watchD...
2019-08-28 15:42:10
654
原创 oh-my-zsh insecure directories
每次打开 ubuntu 时报错:zsh compinit: insecure directories, run compaudit for list.Ignore insecure directories and continue [y] or abort compinit [n]?compaudit 找到不安全的文件夹或者文件查看不安全的文件或文件夹:> c...
2019-08-22 20:22:54
438
原创 jQuery
1、jquery 选择器含义$(“p”)选取<p>元素$(“p.info”)选取 class="info"的<p>元素$(“p#info”)选取 id="info"的<p>元素$("[href]")选取带有 href 属性的元素$("[href=’#’]")选取 href=’#'的元素$("[...
2019-08-20 20:46:32
91
原创 JS自定义排序
自定义排序var arr = ["梨","苹果","香蕉"];console.log("arr排序前:",arr); // [ '梨', '苹果', '香蕉' ]var customSort = new Map([["苹果",1],["梨",2],["香蕉",3],[undefined,4]]);arr.sort(function(a,b){ if(customSort.get(a)&...
2019-08-20 14:34:12
1185
原创 white-space、word-break、word-wrap
white-space – 控制空白字符的展示属性值换行符空格自动换行备注nomal×合并√默认nowrap×合并×不换行pre√√√preserve 保留空格和换行pre-wrap√√√preserve+wrappre-line√合并√preserve+new line+wrapword-break...
2019-08-19 17:29:18
125
原创 对象(包括数组对象)的复制和赋值
// 对象的赋值(浅拷贝--指向同一个地址)var obj1 = {a:1,b:2};var obj2 = obj1;obj2.a = 3;console.log("obj1:",obj1); //{ a: 3, b: 2 }console.log("obj2:",obj2); //{ a: 3, b: 2 }// 解构赋值(浅拷贝)let [obj4] = [obj1...
2019-08-14 21:00:55
351
原创 对象的两种取值方式——点方式和[ ]方式
// 对象取值————点方法和[]方法var obj = {a:{a1:"a2"},b:"b1",0:"00"};var key = 'a';var key2 = "a.a1";console.log(// 一级取值: //键名是字符串 obj.a, // { a1: 'a2' } obj['a'], // { a1: 'a2' } obj.b...
2019-08-06 09:37:06
2708
input光标操作.html|input光标操作.html
2020-12-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人