关注WEB前端技术_搜索引擎优化_网站建设 https://www.chenliqiang.cn/ 关注web前端技术_搜索引擎优化_网站建设 Wed, 11 May 2022 03:09:00 GMT http://hexo.io/ 如何打造一款简单易用的 React 状态管理工具 https://www.chenliqiang.cn/post/how-to-build-react-state-management-tool.html https://www.chenliqiang.cn/post/how-to-build-react-state-management-tool.html Thu, 21 Apr 2022 07:12:00 GMT 本文描述了如何从 0 到 1 打造一款基于 Redux 的轻量级并且简单易用的 React 状态管理工具 React https://www.chenliqiang.cn/post/how-to-build-react-state-management-tool.html#disqus_thread google web 前端性能优化指南（译） https://www.chenliqiang.cn/post/google-web-app-performance-guide.html https://www.chenliqiang.cn/post/google-web-app-performance-guide.html Thu, 22 Jul 2021 07:41:00 GMT 本文对 google 的 web 前端性能优化指南进行了翻译整理。整个性能优化的内容分为三个部分：加载性能、渲染性能和性能评估。 性能优化 https://www.chenliqiang.cn/post/google-web-app-performance-guide.html#disqus_thread 如何从零开始开发一个 node.js 命令行(cli)工具 https://www.chenliqiang.cn/post/node-js-cli-start-up.html https://www.chenliqiang.cn/post/node-js-cli-start-up.html Sat, 10 Oct 2020 07:12:00 GMT 本文描述了如何从零开始开发一个 node.js 的 cli 命令行工具的方法 前端工程化 https://www.chenliqiang.cn/post/node-js-cli-start-up.html#disqus_thread 浏览器API学习——BOM浏览器对象模型 https://www.chenliqiang.cn/post/browser-api-bom.html https://www.chenliqiang.cn/post/browser-api-bom.html Sun, 03 Feb 2019 06:22:45 GMT <p>window 对象是 BOM 的核心，可以控制窗口、框架和弹出窗口，也扮演着 ECMAScript 中 Global 对象的角色。</p> <p>定义全局变量与在 window 对象上直接定义属性的差别：全局变量不能通过 delete 操作符删除，而定义在 window 对象上的属性是可以的。</p> 浏览器 https://www.chenliqiang.cn/post/browser-api-bom.html#disqus_thread HTML学习之—语义化标签 https://www.chenliqiang.cn/post/html-semantics-tags.html https://www.chenliqiang.cn/post/html-semantics-tags.html Tue, 22 Jan 2019 02:58:37 GMT <p>在程序中, 语义 指的是一段代码的含义 — 例如 “运行这行代码会产生怎样的影响?”, 或者 “这个 HTML 的元素有什么作用，扮演了什么样的角色” (不只是 “它看上去像是什么?”。)</p> HTML https://www.chenliqiang.cn/post/html-semantics-tags.html#disqus_thread nginx安装、配置及支持https不完全手册 https://www.chenliqiang.cn/post/nginx-install-config-supoort-https.html https://www.chenliqiang.cn/post/nginx-install-config-supoort-https.html Sat, 14 Apr 2018 13:23:14 GMT <p><code>nginx</code> 已经成为 <code>web</code> 开发者不可或缺的工具，虽然平时我们用到的服务器，运维都已经帮我们安装配置好了 <code>nginx</code> ，但作为开发人员，掌握如何搭建和配置服务器环境，能让我们的工作更加得心应手。</p> 服务器 https://www.chenliqiang.cn/post/nginx-install-config-supoort-https.html#disqus_thread 不用create-react-app搭建基于webpack的react项目 https://www.chenliqiang.cn/post/webpack-react-without-create-react-app.html https://www.chenliqiang.cn/post/webpack-react-without-create-react-app.html Fri, 06 Apr 2018 07:59:49 GMT <p><code>create-react-app</code> 是由 <code>facebook</code> 官方出品的用于搭建 <code>react app</code> 项目的脚手架工具，非常强大且简单易用，无需配置就能搭建一个 <code>react app</code>。但也正是由于很多东西它都已经封装好了，而且配置文件还内置在了包里，在项目中不可见，对于很多新手而言，要理解这一套东西还是比较困难。</p> 前端工程化 https://www.chenliqiang.cn/post/webpack-react-without-create-react-app.html#disqus_thread 搭建一套好用的前端构建工具的方法 https://www.chenliqiang.cn/post/how-to-make-fe-scaffolding-good-to-use.html https://www.chenliqiang.cn/post/how-to-make-fe-scaffolding-good-to-use.html Sat, 10 Mar 2018 01:43:29 GMT <p>最近一直在折腾构建工具，主要针对以前的工程进行改造，尝试着能搭建一套比较好用的构建工具，在这个过程中也做了一些新的实践。下面我就来谈谈在这次改造中的心得体会，内容不局限于某一款构建工具，不管用 <code>webpack</code> 、 <code>JDF</code>、<code>gulp</code> 、<code>grunt</code> 还是我比较喜欢的 <code>fis</code>，都可以很容易地实现。</p> 前端工程化 https://www.chenliqiang.cn/post/how-to-make-fe-scaffolding-good-to-use.html#disqus_thread 用FIS3实现组件化及前后端共用模板的尝试 https://www.chenliqiang.cn/post/fis3-share-template-try.html https://www.chenliqiang.cn/post/fis3-share-template-try.html Sat, 10 Mar 2018 01:34:58 GMT <p>接触 FIS 也有段时间了，用得越久越能体会到它的强大。刚开始只是用 FIS2+swig 解决了作为一个切图仔长久以来模板复用的问题，后来涉及到了一些 JS 开发，于是用到了我厂的<a href="https://github.com/putaoshu/jdf">JDF</a>，基本上实现了组件化开发和前后端模板共用，前端模拟 velocity 语法，因为我厂后台统一使用 velocity 模板引擎。于是想到在 FIS 上试试，下面说说详细的尝试过程。</p> 前端工程化 https://www.chenliqiang.cn/post/fis3-share-template-try.html#disqus_thread requirejs压缩工具r.js的build.js配置详解 https://www.chenliqiang.cn/post/22.html https://www.chenliqiang.cn/post/22.html Thu, 08 Mar 2018 03:40:29 GMT <p>至于 requirejs 大家都是很熟悉的了，它的打包工具 r.js 是非常好用，也非常强大的，但是建于它的配置参数比较多，这里列出一份所有参数的中文详解，方便理解和记忆。</p> 前端工程化 https://www.chenliqiang.cn/post/22.html#disqus_thread css实现多行文字或者图片的垂直居中 https://www.chenliqiang.cn/post/16.html https://www.chenliqiang.cn/post/16.html Thu, 08 Mar 2018 03:37:46 GMT <p>CSS 实现单行文字在容器垂直居中大家都知道可以用 line-height。如果是多行文字且容器高度不固定倒也简单，直接用 padding 就解决了。我在这里主要说固定高度容器内多行文字的垂直居中，当然是要兼容几个常用浏览器了，其实主要还是 IE6、IE7 了。</p> CSS https://www.chenliqiang.cn/post/16.html#disqus_thread javascript原生实现自定义滚动条，支持鼠标滚轮 https://www.chenliqiang.cn/post/21.html https://www.chenliqiang.cn/post/21.html Wed, 07 Mar 2018 15:52:07 GMT <p>javascript 原生实现自定义滚动条，支持鼠标滚轮，自定义滚动条的样式，这是本人写的小封装之一，github：<a href="https://github.com/richardchen85/jScrollBar">https://github.com/richardchen85/jScrollBar</a></p> JavaScript https://www.chenliqiang.cn/post/21.html#disqus_thread C#.Net中使用WebBrowser请记得及时释放页面及缓存 https://www.chenliqiang.cn/post/20.html https://www.chenliqiang.cn/post/20.html Wed, 07 Mar 2018 15:48:56 GMT <p>最近在一个 C#.NET 项目中，需要一个 WebBrowser 去打开网页并显示其内容。操作很简单，这里就不具体说了，程序运行得很好，没有任何问题，于是放到服务器上。过了几天，悲剧发生了。</p> C# https://www.chenliqiang.cn/post/20.html#disqus_thread JavaScript著名的变量命名规则 https://www.chenliqiang.cn/post/19.html https://www.chenliqiang.cn/post/19.html Wed, 07 Mar 2018 15:47:21 GMT <p>这些命名方法不仅限于 JavaScript，在其它任何编程语言也比较适用。</p> <p>只是因为变量名的语法正确，并不意味着就该使用它们。变量还应遵守以下某条著名的命名规则：</p> JavaScript https://www.chenliqiang.cn/post/19.html#disqus_thread 给HTML元素分配与语义相关而不是表现相关的ID和类名 https://www.chenliqiang.cn/post/18.html https://www.chenliqiang.cn/post/18.html Wed, 07 Mar 2018 15:42:54 GMT <p>在给 HTML 元素分配 ID 和类名时，一定要尽可能保持名称与语义相关，例如，如果希望所有表单通知消息显示为红色，可以给他们分配类名为.warnning 或.notification，而不是给.red。</p> HTML https://www.chenliqiang.cn/post/18.html#disqus_thread object和embed的wmode属性对布局的影响 https://www.chenliqiang.cn/post/17.html https://www.chenliqiang.cn/post/17.html Wed, 07 Mar 2018 15:41:16 GMT <p>wmode 即窗口模式，总共有三个值，我们来看看 Macromedia 官方的说法：</p> CSS https://www.chenliqiang.cn/post/17.html#disqus_thread 如何写出切实有效的javascript代码 https://www.chenliqiang.cn/post/15.html https://www.chenliqiang.cn/post/15.html Wed, 07 Mar 2018 15:13:21 GMT <p>1、使用变量之前先申明它，未使用 var 申明的变量默认为全局变量，有可能造成冲突。</p> <p>2、使用分号“;”结束一语句。</p> JavaScript https://www.chenliqiang.cn/post/15.html#disqus_thread Photoshop CC也可以写CSS创建网页了 https://www.chenliqiang.cn/post/12.html https://www.chenliqiang.cn/post/12.html Wed, 07 Mar 2018 15:02:09 GMT <p>可能有人已经发现，在新版的 Adobe CC 系列产品中，已经找不到 Fireworks 身影，但是有了一个更加强大的 Photoshop CC 可取代 Fireworks。</p> CSS https://www.chenliqiang.cn/post/12.html#disqus_thread IE6中a:hover后面选择器样式无效的haslayout思考 https://www.chenliqiang.cn/post/11.html https://www.chenliqiang.cn/post/11.html Wed, 07 Mar 2018 09:56:44 GMT <p>今天在做一个 A 标签 :hover 时显示其子元素的一个效果，突然发现在 IE6 下面居然子元素不显示，后面想想应该是没有激活 layout 的原因。以前对 has layout 这个概念没有太在意，以为自己写的代码会尽量避免这个问题，但是今天还是遇到了，于下记下来，以免以后又忘记了。</p> CSS https://www.chenliqiang.cn/post/11.html#disqus_thread