前端基础(js,css,html,jquery及es标准)
Lpd_Reason
Stay hungry,stay study.
展开
-
js判断文字是否 超过 一行(pc+h5)
// 判断文字是否超过了一行 isLineWrap(text = "对列表进行") { const getBLen = function (str) { if (str == null) return 0; if (typeof str != "string") { str += ""; } return str.replace(/[^\x00-\xff]/g, "01").length; .原创 2022-05-29 20:10:48 · 2860 阅读 · 0 评论 -
对象数组和数值数组快速排序
默认asc正序,desc倒序。主要代码:function SortObjectQuick(sourceObjArr,keyObj,sortType="asc"){ try{ for(let i=0,length=sourceObjArr.length;i<length;i++){ if(Object.isSealed(sourceO...原创 2020-01-07 14:08:08 · 236 阅读 · 0 评论 -
css3画出不同的三角形
向上的三角形:#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue;}向下的三角形:#triangle-up ...原创 2019-02-14 00:33:08 · 229 阅读 · 0 评论 -
css笔记:隐藏溢出的解决情况
单行溢出隐藏:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行溢出隐藏:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;//允许显示三行overflow: hidden; ...原创 2019-02-22 14:30:05 · 321 阅读 · 0 评论 -
ip协议笔记
表示IP地址目前的IP版本有4和6。目前最流行的就是IPv4,有十进制和二进制两种表示方法。分别是:点分四组十进制。每一组范围是[0~255],如:255.255.255.255二进制。如:11111111 11111111 11111111 11111111 IPv6地址长度是128位,由8块(或8个字段)组成,每一块都包含四个16进制数,每块由冒号分隔。有以下特...转载 2019-02-11 09:45:59 · 402 阅读 · 0 评论 -
笔记:tcp协议三次握手和四次挥手
建立连接需要三次握手第一次握手:客户端向服务端发送连接请求包,标志位SYN(同步序号)置为1,顺序号码为X=0。第二次握手:服务端收到客户端发过来报文,由SYN=1知道客户端要求建立联机,则为这次连接分配资源。并向客户端发送一个SYN和ACK都置为1的TCP报文,设置初始顺序号码Y=0,将确认序号(ack)设置为上一次客户端发送过来的顺序号(Seq)加1,即X+1 = 0+1=1。第三...转载 2019-02-10 21:58:23 · 218 阅读 · 0 评论 -
proxy验证表单
{ function validator(target, validator) { return new Proxy(target, { _validator: validator, //set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。 ...转载 2019-02-09 03:34:40 · 457 阅读 · 0 评论 -
关于全栈入门人脸识别的参考文章
https://blog.csdn.net/shebao3333/article/details/79048982https://www.jianshu.com/p/c2d0c7dbcb81https://www.jianshu.com/p/2e187a91ec7ehttps://www.csdn.net/gather_24/OtTaMg4sODk4LWJsb2cO0O0O.html转载 2019-02-08 00:31:17 · 173 阅读 · 0 评论 -
generator函数的应用
(1)取代promise的异步操作promise的方法:Promise.resolve(step1) .then(step2) .then(step3) .then(step4) .then(function (value4) { // Do something with value4 }, function (error) { // Handle a...转载 2019-02-06 23:27:52 · 477 阅读 · 0 评论 -
vue隐藏同一组件
<div class="TaskLinkedJiraUl" v-show="showLinkedDefectUl" ref="LinkedDefectUlSpp" :LinkedDefectUlS="testProjectID_send"> <ul @click="openUrlToJira">原创 2019-01-29 19:33:41 · 332 阅读 · 0 评论 -
reflect笔记
reflect和proxy一样,是为了拓展对象增加的API。它的出现是为了完成对象的默认操作,并且在此基础上增加对象的特定行为。let target={};let proxyObj=new Proxy(target, { set: function(target, name, value, receiver) { var success = Reflect.set(target...原创 2019-02-06 01:23:24 · 119 阅读 · 0 评论 -
CommonJS 中的 require/exports 和 ES6 中的 import/export 区别
一、标准不同CommonJS 中的 require/exports 和比ES6 中的 import/export出现得早,node.js是他的实现;CommonJS 中的 require/exports 是老的标准,ES6 中的 import/export要比它更加权威。es6通过babel转化为es5执行,所以写的import/export是通过babel转换为require/exports...原创 2019-02-13 00:26:56 · 1376 阅读 · 0 评论 -
阿里的面试题,感觉挺有用的
https://www.imooc.com/article/23645?block_id=tuijian_wz转载 2019-02-18 19:38:56 · 139 阅读 · 0 评论 -
es7新特性
es7有两个新特性:(1)数组中加入includes方法,用于判断数组中是否存在某个元素。已经有了indexof,这个方法有何不同哪呢?唯一一个区别是includes方法可以区别出NaN,而indexof并不能区分出NaN:[NaN].includes(NaN)true[NaN].indexOf(NaN)-1(2)加入幂运算符**// 相当于 2 ** (3 ** 2...原创 2019-10-11 15:24:09 · 444 阅读 · 0 评论 -
讯飞webapi-master
录音:(function (window) { //兼容 window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||...原创 2019-04-21 00:02:23 · 444 阅读 · 0 评论 -
async用于多个异步请求
发送两个个请求,第二个请求依赖于第一个请求获得的数据async function getData() { // var data = await new Promise((resolve) => { $.ajax({ ... sucess:function(data){ r...原创 2019-03-17 23:43:05 · 2478 阅读 · 0 评论 -
浏览器内核
这是目前我看到的对浏览器内核最为精致入髓的入门文章了。https://blog.csdn.net/vm199zkg3y7150u5/article/details/78504534#comments转载 2019-03-20 16:19:54 · 111 阅读 · 0 评论 -
async和await
async声明函数异步执行,遇到await会返回一个promise对象。这可以取代generator函数,或者说是异步升级版。async function getStockPriceByName(name) { const symbol = await getStockSymbol(name); const stockPrice = await getStockPrice(sym...转载 2019-03-15 23:24:04 · 934 阅读 · 0 评论 -
原生js基础部分(三)
1、==和===有什么区别==用于比较 判断 两者相等 ==在比较的时候可以转自动换数据类型true=='1'//true===用于严格比较 判断两者严格相等 ===严格比较,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时返回flase。true==="1"//false因为==自动将'1'转换为了true,而===却不会自动转...转载 2019-03-08 23:32:33 · 133 阅读 · 0 评论 -
base64位加密
<html><head> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script><script type="text/javascript" src="C:\Users\LPD\Desktop\1转载 2019-03-06 02:05:06 · 226 阅读 · 0 评论 -
常用快捷键记录
1、chrome的DebuggerF8 or Ctrl + \: 暂停/继续F10 or Ctrl + ': 单步执行,不进入当前执行的函数体,直接获取函数的结果F11 or Ctrl +;: 单步进入Shift + F11 or Ctrl + Shift+;: 单步退出Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)Ctrl +Shift+E: 被选中代...原创 2019-02-26 23:06:26 · 146 阅读 · 0 评论 -
iview中一个下拉框依赖另一个下拉框的状态而改变
根据上一篇博文进行改造:https://blog.csdn.net/qq_40283784/article/details/86644683modal:<div class="sumbit-ddefect-radio-content-table" v-if="sumbitDefectRadioselect=='createNewDefect'"> &...原创 2019-01-28 19:21:37 · 602 阅读 · 0 评论 -
proxy实现Javascript私有
var api = { _apiKey: '123abc456def', /* mock methods that use this._apiKey */ getUsers: function(){ }, getUser: function(userId){ }, setUser: function(userId, config){ } }; // 增加限制访...转载 2019-02-04 22:29:09 · 212 阅读 · 0 评论 -
css3开发:css3的动画特效开发总结
一、动画开发基本属性1、animation-name属性,规定@keyframes动画的名称2、animation-druation属性,规定完成一个动画需要的周期时间,以秒或者毫秒为单位,默认为零。3、animation-timing-function属性,规定动画的速度曲线,默认是“ease”4、animation-fill-mode属性,规定当动画不播放时(不播放有两种情况:...原创 2018-07-25 17:52:36 · 185 阅读 · 0 评论 -
es6解构赋值
自从学习了es6的解构赋值之后,觉得就好像发现了新大陆。对于一个前端工程师来讲,使用解构赋值不仅可以带来更好的编码体验,减少繁琐的赋值操作,还大大精简了代码。逼格高不高我不知道,但是好用我信了。1.解构赋值的语法和用法先看看我们以往的赋值操作跟解构赋值有何不同://以往的赋值方法let a=1, b=2, c=3;//解构赋值let [a,b,c]=...原创 2019-01-06 19:34:23 · 142 阅读 · 1 评论 -
js中所有归属于Object的方法(不含已废弃以及即将废弃)
参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames1.Object.is()方法这个是es6提供的一种判断对象是否相等的方法,它跟全等运算符===(es5中判断对象是否相等的方法)的行为基本一致,返回false或者t...原创 2019-01-05 21:50:20 · 531 阅读 · 0 评论 -
vue中利用原生js实现拖拽
思路:利用一个值判断鼠标的mousedown事件或者移动端的touchstart是否触发,利用另一个值表示鼠标的mousemove和touchmove事件是否触发,如果触发获取鼠标或者点击处相对于屏幕的偏移值,利用dom循环获取参照物相对于侧边屏幕的偏移值,然后两者相减取正,即为所拖拽的div相对于参照物的偏移值,再让1其在偏移处显示,如此即可实现拖拽。 <template>...原创 2019-01-10 19:49:52 · 717 阅读 · 0 评论 -
js中所有归属于数组的遍历方法
一个程序员的人生,是逃不过数组和遍历这两个词语的。在几十年前js刚刚萌生的时候,对于一个数组结构的遍历,大概你都是用这种方法:for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}对于一个对象的遍历,你大概会采用这种方法:for(var k...原创 2018-12-21 18:07:46 · 143 阅读 · 0 评论 -
js开发:js构造类
本文是博主学习过程中的总结,欢迎指点。js并不是一门面向对象的语言,仅仅是一门基于WEB的脚本语言。但是可以根据js已有的特性来实现类的概念,方法如下:1.构造函数的方法 function person(name,sex){ this.name=name;//公有成员 this.sex=sex; var ...原创 2018-07-16 13:36:04 · 1152 阅读 · 0 评论 -
js开发:es6从入门到放弃之let,const,块级作用域
博主之所以写这篇文章,一来是因为es6教程过于难懂,二来是为了巩固es6方面的知识。前言:es6和js是什么暧昧关系?JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScri...原创 2017-11-02 14:02:53 · 397 阅读 · 0 评论 -
js开发:js实现类
本文是博主学习过程中的总结,欢迎指点。js并不是一门面向对象的语言,仅仅是一门基于WEB的脚本语言。但是可以根据js已有的特性来实现类的概念,方法如下:1.构造函数的方法function person(name,sex){ this.name=name;//公有成员 this.sex=sex; var _this=this...原创 2017-10-24 14:48:23 · 2143 阅读 · 0 评论 -
js开发:JS的内存泄漏
学习过c++或者JAVA的朋友都知道,程序的内存空间存在着全局作用域,局部作用域,堆栈区,临时作用域等。如果我们在内存中申请一个操作空间,但是在执行完毕时却不主动把它delete,很可能就会造成内存的浪费,严重影响程序优化,如果是较大的程序,甚至会造成致命的后果。js虽然是一个弱类型的语言,但是仍然存在高级语言的通病,我们把他叫做js的内存泄漏。 什么叫做内存的泄露,我们用点官方些...原创 2017-10-24 13:38:04 · 230 阅读 · 0 评论 -
前端开发demo:修改滚动条样式实例
代码如下: .scroll-dif { overflow-x: auto;}/*滚动条整体样式*/.scroll-dif::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0); border-radius: 3px; backgr...原创 2018-08-30 11:18:38 · 580 阅读 · 0 评论 -
用node做一个简单的接口
由于用到express框架和jquery,所以自己还需要安装express框架和引入jquery。人丑话不多。server.jsvar express = require('express');var app = express();//跨域app.all('*', function(req, res, next) { res.header("Access-Contr...原创 2019-01-18 23:40:20 · 475 阅读 · 1 评论 -
用proxy检验对象成员的类型
比如我要对象里面的数据类型都必须是number。let numericDataStore = { count: 0, amount: 1234, total: 14 }; 可以用proxy来检验:numericDataStore = new Proxy(numericDataStore, { set(target, key, value, proxy...原创 2019-01-22 21:40:56 · 477 阅读 · 0 评论 -
使用genarater函数进行数组扁平化
原理:(1)利用generator函数返回遍历器对象的特性。(2)利用genrater对象暂停执行的状态机机制 var arr = [1, [[2, 3], 4], [5, 6]];var flat = function* (a) { var length = a.length; for (var i = 0; i < length; i++) { v...原创 2019-01-27 23:48:26 · 694 阅读 · 0 评论 -
vue中让一个div的点击事件关联到其他的相同div的方法
事实上采用的方法是利用每个元素的内部属性的特性:在以下的代码里面我用item.taskid绑定了一个自定义属性taskIdGo,于是每次通过判断这个div的taskIdGo的值是否相同来确定当前的div是否是自己所要操作的div。<a href="javascript:void(0)"><i class="fa fa-bug fa-2" v-show="item.has...原创 2019-01-31 18:05:07 · 3894 阅读 · 0 评论 -
事件委托在vue上的实现
最近老板总嫌弃网站做的太卡,看一看项目里面的代码,真是头皮发麻。由于代码的问题占用了过多的dom内存,能不卡吗,所以,这其实还是一个程序员编码的问题。比如在vue里面,我发现大家总不爱用事件委托。事件委托是为了较少dom操作的内存占用,优化性能提出的一种方法。它通过在父元素上绑定事件,依靠冒泡捕获子元素触发的事件,进而处理。它有以下的特点:1、基于事件冒泡。2、动态添加的节点也将自...原创 2019-01-09 23:35:34 · 2574 阅读 · 2 评论 -
弹性布局概讲极其应用
参考:http://www.runoob.com/css3/css3-flexbox.html最近工作的时候涉及到UI布局的修改,想用弹性布局去实现,发现自己却对这个知识点生疏了。今天重新复习,把知识点梳理一下。弹性布局是由css3提供的一种布局方案。此布局由弹性容器和弹性子元素构成。对于一个块级元素,通过设置display:flex;display:-webkit-flex;可以使其...原创 2019-01-08 21:19:14 · 348 阅读 · 0 评论 -
es6的函数拓展
参考:http://es6.ruanyifeng.com/#docs/function#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F1.增加函数默认值es6允许为函数提供默认值,与解构赋值一起使用,非常地方便:function foo({x, y = 5}) { console.log(x, y);}foo({}) //相当于执行let {x,...原创 2019-01-13 20:35:07 · 279 阅读 · 0 评论