Skip to main content

Posts

尝试用pixi.js创建小游戏

在React里面使用pixi.js 写出下面的代码就可以创建出一个全屏的pixi.js画布 const PixiCanvas = () => { const pixiContainerRef = useRef ( null ); useEffect (() => { const app = new PIXI . Application ({ resizeTo : window }) pixiContainerRef . current . appendChild ( app . view ); return () => { app . destroy ( true ); } }, []); return < div ref = { pixiContainerRef } /> ; } 加入一个container, 将背景图片挂载到这个container上面，然后加到场景pixijs app里面 useEffect (() => { const app = new PIXI . Application ({ resizeTo : window }); const container = new PIXI . Container (); // background image const backgroundTexture = PIXI . Texture . from ( backgroundImage ); const backgroundSprite = new PIXI . Sprite ( backgroundTexture ); const resizeBackground = () => { backgroundSprite . width = window . innerWidth ; backgroundSprite . height = window . inner...
Post a Comment
Read more
Recent posts

异步函数的异常处理

 对于异步函数, 简单的try-catch并不能直接捕捉到。 比如说 function func1 () {     try {           func2()      } catch (error) {      } } function func2() {     setTimeout(function () {          throw new Error("error")      }, 1000) } 这里就无法catch到func2里面throw的error 所以应该是func2返回一个封装在Promise里面的函数，在func1里面用await来接收。因为await是对一个表达式求值。如果await后面是promise的话，就会等待Promise返回才执行。
Post a Comment
Read more

NodeJS - Koa开发服务端

作用:  1. 脱离浏览器运行JS 2. NodeJS Stream (前端工程化基础) 3. 服务端API 4. 作为中间层 使用NodeJS开发服务端 (使用koa) - npm init - npm install koa 在根目录下面创建app.js，并且引入Koa 然后实例化Koa。可以称app为应用程序对象，里面包含很多中间件 const Koa = require ( "koa" ) const app = new Koa () app . listen ( 3000 ) 如果要在访问3000端口的时候执行某个函数，可以加入下面的代码来加上中间件 app . use (( ctx , next ) => { console . log ( "hi yingxu1" ); }) 其中ctx为上下文，next为下一个中间件 当同时挂上多个中间件的时候，只会运行第一个。但是使用next()便可以执行下面一个中间件。 next会返回Promise app . use (( ctx , next ) => { console . log ( "hi yingxu" ) next () }) app . use (( ctx , next ) => { console . log ( "hi yingxu1" ); }) 洋葱模型 下面的代码会输出1342 app . use (( ctx , next ) => { console . log ( "1" ) next () console . log ( "2" ) }) app . use (( ctx , next ) => { console . log ( "3" ) next () console . log ( "4" ) }) 但是最好在写中间件的时候使用 async/await。这样能保证中间件按顺序执行 app . use ( async ( ctx , next ) => { cons...
Post a Comment
Read more

前端 优化代码体积

当我使用npm run build的时候，项目构建了很久。所以考虑用create-react-app网站下面的工具来缩小代码体积  Analyzing the Bundle Size https://create-react-app.dev/docs/analyzing-the-bundle-size 更改完成后 npm run build npm run analyze 可以看到以下的图片: 其中main.js有1.57mb 然后起服务 serve -s build -l 8000 进入到首页之后，打开network，查看js，发现main.js有500kb。这个500kb是已经用gzip压缩过了，但是却还有这么大。500*3=1500说明源文件有1.5mb左右 其中, antd占了25%, recharts占了13%, react-dom占了7.6%，dnd-kit占了2.8% 其中recharts用于统计页面，dnd-kit用于拖拽排序-编辑器页面。 所以在加载首页的时候，先不加载编辑页面和统计页面的js的话，体积会小很多。 路由懒加载 因为项目中，体积占比最大的是Edit和Stat页面(编辑和统计页面)，所以考虑使用路由懒加载，拆分bundle，优化首页体积 router文件中，之前: import Edit from "../pages/question/Edit" ; import Stat from "../pages/question/Stat" ; 现在： const Edit = lazy (() => import ( "../pages/question/Edit" )); const Stat = lazy (() => import ( "../pages/question/Stat" )); 为了让生成的文件更加可读，可以改成下面这样: const Edit = lazy ( () => import ( /* webpackChunkName: "editPage" */ "../pages/question/Edit" ) ); const Stat ...
Post a Comment
Read more

useMemo的使用场景

 useMemo是用来缓存 计算属性 的。 计算属性是函数的返回值，或者说那些以返回一个值为目标的函数。 有些函数会需要我们手动去点击，有些函数是直接在渲染的时候就执行，在DOM区域被当作属性值一样去使用。后者被称为计算属性。 e.g. const Component = () => { const [ params1 , setParams1 ] = useState ( 0 ); const [ params2 , setParams2 ] = useState ( 0 ); //这种是需要我们手动去调用的函数 const handleFun1 = () => { console . log ( "我需要手动调用，你不点击我不执行" ); setParams1 (( val ) => val + 1 ); }; //这种被称为计算属性，不需要手动调用，在渲染阶段就会执行的。 const computedFun2 = () => { console . log ( "我又执行计算了" ); return params2 ; }; return ( < div onClick = { handleFun1 } > //每次重新渲染的时候我就会执行 computed: { computedFun2 () } </ div > ); }; 上面的代码中，在每次点击div的时候，因为setParams1的缘故，导致params1改变，整个组件都需要重新渲染，也导致comptedFunc2()也需要重新计算。如果computedFunc2的计算量很大，这时候重新计算会比较浪费。 可以使用useMemo: const Com = () => { const [ params1 , setParams1 ] = useState ( 0 ); const [ params2 , setParams2 ] = useState ( 0 ); //这种是需要我们手动去调用的函数 const handleFun1 ...
Post a Comment
Read more

SSR vs CSR

CSR - Client side render SSR - Server side render 优点一: 性能好 优点二: 易于SEO搜索引擎优化 缺点: 开发成本高 (前端框架 + Node.js, 全栈) 应用场景:   1) 对性能要求高的系统，如移动端，弱网环境 2) 操作交互较简单的系统，否则复杂度会更高 如我的项目中的B端，不适合SSR，因为操作比较复杂 常见的SSR框架:  React - Next.js (Remix.js) Vue - Nuxt.js Next.js 安装: npx create-next-app@latest 启动: npm run dev or ------- npm run build npm run start ------- 创建一个简单的网页并且访问: 可以在pages目录下面创建about.tsx,就可以用过localhost:xxx/about来访问了 import Head from 'next/head' ; export default function About () { return <> < Head > < title > Create Next App </ title > < meta name = "description" content = "Generated by create next app" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link rel = "icon" href = "/favicon.ico" /> </ Head > < main > < p > hi </ p > </ main ><...
Post a Comment
Read more

useRequest 里面的loading是怎么实现的

useRequest function simplification function useRequest ( asyncFn , options ) { const [ loading , setLoading ] = useState ( false ); const run = async () => { setLoading ( true ); try { await asyncFn (); } catch ( error ) { // Handle error if necessary } finally { setLoading ( false ); } }; useEffect (() => { if ( options . manual ) { return ; // If manual option is true, don't trigger the request automatically } run (); // Trigger the request automatically }, []); return { run , loading }; } In this example, the useRequest hook uses the useState hook to manage the loading state, which starts as false . When the run function is called, it sets loading to true before executing the asyncFn asynchronously. After the asyncFn completes (either successfully or with an error), the loading state is set back to false using the finally block. The useEffect hook is used to automatically trigge...
Post a Comment
Read more