小结巴巴的博客

原创 变量名称-英文提示

hd -> headhdr -> headerbd -> bodyft -> footftr -> footertbl -> tableel -> element **cnt -> contentcmp -> componentbtn -> button **sel -> select *opt -...

原创 native 与 js 通信及其 jsbridge 前端逻辑

native 与 js 通信原生 native 与 js 的通信主要应用于现在的 hybirdApp 混合应用中，主要解决的一些 h5 不能实现但是可以调用原生的功能的通信。主要包含了，native 调用 js 、js 调用 native 的通信方式。IOS 与 js 通信1、通过获取 jsContext( JavaScript 的全局上下文 ) 来实现通信　　ios 获取 j...

原创 Requirejs原理分析-70行实现简Requirejs

模块化介绍模块化：对功能点的封装和集成分类：AMD：主要是前置依赖，在调用之前把所有的依赖加载完成主要是是requirejs在window上面添加了全局方法 define/requireCMD主要是就近依赖，调用的时候可以加载主要seajswindow主要定义了 define 方法，在函数内部传入了 exports/require 来实现依赖Commanjs同步...

原创 Promise原理分析-50行实现简Promise

Promise 介绍promise 主要用于链式的表示一个异步操作的结果及其返回值Promise对象是一个代理对象(代理一个值)，被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法状态：pending: 初始状态，既不是成功，也不是失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。...

原创 leetcode__二叉树中序排列 javascrip 实现

