CHL博客

原创 WebStrom、PhpStrom快捷键

注释 ： /* 意不校验*/ ctrl+shift+/ // 意不校验 ctrl+/ ctrl+c ----控制台 停止npm下载 ctrl+f -----查找 ctrl+r -----替换 ctrl+b -----本文件查找变量声明处 ctrl+d------本行代码复制到下一行 ctrl+g------快速到某行代...

原创 前端工程化 组件化 模块化

前端工程化组件化更多关注的UI部分，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。模块化一、模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。模块可以通过...

原创 promise     generator     asyc/await

ES6中的promise generator函数ES7 asyc/await函数共同点：使异步处理更加优雅一、Promise是一个构造函数作用：解决异步回调问题特点：对象代表一种异步操作，有3种状态pending（进行中），resolved（已完成，fulfilled），rejected（已失败） 一旦状态改变，就凝固了，不会再改变。2种过度pend...

原创 栈的应用二(1)----中缀表达式转后缀表达式

中缀表达式转后缀表达式转换过程需要用到(符号)栈，具体过程如下：1）如果遇到操作数，我们就直接将其输出。2）如果遇到操作符，比较优先级。 a：操作符>栈顶元素 操作符直接入栈 b：操作符<=栈顶元素……………………………出栈输出，直到操作符>栈顶元素，操作符直接入栈c：遇到左括号时我...

原创 原型链知识点补充

`__proto__`是可修改的，__proto__就是一个基本的js对象，根据js无底线的语法规则，它是完全可以被修改或者重写的。一、默认情况下：二、修改__proto__的例子。修改了之后，arr不仅有内置的concat、push等功能，还多了一个addClass功能。var arr = [1,2,3];arr.__proto__.addClass = function...

原创 栈的应用一---括号匹配

方法一、数据结构法思路：顺序扫描算数表达式（表现为一个字符串），当遇到三种类型的左括号时候让该括号进栈；当扫描到某一种类型的右括号时，比较当前栈顶元素是否与之匹配，若匹配，退栈继续判断；若当前栈顶元素与当前扫描的括号不匹配，则左右括号配对次序不正确；若字符串当前为某种类型的右括号而堆栈已经空，则右括号多于左括号；字符串循环扫描结束时，若堆栈非空（即堆栈尚有某种类型的左括号）...

原创 栈的应用二---后缀表达式求解

一、是什么：前缀表达式--------------波兰式-后缀表达式-----------------逆波兰式举例如下：(3+4)*5-6就是中缀表达式-*+3456就是前缀表达式34+5*6-就是后缀表达式二、思路：从左向右遍历数组，遇到数字就进栈，遇到运算符，连续出2次栈，2个出栈元素结合运算符进行运算，将运算结果入栈。三、代码：<script...

原创 JS-数据类型

1：Java Script中的变量类型有那些（1）:值类型5: number string bollen null(空) undefined（未定义):指定义变量但没有初始化（2）:引用类型3：Object（对象），Array（数组），Function（函数）2：值类型与引用类型的区别:（1）值类型：1、占用空间固定，保存在栈中（当一个方法执行时，每个方法都会建立...

原创 WebSocket+SockJs+STMOP连接rabbitmq

一、WebSocket协议WebSocket 是发送和接收消息的底层API，WebSocket 协议提供了通过一个套接字实现全双工通信的功能。也能够实现 web 浏览器和 server 间的异步通信，全双工意味着 server 与浏览器间可以发送和接收消息。需要注意的是必须考虑浏览器是否支持，浏览器的支持情况如下：浏览器支持WebSocketvar ws = new WebSock...

转载 写好js条件语句的5条守则

https://github.com/dawn-plex/translate/blob/master/articles/5-Tips-to-Write-Better-Conditionals-in-JavaScript.md

原创 占比图

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;ECharts&lt;/title&gt;    &lt;!-- 引入 echarts.js --&gt;    &lt;script src="echarts-

原创 登录注册（cookie session token）

登录系统获取输入的用户名和密码，作为参数传递给../login API 若验证成功，api返回status：ok，同时返回这个人的信息（name、password）和token值。前端将token值利用浏览器存储，并保存到浏览器里。 将token值利用vuex的存储起来，目的，在以后的http请求头里加上token值，验证用户身份 提示“登录成功”，路由跳出到主页。 3.若...

原创 标签球

