咖啡机（K.F.J）_社区达人页

2022年04月

• 04.25 15:23:55
  发表了文章 2022-04-25 15:23:55

  一张H5游戏页引起的思考

  最近开发了一个移动端的端午活动页面，做完后就想写点东西总结一下，感受最深的就是打草稿。 刚开始并没有打草稿，直接开干，越做到后面就越觉得代码很乱很杂，非常不舒服，做到哪个页面写这个页面的CSS，没有大局观。

  
• 04.25 15:17:27
  发表了文章 2022-04-25 15:17:27

  小身材大用途，用PrimusUI驾驭你的页面

  “PrimusUI”是自己在借鉴了如今网上很多开源的UI库，再经过自己整理加工的一个简单代码集合。

  
• 04.25 15:14:43
  发表了文章 2022-04-25 15:14:43

  输入URL到展现页面的全过程

  当我们在浏览器的地址栏输入 http://www.pwstrick.com ，然后回车，回车这一瞬间到看到页面到底发生了什么呢？

  
• 04.25 15:05:06
  发表了文章 2022-04-25 15:05:06

  实践一下前端性能分析

  最近在读一本经典书《高性能网站建设进阶指南》。 虽然书籍很多年前就出版了，但里面的内容还是耐人寻味，这次就好好的实践了一下。 纸上得来终觉浅，绝知此事要躬行，实践中将会发现一些问题。 有个官方网址《Even Faster Web Sites》，点击“Run the Examples”按钮，就能进入在线demo。 在Github上面有个叫awesome-wpo的项目，里面记录了各个方面关于性能的资源，有书籍、文章、工具等。 下面所有的实验都是在Chrome 49浏览器中执行的。

  
• 04.25 14:43:55
  发表了文章 2022-04-25 14:43:55

  用jekyll制作高大上的网站（二）——实际应用

  最近公司要制作个文档库，直接就可以将jekyll应用到实际中。 模版使用了Jekyll Clean，这么模版相对内部简单一点，学习成本不会很大，而复杂的Minimal Mistakes就当作参考。 模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点，我就直接将Bootstrap官网中的CSS和JS拉了下来。

  
• 04.25 14:39:25
  发表了文章 2022-04-25 14:39:25

  用jekyll制作高大上的网站（一）——安装与配置

  很多人会制作自己的主页，页面美观简洁，一直很在意是怎么做的。 最近公司需要做个文档库的主页，就研究了一些开源的工具，后面发现了jekyll（读杰克尔），将纯文本转换为静态博客网站。

  
• 04.25 14:32:53
  发表了文章 2022-04-25 14:32:53

  CSS3中惊艳的gradient

  以前曾经记录过linear-gradient（线性渐变）和 radial-gradient（径向渐变）的语法。 可以参考《CSS3中border-radius、box-shadow与gradient那点事儿》

  
• 04.25 14:24:03
  发表了文章 2022-04-25 14:24:03

  制作动画或小游戏——CreateJS事件（二）

  在Canvas中如果要添加事件，就需要计算坐标来模拟各种事件，而EaselJS中已经封装好了多个事件，只需调用即可。

  
• 04.25 14:19:57
  发表了文章 2022-04-25 14:19:57

  制作动画或小游戏——CreateJS基础类（一）

  前面曾经记录过Canvas的基础知识《让自己也能使用Canvas》，在实际使用中，用封装好的库效率会高点。 使用成熟的库还能对基础知识有更深入的理解，CreateJS是基于HTML5开发的一套模块化的库和工具，有4个模块，github地址在这里。

  
• 04.25 14:16:06
  发表了文章 2022-04-25 14:16:06

  订制DOM选择器

  本来是打算参考zepto.js，然后将里面想要的部分抽出来做函数，随调随用。 但后面发现这种写法重复代码太多，代码不整洁，于是就打算模仿下zepto的写法，挑出些比较实用的方法，造一下轮子。

  
• 04.25 14:12:27
  发表了文章 2022-04-25 14:12:27

  图片预加载与懒加载

  前面做了个招聘页面，里面有大量的图片需要加载。 一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。

  
• 04.25 14:10:08
  发表了文章 2022-04-25 14:10:08

  用CSS3动画，让页面动起来

  以前就听说过有个库，叫animate.css，但是自己并没有在实际项目中使用过，这次正好要做个招聘页面，得以利用一下这个库，在经常会卡顿的UC浏览器中也能流畅执行。

  
• 04.25 14:07:17
  发表了文章 2022-04-25 14:07:17

  制造自己的榫卯

  榫卯（sǔn mǎo），是古代中国建筑、家具及其它器械的主要结构方式，是在两个构件上采用凹凸部位相结合的一种连接方式。

  
• 04.25 13:48:47
  发表了文章 2022-04-25 13:48:47

  让自己也能使用Canvas

  <canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。

  
