華華的博客

SPA的模式下，宿主页是首先加载的页面，会需要一些主要的组件，如element-plus，easyui，devextreme，ant-design等，这些组件及其依赖组件，文件多，代码量大，可能导致首页加载很慢，超过3-8秒，必须优化。文件多，浏览器与服务器之间的交互次数多，网络来回多，浪费了大量时间，如果能一次打包返回，可以提高效率。在es6模式下，这些第三方组件一般没有提供一个打包后的大文件，一般官方建议分散使用。（1）每次后台打包，可能要花2-3秒，最好把打包结果保存到文件，下次直接读取。

（3）模型如果按Xenova/detr-resnet-50/resolve/main放置，执行会报错：Error: An error occurred during model execution: "Missing the following inputs: pixel_mask.解决：从国内镜像下载：https://hf-mirror.com/Xenova/detr-resnet-50/tree/main。（2）huggingface.co网站被封锁了，下载不了模型。感觉不快，我笔电上花了14秒。

vue3##国际化##本地化##international#web界面国际化，I18N（Internationalization，国际化），I11L(International，英特纳雄耐尔)，L10N（Localization，本地化），显示文字多语言化是其主要内容。浏览器的js提供了Intl全局对象，html提供了translate属性。某些浏览器插件支持一键“翻译网页”。

qunit、mocha、jest是javascript单元测试框架中比较流行的几个。单元测试强调的是“独立性”，验证这个单元自身是否能正常工作。测试用例尽量不要依赖外部条件，必须依赖的外部条件不具备时自己mock模拟，不需要等待别的同事提供条件给你。集成测试强调的是“协作”，在正式工作环境中，验证全部单元是否能彼此匹配的正常工作。但在实践中，单元对外部的依赖是常常发生的，如果都要自己mock一个环境，工作量就比较大，因此想在集成的环境中来做单元测试。

浏览器加载react/vue组件时，遇到es6转es5，jsx转js...时，一种方法是用webpack离线编译，一种方法是用babel在线热编译（为了效率部署前可以预热）。但在多并发时，问题来了：多个并发任务可能会同时都检查到缓存不存在，然后开始编译.......很浪费，其实只需要一个任务来编译，其它任务等待编译结束后再读取缓存。先检查是否有编译后缓存文件，有就直接读取，否者编译，再读取。我比较喜欢在线热编译，好处是发布时快，不经过build直接源码发布，并可以避免忘记编译步骤导致bug。

但是，大家写react组件都是按es6语法在写，最后搞了一大堆webpack/babel来转成es5运行，啰里啰嗦的。我比较喜欢“浏览器原生开发”，不想如俄罗套娃一样，一层层套下去，搞了很多半生不熟的工具（react-app在node_modules下搞出的921个组件，是很唬人的），最后出问题了还不知道哪里找。react框架，看到的总是使用es5，通过webpack编译构建。react官方，直到现在的v18.1.0版本中，只有cjs和umd版本，都没有esm（es6）版本，看起来是对es6的不认可？

let require('a/b/c')，实际是加载了/a/b/c/index.js，浏览器以为是来自/a/b/c.js，当前目录是/a/b，实际当前目录应该是/a/b/c，如果index.js中有一句require('../d.js')，浏览器就会解析为require('/a/d.js')，导致找不到文件，实际应该是a/b/d.js。后台的static要尝试在使用此目录下的index.js文件，如果没有index.js，看看有没有package.json文件，解析使用其中的main属性指向的文件。

create可以在异步组件的componentDidMount处理，destroy就不能在动态元件的componentWillUnmount处理了，甚至不能在tabs的onTabClose事件处理，来不及了，虽然类组件可以，但函数式组件不会触发渲染重调用。tabs切换时，自己的框架需要处理组件的生命周期，要有active/deactive，让组件能知道何时创建或清除一些资源的使用，比如setInterval/clearInterval。只要在根原件把LCID设置为响应式，改变时，tabs各个组件会刷新。

easyui显示编辑树形资料有TreeGrid元件，但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。展开收拢时，计算好每个节点的isVisual属性，通过DataGrid的filter来显示和隐藏。节点按同级排序，按深度优先扫描树形节点，把节点一个个加入到平面的数组中。先计算好每个节点的层级level，然后template中设置缩进大小。（1）如何显示成树形。即，子节点如何有缩进。（3）排序时如何保持节点的上下级层级关系。（2）如何展开和收拢节点。

babel需要require函数，浏览器没有这个函数，必须是同步函数，浏览器原生fetch函数是异步的不可用。用了函数的caller来处理相对路径问题。react版本的easyui的tabs元件，可能有bug，新增加的tabPanel不会被选中，无论用tabs的select函数，还是用tabs的selectedIndex属性，或者tabPanel的selected属性，都没搞定。业务组件不可能写的时候全部知道（根据用户权限决定），也不可能一次性全部加载（影响首屏效率），应该是需要的时候，才从服务器加载。

