ForeverCjl的专栏

前不久微软Teams团队宣布他们将放弃使用Electron转而使用基于Edge的Webview2组件来重新实现Teams程序，目的是在于减少软件所占用的内存。对于开发者来说，微软内部团队的这个决策给外界的感觉是Electron的寿命即将到头了，他们后续将重点发展和使用Webview2来进行开发。那究竟是不是这样呢？其实在7月份的时候Electron的官方博客已经对此进行了说明，并在文章中把Electron和Webview2进行了对比。接下来我们来一下原文，看看Electron团队对这个事情的看法。以下是

强制开启Android Webview GPU 加速的方法常用方法浏览器开启GPU加速可以让渲染的性能更好，可以有效的利用硬件的能力来提高页面的绘制帧率。在安卓平台使用webview的场景下，开发人员通常会通过以下两种方法来让webview使用硬件加速能力来渲染页面。方法一：在应用的启动配置中，添加 android:hardwareAccelerated="true"配置，如下图所示：方法二：通过在webview初始化的方法中使用如下代码：wv.setLayerType(View.LAYER

EcmaScript 2022中的新特性ES2022 feature: class static initialization blocksEverything new coming in ES2022前言从2015年起，Javascript每年都会在标准中加入一些新的特性。本篇文章将介绍几个已经到stage 4阶段的标准。一般来说，标准的提案需要经过4个阶段，第4个阶段是最后一个阶段。到达第4阶段的标准也意味着标准制定的工作已经基本结束。现在我们来一起看一看ES2022中的新特性：类的字段类

带你一文读懂Javascript中ES6的Symbol前言基础类型SymbolSymbol.for 与 Symbol.keyForSymbol.iteratorSymbol.searchSymbol.splitSymbol.toPrimitive总结前言Symbol这个特性对于很多同学来说，可能是在学习ES6特性的过程中，感到比较困惑的一个特性点。在大部分开发场景中，你可能根本用不到这个特性，但理解Symbol各个属性和方法的作用和意义还是非常有必要的，在一些特定的场景中，你会发现它不可或缺。Symbo

背景近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。为什么选择Echarts？微信小程序目录市面上使用最多的两款图表库，如下：echarts-for-weixin——echarts微信小程序版本wx-charts——基于微信小程序的图表库对比两款图表库优缺点刚好相反。echarts-for-weixin：功能强大，但体积非常大wx-charts：功能相对简单，但体积小由于笔者对ech

前言在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用React Class组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook来编写组件并

用Nodejs实现在终端中看股票背景最终效果使用配置背景前阵子在股票行情见好时拿出全部零花钱入了几手，后来大盘来来回回调整时也不想卖，准备再留一段时间看看。开盘的时间都是要撸码的，在电脑上使用软件或网页去看行情总归不妥。由于股票界面过于明显，其他人票你屏幕一眼就知道你没在干正事而是在炒股。所以想了一个办法，在IDE界面的控制台中能实时显示想看的股票不就好了？别人不仔细看还以为是程序的log。最终效果在vscode的Terminal中运行程序，能看到下图的效果使用此项目没有打算发布到npm，

这里写目录标题背景解决之路为什么用微前端为什么我们选择`qiankun`重构之路两个 React 的坑babel 配置读取不到的坑通信异步加载浏览器的 fetch 差异总结优化开发体验篇内存占用严重，子应用无法热更新monorepo 项目的开发命令管理公共包结尾更多文章背景???? 博客首发 : SugarTurboS Blog团队的项目 A 经历两年需求的洗礼，一些问题也随之暴露出来：项目引用的npm包很多，业务代码也很多，有着向巨石应用发展的趋势。巨石应用的一些典型问题如下：构建效率低下、

github blog: https://github.com/SugarTurboS/Blogs/issues/44如果文章对您有帮助，请赠与一个star，谢谢。你还在为项目里的重复请求而发愁吗？前言背景重复请求的危害解决思路前置处理后置处理结论实现方式优化效果repeat-request-minder介绍repeat-request-minder-webpack-plugin介绍Github地址前言最近发现项目里面会出现一些重复的请求，在某些页面中，相同参数相同地址的请求会在1s之内连续发送多

让你能早点下班的Redux开发工具前言背景dvarc-redux-model特性安装相关说明如何发送一个 action自动注册 action 及 reducers异步请求由谁处理 ?如何在组件中获取 state 值？数据不可变的(Immutable) ?类型正确性 ？使用提供默认 action，无需额外多写 action/reducers复杂且真实的例子hooks ?API提供的默认 Action相关文章前言今天给大家带来一款 redux 中间件 : ???? rc-redux-model，为你们 ✍️

Electron教程-程序目录结构程序目录结构主进程渲染进程主进程模块目录1、通用模块2、日志模块3、配置模块4、进程通信模块5、应用间通信模块6、窗口管理模块渲染进程模块目录1、通用组件模块2、数据共享模块3、静态资源模块4、窗口业务模块总结程序目录结构Electron应用程序分成三个基础模块：主进程进程间通信渲染进程对于做纯web开发的新人，可能对多进程开发结构不熟悉。在浏览器中，基于安全策略考虑，web页面通常是在一个沙盒环境中运行的，不被允许去接触原生的资源。然而在Electron

前端混沌组件初探什么是混沌混沌组件构建插件什么是混沌混沌即混沌工程，首先我们得知道混沌工程是什么。混沌工程起源于Netflix公司，Netflix公司的工程师创建了一种验证服务可靠性的测试工具Chaos Monkey。使用这个工具，可以在我们的web系统中随机的制造一些麻烦，比如触发网络异常，流量激增，容器退出等异常，我们可以在这些异常发生时，观察我们的系统是否依旧按照我们预期的方式运行。假设在流量激增突破承载能力的场景下，我们的系统是否会触发熔断机制来保障功能稳定运行。该工具最大的作用是，让故障在造

这里写目录标题Electron 是什么定义历史基于Electron实现的软件底层实现为什么要用怎么用Electron 是什么定义Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。历史2013年的时候，Atom编辑器问世，作为实现它的底层框架Electron也逐渐被熟知，到2014年时被开源，那时它还是叫Atom Shell。接下来的几

Sugar-Electron 基于Electron的轻量级开发框架前言关于应用稳定性关于开发效率低特性设计原则安装脚手架核心功能基础进程类——BaseWindow举个例子服务进程类——Service举个例子进程通信——ipc请求响应举个例子发布订阅举个例子主进程与渲染进程间通信（进程名"main"，为主进程预留）举个例子进程管理——windowCenter举个例子进程间状态共享——store举个例子配置——config举个例子插件——plugins插件封装插件安装插件使用自动初始化核心模块举个例子注意事项

Sugar-Electron 基于Electron的轻量级开发框架前言关于应用稳定性关于开发效率低特性设计原则安装脚手架核心功能基础进程类——BaseWindow举个例子服务进程类——Service举个例子进程通信——ipc请求响应举个例子发布订阅举个例子主进程与渲染进程间通信（进程名"main"，为主进程预留）举个例子进程管理——windowCenter举个例子进程间状态共享——store举个例子配置——config举个例子插件——plugins插件封装插件安装插件使用自动初始化核心模块举个例子注意事项

文章目录默认层级Z-indexTransform总结默认层级我们在日常写页面的时候，正常情况下html元素都是按照html文档的顺序进行排布的，也就是写在后面的元素（如DIV），会显示在前一个元素（假设DIV）的下方。这种情况是最简单的，也是最好理解的。但在垂直于屏幕的Z轴方向上，浏览器是如何决定哪个元素渲染在上面，哪个元素渲染在下面的呢？先来看下面这段demo<style>#a{ width: 100px; height: 100px; background: red;}

在软件工程领域，设计模式是为了解决特定问题而产生的一些可复用的方法、模板。每一种设计模式都针对性解决某一类场景的问题。设计模式被认为是开发者解决通用问题的最佳实践。通常我们学习的设计模式，大多数与面向对象的语言相关，比如Java。市面上大部分关于设计模式的书籍也是基于面向对象来进行讲解的。但对于大部分平常写JavaScript的开发者来说，面向对象的设计模式基本上是用不着的，如果不仔细思考，会经常错误或过度使用设计模式，不仅增加了软件开发成本，还加重了后期维护的负担。作为以Javascript为主语..

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。scre

IE下的DIV居中确实存在着一种问题，网上也有很多关于在IE下DIV居中的方法，亲自测试了一下，其实没有他们说的那么麻烦。1.在IE9以上的版本中，只需要设置 margin：0px auto; 就可以使得DIV居中2.在IE9以下的版本中，需要如下设置其中的子div方可实现居中。

HTML代码：html>head>    title>title>style>*{padding:0;margin:0}ul{list-style:none}.slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px auto}

