- 博客(92)
- 收藏
- 关注
RSS订阅原创 移动端适配之vw+rem
前置概念:rem: 相对于根元素(html)的字体大小的单位, 例如html font-size: 14px 则 1rem = 14px。vw: 当前视窗(指浏览器的可视区域)的宽度为100vw, 1vw指当前视窗宽度的百分之一。物理像素: 一个物理像素是显示器(手机屏幕)上最小的物理显示单元。设备独立像素: 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素 (前端中可理解为 => css像素)。设备像素比(dpr): 设备像..
2021-01-23 19:09:52
748
10
原创 liunx端常用命令
应用安装centos// 安装yum install xxx // 更新yum-update ubuntu// 安装apt install xxx / apt-get install xxx // 更新apt update / apt-get update liunx文件基础操作// 清屏clear// 查看文件ls// 查看所有文...
2020-03-06 17:27:07
410
原创 前端中的设计模式——单例模式
什么是单例模式:保证一个类仅有一个实例，并提供一个访问它的全局访问点.为什么需要单例模式:为了将“描述同一件事务的属性或者特征归纳汇总在一起”,同时避免全局变量污染.模块化开发之间数据的共享.(状态管理)单例模式的优点:对于频繁使用的对象，可以省略创建对象所花费的时间.由于 new 操作的次数减少，对系统内存的使用频率也会降低.全局唯一性,可以保证全局数据和功能的...
2020-01-19 15:26:45
1613
原创 前端中的设计模式——发布订阅模式
在前端中观察者通常抽象为事件更具实用性,但这种模式会有一个问题.假设想在登陆成功后通知组件A、B、C更新view(A、B、C未登录时view处于缺省状态).用观察者模式的话const ob = new Observable()// A、B、C进行一波订阅ob.add('update1', () => { console.log('login successful!')...
2020-01-17 15:16:11
1709
原创 前端中的设计模式——观察者模式
在实现js中的观察者模式前,先了解两个js中的概念1. hidden class解释: 由于 JavaScript 是一种动态编程语言，属性可进行动态的添加和删除，这意味着一个对象的属性是可变的，大多数的 JavaScript 引擎（V8）为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类，这些类附加到每个对象上，以跟踪其形状/布局。这样可以优化属性访问时间。2. ...
2020-01-10 17:19:23
843
原创 实现类似redux的状态管理库
文章目录基本实现处理多个reducerreducer和state的模块化中间件的开发 =>日志系统多日志支持中间件模块化封装新的createStore优化实现支持替换Reducer基本实现实现梳理:createStore: 创建一个store来存储监听statereducer: 规定一个处理state的映射方案(纯函数),修改statecreateStore具备的功能s...
2019-12-14 22:29:23
409
原创 对象监听器
如何实现一个对象监听器知识点拆解:Event: Event对象dispatchEvent: dispatchEvent方法Proxy对象: 本文会对此对象做一定程度上的讲解Proxy对象:语法:new Proxy(target, handle);参数:target: 需要被代理的对象handle: 一个对象,其属性是当执行一个操作时定义代理的行为的函数.本次涉及g...
2019-09-23 15:19:39
582
原创 函数记忆.
函数记忆是一种编程技巧,通过牺牲算法的空间复杂度以换取更优的时间复杂度定义: 若传递的参数一致,则通过缓存读取存取计算结果的一种编程技巧实现: 借助map对象、JSON.stringify()、闭包包装传递的函数,使其具有函数记忆的特性const memorize = (cb) => { const cache = new Map(); const search = (...
2019-06-13 16:15:21
725
原创 深、浅拷贝系列
数组的浅拷贝arr.slice()arr.concat()JSON.stringify(arr)简单的深拷贝const cloneDeep = obj => JSON.parse( JSON.stringify(obj) )// 缺点: 无法拷贝函数function cloneDeep (obj) { if (obj === null || typeof obj...
2019-06-13 10:45:56
262
原创 学习消除循环引用
创建循环引用对象// 创建一个循环引用的对象let a = {};let b = {};a.b = b;b.a = a;打印上述对象a或b,会得到一个无限嵌套互相引用的对象结束(解除)多余的引用嵌套(具体思路请看超详细注释) /** * 解除循环引用 * @param object 循环引用对象 * @param replacer...
2019-06-13 10:38:15
629
原创 防抖与节流
防抖和节流在很多场景下都可以有效的提升程序的性能和减轻服务器的压力.估计大多数人都使用过这两个工具函数(例如在lodash中以函数或装饰器的模式to use)那么如何实现自己的防抖和节流函数呢?定义防抖: 在n秒后不被重复触发才会执行节流: 在规定的n秒内有且只执行一次实现(具体思路的在注释中体现,因为并不复杂)防抖/** * 函数防抖 * @p...
2019-05-08 22:44:13
189
原创 让ng-model支持angular内置的filter date功能
背景:angular filter 常见于和ng-bind、差值表达式、ng-repeat 配合转换后端 unix 时间戳. 但 filter 不支持和 ng-model 一起使用.解决思路:通过angular directive 结合 $filter服务封装一个支持转换 ng-model中 时间戳为指定格式的指令.代码如下:app.directive('dateFormat',...
2019-04-12 14:33:48
991
2
原创 异步函数的串行与并行
通过返回一个对象的形式,实现对异步函数进行串行、并行、全执行完毕的操作实现如下:const queue = () => { const list = []; // 队列 let index = 0; // 索引 let task = 0; let cache; // next 方法控制索引 const next = () =>...
2019-03-28 16:51:51
283
原创 移动端软键盘问题兼容(安卓、IOS)
解决软键盘顶起fixed元素 (IOS下fixed元素会变成absolute)// angular.js中 通过封装指令解决 主要思路是通过scrollHeight的前后差值 判断是否弹出软键盘 然后显示或隐藏被顶起的元素即可// 指令配置如下:{ restrict: 'A', link: function (scope, element) { ...
2019-03-27 12:07:43
682
原创 用some和every来美化你的判断
今天关于some和every又引发了我新的思考,还记得前面的判断优化吗?多或判断const a = '23333';if (a === '23333' || a === '33333' || a === '43333' || a === '53333') { console.log(1);}之前说过关于这样的判断,可以通过includes来简化,如下:const a...
2019-03-14 22:54:28
190
原创 map函数实现
写成这样主要为了减少多余的中间变量,尽可能遵循函数式编程的思想.(好吧,我承认可能看起来有些奇怪…)Array.prototype._map = function (fn, arg, result = []) { for(let i = 0; i < this.length; i++) { result.push(fn.apply(arg, [this[i], i...
2019-03-14 22:40:03
748
原创 关于修正js浮点数计算误差
js浮点数乘法是有误差的，这个问题是在很久以前一次项目计算中发现的，那么接下来就说一下如何修正这个误差。下面直接上代码吧，简单来说就是以小数点为基准进行切割，将是浮点数的转为整数进行计算，最后再放大小数点后N倍还原正确计算结果。=========> 比如计算 0.14*10// 直接答案 1.4000000000000001 这显然不是我们想要的结果function accM...
2019-02-22 14:50:25
545
原创 正则判断g模式下异常
正则g模式下出现true和false交替原因：正则表达式中的g模式, 使得搜索过程后, 如果匹配成功, 则记录上一次字符串的位置, 如果匹配不成功, 则会归零字符串位置.解决：reg.lastIndex = 0; 归零搜索的位置去掉g模式直接调用正则在chrome-console中尝试下下面几段代码1const reg = /^a/g;reg.test('a')...
2019-02-22 14:50:02
125
原创 CSS世界第一章提要
文档流： 就是规则，准确点说就是决定了元素的排列和定位的一套规则。流体布局：利用文档流本身的特性，实现的各类布局效果。文档流本身具有自适应性，所以流体布局也具有自适应性。css3src-set：根据屏幕密度现实对应尺寸的图片设备像素比：设备物理像素/设备独立像素（window.devicePixelRatio）设备独立像素：一种由程序使用并控制的虚拟像素，包含css像素...
2018-11-21 14:39:40
103
原创 js中如何优雅的判断
相信下面的代码很眼熟吧const a = '23333';if (a === '23333' || a === '33333' || a === '43333' || a === '53333') { console.log(1);}如果a的值有更多可能呢？或许可以这样写：const a = '23333';const compare = ['23333', '33333'...
2018-11-21 14:35:02
2026
原创 SSH
ssh简介英文名：Secure Shell（安全协议外壳）概述：ssh是专为远程登陆会话和其他网络服务提供安全性的协议默认端口：22，安全协议版本sshv2（sshv1有漏洞）ssh服务端功能： ssh远程链接和sftp服务实际用途：远程安全连接linux服务器什么是ssh服务：SSH服务端是一个守护讲程，SSH服务端的进程名为sshd，负责实时监听远程SSH客户端的远程连...
2018-10-19 16:48:19
328
原创 Vue的双向绑定
首先实现一个可以监控属性变化的observer函数。我们期待如下方式使用: new Vue({ el: 'app', data: { a: '1', b: { c: '2' }, test: '2333' } ...
2018-09-25 16:18:35
132
原创 AngularJs的一些知识点-4
export module 的 name开发angular1.x + es6项目 的萌新可能经常会看到这样的写法：export default angular.module("moduleA", []) .service("ServiceA", ServiceA) .service("ServiceB", ServiceB) .name; 那么这里为什么要exp...
2018-07-26 15:19:40
294
原创 关于encodeURI和encodeURIComponent的使用场景
encodeURI：适用于url跳转时。encodeURIComponent：适用于url作为参数传递时。tips：当url作为参数传递时如果没有用encodeURIComponent进行编码，会造成传递时url中的特殊字符丢失。...
2018-03-28 21:02:01
4094
原创 关于js中的forEach和map
相同点无法在循环体内修改原数组。可以通过索引在循环体中修改原数组。不同点forEach没有返回值(返回值为undefined)。map拥有返回值，可以在修改每一项后return每一项，返回值为一个新数组。其他 forEach是按顺序迭代的。在json数组中(形如[{},{},{}])，forEach和map都可以在循环体内遍历修改每个对象的属性和方法。...
2018-03-28 20:54:04
412
原创 Git中的常见用法
git-testgit命令1.本地项目关联到远程仓库git initgit remote add origin [email protected]:<UserName>/<RepositoriesName>.git2.建立分支git branch <BranchName&amp
2018-03-27 17:31:53
295
原创 AngularJs的一些知识点-3
$compile 作用：编译html字符串或dom用法： 直接使用指令中的使用示例<!--直接使用--> angular.module('myApp', []) .controller('MyController', function ($scope, $compile) { let vm =...
2018-02-27 16:21:11
179
原创 AngularJs中的双向数据绑定
1.首先来了解$watch作用：监听变量或者对象的变化，并在变化时提供操作空间。语法：$watch(watchObj,watchFn,deepWatch)watchObj:监听对象（字符串形式）watchFn:回调函数（变化时的回调）deepWatch:深度监听（布尔值，默认false）返回值：一个函数，用来注销对应的$watch示例： let app = ang...
2018-02-27 10:59:04
629
原创 对象转查询参数
function uri(obj){ let arr=[]; if (obj && typeof obj === 'object') { for(let i in obj){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj[i])); } } return arr.join('&...
2018-02-26 16:44:30
459
原创 json-server快速入门
json-server 的安装使用1.全局安装json-server（确保已经装过node环境）npm install json-server -g2.创建一个json文件，文件名任意。3.让json-server指向监测文件并指定监测端口json-server 文件名.js -p xxxx tips：登录设置的主页地址，可以得到对应json的路由结构，比如：...
2018-02-26 16:21:31
873
原创 自定义省略字数及末尾省略样式
当字数超出规定字数时，可以通过下面函数省略超出的字并且自定义收尾。比如：初始表现：你好吗，lily？规定表现：两个字，多余用 ... 表示省略表现：你好... var getNeedStr = (function (window) { var index = 1; //计算字符占位(中文为2英文为1) function judgeLen(str) { var strLen = 0...
2018-02-13 10:06:02
419
原创 判断输入的字符串占位长度
function judgeLen(str) { let strlen = 0; for (let i = 0; i < str.length; i++) { if (str.charCodeAt(i) > 255) { strlen += 2; //如果是汉字，则字符串长度加2 }...
2018-02-09 11:08:15
1548
原创 封装ajax-3(通过promise内层封装)
let ajax = (function (window) { function uri(obj){ let arr=[]; if (obj && typeof obj === 'object') { for(let i in obj){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj[i]...
2018-02-08 09:16:50
188
原创 快捷拼接URL参数（对象转查询参数格式）
可实现拼接变量到URL中作为参数，拼接方法，如下：jointUrl(obj) { const paramArr = []; let param = ''; if (obj && typeof obj === 'object') { if (paramArr.length === 0) { paramArr.push('?');...
2018-01-18 19:43:14
1200
原创 ESLint的一些配置项解读
example-one eslint完整的校验规则可以访问这里！1. 安装eslint：$ npm install eslint –save-dev2. 使用eslint –init生成一个配置文件{<!--环境定义了预定义的全局变量--> "env": { <!--浏览器的全局变量--> "browser": true, <!--添加所有的 J
2018-01-18 19:36:47
15443
原创 .editorConfig文件相关
概述：editorConfig是一个名称为.editorconfig的自定义文件。该文件用来定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要.安装：有些编辑器默认支持editorConfig，如webstorm；而有些编辑器则需要安装editorConfig插件，如ATOM、Sublime、
2018-01-18 19:34:07
531
原创 解读package.json
1.作用：每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。2.指定版本语法：指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。波浪号（tilde）+指定版
2018-01-18 19:32:40
885
原创 AngularJs的一些知识点-2
1. angular的依赖注入定义：依赖注入（Dependency Injection）是一种经典的设计模式，主要是用来处理组件如何获取依赖的问题。依赖注入可以简单的理解为：在一个容器中我们定义了很多个模块和组件化服务，当模块需要某些服务时，只需要跟容器说我需要这些服务，并且只需要提供服务的名称，容器就会自动提供这些服务的实例。调用服务的模块不需要考虑这些服务是怎么来的，这些服务会由容器通过...
2017-12-22 15:30:35
218
原创 AngularJs的一些知识点-1
1. 作用域层级ng-controller指令会调用scope的$new()方法创造一个scope的实例$scope（作用域实例）。Angular拥有$rootScope，它是其他所有作用域的父级作用域，将会在应用启动（加载模块）时自动创建。变量会沿着作用域向下继承。（也就是说子作用域可以访问到父作用域的变量等）$scope会拥有$parent属性，这个属性会指向父级作用域。每个作用...
2017-12-21 13:00:36
212
原创 我的CSS入门指南
第一章 基础知识架构 早期网页组成只有html，而布局方面大多采用table去布局。然而对于现在的我们众所周知的是table并不适合布局。于是在当时 的这种布局下，网页的源代码混乱不堪。十分难以维护，跟别提什么可阅读性了。很容易就会错删或者疏漏什么，让整个布局随时面临随时崩溃的危险。在现在提倡的标签语义化在当时来说也是毫无存在的踪影。好在后来css出现了。有了它网页再次具有了表现性，div+cs
2017-11-24 19:28:53
789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人