业务组件不可能写的时候全部知道（根据用户权限决定），也不可能一次性全部加载（影响首屏效率），应该是需要的时候，才从服务器加载。vue为此提供了异步组件，可以用Vue.defineAsyncComponent来创建。（1）业务组件用什么文件格式？本来js的初心就是“即改即用”，我不太喜欢ts,jsx这些需要build的东西。如果用ejs做SPA，js代码控制好全局变量冲突不算严重，但dom元素用jquery操作会遇到很多的命名冲突。页面划分为上中下三层，中间划分为左右两部分，左边是功能树，右边是功能区。

easyui的react版本比较难用。1.如何增加column?column是增加了，但是filter面板和资料区都没有刷新，不行。 easyui文档不全面，通过console debug找到个changeColumns函数，改为： ok，显示正常。2.如何新增row?选中新增的row，聚焦到新增的row光标闪烁。 焦点没有聚焦到新增的行，光标没有闪烁。...

开始学react，先只在浏览器处理，不搞webpack等预处理。先安装react，我的版本18.1.0:npm install -g reactnpm install -g react-dom再安装babel，我的版本7.17.11。通天塔，很牛的样子，要把上帝搞乱的语言重新统一起来，负责解析jsx文件:npm install -g @babel/standalone写一个like_button.jsx文件：'use strict';class LikeButton ex

做人脸识别，先要获取面部特征，然后提取面部图片。https://www.npmjs.com/package/@tensorflow-models/face-landmarks-detection查看这个包的源码，发现要下载3个模型文件：facemesh：https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1 iris：https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2

