fullstack_lth-CSDN博客

原创 CSS（一）详解position

最近我想深入学习css知识，所以打算对css相关的内容整理下。这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animat...

2019-07-25 23:19:59 1417

原创前端进阶（十九）前后端跨域问题

一、什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。二、什么是同源策略？所谓同源是指，域名，协议，端口均相同。如下是跨域规则详细举例：三、跨域问题分类1、接口跨域前后端分离时，前端为了获取后端数据而跨域。本文主要探讨接口跨域。如需要了解更多跨域知识，详见：https://segmentfaul...

2019-07-20 11:11:43 342

原创前端进阶（十八）js多线程

HTML5引入Web Works，让js支持多线程。一、多线程demo1、先写一个add函数function(a, b){ if(a && b){ return a + b; } return 0;}把这个函数写到works,js中2、使用web works的钩子函数onmessage和postMessage，在钩子o...

2019-06-25 15:05:15 7283 3

原创前端进阶（十七）WebAssembly

一、编译和解释编程语言分为两类：编译型：如C/C++解释型：如Java/Python/JS编译型语言，代码需要经过下面的步骤转成机器码：文本 -> 汇编语言-> 可运行机器码文本经过此法分析、语法分析、语义分析转成汇编语言，其实解释性语言也是需要经过这个步骤。然后再把汇编语言翻译成机器码，汇编和机器码是两个比较接近的语言，只是汇编不需要去记住哪个数字代表哪个指...

2019-06-24 17:16:41 982 2

原创前端进阶（十六）TypeScript

一、背景TypeScript是微软开发的开源编程语言，对javascript功能做了增强（是js的超集），目的是为了解决javascript的弱类型，不适合开发大型软件的问题。二、特性1、类型批注和编译时类型检查TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用JavaScript 常规的动态类型。React中，可对父组件传入...

2019-06-24 16:35:10 545

原创 CSS（七）实现各种形状和对话框

##CSS实现梯形CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。首先我们先给一个正方形设置比较宽的边框。如下。代码如下：<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; ...

2019-06-02 19:43:58 2751

原创前端进阶（十五）前端上传Excel文件，后端成功返回Json格式失败返回Excel

html文件<div style="display: inline-flex">上传excel文件： <input name="fileinfo" type="file" id="avatar" accept="application/vnd.openxmlformats-officedocument.spreadsheetml...

2019-05-21 17:25:20 2432 2

原创前端进阶（十九）如何写出优质代码

1.DRY-不要使用两行相同的代码不要在你的代码中有相同的两行代码，这是几乎所有程序员都同意的一条准则。假如你没有遵守这条规则，即你的代码中有相同的两行代码，那么在需要修改这两行代码时，你需要修改两遍，这种是理想情况，实际上可能会有更多的，所以请不要书写两行相同代码。2.方法尽可能短，职责要单一代码中请不要特别长的函数，除非他们仅仅实现同样一个功能，否则很长的函数必须要拆分成较小...

2019-04-14 09:43:29 935

原创前端进阶（十四）ES6+版本新特性

ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。从提案到入选ECMA规范主要有以下几...

2019-04-12 10:14:24 572

原创前端进阶（八）React16性能优化-实战