给定一个二叉树，返回它的中序 遍历。 示例: 输入: [1,null,2,3]输出: [1,3,2]中序排列：先输出左节点，在输出当前节点，最后输出右节点var inorderTraversal = function(root) { let list = [] if(!root) return [] run(root) function run(root) { const {left, right, val} = root .

原创 leetcode___javascript(js)___实现复原ip地址

给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。 有效的 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成），整数之间用 '.' 分隔。 示例: 输入: "25525511135"输出: ["255.255.11.135", "255.255.111.35"] Related Topics 字符串 回溯算法/** * @param {string} s * @return {string[]} */var restoreIpAddress.

原创 写一个简单的选择器( 方便小项目使用 )

const prefix = getVendorPrefix() function getVendorPrefix() { var body = document.body || document.documentElement var style = body.style var vendor = ['webkit',...

原创 Node web 框架 - Koa2 ( 简单实现代码，理解原理 )

　　Node web 框架 - Koa2　　刚刚写了一个简单的 Express 流程的实现,来理解 Express 的原理。　　相比 Express，Koa2 更加的简单。　　1、Koa2 也是通过 use 添加函数来处理请求，不过是一个异步函数，并且传入的是一个上下文　　2、Koa2 在处理请求的时候，首先创建一个当前请求相关的上下文　　3、传入的异步函数，所以用 awa...

原创 Node web 框架 - Express （ 200行实现基础功能，理解原理 ）

　Express 框架是基于 http 做一个一个 web 框架　　　　具体做什么呢？　　1、对 request 、response 进行封装，实现了一些方便简洁的方法　　2、实现了 app.use 对 request 、response 进行处理　　3、实现了 get 、post 等方法实现路由返回响应值的值　　4、另外一些 render 等方法实现了使用模板引擎渲染页面...

原创 Node进阶 - 内存管理和垃圾回收

　　Node内存管理和垃圾回收　　　　node.js 是基于 V8 引擎的 javascript 运行环境。　　V8 引擎　　javascript 代码运行的时候提供编译优化、内存管理、垃圾回收等功能　　代码编译优化：　　　　1、通过 parser 将 javascript 源码转为 ast 抽象语法树　　　　2、将 ast 抽象语法树转为字节码，　　　　3、然后转为机器...

原创 Node基础模块 - Net ( 网络模块 )

　　Node基础模块 - Net ( 网络模块 )　　网络模块提供了我们在互联网上面通信能力。　　我们可以调用客户端的方法以及创建服务器进行数据交换。　　网络模型　　七层网络模型 ( OSI ) ：应用层、表现层、会话层、传输层、网络层、数据链路层、物理层　　TCP/IP 五层模型：应用层、传输层、网络层、数据链路层、物理层　　我们在网络应用这块，应用的是 TCP...

原创 Node基础模块 - process 和 child_porcess

　　Node 基础模块 - process / child_process ( 进程/子进程 )　　进程　　进程是计算机资源分配和调度的基本单元。　　每一个应用程序启动会开启一个进程，分配固定的资源以及一个进程ID，并且进程之间是独立的　　进程之间可以通过 IPC 进行通信　　线程　　线程是计算机最小的计算单元　　进程可以拥有多个线程，但是线程只能属于一个进程　　...

原创 Node基础模块 - Stream

　　Node 基础模块 - Stream (流)　　Stream (流)是一个抽象的概念，在我们开发中会经常使用到（例如：fs 模块文件的读取和写入、http 请求的发送和相应 以及控制台上面打印日志）。　　首页 Stream (流) 这个模块继承 EventEmitter 模块，所以这里可以使用 EventEmitter 的事件事件订阅发布模式。　　个人理解，流类就是封装了...

原创 Node核心模块 - Module

前言node 模块机制采用的 Commonjs 规范模块是 node 应用程序的基本组成部分，文件和模块一一对应node 通过 module.exports 对外输出变量或者接口，通过 require 加载其他模块node 模块按顺序依次加载，并且只有第一次加载模块时候运行，然后存在缓存中分类核心模块： 包含在 node 源码中，被编译成二进制文件，也叫 native ...

原创 前端中常见字节编码(base64、hex、utf8)及其转换

/** 字节编码转换* 首先都需要转为二级制数组 (ArrayBuffer)* 然后才能转换对应的编码字符* 前端常见编码：* base64：就是将二进制转为字符串,将每6个字节转为一个特定的字符串(A-Za-z0-9/+=)。* hex：将二进制每8个字节转为对应的2个十六进制的字符串* */// utf8 转为 base64/hexlet ...

原创 React 的高级用法(Children、Component、createElement、cloneElement)

React.Children props.children 代表了所有的子节点。 React.Children 用于处理 props.children 的 提供了几个方法 ( map ，foreach ) 遍历所有的子节点，并且配合 React.cloneElement / React.createElement 使用Reac...

原创 node-sass 报错

原创 精通react之react-router4源码分析(100代码实现router功能)

1、react-router4　　是一个 react 组件　　通过和 location / histroy 结合，来显示页面不同URL对应显示不同的组件　　其中包含了三种路由。hash / boswer 等2、react-router基本原理　　要对 history 进行解析和封装　　要对 history/location 的改变进行监听　　当 h...

原创 前端错误类型

1、SyntaxError (语法错误)输入不规范，或者变量命令等不规范。// 缺少符号console.log ('hello';// Uncaught SyntaxError: missing ) after argument list// 变量错误// Uncaught SyntaxError: Invalid or unexpected tok...

原创 浏览器默认缓存时间-(为什么浏览器时而缓存，时而不缓存)

1、浏览器默认缓存时间　　firefox 的缓存时间时长　　（访问时间 - 最后修改时间）÷ 10　　例子：　　假设 7点0分 访问的 5点0分修改的 index.html ,　　那么缓存时间为　　2*60*60÷ 10 = 720 秒　　页面缓存时间为 720 秒2、设置页面禁止缓存 <meta http-equiv="Ca...

原创 hybird app 用 xcode ios打包 ipa 测试包并且安装真机测试

hybird app 用 xcode ios打包 ipa 测试包并且安装真机测试  　　1、创建 ios 项目　　1、用 cordova 创建一个 ios 项目npm install -g cordova　　cordova create hello com.mydomain.hello HelloWorld...

原创 docker基础学习

  　　docker 介绍　　　　1、docker 是什么 ？　　docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖到一个可移植的容器中。　　然后发布到任何一个 linux 系统上面。 　　特点：　　docker 容器启动和停止都很快，直接在宿主中可以完成。　　docker 容器占用的系统资源少，一台宿主可以运行很多容器　...

原创 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

背景 　　在这越来越发达的网络时代，web应用也是越来越复杂，尤其是前端的开发，也是越来越受重视。　　所以在我们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保应用能在生产上没有事故。　　但是事以愿违，很多时候我们都会接受的客户的一些线上问题，这些问题有时候可能你是自己开发的原因本身存在的问题，这样的问题一般能够在测试环...

原创 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...

 背景 　　在这越来越发达的网络时代，web应用也是越来越复杂，尤其是前端的开发，也是越来越受重视。　　所以在我们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保应用能在生产上没有事故。　　但是事以愿违，很多时候我们都会接受的客户的一些线上问题，这些问题有时候可能你是自己开发的原因本身存在的问题，这样的问题...

原创 js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)

　　　　与以前的切图比较，现在的前端开发对js的要求似乎越来越高，在开发中，我们不仅仅是要知道如何运用现有的框架(react/vue/ng),而且我们对一些基础的知识的依赖越来越大。　　　　现在我们就用平民的方法讲解下执行上下文/调用堆栈/内存栈。　　理解下 javascript 在执行中，javascript 引擎(v8) 对我们加载的代码做了写什么？ 　　...

原创 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决...

1、异常代码　　&lt;style&gt; .box{ min-height: 100vh; width: 100%; position: relative; } .position{ position: absolute; left: 0; width: 100%; bottom: 0;...

原创 网络知识-网络的七层架构

 通信系统的七层架构模型 　　1、应用层 ( 用户服务 )　　指的是给用户(开发者)提供网络服务的一些应用程序。例如：文件传输/接收、电子邮件收发、文件处理等　　这些应用程序提供了服务，也制定了一些规则，也就是一些协议。　　如：FTP\HTTP\DNS\SMTP 等　　这些应用程序都是为用户提供给服务的，也可以是给开发者开发的服务。　　应用层的程序开发...

原创 Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

  1、设置跨域      添加跨域条件   crossorigin="anonymous"    前提是后端支持这个图片跨域 2、上面加了之后还是报错　　如标题所示　　你需要把你的项目放到服务器上面跑　　或者自己搭建一个本地服务器　　然后在访问你的html ...

原创 Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案...

 添加跨域条件   crossorigin="anonymous" 【Redirect at origin 'http://xxx.xx.com' has been blocked from loading by Cross-Origin Resource Sharingpolicy: No 'Access-Control-Allow-Origin' header is ...

原创 react 使用 eslint 的三种代码检查方案总结，多了解点--让代码更完美....

 1、介绍     ESLint 是一个可扩展，每条规则独立，被设计为完全可配置的lint工具。    可以用来检测代码，避免低级错误    可以用来规范代码的开发风格，统一代码习惯。  2、为什么使用 ESLint ？     统一代码规范 :    在开发中，可能会遇到很多不同的同事同时开发一个项目 ，或者在工作的调整中，会有接手一个项目，...

原创 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)

1、问题　　在微信浏览器中，需要时刷新当前页面。　　正常情况下我们直接使用 location.reload 方法来刷新。 2、解决方法function realod(){ var {search,href} = window.location; href = href.replace(/&amp;?t_reload=(\d+)/g,'') win...

原创 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性...

1、介绍 　　canvas 已经出来好久了，相信大家多少都有接触。　　如果你是前端页面开发/移动开发，那么你肯定会有做过图片上传处理，图片优化，以及图片合成，这些都是可以用 canvas 实现的。　　如果你是做前端游戏开发的，可能会非常熟悉，或者说对几何和各种图形变化非常了解。　　这里我介绍的是简单的、基本的，但是非常完全的一个 2d 的 canvas 案例。　　...

原创 react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案

&#13;  &#13;1、原因&#13;　　&#13; 　ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期&#13;    也就是说 ssr 阶段是不会执行 componentDidMount 方法的&#13; &#13;　当你在 componentWillMount 之前当生命周期里面调用 window / ...

原创 中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等...

&#13; 1、介绍&#13;　　随着组件开发大流行，现在三大框架已经基本占领了整个前端。&#13;　　这时候，我们要是引入一个 jq 是不是先得你的项目非常臃肿，jq 也很不适合。&#13;　　这个时候，你就需要来增加你 js 的功底。&#13; &#13;2、各种操作&#13;　　&#13;　　1、事件委托&#13;　　案例分析：&#13;&#13;&...

原创 js 计算获取鼠标相对某个点的移动旋转角度

// 旋转角度 function getAngle(cen, first, second) {　　　　 // cen : 中心点 [0,0]　　　　 // first : 开始点 [1,3]　　　　 // second : 结束位置 [3,4] var f_c_x = first[0] - cen[0], f_c_y...

原创 Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法

 1、为什么会报错 ？　　这里抱着错误是因为 babel 的版本冲突。　　多是因为你的 babel 依赖包不兼容。 　　可以查看你的 package.json 的依赖列表　　即有 babel 7.0 版本的( @babel/core ， @babel/preset-react )　　也可命令查看 bebel-cli 的版本 （ babel -V ）　　也有...

原创 babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...

 Babel 官方介绍：将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的  javascript 代码。简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。 　　功能： 　　　　语法转换 　　　　添加一些兼容性的 polyfill...

原创 阿里oss上传图片react组件alioss-react，vue组件alioss-vue （不用我先收藏着，后端看下前端处理方法）...

 1、介绍 　　最近开发了一个项目，其中需要一个上传图片到阿里云的 oss 上面，就是上传图片到阿里云的 oss 上面。　　因为之前开发过 vue 的阿里云 oss 上传，所以直接复制粘 vue 的组件。　　因为我做的是 react 的项目，所以需要稍微修改。　　介于以后会经常用到，所以决定将它封装成组件，并且添加到 npm 包里面。 　　xl_alios...

原创 前端开发数据mock神器 -- xl_mock

 1、为什么要实现数据 mock  　　要理解为什么要实现数据 mock，我们可以提供几个场景来解释，　　1、现在的开发很多都是前后端分离的模式，前后端的工作是不同的，当我们前端界面已经完成，但是后端的接口迟迟不能提供　　　 前端很多时候都会等接口。　　2、测试人员想要你提供一份可以直接测试，自行修改后端接口，测试 UI 的时候。　　3、后端的接口，不能提供一...

原创 fetch各种报跨域错误,数据无法获取的解决方案

1、介绍    fetch 提供了一个获取资源的接口 (包括跨域)。    fetch 的核心主要包括：Request , Response , Header , Body    利用了请求的异步特性 --- 它是基于 promise 的 2、用法var request = new Request('/users.json', { method: '...