需要的插件：1 jquery  2  jquery.windstagball.js步骤：1、在这里，将下面代码，放到标签.js里，当做2使用。/** * JQuery.windstagball.js * @description : 源码和创作思路来源于miaov,作者只是改良为Jquery插件，方便喜欢用jquery插件的人使用 * @author : miaov winds...

原创 CSS--BFC

1、是什么Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。2、布局规则内部的盒子会在垂直方向，一个个地放置； BFC是页面上的一个隔离的独立容器； 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠...

原创 JS--类型转化

数组串化1：数组串化toString()方法 前端传参时var names=["xiahua","dashu"]var obj={name:names}var obj1={name:names.toString()}console.log("++++++",obj)console.log("++++++",obj1) // 以，隔开结果：2：数组串...

原创 JS-声明提升

一：Js解析机制遇到 script 标签的话 js 就进行预解析，将变量 var 和 function 声明提升，但不会执行 function，然后就进入上下文执行，上下文执行还是执行预解析同样操作，直到没有 var 和 function，就开始执行上下文。二：声明提升函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。三：函数声明提升a=5;sho...

原创 ES6之面向对象--类

类class Person{constructor(name="dg",age=60){this.name=name;this.age=age;}showMSG(){ //定义在原型上console.log(this.age,this.name)}print(){ //定义在原型上...

原创 算法之查找

1 二分查找 要求关键字基本有序。&lt;script&gt; function Bsearch(arr,item) { var low=0,high=arr.length-1; while (low&lt;=high) {  var mid=Math.floor((low+high)/2) // 取当前表的中间位置 ...

原创 找工作资料

https://funteas.com/topic/5ada8eac230d1e5e25e45b89?from=singlemessage弹性布局flexboxhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html抓包工具使用：https://blog.youkuaiyun.com/wenhebrews/article/de...

原创 跨域

知识点：同源：协议，域名，端口，三者必须相等。 同源策略：浏览器有同源策略，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击 跨域条件：协议，域名，端口，有一个不同就算跨域。应用场景：简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便跨域解决方案：通过jso...

原创 算法之去重

方法一：new Set()思路：es6新的数据类型 里面的值是惟一的function unique(arr) {var newArr=[];newArr=new Set(arr);return newArr;}var arr=[1,2,2,3,2,3,4,5,4];console.log('==================',unique(arr))...

原创 算法之排序

排序=比较+交换=无序区+有序区js自带的排序，sort（）函数。sort（）函数本质是上把所有的元素转换成String再排序，通过ASCII来排序，就会造成大小写，数字比较不是你想的结果所以不推荐使用 arr.sort();幸运的是，sort（）方法是一个高级函数，可以接...

原创 绝对路径和相对路径

~images和/images  是绝对路径./images和images  是当前目录路径     ./ 或者不加是当前../images  当前目录的上一级     ../是上一级   下一级/ 

原创 时间段

&lt;form class="form-inline" style="font-size: 14px;"&gt; 时间快捷:&amp;nbsp;&amp;nbsp; &lt;label&gt; &lt;input type='text' class='form-control ' id='dateBegin' name='begin' ...

原创 写出优雅的css

原创 点击变色

#menu{ background-color: #9fcdff; height: 40px; list-style:none; /* 将默认的列表符号去掉 */ padding:0; /* 将默认的内边距去掉 */ margin:0; /* 将默认的外边距去掉 ...

原创 angular js 之组件封装篇

1 table-group组件：&lt;label class="btnBar" style="position: relative ;" ng-if="$ctrl.exportBtn"&gt; &lt;button class="btn btn-warning" style="margin-top:-10px;margin-bottom: 6px" ng-click=&

原创 css消除浮动

float:float 带来很多好处，但是也产生很多问题，如父容器倒塌       当一个元素设置浮动后，其他内容会环绕该浮动元素       脱离文档流消除浮动 三种方式：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;t

原创 js---知识点积累篇

======================================= 正则表达式=====================================================测试exp：http://tools.jb51.net/regex/javascript在线生成exp：http://tools.jb51.net/regex/create_reg. 表...

原创 css 易混问题

块级元素特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。常见的块级元素：&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt

原创 css 之 :active 选择器

定义：:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。例子：一定注意顺序a:link {color:blue;} 普通的、未被访问的链接a:visited {color:blue;}  用户已访问的链接a:hover {color:red;}  鼠标指针位于链接的上方a:active {color:yellow...

原创 模板数据显示篇

1：angular  &lt;div class="pointlist point" id="up{{i}}"(click)="onClick(i)" *ngFor="let list of balckSport; let i=index" [class.start]="i==0" [class.end]="i==balckSport.length-1"&g

原创 js 之变量篇

js ：只有函数级作用域和全局作用域 用var和const来声明变量全局变量：在函数外声明的或者在函数内不加var声明的var a;var b;或者：function a(){a;   // 这里a是全局变量}局部变量：在函数内声明的function a(){var  a;   // 这里a是全局变量} 注意：函数A 要用函数B里的数据，就要...

原创 CSS3

子元素选择器 h1 > strong {color:red;} <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>backgroundbackground: #f00 url(../ima...

原创 前端对数据的处理(如从A中提取部分数据组成B）----------Important

1：对象转数组：https://blog.youkuaiyun.com/qq_38643776/article/details/815449422：如何构建一个对象数组arry=[];ngOnInit() { this.arry.push({ name:'大树', age:13 }, { name:'小花', ag...

原创 G2-------数据的处理(如设置横纵坐标，提示信息，时间间隔的处理，字段集展开，字段重命名等)

1 全局设置样式this.chart2.source(this.data,{    value:{        min : 0   // 坐标轴的起始值        max :1   // 坐标轴的结束值        formatter: val =&gt; {    // 设置坐标轴和提示框的文字            return val + '%';        ...

原创 TS日期格式化

  import {DatePipe} from "@angular/common"constructor(private api: ConfigService, private message: NzMessageService, private modalService: NzModalService,private datePipe:DatePipe) {}getdate() ...

原创 CSS--盒子模型（border margin padding）

padding:填充  是内容到边的距离  border:边框  是边的粗细margin:边界  是控件到控件的距离注意：都可以控制4个方向(上，右，下，左)1个值：（上右下左） 2个值：（上下，左右） 3个值：（上，左右，下） 4个值：（上，右，下，左）&lt;style&gt; .a{    border:2px solid green;    padding:...

原创 angular 6 引入bootstrap（第三方插件）

方法一：1 npm i bootstrap --save2 在angular.josn文件中引入3 必须重启服务，要不然不能实时更新过来方法二：直接在index.html里<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="styleshe...

原创 ng-zorro复选框

html：&lt;label *ngFor="let field of fields"&gt; &lt;label nz-checkbox [(nzChecked)]="field.checked" [(ngModel)]="field.checked" (ngModelChange)="refreshStatus($event)"&gt;{{field.value}}&lt