• 04.25 13:42:17
  发表了文章 2022-04-25 13:42:17

  自制 移动端 纯原生 Slider滑动插件

  在Google搜关键字“slider”或“swiper”能找到一大堆相关插件，自己造轮子是为了能更好的理解其中的原理。

  
• 04.25 13:39:09
  发表了文章 2022-04-25 13:39:09

  CSS3动画几个平时没注意的属性

  一开始在使用CSS3的时候并没有太注意这个timing-function，只是注意到自定义贝塞尔曲线。

  
• 04.25 11:55:45
  发表了文章 2022-04-25 11:55:45

  移动开发屏幕适配分析

  我在开发前端的时候曾经会有几个疑惑

  
• 04.25 11:41:58
  发表了文章 2022-04-25 11:41:58

  CSS3伸缩盒Flexible Box

  这是一种全新的布局，在移动端非常实用，IE对此布局的相关的兼容不是很好，Firefox、Chrome、Safrai等需要加浏览器前缀。

  
• 04.25 11:31:40
  发表了文章 2022-04-25 11:31:40

  移动端图片操作（二）——预览、旋转、合成

  在上一节中已经提到了预览，预览可以通过data: URL格式或URL对象。

  
• 04.25 11:26:47
  发表了文章 2022-04-25 11:26:47

  移动端图片操作（一）——上传

  上传我们一般都是用“input[type=file]”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到File对象。

  
• 04.25 11:20:52
  发表了文章 2022-04-25 11:20:52

  实现tap的多种方式

  这是一个比较轻量的插件tap.js，142行代码，支持模块化开发。

  
• 04.25 11:15:58
  发表了文章 2022-04-25 11:15:58

  Hammer.js分析（四）——recognizer.js

  不同识别器会使用不同逻辑，根据从相关Input类获取到的事件对象和事件，实现自定义的触屏事件，例如tap、pinch等。

  
• 04.25 11:11:07
  发表了文章 2022-04-25 11:11:07

  Hammer.js分析（三）——input.js

  input.js是所有input文件夹中类的父类，浏览器事件绑定、初始化特定的input类、各种参数计算函数。 Input父类和其子类就是在做绑定事件，各种参数计算、整合、设置等返回自定义事件对象，交给识别器的相关对象使用。

  
• 04.25 11:07:17
  发表了文章 2022-04-25 11:07:17

  Hammer.js分析（二）——manager.js

  “Manager”是所有识别器实例的容器，它为你设置的元素安装了交互事件监听器，并设置了触摸事件特性。 manager.js中的代码会涉及到input.js和recoginzer.js中的内容，这里会先做大致的流程分析，具体分析会在接下来的文章中详谈。

  
• 04.25 11:04:46
  发表了文章 2022-04-25 11:04:46

  Hammer.js分析（一）——基础结构

  从github上面将源码下载下来，会发现有个src文件夹。当前版本是2.0.6。

  
• 04.25 10:59:57
  发表了文章 2022-04-25 10:59:57

  触屏touch事件记录

  一开始并没有用这个调试，不过后面需要多点触碰，可chrome模拟器中我没看到这个功能。突然看到了Remote Debugging，网站需要FQ才能浏览。

  
• 04.25 10:33:41
  发表了文章 2022-04-25 10:33:41

  前端自动化构建工具gulp记录

  通过nodejs的npm安装gulp，插件也可以通过npm安装。windows系统是个.msi工具，只要一直下一步即可，软件会自动在写入环境变量中，这样就能在cmd命令窗口中直接使用node或npm指令。

  
• 04.24 22:10:37
  发表了文章 2022-04-24 22:10:37

  《从程序员到项目经理》内容记录

  1. Why ——为什么干这事儿？（目的） 2. What ——什么事情？（对象） 3. Where ——在什么地方执行？（地点） 4. When ——什么时候执行？什么时候完成？（时间） 5. Who ——由谁执行？（人员） 6. How ——怎样执行？采取哪些措施执行？（方法）

  
• 04.24 22:07:42
  发表了文章 2022-04-24 22:07:42

  JavaScript中Promises/A+规范的实现

  Promises是一种异步编程模型，通过一组API来规范化异步操作，这样也能够让异步操作的流程控制更加容易。

  
• 04.24 22:04:45
  发表了文章 2022-04-24 22:04:45

  jQuery中的Sizzle引擎分析

  　我分析的jQuery版本是1.8.3。Sizzle代码从3669行开始到5358行，将近2000行的代码，这个引擎的版本还是比较旧，最新的版本已经到v2.2.2了，代码已经超过2000行了。并且还有个专门的Sizzle主页。

  
• 04.24 21:59:25
  发表了文章 2022-04-24 21:59:25

  PHP类的原理

  类的内部存储结构

  
