I1326-CSDN博客

原创超出部分隐藏不显示...不截取

超出部分隐藏不显示…不截取今日做个搜索热词的需求，设计强制要求热词关键词不得超出搜索框宽度并切不可切割不可设置省略号；先看成品样式；这里实际热词还有直接设置overflow的话超出的部分会被直接截掉，肯定是不可以的；添加text-overflow: ellipsis又会出现省略号，样式上好像也不太行；由于这里后台抓取的热词长度、数量都不固定，一时不知道怎么处理，甚至有想过拿js过一遍筛子；在懒惰的驱使下，很明显最优解是直接把热词截取后展示的三个省略号隐藏掉；直接为热词的父级设置字体

2021-11-26 14:15:56 262

原创 js监听xmlhttprequest事件

js监听xmlhttprequest事件最近在项目中使用了tinymce组件进行富文本的实现，因为是后台工程，所以在全部接口进行了token校验，其中该组件的上传图片功能init时仅指定了上传的路径，并没有字段对request进行设置；翻了翻文档仅找到了重定义上传方法的解决方式；这里贴一个js直接监听xmlhttprequest事件的方法，即插即用；(function() { if (typeof window.CustomEvent === 'function') return fal

2021-08-27 16:17:25 2534 1

原创 vue三级联动控件

vue三级联动控件最近实现toc需求实现三级联动，找到这个组件挺省事的，记录下不迷路；先看下大概样式gitlab地址：https://dwqs.github.io/vue-area-linkage/使用仅需要npm i --save vue-area-linkage area-data在需要的页面或全局的main.js中引用import { pca, pcaa } from 'area-data'; // v5 or higherimport 'vue-area-linkage/dist

2021-08-10 14:44:54 393

转载隐形水印设置及查看

最近有收到信息安全方面的需求，需要在内网文章中添加水印，在参考了各种实现后，选择了隐形水印，但是在实施后其他同事不知道如何将隐藏的水印显示出来，在知乎上看到了相关的帖子，从代码到回显都很详细，直接搬运过来备忘，转载请注明原作者；直接上代码了function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 waterma

2021-07-08 15:04:57 5827

转载基于Canvas的本地验证码vue组件

基于Canvas的本地验证码vue组件最近给外包填个坑，发现验证码因为hash问题导致同服务端校验一直不通过，访问量也不高直接在本地创建个简易算号器，后来觉得实在丑的难受baidu了个现成的基于canvas的算号器，感谢原作者卡卡欧文的分享；效果如下直接贴代码<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="content

2020-12-09 18:36:14 113

原创曾经常用但未必了解之啥是BFC

前两天于某公司面试，曾被问道什么是BFC能不能解释一下，有关样式表的东西我一直认为没啥所以基本上没看过，一直凭着印象以为是盒模型之类的问题，长篇大论之后啪啪打脸，根本驴唇不对马嘴；之后虽然面试通过了，但是这玩意不搞清楚还是有点如鲠在喉的意思。这种概念性问题，虽然各路blog一大堆,但是为了避免其他人理解后的再加工干扰，直接祭出MDN；块格式化上下文—MDN首先，BFC拼全了是Block Formatting Context，块格式化上下文，也不知怎的就想起了块级作用域（大误）是Web页面的可

2020-08-07 22:31:08 109

原创自行构筑一个cli工具

在学习各种框架时，通常简单的直接通过cli工具方便快捷的创建项目，在简单项目中还合用，但是如果项目稍复杂，或者有用到一些基于私人定制的工具时就稍显不足，除了直接把纯净版架子丢git上，自己实现一个cli工具实际上也不是很复杂的。首先列举一些经常会用到的模块org 显示loading文档： ora – npm示例： const ora = require('ora'); const loading = ora('building...').start(); loading.color =

2020-07-27 14:10:39 164

原创小程序canvas常用方法

小程序中的canvas和其他端的稍有不同，大多数canvas库在小程序中都不能直接import后使用，分享项目中小程序绘制canvas图片常用的一些方法，可以保存文件后直接使用，以下代码赶工出来的很粗糙，目的为抛砖引玉，或解急需使用的燃眉之急；功能预览：计算元素实际尺寸保存网络图片到本地canvas2Img绘制背景插入图片插入文本绘制线条绘制圆环绘制圆角矩形实心圆角矩形/* name:makeCanvas author:I1326 tel: weChat:*/cons

2020-07-18 14:51:07 296

原创记一次尴尬的面试经历

晚上10.30收到一条消息，某公司hr邀请翌日十点进行线上面试，是夜无话；是时面试的并为顺利开始，闻听原因是上一个面试者还未结束，这一坨就是1个小时，等到了11点视频通话的铃声才姗然而至；接起通话，跃入视线的是一个哪怕隔着n95仍难掩疲态的30样男子；就这样一场角力拉开了帷幕；首先提出的是老生常谈的问题，自我介绍；这个没什么可说的，做过就是做过，1.2.3.4往上列职责技术栈说清除就好；接下来就是正经的技术过招了，起手式“如何判断一个变量是不是数组”轻松 Array.isArray(a)“那

2020-07-16 13:41:18 315

原创 creator摘星星完善练习

文档中摘星星的demo课后练习如下：加入简单的开始菜单界面，在游戏运行的一开始显示开始按钮，点击按钮后才会开始游戏为游戏失败加入简单的菜单界面，游戏失败后点击按钮才会重新开始限制主角的移动不能超过视窗边界为主角的跳跃动作加入更细腻的动画表现为星星消失的状态加入计时进度条收集星星时加入更华丽的效果为触屏设备加入输入控制开始按钮和游戏结束的组件都完成了，继续来搞后边的；3.限制主角的移动不能超过视窗边界这个需求想明白的话很容易；只要在满足上图条件时，把player节点动画的移动速度修

2020-07-15 16:04:47 549

原创 cocoscreator摘星星补充-添加结束游戏

文档中摘星星的demo课后练习如下：加入简单的开始菜单界面，在游戏运行的一开始显示开始按钮，点击按钮后才会开始游戏为游戏失败加入简单的菜单界面，游戏失败后点击按钮才会重新开始限制主角的移动不能超过视窗边界为主角的跳跃动作加入更细腻的动画表现为星星消失的状态加入计时进度条收集星星时加入更华丽的效果为触屏设备加入输入控制上一篇添加了开始按钮，今天来添加游戏失败的简单界面；由于没有合适的素材，并且毕竟只是练习，为了掌握相关技巧，所以就不特意出图了，直接使用现有素材，简单的添加个gameove

2020-07-14 15:04:20 969

原创 cocoscreator文档中第一个游戏的补充-补充开始按钮

cocoscreator文档中有一个摘星星的小游戏demo，可以带领新手初见游戏开发的各个流程，当让细节都不是很完善，重要的是流程和思想，内部的脚本也基本都提供给开发者了，拿来即用；这篇将接着文档demo流程完成后，一些未提到的元素进行补充；button文档中提供的demo并没有按钮组件该如何使用及触发事件的说明，现在为小游戏添加一个开始游戏的按钮；本文将延续官方文档的揍性，旨在快速搭建，想要了解更多细节还是到官网扒拉文档的好：button组件参考层级管理其中对canvas右键创建ui节点，选择but

2020-07-13 16:02:42 488

转载关于webpack的面试题

关于webpack的面试题随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而又知其所以然。问题一览webpack与gr

2020-07-09 16:21:40 517

原创 cocoscreator初探-demo小游戏

今天尝试使用cocoscreator制作个小游戏，其实在这之前已经把creator文档里的第一个小游戏，摘星星敲了2、3遍了，因为只是兴趣，平时主要web开发用不到，正好现在赋闲在家，翻出来再瞅瞅，看看这次能不能自己输出点什么小玩意。起步跳过产品吹毕环节，直接https://www.cocos.com/creator官网下载最新的ide并安装，刚刚更新了2.4.0，更新的内容对新手没啥影响，略；ide初识其实有没有这张图都很清楚，大概有哪些东西干嘛用的一目了然；第一次接触creator文档上准备的

2020-07-07 17:14:49 1510

原创 vue3.0和2.0数据绑定实现区别

要实现数据的双向绑定，首先要理解以哪种方式，做了哪些事情；以vue举例来说就是使用definedProperty中的get\set方法来完成数据劫持，之后在通过diff算法对比新老dom差异修改vdom，重新render完成渲染；首先了解下definedPropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法Object.defineProperty(obj, prop, descriptor)

2020-07-03 16:56:34 764

原创自己实现call|bind|apply三兄dei

要简单实现call、bind、apply首先要弄清楚这哥仨是啥，调用入参返回值都是什么，然后照葫芦画瓢，一点点填起来就好了；能看思考咋实现的想必已经不需要在多赘言三个方法了，直接开始搞起；首先这哥仨都是改变this指向，简化问题就是实现myX把fn.myX(arg)中的参数传递给fn,并把fn的this修改成arg; var name = 'dahuang'; function a( ){ console.log(this.name); } obj = {nam

2020-06-30 14:52:34 201

原创前端常用设计模式-工厂模式

对于我这种半路出家自学的前端，设计模式在平时工作中可能用到，但是由于完全不了解，并不会深入思考，以至于开发新项目时完全不会考虑到如何整体架构，直接cv一把梭；路漫漫其修远兮，慢慢补上吧；设计模式大致可以分为三大类创建性设计模式–解决创建对象时候的问题结构性设计模式–解决对象和类组合在一起时候的问题行为性设计模式–解决对象和类耦合，职责之间的问题概念就不罗嗦了，百度一下各处描述大都一致今天要写的工厂模式就属于三大类里的创建型设计模式假设想要创建一个对象，对象属性包括姓名，年龄，行为；如果使

2020-06-27 14:48:45 568

原创手写promise

面试中经常问道能否自己实现某个api其实如果对其掌握扎实都是不难的；promise主要是通过状态去进行任务的队列管理，规避回调地狱;自己实现的话首先就是思考promise是什么，都包含那些属性和方法；state;reject;resolve;then;catch;all;race;大致搭个架子 class Promise{ constructor(){ this.state = 'pending' this.value = '' } reject(){}; resolv

2020-06-25 17:12:10 183

原创 nginx.conf配置文件说明

今天拔了个牙，脑子有点涨不自己写了，转载点之前收藏的东西nginx开发时常用到的，找哪些设置基本都在下面找挺全的，流传也很广了隔壁老梁-博客园#nginx进程,一般设置为和cpu核数一样worker_processes 4;#错误日志存放目录error_log /data1/logs/error.log crit;#运行用户，默认即是nginx，可不设置user nginx#进程pid存放位置pid /application/nginx/nginx.pid;#Spec

2020-06-22 21:20:56 168

原创 typescript上手-装饰器（8）

简介装饰器是一种特殊类型的声明，他能附加到类声明方法属性或参数上可以修改类的行为；说人话就是装饰器是一个方法，作用于类方法属性参数以便修改扩展相应功能。es7中装饰器Decorators已经有提案了，但是尚未形成标准，在ts中已经进行了支持,但是ts装饰器也是一项实验性特性，在未来的版本中可能会发生改变。若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项： tsc --target ES5 --experimentalD

2020-06-21 21:12:12 138

原创 typescript上手-命名空间（7）

命名空间命名空间就是之前的内部模块，任何以module关键字声明的内部模块，现在都使用namespace关键字进行替换。命名空间指在代码量较大的情况下，为了避免各种变量冲突，将功能相近的函数、类、接口等放置到命名空间；命名空间和模块化还是有些区别的，命名空间是内部模块主要是组织规划代码避免冲突，模块通常指的是外部模块，解决代码复用的问题，在一个模块中可能会存有多个命名空间开始首先看一下在不使用命名空间是代码可能会是这样 interface Animal{ name:string; say(

2020-06-20 13:01:05 142

原创 typescript上手-枚举（6）

枚举前两天写数据类型的时候有简单介绍过枚举类型，这篇将会更加详尽的列举不同场景枚举的使用数字枚举例如在查询订单状态时经常会返回状态码0、1、2、3，分别对应已支付、未支付、订单取消、申请售后；对新接手的人完全一头雾水，使用数字枚举进行命名，更加清晰； enum OrderType { finish, notPay, cancel, afterSales }如上，我们定义了一个数字枚举，默认序列为0起始，或者按需初始化成员的值 enum OrderTy

2020-06-19 22:50:09 217

原创 typescript上手-泛型（5）

泛型介绍在项目中，组件不仅能够支持当前的数据类型，也需要能支持未来的数据类型，泛型就是用来解决这个场景问题的Hello World不用泛型又要满足条件的话，函数可能是下面这样： function fun(arg: number):any { return arg; }但是使用any就相当于放弃了ts的类型检查，或者使用重载来实现，但是会使得代码严重冗余，我们需要一种更简洁的方法使传入参数的类型和返回类型一致，就可以使用泛型 function fun<T>(arg: T

2020-06-18 19:26:29 114

原创 typescript上手-接口interface（4）

介绍TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。说人话接口是一种规范的定义，定义了行为和动作的规范，和抽象类abstract比较相像，但是能力更强属性接口自定义方法传入参数，对json进行约束接口初探下面通过一个简单示例来观察接口是如何工作的： function Cat(obj: { name: string }) { c

2020-06-17 16:25:43 225

原创 typescript上手-类（3）

介绍传统的javascript只有对象，没有类的概念,对于面向对象方式编程没有很好的设计，当发现问题时,已经成千上万的人在使用了，所以大的修改几乎没有，都是各种修修补补，小的语法糖更新，例如es6新加入的类Class，当然class并不是语法糖，但核心还是围绕prototype来玩。类这里先放一个es5定义一个类 function Cat(name){ this.name = name; this.say = function(){console.log(this.name)} } va

2020-06-16 22:45:37 215

原创 typescript上手-函数(2)

函数和js一样，ts函数可以创建有名字的函数和匿名函数。在es5中定义一个function有这么两种方式 // 命名函数 function fun(ags) { return ags; } // 匿名函数 let fun = function(ags) { return ags };函数类型在ts中变量都是有固定的类型的，函数同样需要指定类型，包括参数和返回值 function toStr(x: number): string { return x + ''

2020-06-15 15:37:03 322

原创 typescript上手-准备\基础类型（一）

因为平时的项目中鲜有用到面向对象的场景，对ts的学习也一直没有正式的提上日程，随着vue3的一直吵闹ts支持的消息充斥圈子，也决心系统学习下，毕竟可以不用，但是不能不会。安装官网的介绍，可以直接通过vscode的插件进行安装，我一向是sublime的簇拥，这里还是通过传统的npm进行安装 npm install -g typescript编译随便敲两行ts的代码，保存为ts文件； function domWrite(ops:string) { return "Hi, " + ops;

2020-06-14 18:39:36 173

原创 flex全属性

flex这个东西项目中用的不少，使了好几年了也，不知道有没有人想我一样，就记得大概属性名，值完全靠补全的，记不住用哪个就直接上chrome点开调试工具挨个看；或者直接开着阮一峰的flex布局博文参照着用。虽然阮一峰老师写的确实简明清晰，但是求人不如求己，今天索性吧所有的flex属性整理一下，自己敲个demo加强下记忆。什么是Flex布局flex布局（2012）前身不知道是不是box布局（2009）；从布局的方式上来看基本上是一致的。传统的布局方式依赖于float\position\margin;flex

2020-06-13 15:00:08 379

原创从一道面试题入手搞清js的堆栈

概念性的东西先放在前边简单说下堆和栈堆(heap)动态分配的内存，大小不定也不会自动释放。栈(stack)会自动分配内存空间，会自动释放，弹夹模型后入先出（EvenLoop基础这里先不说）。V8引擎由两个主要部件组成:emory Heap(内存堆) — 内存分配地址的地方Call Stack(调用堆栈) — 代码执行的地方，也叫执行栈引用数据类型会被存放到堆中，为新的变量赋值实际上被赋予的就是这个内存的地址，而不是实际的值；执行过程中会把相关的引用放在执行栈中；例如： var obj =

2020-06-12 18:38:49 555

原创不做技术做手工——上！

今天去了趟医院，挂号一个月，预约一礼拜，排队一中午，问诊一分钟，得了一句话，“治不了死心吧”；回到家正好快递的材料到了，就琢么着要不今儿不写技术写手工吧,也算是技术分享了，应该能过审吧。然后我要做的是别人的点子，忘记在哪看到的了，大致就是主动轴在下边，手摇蜗杆，从动轴上平铺活动木棍，模拟小船在水面随波上下漂，因为记不住名字了，所以各种瞎猜关键词各个平台搜了个遍也没找到；贴个唯一一个有那么一点意思的翻工具时正好翻出了很久以前打算做八音盒留下的音乐机芯，大概估计了一下，发条的扭力能拨动铁片，代替人力手摇

2020-06-11 23:39:33 130

原创轻松搞懂原型链

写在前边的话其实在写这个标题之前，想搞清楚的问题完全不是这个；但是在原本的问题上，好像钻了牛角尖，愈发的出不来，各路资料查来阅去，离出发点越来越远；以至于现在完全想不起最初的问题是啥了，看历史记录大概是object之类的；不过对于原型链的理解有了加深，索性就写一篇相关的帖子交作业好了。以下只是对我来说更好的理解，分享下-可能中间某些环节‘每有会意遍欣然忘食’，本着‘尽信书不如无书’哪里不对欢迎斧正；什么是原型链JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性

2020-06-10 15:55:05 255

原创文档对象模型速览

什么是文档对象模型文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它可以动态的访问程序和脚本，更新其内容、结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前页面DOM是一种基于树的API文档，他要求在处理过程中整个文档都表示在储存器中。DOM树通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTMLjavascript能够改变页面中的所有HTML元素javascript能够改

2020-06-09 14:55:16 259

原创 BOM速览-浏览器对象模型

浏览器对象模型BOM1.浏览器对象模型BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。Bom由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。2.组成浏览器对象模型有包括以下几个组成部分窗口对象window浏览器对象navigator历史对象history位置对象location文档对象document3.窗口对象window是javascr

2020-06-08 15:16:08 227

原创 js计时器+打字机效果demo

计时器在写程序的过程中，经常会用到在某个指定的时间来执行一段代码，或者让一段代码在一个周期内执行。js中常用的计时器有timeout\interval；不是很常用的requestAnimationFrame，还有基本不会用到的Immediate；setimmediate延时执行var immediateID = setImmediate(func, [param1, param2, …]);immediate的作用是在浏览器完全结束当前运行的操作之后立即执行指定的函数。然而通过下图可以看到immed

2020-06-07 16:49:57 613

hover填充效果.html

空空如也