之前用这种方式创建Line和在render中更新line两点位置：function createLinkLine(parent, son) { let points = [parent.position, son.position]; let geometry = new THREE.BufferGeometry(); geometry.setFromPoints(points); let line = new THREE.Line(geometry, g_linkLineMateri

参考https://threejs.org/examples/#webgl_animation_skinning_morph在three.js的\examples\js\loaders下，有一个GLTFLoader.js文件用来加载gltf模型。但是在微信小游戏环境下，会遇到一些特殊的问题。（1）把RobotExpressive.glb模型文件放在代码目录中时，上传会提示“文件类型不在白名单中，不会被上传”，这个问题的解释在：https://developers.weixin.qq.com/min.

tensorflow.js官方特别支持了微信小程序，看tfjs-core，fjs-backend-webgl等等模块的dist下都一个单独的miniprogram目录。还特别提供了一个微信小程序的插件：https://github.com/tensorflow/tfjs-wechattensorflow.js对微信小游戏还不支持，但是可以类似的实现，但是效率不高；小游戏不支持插件，直接使用tfjs-webchat源码，我名称改为tfjs-plugin。试试一个头部姿势，左右，点头控制：基

国庆8天长假，重庆之行因故未成，偶得闲，用three.js结合cannon.js写个3D小游戏耍耍。在微信小游戏中，把three.js的3D内容在离屏画布处理，然后复制到在屏画布，方法是：let c_toolbarHeight=140;let sysInfo=wx.getSystemInfoSync();require('./js/libs/weapp-adapter.js');var canvas_webGL=window.canvas;canvas_webGL.width = s

两个球碰撞后，合并成一个大球（摧毁一个，把另一个变大），或者销毁时，一点点逐渐缩小。涉及到几个对象：CANNON.Sphere CANNON.Body THREE.SphereGeometry THREE.MeshCANNON.Body和THREE.Mesh本身不用变，直径参数在CANNON.Sphere和THREE.SphereGeometry上，需要改变。改变CANNON.Sphere有2种方法：（1）重新创建一个function getBallRadius(value){

cannon.js的地址：http://schteppe.github.io/cannon.js/这几天在写一个3D游戏：球从y轴掉下来，堆叠后，因为重力原因，可能会向x,y,z三个轴随机跌落，但我只想要它在x和y轴跌落，不要在z轴跌落。让球在一个平面上运动，很容易做到，增加一个CANNON.Plane就可以。但是要让各种大小的球的球心在一个平面运动，如何做呢？查了官方API，没有查到方法，自己在render时把全部body的position.z设置为0： //限定球体只

微信官方说调整了canvas的缩放策略，它把物理像素和逻辑像素自动做了缩放，使我们不用考虑pixelRatio，因此字体和图片都模糊了，如果要显示高清，就要自己处理了。官方说明如下：https://developers.weixin.qq.com/community/develop/doc/00040c9903023848e0d7bd6205a401?highLine=%25E6%2596...

微信小游戏，打开玩一会儿后，手动切换到后台，然后再切回来，会出现黑屏，但是动一下游戏中的按钮，又可以看到了。用wx.onShow()方法，把离屏画布再往在屏画布复制一下：wx.onShow(function(){ updateCanvas();});但是发现还是没有效果，奇怪的是动一下游戏中的按钮又显示了（因为有复制画布），因此怀疑时机不对，加个timer试试：wx.on...

周末手痒，试了试微信小游戏的开发，写个俄罗斯方块。先创建画布：/** * 俄罗斯方块 * @author wxh */wx.tmGlobal = { name:"清新俄罗斯方块"};wx.tmGlobal.sysInfo = wx.getSystemInfoSync();//console.log("sysInfo:",wx.tmGlobal.sysInfo);wx....

以token处理登录的web系统，一般会有两个token：access-token和refresh-token。node.js中，一般用jsonwebtoken这个模块。access-token，是用户输入登录的账号密码，后台去db验证然后颁发的，它一般记录在浏览器的cookie中，并在浏览器关闭时自动删除，页面访问或ajax访问会自动通过cookie传回到后台，后台直接内存中校验，不用访...

在浏览器中，设置某个div的缩放，使用这个方法：function div_zoom(zoom, transformOrigin, el) { transformOrigin = transformOrigin || [ 0, 0 ]; el=el || g_PlumbInstance.getContainer(); var p = [ "-webkit-", "-moz-", "-ms-",

http://www.jianshu.com/p/3779f708f5d7/[按：网上介绍Gulp和Grunt安装使用的文章很多，甚少比较二者的思路，连官方文档都语焉不详。我在此做一个粗陋的对比，希望能提纲挈领，加深读者对这两个工具的理解。]做过点儿正经开发的同学都知道，构建工具必不可少。C时代的Make、Java的Ant、Ruby的Rake……没有这些工具，一遍遍地点选输入，准烦死...

http://www.iefans.net/ie-dakai-json-xianshi/

前面我把node-qunit的log.js修改了，把全局变量data公布出来了，但是每测试一次，发现测试报告一直累加，于是加上清空测试报告的代码：testrunner.log.reset();，如：module.exports = function(req, res, sender) { var testrunner = require("qunit"); te...

拿到了全部详细测试结果报告，在浏览器格式化显示有两种方法：（1）自己随便写；（2）还是用QUnit，既然它能比较优美的在浏览器显示测试结果，那我们就把node-Qunit的结果也让它来显示吧。先看到QUnit有个push方法，以为调用把结果报告一条一条调用QUnit.push(o.result,o.actual, o.expected, o.message)就行，结果什么也没有看到。算...

上回得到的report但实际上只是一个摘要，不够详细：{"files":1,"assertions":26,"failed":3,"passed":23,"runtime":463,"tests":12,"coverage":{"files":1,"statements":{"covered":106

qunit，https://qunitjs.com/，是测试javascript代码的一个测试框架；可以用在html测试js代码，这个用法不说。node-qunit，http://github.com/kof/node-qunit.git，是node.js下的版本。可以在node.js中测试js代码，可以与qunit共用“测试用例”。但是不满意的是它的输出在cmd的视窗中看起来乱糟糟的

先看代码： QUnit Tesing - yjSecurity JSON.parse = null; test("IE8-JSON.parse", function() { var s0="\u0061\u0001\u0062"; var o1={name:s0}; var s1=JSON.stringify(o

在上一篇中，express要传递一个object给ejs，是自己先把object序列化成json字串，然后传递给ejs，ejs收到手再解析成json元件。查看资料，说express连function都可以传递给ejs，那表示是在进程内传递的，应该能直接传递json元件，不需要先序列化成json字串。exports.yjUser = function(req, res){ ...

在node.js中，用msnodesql查询sql server数据库，然后传递给ejs模板页：exports.yjUser = function(req, res){ var sql = require('msnodesql'); var conn_str = "Driver={SQL Server Native Client 11.0};Server={.\\sql2008};...

为什么需要合并两个元件的属性？因为开发元件时，用户以json object形式传递参数进来，你准备开放10个参数，但是用户可能只传递了5个，你的代码如果去访问其余5个属性，就会出现notdefined错误，你不可能在内部一一去判断某个属性是否定义。为了省事，就定义一个预设的参数元件，然后和用户传入的参数元件合并。比如：//定义元件=======================yjCurv

http://my.oschina.net/justjavac/blog/68536翻译自Steve Yegge的大作《Execution in the Kingdom of Nouns》原文在 这里另外第一次翻译，很多地方不准确或根本翻译不出来，见谅~翻译正文Hello，world！今天我给大家讲一个关于Java魔鬼国王和他在全国范围内驱逐动词的故事。注意：这个故事并没有

http://blog.csdn.net/lufy_legend/article/details/7765599愤怒的小鸟是一款人气火爆的益智游戏，现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。准备工作一首先，你需要下载lufylegend库件1.4.1版http://blog.csdn.net/lufy_legend

http://sd.csdn.net/a/20110902/303983.html前言：JavaScript设计模式的作用——提高代码的重用性，可读性，使代码更容易的维护和扩展。1.单体模式，工厂模式，桥梁模式个人认为这个一个优秀前端必须掌握的模式，对抽象编程和接口编