• 04.24 21:22:21
  发表了文章 2022-04-24 21:22:21

  PHP变量和数据类型

  1.静态类型语言，比如：C/Java等，在静态语言类型中，类型的检查是在编译期(compile-time)确定的。 2. 动态语言类型，比如：PHP，python等各种脚本语言，这类语言中的类型是在运行时确定的。 3. 无类型语言，比如：汇编语言，汇编语言操作的是底层存储，他们对类型毫无感知。

  
• 04.24 21:18:34
  发表了文章 2022-04-24 21:18:34

  PHP代码的执行

  先看下PHP的结构图

  
• 04.24 21:16:07
  发表了文章 2022-04-24 21:16:07

  前端面试题目搜集

  最近读到一本与前端面试有关的书《前端程序员面试笔试宝典》，里面的内容很多都是高频的面试题，在此推荐给各位网友。

  
• 04.24 20:52:57
  发表了文章 2022-04-24 20:52:57

  JavaScript中事件处理

  不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
• 04.24 20:48:36
  发表了文章 2022-04-24 20:48:36

  JavaScript中typeof、toString、instanceof、constructor与in

  JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

  
• 04.24 20:44:13
  发表了文章 2022-04-24 20:44:13

  PHP面试题目搜集

  搜集这些题目是想在学习PHP方面知识有更感性的认识，单纯看书的话会很容易看后就忘记。 曾经看过数据结构、设计模式、HTTP等方面的书籍，但是基本看完后就是看完了，没有然后了，随着时间的推移，也就渐渐忘记了。

  
• 04.24 20:41:33
  发表了文章 2022-04-24 20:41:33

  PHP中MySQL操作

  本次使用的demo是MySQL的示例数据库employees，点击下载地址，注意在导入的时候，在employees.sql文件中，将source改成你当前的目录。

  
• 04.24 20:30:30
  发表了文章 2022-04-24 20:30:30

  JavaScript与PHP中正则

  有个在线调试正则的工具，点击查看工具。下面的所有示例代码，都可以在codepen上查看到。

  
• 04.24 20:24:33
  发表了文章 2022-04-24 20:24:33

  赚点微信页面外快的一点记录

  最近做了个移动页面的外包，写下来，页面布局感觉是比PC页面简单一点。 不像PC页面内容那么多，而且PC端的浏览器比较多，这边的话，我就考虑的比较少。 最后在页面写完后自己整理了两个小插件分别是弹出框zDialog和表单验证zValidate。

  
• 04.24 19:30:04
  发表了文章 2022-04-24 19:30:04

  CSS3中border-radius、box-shadow与gradient那点事儿

  border-radius用于添加圆角边框，用处非常广泛。

  
• 04.24 19:07:47
  发表了文章 2022-04-24 19:07:47

  JavaScript中尺寸、坐标

  测试环境是IE8，Chrome38，Firefox40，下面是全局通用脚本打印代码

  
• 04.24 19:03:22
  发表了文章 2022-04-24 19:03:22

  grape动态PHP结构（三）——API接口

  这里的v1、v2就是模块，由于客户端版本一直在迭代的，那么一些老版本的客户端调用的接口就得保留起来，使得兼容。新版本就直接调用新接口。

  
• 04.24 19:00:16
  发表了文章 2022-04-24 19:00:16

  grape动态PHP结构（二）——管理后台

  indexController.php中写了些简短的demo，引用dao层、调用rpc、测试调用等。

  
• 04.24 18:55:41
  发表了文章 2022-04-24 18:55:41

  grape动态PHP结构（一）——目录结构与配置文件

  结构的名字grape，中文名叫葡萄，因为最近一个同事经常带葡萄到公司给我们吃，受到启发想到了这个名字。

  
• 04.24 18:53:22
  发表了文章 2022-04-24 18:53:22

  微信公众平台开发（四）——微信支付

  公众号中的微信支付需要通过JS来实现。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
• 04.24 18:51:27
  发表了文章 2022-04-24 18:51:27

  微信公众平台开发（三）——二维码、创建菜单

  临时二维码，是有过期时间的，最长可以设置为在二维码生成后的7天（即604800秒）后过期，但能够生成较多数量。临时二维码主要用于帐号绑定等不要求二维码永久保存的业务场景

  
• 04.24 18:50:00
  发表了文章 2022-04-24 18:50:00

  微信公众平台开发（二）——access_token、日志

  微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息。

  
• 04.24 18:48:23
  发表了文章 2022-04-24 18:48:23

  微信公众平台开发（一）——配置、请求

  WEIXIN_APPID：应用ID WEIXIN_APPSECRET：应用密钥 进入到公众平台首页，点击开发者中心，赫然就能看到，配置页面中的，这两个默认就是有的。

  
• 04.24 18:43:19
  发表了文章 2022-04-24 18:43:19

  PC网站CSS分享

  每次写CSS，总感觉不用写那么多CSS，但是精简的时候， 又难以下手。越写越觉得代码越来越多，越来越乱，所以这次我打算整理出一套比较灵活的结构，供以后使用。