xiao_shutong-CSDN博客

转载 JS 中可以提升幸福度的小技巧

JS 中可以提升幸福度的小技巧1. 类型强制转换1.1 string强制转换为数字1.2 object强制转化为string1.3 使用Boolean过滤数组中的所有假值1.4 双位运算符 ~~1.5 短路运算符1.6 取整 |01.7 判断奇偶数 &12. 函数2.1 函数默认值2.2 强制参数2.3 隐式返回值2.4 惰性载入函数2.5 一次性函数3. 代码复用3.1 Object [...

2019-07-03 11:03:36 217

原创 Web技术应用规范（草案）

第一章总则第一条目的前端开发是一系列工具和流程的集合，本规范旨在提升前端代码的质量，对前端开发进行全方位指导，统一编码规范、提高可读性、降低维护成本，以实现高效、可持续的工作流。第二条范围本标准适用于所有的Web应用及App开发。第二章开发规范第三条一般规范应用在HTML、CSS、JavaScript等的通用规则。3.1 通用规范3...

2018-08-27 11:41:33 1360 2

原创新员工试用期月度总结

所属部门: 研发中心姓名： *** 入职日期： ******一、第1月目标：a) 明确工作目标及自身工作职责 b) 开发并维护****项目各模块****工作 c) 重构部分项目**代码 d) 坚持不断的学习**知识 e) 学习公司各项规章制度，了解公司组织架构二、第1月总结（2018-7-4）：来到公司已经将近一个月，每天工作都...

2018-07-04 10:37:38 11364 2

转载 Event Loop 事件循环机制

PART 1：规范为什么要有Event Loop？因为Javascript设计之初就是一门单线程语言，因此为了实现主线程的不阻塞，Event Loop 这样的方案应运而生。小测试（1）先来看一段代码，打印结果会是？console.log(1)setTimeout(() =&amp;amp;amp;gt; { console.log(2)}, 0)Promise.resolve()...

2018-06-27 11:45:18 373

原创 dom更新监听之 --- Mutation Observer API

1. 概述2. MutationObserver 构造函数3. MutationObserver 的实例方法3.1 observe()3.2 disconnect()，takeRecords（）4. MutationRecord 对象5. 应用示例5.1 子元素的变动5.2 属性的变动5.3 取代 DOMContentLoaded 事件6. 参考链接...

2018-06-26 11:36:59 1320

转载移动端几个问题解决方案

解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题? 首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是：(1) 看是否能把 body 和 html 的 height: 100% 去除掉。(2) 在滚动的容器中增加：-webkit-overflow-scr...

2018-06-12 17:46:07 385

原创原生js实现路由跳转

var regexps = [ /[\-{}\[\]+?.,\\\^$|#\s]/g, /$(.*?)$/g, /(\(\?)?:\w+/g, /\*\w+/g, ]function extractRoute (route) { var matchs = [] route = route.replace(regexps[0], '\\$&') .r...

2018-06-12 16:01:06 5029

原创性能优化之 ---- 图片

图片太多或者太大将导致页面加载完成缓慢：图片太多导致向服务器请求的次数太多，图片太大导致每次请求的时间过长。以下是几种优化方案： 1、将图片服务与应用服务分离：对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器.(注:图片服务器是专门为图...

2018-06-08 18:53:59 581

原创前端常用代码片段

一、预加载图像如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); }}...

2018-05-23 20:13:20 189

原创事件委托、函数节流及函数防抖

概念函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行一次函数节流（throttle）预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期如果一个事件被频繁触发多次，节...

2018-05-11 13:28:54 484

翻译 Web 的现状：网页性能提升指南

技术人员经常会发现自己处于特权状态。随着最新的高端笔记本电脑、手机和快速有线互联网连接，很容易让我们忘记，这些并不是每个人都有的条件（实际上，真的很少）。如果我们从特权和缺乏同情的角度来构建网络平台，那么将导致排他性的糟糕体验。考虑到设计和开发的性能，我们怎样才能做得更好？ 1. 优化所有资源理解浏览器如何分析和处理资源，是显著提高性能的最强大但未充分利用...

2018-05-11 12:03:00 689

转载常用 Git 命令清单

我们每天使用 Git ，但是很多命令记不住。一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单，清单是供大家查缺补漏的，大家可以预览下以下清单，看自己有哪些是不太熟悉或者不知道的，然后针对性的了解其用法。熟练了这些命令可以大大提高效率。几个专用名词的译名如下。 - Workspace：工作区...

2018-05-11 10:44:58 248

原创 ES6 小知识

定义变量/常量ES6 中新增加了 let 和 const 两个命令，let 用于定义变量，const 用于定义常量。两个命令与原有的 var 命令所不同的地方在于，let, const 都是块级作用域，其有效范围仅在代码块中，实例如下：// es5if(1==1){ var b='foo';}console.log(b); //foo// es6if(1==1...

