border-1px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

&::after {  
    content: ''; 
    position: absolute;
    top: 0; 
    left: 0; 
    width: 200%;
    height: 200%;
    -webkit-transform: scale(.5); 
    transform: scale(.5); 
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
    pointer-events: none; 
    box-sizing: border-box;
    border: 0 solid #ccc;
    border-left-width: 1px;
}

单行省略

1
2
3
4
5

.txt{
    overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

多行省略

1
2
3
4
5
6

.txt {
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

css强制换行

1
2
3
4

.txt {
    white-space:normal;
	word-break:break-all;
}

更改文本选择样式

1
2
3
4

.txt::selection {
  background: deeppink;
  color: white;
}

清除浮动

1
2
3
4
5

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

滚动条样式

1
2
3
4
5
6
7

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

使文本内容无法选择

1

user-select: none;

文字渐变

1
2
3
4
5

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

css切换开关

1
2

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}

1

document.querySelector('#toggle').checked

React 知识收集与总结

1.React 组件生命周期

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount ：在渲染前调用,在客户端也在服务端。
• componentDidMount ：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillReceiveProps ：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate ：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
• componentWillUpdate ：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate ：在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount： 在组件从 DOM 中移除的时候立刻被调用。

2. React Loadable 代码分割和懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// example
import Loadable from 'react-loadable';
function MyLoadingComponent() {
  return <div>Loading...</div>;
}
const LoadableAnotherComponent = Loadable({
  loader: () => import('./another-component'),
  LoadingComponent: MyLoadingComponent
});
class MyComponent extends React.Component {
  render() {
    return <LoadableAnotherComponent/>;
  }
}

目前我使用Charles（以下美称小花瓶）主要作的用途：

1. 简单使用 抓取app，微信小程序，手机端网页等信息
2. 进阶使用 解决pc端浏览器不能打开微信端需要登录授权的页面
3. 重点介绍 开发时，可在pc端浏览器模拟微信登录，实现无缝开发

如何使用小花瓶抓取手机端app、小程序、网页信息？

原理介绍

pc与手机处于同一个Wifi网络，通过手机设置wifi网络的http代理，把服务器地址指向pc的ip地址。

配置

配置教程不再阐述，配置教程：https://juejin.im/post/5a420adff265da432c241adc

配置成功后，此时，在手机端打开任一app或者网页，都会在小花瓶中看到有站点信息，但不能查看其详细信息，需要设置一下。

配置你要抓取的网站：要在Proxy==>SSL Proxy Settings 下添加你要抓的网站host，这样就能看到该网站下的网络接口信息，没有添加的不能显示详细信息

结果：设置过的网站就能看到，其余为 unknow

如何使用小花瓶在pc浏览器中打开微信端需要登录授权的页面？

例子：https://www.homemadecake.cn/sp/order/history

步骤一：增加一条SSL Proxying

步骤二：用手机打开这条链接

从小花瓶中可以看到，整个微信登录授权的跳转过程：

• 进入页面 https://www.homemadecake.cn/sp/order/history
• 用户同意授权，获取code https://www.homemadecake.cn/sp/weixin/openid?url=https%3A%2F%2Fwww.homemadecake.cn%2Fsp%2Forder%2Fhistory
• 最后返回 https://www.homemadecake.cn/sp/order/history?openid=XXX 此时服务器已经拿到该用户的信息。

步骤三：直接在浏览器中打开这个链接 与手机中显示的一毛一样，完成。（侵删）

（重点来了）如何在开发中使用小花瓶模拟微信授权登录？

第一步：以mac为例，开启Mac OS X Proxy代理，打上勾

第二步：在Tools==>Map Remote Settings下设置代理转发地址，把本地端口指向代理转发的地址

iOS中表单获取焦点问题

触屏设备上的Safari中focus()有些限制。水果触屏设备的设计师们认为软键盘老是弹出来是很烦人的，用户体验不好。所以他们为表单获焦软键盘弹出设置了以下两个条件：

1. 屏幕被点击。未被点击状态下无法通过focus()方法使表单获焦。直接点击表单或者点击其他元素然后在点击事件处理函数中调用focus()方法使表单获焦。
2. 别的表单组件没有处于focus状态。

vue 更新数据中的某一个key不触发视图的更新

1

this.$set(data,'key',value)

document.documentElement.scrollTop 回到顶部失效

问题：页面上有一个回到顶部按钮，采用fixed布局，z-index:1000，页面上内容页中间有一个导航栏，当页面滚动到导航栏位置时，导航栏采用fixed z-index:1001固定在头部，此时document.documentElement.scrollTop 点击回到顶部失效

解决方式: 设置页面上的所有层不可大于回到顶部按钮的层级 <1000

border-1px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

&::after {  
content: ''; 
position: absolute;
top: 0; 
left: 0; 
width: 200%;
height: 200%;
-webkit-transform: scale(.5); 
transform: scale(.5); 
-webkit-transform-origin: 0 0;
transform-origin: 0 0; 
pointer-events: none; 
box-sizing: border-box;
border: 0 solid #ccc;
border-left-width: 1px;
}

单行省略

1
2
3

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行省略

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

字符串截取

1
2
3

slice(start,[end])
substring(start,[end])
substr(start,[length])

远程登录服务器命令

1
2
3

$ ssh root@host
bash ssr.sh

复制文字到粘贴板

可以使用 https://github.com/zenorocha/clipboard.js 兼容性较好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 复制文字功能
export const copyContent = function(elementId)  {
  // 动态创建 input 元素
  var aux = document.createElement("input");
  // 获得需要复制的内容
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  // 添加到 DOM 元素中
  document.body.appendChild(aux);
  // 执行选中
  // 注意: 只有 input 和 textarea 可以执行 select() 方法.
  aux.select();
  // 获得选中的内容
  var content = window.getSelection().toString();
  // 执行复制命令
  document.execCommand("copy");
  // 将 input 元素移除
  document.body.removeChild(aux);
}

深度克隆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export const deepClone = function(obj) {
    if (Array.isArray(obj)) {
        return obj.map(deepClone)
    } else if (obj && typeof obj === 'object') {
        var cloned = {}
        var keys = Object.keys(obj)
        for (var i = 0, l = keys.length; i < l; i++) {
            var key = keys[i]
            cloned[key] = deepClone(obj[key])
        }
        return cloned
    } else {
        return obj
    }
}

目前前后端不分离开发问题

前端页面可嵌套java语法

优点：目前java后台，可以在jsp、html页面嵌套java语法、数据交互，不用采取ajax请求，加快前后端数据交互。

缺点：数据字段嵌套在前端页面，内容较多时，字段混乱，嵌套java语法降低前端开发后期维护性。

数据交互，需运行java项目

优点：方便后台测试接口

缺点：前端需要搭建后台java环境、后台每出新接口，前端需要重新更新代码编译运行，降低前端开发速度，尤其是当后台编写出错、项目运行不了，需要把报错信息交给后台处理完成后再重新编译运行，前端根本开展不了工作。

url地址跳转（目前跳转由后端控制）

前端每次新建页面都要先向后台报项目文件目录，后台编写url地址和这个文件的位置作一个映射

优点：后台对url地址可控性更强

缺点：大大降低前端开发效率

前端资源的(css、js)引入

目前是采取绝对路径方式引入

优点：

缺点：正确前端引入资源的方式是相对路径，所以如果后台没有做好url跳转，前端往往连静态页面都编写不了

前端自动化、css预编译、打包压缩

目前由于没有前后端分离，项目结构嵌套在java项目结构下，前端url、资源的引入前端都无法控制，无法做到基本的前端工程化、前端的打包压缩添加版本号等等；

正确的流程应该是这样的：前端src开发(可采用less等预编译器加快前端开发)→前端dist打包发布

优点：前端有完整目录结构，结构清晰、前端自动化、后期维护性较好

缺点：由于没有压缩合并资源等等问题，增加网站资源引入、性能差等问题

前后端分离最大的优缺点

优点

1. 前端负责前端页面编写、展示，调用接口，后端负责写接口，各司其职，互不影响

2. 目录清晰、后期维护性强；

3. 加快前后端开发速度

4. 可使用Vue等比较优秀的框架，提高开发速度，加快网站速度

   ​

缺点

1. 后端无法测试接口，前端需把接口出现的问题告诉后端，需多增加沟通
2. 后端可控前端降低

总结

目前大部分公司都采取前后端分离的开发模式，前后端各司其职，互不影响，前后端的后期可维护性都更加好。

以上。

在实际开发中，除去a标签跳转，经常会使用window.location.href去跳转页面，这个方法在绝大多数浏览器中都不会存在问题，但在一次项目中，发现在安卓微信浏览器中，调用微信SDK分享成功之后调用window.location.reload()刷新本页面，但并没有生效：

1

window.location.reload();

原因

href是location对象的一个属性，reload()则是location对象的方法
所以对于href，可以为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
对于reload()则是重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

但对于安卓手机微信中的浏览器，reload只是从缓存中装载文档，所以当你使用该方法，是失效的；

建议少用window.reload()，应该使用window.location.href=””来代替。

解决办法

使用location.href代替reload(),而且在以后的使用中也强烈建议大家使用location.href来进行刷新或者跳转

1

window.location.href = location.href+'?time='+((new Date()).getTime());

这一个多月，开发了一个微信公众号的微信H5商城。

地址：

http://napp.9pin.com/wx/page/wxBeerSet.htm?cid=61&code=081CrhBc2yRDvB0TaKAc2bl1Bc2CrhBP&state=&weixin_oauth_code=081CrhBc2yRDvB0TaKAc2bl1Bc2CrhBP

技术栈

前端：jQuery + rem + flex

后台： java

前言

公司一共两个前端，我负责一个后台管理系统项目，一人独立前端开发。另外一个同事A前端开发这个公众号商城。由于公司开发策略有变，公众号商城放在首位，我被迫放在现有项目，加入商城开发。

我是一个接盘侠

所谓接盘侠，就是接别人的烂摊子，继续开发，所以我可以算是二次开发？

接手项目

加入项目，此时页面大概有10多个，已经写得差不多了，但只是静态页面，后台接口还没有。我心里美滋滋的，心想还不错，不用我来写页面，直接等后台接口渲染数据加载，优化下就完事了。

直到我真正看到代码的时候

我所认为的问题

1. 文件目录混乱
2. class id 等命名不规范样式
3. 样式大多使用标签选择器
4. 代码混乱

沟通与处理

毕竟我来公司也两个月了，但一直都是独立一人开发项目，和同事A也没有多大的接触，只有时聊天，说说前端流行的东西，也略知其水平一二。

由于这个项目已经开发了一段时间了，目录结构再改要花更多时间，迫于时间不能改了，只能顺着A的路径走了，后来到了现在项目上线了，随着文件的增多，目录结构越来越乱，找文件的时间也花得比较多，也挺懊悔当初没有改回来，导致现在找文件速度有点慢。

此时页面也差不多写完了，命名不规范，样式混乱我能怎么办，我也相当无奈，也不能一个个地找，一个个地改回来吧，现有的就只能随他去吧，我看了代码之后也细心明确告诉A，他写的代码的不足之处，后来到现在好一点了，也许还需要点沉淀与积累吧？

关于标签大量使用了标签选择器和 :nth-child() ，而没有正确使用class出现的问题。一开始我也没觉得是个问题，后台等到需求不断变的时候，功能不断变化，有时候在这个div里加上一个内容，之前使用标签选择器和:nth-child()来控制样式会变得非常致命。这就为什么大牛都推荐使用class来控制样式的原因吧。

共同开发

虽然A水平没有自己好，但是还要一起开发的，我只能自己接手比较难的模块，简单点的模块就交给A。

由于静态页面与渲染数据、事件绑定有紧密联系，所以最好一个模块当中，html、css、js都要自己来写会比较好，自己对页面内容，事件的把控都会比较熟悉。

开发中出现的问题

移动端适配

所谓移动端适配，就是要根据移动设备的屏幕大小来显示适当比例的内容与图像。因为A没有做过移动端，没有考虑到适配问题，这让我相当无奈，因为当时我接手的时候页面已经差不多写完了。没办法，只能一个一个地改，所以说，刚开始真的很重要很重要，直接影响了之后的开发与迭代了。

使用rem.js

我是通过使用rem单位和一个rem.js来解决移动端适配问题。

1
2
3
4
5
6
7
8
9
10
11
12

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

通过获得屏幕的宽度大小，来改变html的font-size

用户错误操作提示

很多时候用户都会有一些误操作，比如填写表单的时候手机号码不正确或者漏填信息、后台接口错误提示等等，都应该给予适当的误操作提示，一开始我是使用alert()直接完事，但用户体验相当不好，尤其是移动端，相当难看而又让用户再点一次，感到恶心，后来模仿其他平台做法自己写了一个通用方法弹出层进行错误提示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

			//HTML
<div class="tips" style="display: none">
		<div></div>
</div>
			// CSS
.tips {
	position: fixed;
	top: 42%;
	width: 100%;
	left: 50%;
	text-align: center;
	z-index: 999;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.tips>div {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 0.3rem;
	text-align: center;
	color: #fff;
	font-size: 0.6rem;
	text-shadow: 1px 1px 1px #000;
	border-radius: 50px;
	/*line-height: 1.5rem;*/
	background: rgba(0,0,0,.8);
}
			// JS
function showTips(text) {
    $('.tips>div').text(text).parent().fadeIn().fadeOut(2000);
}

需求不明确

这个问题相当重要，直接影响你的开发进度和心情。由于需求不明确，往往在开发当中，等你写完了这个页面或者开发完这个功能之后，很有可能需求发生更改，UI很可能会变，所以当你写完一个页面之后，产品和UI告诉你，”之前的那个页面老板说不好看，需要重做，这个是最新的页面” 我想你会相当崩溃的，直到我三番四次地改，我才发现了这个问题的严重性。可笑可笑

意见

1. 先做你觉得不会改变的页面和功能
2. 一个页面中，很可能只有一块是不确定的或者改来改去的，这块可以先放下，不要做

兼容性处理与多测试

往往在浏览器中调试是不会出现问题的，等到真的放上服务器，用真机测试时，会出现各种各样的问题。

首先，在开发过程中，有条件和时间的话，可以开启一个本地服务器，多在真机中测试。而一些微信支付、微信分享等功能需要放到服务器上测试的，就要多测试，基于微信公众号开发，调用微信JDK，这也没什么办法的。

安卓端、IOS端

IOS微信浏览器是自带一个返回键的，而安卓端有些是用home键来控制返回，有些是没有返回的，例如在下单页面中，需要填写用户收获信息，我会在同一个页面来进行，利用一个弹出层来控制，页面来会有一个关闭按钮，确保安卓端与ios都可以点击关闭，而不是按”返回”，返回到上一个页面，这个流程就是不对的，所以在开发中，要与产品沟通好，了解整个流程，确保安卓端以及IOS端的流程一致，避免一些不必要的开发。由于使用了比较笨重的jquery，其他兼容性问题出现得比较少，如有出现，直接Google，搜一下，相信就有解决方法了。

总结

这个项目中，整个团队都是从零出发，需求不明确，在开发中遇到的问题还是比较多，与同事交流讨论也比较多，大家一步一步讨论、一步一步优化以及提出自己的建议，每个人都尽力做好自己的事情，在开发过程中还是挺开心的，等到真的测试上线了，看到自己做的东西，心情又会很开心。我知道自己代码还是写得不够好，还是不太会利用面向对象方式来编程，相信下次会越来越好。

致自己，加油。

前言

日常开发，常常有一些方法、正则、表达式经常需要用到，在此记录，作为总结和方便查找。

函数类

简单的jQuery Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function deleteCompany(companyId,callback) {
        $.ajax({
            type: 'POST',
            url: '/make/company/deleteCompany',
            data: {
                companyId:companyId
            },
            dataType: "json",
            success: function (result) {
                callback(result);
            },
            error: function () {
            }
        });
    },

毫秒数转日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//    创建日期转义
Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1, // month
        "d+": this.getDate(), // day
        "h+": this.getHours(), // hour
        "m+": this.getMinutes(), // minute
        "s+": this.getSeconds(), // second
        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
        "S": this.getMilliseconds()
        // millisecond
    }
    if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (this.getFullYear() + "")
            .substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    return format;
}
function formatDatebox(value) {
    if (value == null || value == '') {
        return '';
    }
    var dt;
    if (value instanceof Date) {
        dt = value;
    } else {
        dt = new Date(value);
    }
    return dt.format("yyyy-MM-dd"); //扩展的Date的format方法(上述插件实现)
}
//用法
formatDatebox(毫秒数);