一、优化实践从过往的经验和实践中，影响网页性能最大的因素就是浏览器的重绘和回流，React背后的虚拟DOM就是尽可能的减少浏览器的重绘和回流。以下都是实际使用中一些常见的优化实践。1、{...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，请慎用sprea...

2019-03-31 18:19:17 1720

原创前端进阶（十二）Nginx反向代理和负载均衡

Nginx主页地址：http://nginx.netNginx入门指南：http://wiki.jikexueyuan.com/project/nginx/overwise.html“Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。”Nginx总体架构图nginx在启动后，会以...

2019-03-27 23:13:01 374

原创前端进阶（十一）React16.7-----Hooks

使用Hooks可以让你在不适用类的情况下使用状态和其他的一些react功能。可在此讨论Hooks概览看这里：https://reactjs.org/docs/hooks-overview.html看下面代码：import { useState } from 'react';function Example() { // Declare a new state variable...

2019-03-26 23:54:02 297

原创前端进阶（九）webpack4+react-app-rewired2.x实战

webpack4和webpack3区别还是比较大，而且webpack4虽然可以自定义配置，但是配置过程还是较为繁琐，所以我们使用react-app-rewired来减少配置，react-app-rewired传送门：https://github.com/timarney/react-app-rewiredwebpack4官方不再支持node4以下的版本，依赖node的环境版本>=6.11...

2019-03-24 22:32:28 8689

原创前端进阶（七）React 16 加载性能优化指南之首屏优化

https://cloud.tencent.com/developer/article/1358160 React 16 加载性能优化指南（上）https://cloud.tencent.com/developer/article/1359124 React 16 加载性能优化指南（下）这篇文章是针对这两篇文章的笔记，只为记录，如果侵权，麻烦告知，立刻删除。------------...

2019-03-06 17:54:20 1191

原创 MongoDB文档笔记

一、NoSQL简介关系型数据库遵循ACID原则事务在英文中是transaction，和现实世界中的交易很类似，它有如下四个特性：1、A (Atomicity) 原子性原子性很容易理解，也就是说事务里的所有操作要么全部做完，要么都不做，事务成功的条件是事务里的所有操作都成功，只要有一个操作失败，整个事务就失败，需要回滚。比如银行转账，从A账户转100元至B账户，分为两个步骤：1）...

2019-02-18 15:00:16 535

原创前端进阶（十）React高阶组件---《深入浅出React和Redux》笔记

一、高阶组件高阶组件（ Higher Order Component, HOC ）并不是 React 提供的某种 API ，而是使用 React 的一种模式，用于增强现有组件的功能。一个高阶组件就是一个函数，这个函数接受一个组件作为输入，然后返回一个新的组件作为结果，而且，返回的新组件拥有了输入组件所不具有的功能。简单的高阶组件示例。减少props的例子import Reac...

2019-01-28 16:55:02 614

原创前端进阶（六）js同步、异步和回调执行顺序

基本原则：同步->异步->回调经典实例：let promise = new Promise( function(resolve, reject) { console.log(1) setTimeout(() => console.log(2), 0) console.log(3) console.log(4) resolve(...

2019-01-28 13:32:05 3016 4

原创前端进阶（二十一）Tree-Sharking最佳实践

什么是Tree-Sharking？直接帖上一篇百度外卖的文章：Tree-Shaking性能优化实践 - 原理篇如果不想看长篇文章，我简单讲一下：简单说tree-sharking就是在前端在打包时，去掉不需要的代码。Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。其实在更早，googl...

2019-01-25 11:35:02 4110

传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快。Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Ja...

2019-01-01 22:22:26 282

原创输入框获取焦点到离开焦点发生了什么

1、过程onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 -> onchange -> onblurfunction handleFocus (event) { console.log('onfocus事件', 'value='...

2018-12-14 10:39:08 2837

原创前端进阶（五）web安全

一、XSSxss: 跨站脚本攻击（Cross Site Scripting，本来缩写是CSS，为了和层叠样式的CSS有所区别，所以在安全领域叫“XSS”。）是最常见和基本的攻击 WEB 网站方法。XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。...

2018-10-26 13:16:17 1305

原创前端进阶（四）React和Redux

React和Redux是相互独立的两个框架。一、ReactReact 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。具体参考React中文。React解决的问题（或者说React的优势）是：（1）通过给予程序员一个虚拟DOM供其渲染，这样就避免了修改真正的DOM。并且当页面状态改变时，会对页面的DOM做最小化修改，并重新呈现。这样就可以（至少在理论上），让程序员彻底不...

2018-08-27 23:42:32 393

原创 Echarts（五）双y轴0刻度线不对齐解决思路demo

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [{ type: 'value', max: function(value) { ...

2018-08-09 19:48:01 9806 9

原创前端进阶（三）前端模块化

什么是模块化？模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题，并且让开发的效率变高，以及方便后期的维护。模块化主要解决：命名冲突（变量和函数命名可能相同），文件依赖（引入外部的文件数目、顺序问题）等。一、ES5及ES5之前如何模块化？要回答这个问题...

2018-06-28 18:08:02 502

原创前端进阶（二）重绘和回流

今天结合项目说下重绘和回流。公司代码有个bug是这样的，上面两个容器都是用Highcharts画的图，但是页面重绘导致其中一个图形在第二次回流时超出了容器边界，页面下方是个表格。这个问题我折腾了大半天都没找到根源。最后才发现是下方表格由于有多余的边框，有段js逻辑代码是这样写的：function ClearBorderRight(source) { $("#" + source + "_u...

2018-06-14 23:37:08 4189 3

原创前端进阶（一）浏览器运行原理

最近随着项目经验的增加，打算写一个前端工程师进阶的系列，一是作为自己前端开发经验的总结；二是想把经验分享给刚入门前端，重复写了大量的前端代码，但是没有提升的同学，让我们一起成长为真正的前端开发工程师。刚开始关注浏览器运行原来大概是刚接触前端时，项目组让我解决一些页面的兼容性问题，当时认真研究了浏览器的运行原理，并对组内的同事做了简单的分享，现在经历过大量项目的洗礼，觉得有必要将这部分内容的精华加以...

2018-06-14 22:40:11 12402 1

原创 Echarts（三）调用底层zRender对象画图

一、zRender介绍ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。注意：echarts3.x版本是基于zrender的canvas，4.x可以选择基于canvas或者svg。二、调用方法本文中下方的调用方法仅针对在echarts 3.x以上版本中调用zrender对象画图，myChart代表的是获取到的DO...

2018-04-24 15:29:21 6529 2

原创 JS（二十八）居中横线-其他登陆方式或者数据加载完成

一、原理：利用vertical-align属性设置负值，实现样式；1.html部分<div class="other-way-login"> <span class="line"></span> <span class="txt">其他登录方式</span> <sp

2018-03-12 15:56:18 627

原创 JS（二十七）弹框点击外部隐藏技巧

$(document).click(function (e) {if (!$(e.target).hasClass('alert-container') && $(e.target).parents('.alert-container').length === 0 && !$(e.target).hasClass('btn-eco-bel...

2018-03-06 23:10:07 1195

原创 JS（二十六）jQuery插件编写技巧

1、典型的插件开头写法;(function (a) { "use strict"; if ("function" === typeof define && define.amd) define(["jquery", "moment", "commonMethod"], a); else if ("object" ===

2018-03-06 23:04:34 338

原创 JS（二十五）jquery-gridster插件

一、主要特性1.只依赖jQuery2.支持元素的添加和删除二、使用引入类库，包括jQuery和gridster.js：导入gridstrer的css文件：三、gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，d

2017-12-27 08:57:41 1874 2

原创机器学习实战（三）kaggle titanic随机森林

一、问题描述kaggle平台是一个大数据商业化平台，在平台上有很多lab和企业会提出很多问题，解答相应的问题也许会有相应的奖金。本文中的titanic是入门级的竞赛题目。题目大意是根据部分乘客的基本情况来预测其他乘客的生还情况。二、分析数据tmp = line.rstrip('\n').split(',')分析csv训练集中的内容得到乘客基本情况包含以下12个字段字段：

2017-11-12 22:14:55 2523

原创 python有用模块

Python具有强大的扩展能力，我列出了50个很棒的Python模块，包含几乎所有的需要：比如Databases，GUIs，Images, Sound, OS interaction, Web,以及其他。推荐收藏。 Graphical interface wxPython http://wxpython.org Graphical interface pyGtk http://ww

2017-10-26 10:14:32 520

原创 nlp（一）语种检测

# -*- coding: utf-8 -*-"""Spyder EditorThis is a temporary script file."""# NGram类计算字母序列出现的频率class NGram(object): # # text 一个unicode的文本输入 # n作为定义字符序列的长度 def __init__(self, text, n=3):

2017-10-23 22:51:51 2393

原创 JS（二十二）DataTables使用

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。免费开源（ MIT license ）！支持商业用途。中文地址：http://www.datatables.club/分页，即时搜索和排序几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理支持不同主题 DataTables, jQuery U

2017-10-18 15:25:59 777

原创 JS（二十一）JS函数库封装（持续更新）

1、数字转化为千分位分割符格式window.convertThousands = function (num) { var prefix, suffix, sign; if (isNaN(Number(num))) { return num; } sign = (num >= 0) ? ''...

2017-10-17 11:00:26 584

原创机器学习实战（二）梯度下降调用scikit-learn库函数（病马问题）

'''Created on Oct 27, 2010Logistic Regression Working Module@author: Peter'''from numpy import *def loadDataSet(): dataMat = []; labelMat = [] fr = open('testSet.txt') for line in fr

2017-09-26 20:05:54 886

原创《JavaScript设计模式与开发实践》笔记

（一）补充重要知识点：（一）this、call和apply1、this的指向（1）作为对象的方法调用--------指向该对象（2）作为普通函数调用 ------指向全局对象，如果不想指向全局对象，那么需要在函数内部定义保存引用的变量。（3）构造器调用-------通常指向返回的对象，但是如果构造器显示地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象。...

2017-09-18 18:25:55 1001

原创机器学习实战（一）kNN调用scikit-learn库函数

kNN算法略。kNN.py'''edit Sep 13, 2017kNN: k Nearest NeighborsInput: inX: vector to compare to existing dataset (1xN) dataSet: size m data set of known vectors (NxM)

2017-09-13 16:12:23 588

原创 JS（十七）jquery

1、获取单选框的值1、$('input[name="testradio"]:checked').val();2、$('input:radio:checked').val();3、$('input[@name="testradio"][checked]');4、$('input[name="testradio"]').filter(':checked');2、判断某个点击位置距离页面底部的距离...

2017-08-15 21:03:59 296