2018-04-24 19:36:01 120

原创 vue 双向数据绑定功能实现

本文将仿写一个 vue 双向数据绑定的实例。原理 vue 的双向数据绑定原理，主要是通过Object对象的 defineProperty属性，重写data 的set和get函数实现。本文将简要实现v-model, v-bind, v-click三个命令。原理如图：实现页面结构如下：<div id="app"> <form> <input type="...

2018-04-19 16:48:40 313

原创 cli 搭建Vue 环境

npm初始化 $ npm initwebpack配置主要需要配置babel，把es6预处理为es5，配置文件如下：const path = require('path');module.exports = { entry: './app/main.js', output: { path: path.resolve(__dirname, 'dist'),

2017-11-15 16:55:55 216

原创 web前端开发规范

规范目的：为提高团队协作效率, 便于添加功能及前端后期优化维护, 输出高质量的代码, 特制订此文档。本规范一经确认, 前端开发人员必须按本规范进行开发. 本文档如有错误或不合适的地方请及时提出, 经讨论决定后方可更改。通用规范：文件内容编码均统一为UTF-8。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。 CS

2017-10-30 18:06:34 262

原创 H5 截屏 (canvas2html / dom-to-image)

场景描述：移动端调用 iscroll 插件的长页面实现完整截屏问题：dom-to-image 插件出现 input 的单选框和复选框选中项截屏生成的图片无值。解决方案：修改的方法：function copyUserInput() { if (original instanceof HTMLTextAreaElement) clone.innerHTML = orig

2017-10-27 14:21:05 2643

翻译高阶函数：Filter、Map和Reduce

前言高阶函数可以帮助你增强你的JavaScript，让你的代码更具有声明性。简单来说，就是简单，简练，可读。知道什么时候和怎样使用高阶函数是至关重要的。它们可以让你的代码更容易理解和具有更好的可维护性。它们也可以让你很轻松的进行函数间的组合。在本文中，我将介绍JavaScript中三个最常用的高阶函数：.filter()，.map()，.reduce

2017-09-12 09:51:25 492

原创反序列化自动填写表单

反序列化自动填写表单form表单结构<form id="fs"> <div class="field"> <label>name</label> <input type="text" name="name"> </div> <div class="field"> <label>name</label> <input type="text" name="ag

2017-08-13 16:46:22 578

js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候，立马触发一个事件执行响应的操作，而不是像是keydown或者keyup事件一样，只能够检测通过键盘输入导致内容的变化，下面就通过代码实例做一下简单介绍。一.相关知识准备:1.onchange事件:此事件会在元素内容发生改变，且失去焦点的时候触发。浏览器支持度较好。2.onpropertychange...

2017-08-13 16:25:58 66809

转载 JQuery中serialize() 序列化

JQuery中serialize() 序列化在jQuery中，当我们使用ajax时，常常需要拼装input数据以键值对（Key/Value）的形式发送到服务器，用JQuery的serialize方法可以轻松的完成这个工作，使用这个方法可以将表单序列化为键值对（key1=value1&key2=value2…）后提交。下面介绍JQuery中serialize()的用法

2017-08-13 16:18:33 871

转载从移动端click到摇一摇

正文从这开始～以前听到前辈们说移动端尽量不要使用click，click会比较迟钝，能用touchstart还是用touchstart。但是用touchstart会有一个问题，用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart，所以两者都有缺点。那怎么办呢？首先为什么移动端的click会迟钝呢？从谷歌的开发者文档《300ms tap delay, gone aw

2017-07-25 09:02:26 445

转载防 SQL 注入的五种方式

一、SQL注入简介 SQL注入是比较常见的网络攻击方式之一，它不是利用操作系统的BUG来实现攻击，而是针对程序员编程时的疏忽，通过SQL语句，实现无帐号登录，甚至篡改数据库。二、SQL注入攻击的总体思路1.寻找到SQL注入的位置2.判断服务器类型和后台数据库类型3.针对不通的服务器和数据库特点进行SQL注入攻击三、SQL注入攻击实例比如在一个登录界面，要求输入用户名和密码：可以这样输入实现...

2017-06-28 00:50:14 1762

转载定时任务高效触发

开发中我们经常会遇到一些需要定时来解决的业务场景。比如，有这样一个需求：“如果连续30s没有请求包（例如登录，消息，keepalive包），服务端就要将这个用户的状态置为离线”。轮询处理将所有任务都添加到某集合中，定时轮询扫描，如果达到条件则进行相关处理；let map = new Map();function doAction(uid) { map.set(uid,

2017-06-04 21:17:37 711

xiao_shutong的博客