拿到URL地址参数

1
2
3
4
5
6
7

// 拿到地址栏的参数 name为参数的名字
function getUrlParam(name)
{
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r!=null) return unescape(r[2]); return null; //返回参数值
}

普通手机正则验证

1
2
3
4
5
6
7

function checkPhone(){ 
    var phone = document.getElementById('phone').value;
    if(!(/^1[34578]\d{9}$/.test(phone))){ 
        alert("手机号码有误，请重填");  
        return false; 
    } 
}

方法

js加减乘除出现多位小数点 例如：0.1+0.2 ！== 0.3 0.30000000000000004

参考网址

http://madscript.com/javascript/javscript-float-number-compute-problem/

1
2

//        因为小数点相加会出现误差
var count = parseFloat((0.1+0.2).toFixed(10));  // count = 0.3

如何选中select选中的option

1

var companyName = $('#companyNameList').find("option:selected").text();

利用flex实现左边自适应，右边固定

1
2
3
4
5
6
7

.left {
  flex-grow: 1
}
.right {
  width: 200px;
  flex-shrink: 0;
}

注意这里的 flex-grow 定义了内部元素未达到容器宽度时的处理方式，flex-shrink 则定义了超过外部容器宽度时内部元素的宽度处理方式。而且缺一不可，否则会在特殊情况下表现出错误的效果

常用loading效果

http://www.yyyweb.com/demo/inner-show/spinkit.html