HTML:[${ross.parentName}] ${ross.title } [${ross.updateDate}]CSS:.time{float:right}以上代码会在IE7.0以下time元素与a元素错位，一个在上，一个在下。导致的原因是这种情况下span-time元素的margin-top会自动增加20px左右（具体为什么增加不知道，如果哪位大神知道的话给我留

在项目中运用到了JQUERY UI，用到了其中的disableSelection()方法，这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择。    由于某些需求，我在给div使用了此方法后，达到了上述效果，但是有不足的地方。    在Firefox下运用此方法后，div中的select方法点击之后将会无法弹出，在IE和CHROME下没有此现象。

在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果。首先定义两个class：.controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off

在做项目的时候，经常会遇到需要使用javascript给页面动态添加一大段HTML代码，结果会导致代码可读性大大降低，并难以维护，就像下面这样：var htmls = ''; htmls += ''; htmls += ""; htmls += "选项名："; htmls += ""; htmls += "";尤其是当需要在这段代码中插入变量的时候就更恶心了，所以在接

参考Handlebars网站：http://handlebarsjs.com/首先下载handlebars-1.0.0.beta.6.js和jquery-1.7.1.min.js1）、最简单的Handlebars模版使用。首先创建handlebarExample.html。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran

/** * 时间格式化 返回格式化的时间 * @param date {object} 可选参数，要格式化的data对象，没有则为当前时间 * @param fomat {string} 格式化字符串，例如：'YYYY年MM月DD日 hh时mm分ss秒 星期' 'YYYY/MM/DD week' (中文为星期，英文为week) * @return {str

jQuery自诞生以来，版本越来越多，而且jQuery官网的新版本还在不断的更新和发布中，现已经达到了1.6.4版本，但是我们在以前的项目中就已经使用了旧版本的jQuery，比如已经出现的：1.3.X、1.4.X、1.5.X、1.6.2等等。　　由于项目的需要，必然也需要不断的使用较新版的jQuery，但对于原来就已经存在并已经采用了的旧jQuery版本，我们如何让多个不同的jQuery版本在

之前在项目中使用到了HighCharts V2.0版，JQuery1,4,1 ，在页面中妥妥的画出了数据柱状图。可是后来将JQuery升级到1.9之后，HighCharts 画出了没有颜色的柱状图，也就是柱子看不到，但是数据是在的。找了很久都找不到原因所在，之后索性将HighCharts 升级到了3.0，就妥妥的解决问题了0.0 。目测是HighCharts 2.0对JQuery1.9

在IE6和IE7中这个版本的IE流量器中，对display:inline-block属性支持不佳，这也是一个经典的BUG。有两种方式解决这个问题，让让IE6/IE7 支持 display:inline-block 的方法。1.先使用display:inline-block，再使用display:inline，如下：ul li{display:inline-b

lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件通过以下代码弹出窗口使用字面量传参$.dialog(options)var dialog = $.dialog({title: '欢迎',content: '欢迎使用lhgdialog对话框组件！',icon: 'succeed',ok: function(){        this.title('警告').

Javascript 简易Form表单验证模块 可扩展

IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。这里收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie67 8bug和解决办法！ 原文：http://blog.sina.com.cn/s/blog_4abb9bba0101enhf.html

在IE7中，几个并列的块元素，如果前面几个元素没有设置浮动，而给最后的元素设置为float：right，则被设置为浮动的这个元素会出现在下一行。例子：ul li{display:inline-block;}.a{float:right}则第二个li会显示在第二行。解决方法：将浮动的li元素放在最前面即可：

javascript 仿百度分页函数

Javascript 实现 div 的拖动效果

基于JQuery的span元素点击事件在windows7触摸上失效的解决方法

我们常常需要按照我们指定的规则给table表格填上背景色，比如每隔一行的背景色不同这样的效果，在以前是用Javascript来实现的，现在我们可以用CSS3的nth-child() 选择器来实现这个效果。nth-child(N) 选择器能匹配父元素的第N个子元素，无论子元素的类型。N可以是公式，也可以是具体的一个数字或者是关键字。Odd和even关键字：tbody:nt

在IE中，如果脚本中出现了IE无法解决的代码时，就会弹出窗口报“当前页面的脚本发生错误”，并在下方显示具体的错误。今天项目中的代码在IE7下报了在79行 有Expected identifier，string or number 错误。 var api = $.dialog({ id:'appForm', width:100, height:350, title:"

如果父对象有overflow：hidden属性，子对象中的position属性是relative或者absolute，那么在ie6和ie7下父对象的overflow会失效，解决办法是给父对象加relative属性。 在IE6或IE7下如果父节点设置了overflow：hidden样式，且子节点设置了position属性的relative或absolute，则父节点的overflow：h

a href="#"> 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOP 点击链接后，页面不动，只打开链接 作用同上，不同浏览器会有差异。点击链接后，不想使页面滚到页首，就用href="javascript:void(0)"，不要用href="#"，return false也有类似作用详解href="#"与href="javascript:void(0)"的区别"＃"包