我也要用
DHTML & H5
sp42a
热爱 Web 开发
-
原创 用 TypeScript 写一个轻量级的 UI 框架之六：widget 篇
JavaScript 最初的使命是什么？就是搞“动态页面 DHTML（Dynamic HTML）”。DHTML 是个上古的词汇，widget 也不年轻了，不过还是能达意，就把它作为包名吧——意思为页面用的小控件。2021-02-02 23:02:48
72
1
-
原创 关于 Vue + TypeScript 组件化的一点思考
前面说过，组件化是使用 Vue 引入之后带来的一大优点。未有 Vue 之前——那个年代——苦苦寻思没有一个好的组件化方案。在当初 JavaScript 连类都尚未健全的情况下，真是费煞了苦心，最简单的“对象”是有了，可那不能构建复杂的大型 UI 系统，颗粒度太低了。对象、组件的关系，一小一大分别自然很清楚。那么加多一个“类 Class”呢？你能理清楚这些名词的关系吗？面向对象与组件有什么区别与联系呢？其实不清楚没啥关系。码多了，你自然明白：）。关于 JS Class，我写过不少博文（https://blo2021-02-02 16:52:32
297
6
-
原创 用 TypeScript 写一个轻量级的 UI 框架之五：xhr 模块
关于 XHR（XMLHttpRequest），就是 AJAX程序。既然为 AJAXS程序，自然少不了 XHR 的调用。在我之前的累积基础上，升级代码到 ts。《用 XHR + curl.exe 制作 ddns 客户端札记》（https://blog.csdn.net/zhangxin09/article/details/6740558）《简易封装 XHR：支持 GET/POST/PUT/DELETE/JSONP/FormData》（https://blog.csdn.net/zhangxin09/ar2021-01-18 22:16:25
70
0
-
原创 用 TypeScript 写一个轻量级的 UI 框架之四：base 模块
Base 模块是框架的底层基础库，主要三大模块 prototype.ts 原型扩展、aj.ts 基础工具函数、xhr.ts Ajax 远程请求，下面我们分别探讨。原型扩展虽然说 Vue 框架下应该远离 DOM 操作，但也不是说一丁点的也不用写，我们还是可以精简出几个较为常用的 DOM 方法，安排在对象原型（prototype）的扩展中。源码在 https://gitee.com/sp42_admin/ajaxjs/blob/master/aj-ts/src/base/prototype.ts。Css2021-01-18 16:49:19
92
0
-
原创 用 TypeScript 写一个轻量级的 UI 框架之三：库描述文件与 namespace
TypeScript 倡导我们使用类型，顾名思义“类型的（Type）”、“脚本（Script）”。一般而言脚本语言追求轻便快捷，多数是无类型或弱类型的。然而在 ts 中要贯彻类型的思想，不仅是语言本身的一个飞跃，也是我们开发者自身要适应和理解必由之路。ts 在添加新特性的同时，仍向下兼容旧有的方式。最简单地说，你可以把旧的 js 代码一行不改，复制到 ts 文件中进行编译，编译器不会因为其中的错误中止编译（会提示或者警告，可忽略的）。并不是说我们忽略那些编译警告，不做 js 代码的升级，而是那样子允许了我们2021-01-18 13:17:16
67
0
-
原创 用 TypeScript 写一个轻量级的 UI 框架之二：项目结构、构建
模块管理一个框架或者库，自然有些纲领性的内容先要谈谈，这里就展开为大家介绍。用不用包管理？答案是否定的。对此，我们沿用老一套的做法，浏览器直接 <script src="xxx.js"> 引入 *.js 文件。但不代表不使用模块化管理，一个 ts 文件就是一个类，一个小模块，一个文件夹就是一个大模块。对于页面引用，你要确保所依赖的模块有哪些，然后通过 <script src="xxx.js"> 引入。这听上去很落后，也很原始，也可能会吓跑初来乍到想了解的朋友，但请君少安毋躁，且2021-01-15 21:40:01
95
2
-
原创 用 TypeScript 写一个轻量级的 UI 框架之一、开篇
导言最近感觉单纯 JavaScript 越来越不能胜任稍大型一点的项目，原因在于 JS 缺乏强类型支持，等于在代码层面少了一个辅助提示的功能，不能说明那个变量或者对象具体是什么，当然你可以通过为其添加注释或者，起一个更好的变量名，来给予代码维护者更多的信息。但是，这不是严格的约束，对于工程性而言简直不能称得上是有效的模式。于是很自然地我们青睐于类似 Java 那般类型安全语言实现强类型要求，不仅获得编码阶段的类型检查，而且在编译的时候能够减少错误，更有价值的在处于维护阶段的代码，强类型会使得代码更健壮和可2021-01-11 10:54:53
139
2
-
原创 纯 Eclipse 下的前端开发环境
为了不过多涉及前端复杂的内容，于是打算全部在 Eclipse 下完成编码、打包、构建的工作。后端 HTML 的输出由 Java 控制，这本身没问题，头痛的是 JavaScript 和 CSS。经过一段时间的摸索，我找到对应的方法，运行良好——但必须指出，现在已经有更好的方法代替了。所以现在只是想通过本文把那些经验记录下来，毕竟也算原创的一种方法。下面分别说说怎么来对待处理。JS首先我们期望的风格是越简单越好，于是采用最简单的页面 <script src="xxx.js" />引入方式。2021-01-09 22:32:03
59
0
-
原创 Gulp.js 探险
安装按照官网介绍进行安装（https://gulpjs.com/docs/en/getting-started/quick-start）。npm install --global gulp-cli打包多个 js 为 一个安装指定的文件顺序打包，这需要 gulp-concat 插件，安装：npm install --save-dev gulp-concat命令说明：–save-dev 该指令参数 ，将该包到信息保存到项目配置文件 package.json 文件的开发环境依赖中。测试cons2021-01-09 22:14:11
52
0
-
原创 用 TypeScript + Vue.js 打造一个渐现 Banner 组件
渐现 Banner，也是轮播图的一种。现在我们用 Vue.js 组件封装它，而且是 TypeScript 语法的。本组件不依赖其他库或者函数。2020-12-31 19:45:51
70
0
-
原创 六行代码写个 Tab 控件
其实之前的方法都不是太聪明（例如我写过的《Vue Tab 组件再探究》），个人认为这种方法，区区六行代码，搞定！changeTab = function(e) { var old = aj('.show'); old.classList.remove('show'); old.classList.add('hide'); var el = aj('.config-tab-' + e.selectedIndex); el.classList.remove('hide'); el.classL2020-07-18 22:33:25
146
0
-
原创 Java 压缩/混淆 JavaScript 代码
基本上都是自己写的工具构建前端工程，压缩/混淆 JavaScript 代码的工具必不可少。我们是 Java 平台的，就是说用 Java 去压缩 JS，这样比较方便。虽然咱们可以外部调用 node 等专门的前端构建工具，但那样不省事，能在 Java 圈子里面搞定就行，我们不搞太复杂的。好~闲话不多说，先看看低配版的。低配版这个低配版就几个函数组成，没以前来其他第三方的包，故称为“低配版”。简单实用也可以，我也用了很久。/** * This file is part of the Echo Web Ap2020-05-10 19:35:19
579
0
-
翻译 你可能不需要一个 JavaScript 框架（二）
你需要的，还是 JavaScript 和 Web API。我希望阁下可以看看 Web API (detailed)，快速浏览一下然后回到本文。2016-11-22 21:02:23
1216
0
-
翻译 你可能不需要一个 JavaScript 框架（一）
我并不打算写一篇类似于《为何 JavaScript 社区如此不堪》的文章那是因为我觉得真没必要。只是我认为事情本来就很简单，而且以“就地取材”的方式去做事情也确实十分有趣。下面我就为您一一娓娓道来，到底 Web API 和原生 DOM 有多简单和多强大。2016-11-09 10:01:27
1071
0
-
原创 遍历 DOM 注意点
在实现一个清理 HTML 冗余标签（word 粘贴过来的）功能，最简单的，莫过于： // MSWordHtmlCleaners.js https://gist.github.com/ronanguilloux/2915995 cleanPaste : function(html) { // Remove additional MS Word content html = h...2019-01-29 18:06:51
452
0
-
原创 高级网页动画制作
现今浏览器如此地强大，以至不同形式的网页形式缤纷而至，例如动画就是必不可少的一环。早期有全站 Flash 技术制成的，现今则是多种技术混合在内，包括 CSS3+Canvas + SVG，甚至利用 AE（Adobe After Effects）强大的滤镜所做的动画都可以搬到上来。关于 AE 技术的转换，笔者早期学习 Web 时就了解过，当时是 AE 可以转换为 Flash 动画的，体积比较大的说。...2019-05-15 16:57:23
269
0
-
原创 HTML5 Polyfill 向下兼容
开门见山，要点如下：向 H5 标准靠拢，不搞自己的 API/DSL，浏览器不兼容的就作 Polyfill 处理。这就考验 Polyfill 的能力了。原生实现，不依赖三方库表单数据 FormData直接发 FormData 会以 FormData 形式 POST，感觉不是太适合 /** * 表单序列化，兼容旧浏览器和 H5 FormData，返回 JSO...2018-08-02 12:56:10
679
0
-
原创 前端新知
Vue点击事件解决300ms问题https://www.cnblogs.com/JRliu/p/5972068.htmlhttps://github.com/qingyangmoke/vue-plugin-touch/blob/master/src/VueTouch.jshttps://blog.csdn.net/qq_34986769/article/details/62046...2018-09-12 22:18:39
295
0
-
原创 学习用 JS/CSS 画一个时钟
看到某君的时钟 Clock 代码 https://www.cnblogs.com/xingzhi/archive/2011/04/16/2017645.html，想学习怎么画一个时钟，逐重构之，也里面不合理的地方改进（例如用 js 写 css）。全部代码如下：<html><head> <meta charset="utf-8" /> <title...2019-08-05 21:42:44
767
0
-
原创 H5 动画大师 TweenMax.js/GSAP
手写过 CSS3 做 H5 动画，那过程很累，很低级。于是这次改用 TweenMax 库，感觉非常不错，原来它是做动画的老行尊，失敬失敬，早在 Adobe Flash 时代，这款就是知名的类库，知道现在还可以在其 GitHub 上找到它的 ActionScript 2/3 的开源代码，怪不得现在转到 JS 上面来，都那么的成熟。官网：https://greensock.com/源码：http...2019-12-06 17:42:27
530
0
-
原创 《高效的JavaScript代码编写技巧》阅读笔记
《高效的JavaScript代码编写技巧》虽然是不算长的网上文章，但却是非常好的讲述。作者围绕了如何更高效地进行 DOM 操作，作出多方面、有经验的分析与总结。有的是语言编码的技巧（如循环），有的是浏览器本身不足而去要克服的问题，有的是常见的陷阱，要我们如何去注意并规避之。更重要的是，作者不但陈述了问题的现象，在列出解决问题方法的同时，还事先给出错误的实例，反面的示例，以让读者更好地对比，通过“比2011-09-03 12:46:43
3268
1
-
原创 利用 hover 伪类创建纯 CSS 收缩面板
这是一个非常简单的例子，主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时，该元素会产生高亮的效果。所谓“高亮”，仅仅是我们想定义的这样子。具体是什么效果随便我们而定。CSS 选择符的写法为“ 元素: hover { ……（欲变化的样式）……}。常常使用 hover 的一个地方就是 a 元素，也就是定义鼠标移至 a 元素的样式。把 hover 推广到其他非 a 元素当然也可以。我们这个收缩面板，主要就是使用到了这个 hover 会动态变化的特性。2013-12-29 21:47:03
4922
0
-
原创 CSS 3 Keyframes 把玩
上周学习了利用 CSS3 来制作页面动画，完成了下载页面动画的开发。按照需求要实现“渐显 FadeIn”的效果。2015-05-18 17:38:47
4527
0
-
原创 页面效果简单做（一）
简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用第三方库即可完成（浏览器原生），简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。2015-09-16 15:42:57
2907
0
-
原创 最近移动前端项目中遇到的两个坑
尽管要多加避免，但还别说，坑还真得常踩常有，不要以为手机端都是 Webkit 的天下就简单，不用处理浏览器之间的兼容问题，——其实不一致性的问题还是挺大的。2016-01-08 00:25:13
3624
0
-
原创 HTML5 播放器心得与小结
随着 HTML5 的普及，越来越多视频网站使用 <video></video> 标签播放直播、点播内容（如下图所示）。使用 <video> 的好处，主要以下两点：可以直接在页面中播放，也就是所谓的“区域播放”，上半屏是视频播放，下半屏是其他内容，可以一边播放，一边看其他内容；某些应用如微信朋友圈的 Webview 限制外部打开视频，这样要在微信推广的话，区域播放就迫切需要了。2015-04-20 10:32:26
20712
9
-
原创 为旧浏览器添加新特性
理论上如果浏览器的库功能足够强大，是完全可可以代替第三方的库。事实上各家浏览器都在不断增强自家浏览器的特性一些群众呼声较高的功能或者 API 已经早早加入到浏览器标准规范中，直接调用即可。问题是，许多客户因为种种原因没有升级它们的浏览器，造成开发者面对此类的问题时候，只能采取第三方库或“打补丁”的方式兼容，所谓”Polyfill“ 正是如此。笔者较倾向于“打补丁”的方式，也就是编写补丁的时候，其接口尽量与标准规范的一致。这样的好处当然是兼容了新的通用方式，API 更显一致。2013-12-30 13:19:15
4641
2
-
原创 简易封装 XHR：支持 GET/POST/PUT/DELETE/JSONP/FormData
AJAX 就是 XHR 的应用，无需多说。请看看小弟我第 N 次的封装工作。2017-12-23 12:19:52
1458
0
-
原创 利用 JavaScript 快速切换正体中文和简体中文
一般商业网站都有一个语言的需求，就是为了照顾使用正体中文的国人，会特地提供一个切换到正体中文的选项（或曰“繁体中文”）。传统做法是在服务端完成的，即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法，不是在服务端而是利用前端的 JavaScript 就可以切换正体中文。大概六年前我还专门写过这议题的博文，这篇也是奠基在那篇文章（旧文也是参考了一高手代码）之上，《对 JavaScri2016-03-06 20:15:36
10564
2
-
翻译 你可能不需要一个 JavaScript 框架（三）
HTTP/2HTTP 协议已重写。这已不是文本的协议，而是二进制的。二进制协议更加高效，并且不易出错。HTTP/2连接也是多路复用的，简单地说 - 允许你在一个连接中同时传输多个响应。The HTTP-protocol has been completely rewritten. The protocol is no longer textual, but binary. Binary proto2018-01-28 09:26:05
546
0
-
原创 关注可视化H5设计（待补充……）
需求简单的表单设计。可自由拖拉的控件，简单易操作，快速创建专属于你的表单，满足数据收集需求。让你的制表功力，漂亮的不像实力派！丰富的表单模版。丰富的云表单库中有上万种表格模版供你选择，什么报名表、登记表、反馈表、邀请函、网络订单等各类表单应有尽有。一键启用，稍加修改后就可以为你所用。参考：http://maqetta.org/ 13年已经不更新了，基于 DojoJQuery2018-02-06 10:17:26
808
2
-
原创 JavaScript 合并 Table 单元格简单做
标签初步分析HTML Table 元素允许合并单元格。通常手写代码比较“反人类”思维，于是还是通过直观的可视化的工具来完成，例如奉为经典的 Dreamweaver。研究代码，td 行元素有一 rowspan 跨行的属性，表示跨行行数。如果当前这样有 x 个跨行，那么下面 tr > td （一共 x 行）中的每一行都可以少出现一个 td。如上图，上面有 rowspan 的 tr 的，...2019-05-14 18:42:06
1210
0
-
原创 解决 iOS 8 WebView 不能呼叫客户端的问题
在客户端中嵌入一个 WebView 来引用网页非常常见。当前项目没有使用 phonegap，而是自己写了个 iframe 传递参数（原理与 phonegap 类似）。 但是升级到 iOS8 之后，却忽然打不开了。Obj-C 层并没有拦截这个 bar:// 请求。后来经过排查，是 bar:// 这段 URI 没有 URL 编码的缘故。解决办法是 encodeURIComponent JSON 参数即可。估计是 Apple 方面为了堵住什么安全漏洞所以要求 URL 编码的。2015-06-15 11:12:31
1602
1
-
原创 早期 Web 控件的尝试
首先说说怎么让浏览器出现滚动条？最普遍的一种的描述是，内容足够长的话，浏览器便会自动出现滚动条，也就是说，内容长度与容器长度是有密切关系的，一旦容器高度小于实际内容长度（高度）的时候，浏览器应该出现滚动条，以便让用户翻滚内容，——无论是 X 方向抑或 Y 的方向。控制容器高度，可以是通过拖放容器控件来决定，也就是 resize 事件；另外一种便是写死容器的高度，譬如某个 DIV，我定义其 height : 200px 高度，而实际内容超出 200px， 很自然要出现滚动条。滚动条是一旦内容超长的话便会出现2009-09-22 10:24:00
1448
0
-
原创 竟有如此缤纷的 AIR 学习指导：推荐《Adobe AIR 完整入门与开发实录》
AIR一方面提供与Flash等量齐观的API，一方面拥抱市场上大批的 UI 框架，如何将这二者合二为一将对开发者的参考价值很大。教学第一，该书不是API文档乏味的复述，并有大量的例子与视频教学，学习AIR起来就可达到事半功倍的效果。实际上，AIR横跨Flex与Ajax的解决方案已为许多项目所青睐，甚至一些项目就是这两种方案混搭而成的。如果你想打造全方位的AIR的应用程序，又想轻松地透过视频、例子的学习，该书是您的首选！2009-09-20 21:40:00
1897
0
-
原创 如何调试 Android 手机网页
兵马未动，粮草先行。安排好 debug 工作的道理也一样，调试的基本工作务必先于开发之前搞得好，不然后果很严重……！哈哈，这样的开场白太那个了……其实实不相瞒，俺的实际情况是，到项目后期才懂得那么一点页面调试手段，之前怎么弄……不怕见笑，还是 console.log/alert 几招，甚至几招都算不上，，好原始的说……嗯，少废话，来上货，，2012-10-13 22:31:45
34806
9
-
原创 检测桌面浏览器的初步想法
必须指出，实际上并没有一种确切的方法可以判定终端是否一个桌面浏览器，但是，我们总是可以把多种条件的组合一起去检查，进而来综合判断出，对方终端是否一个非移动类型的终端。2012-11-29 23:05:37
1388
0
-
原创 关于 HTML5 调用用户的 照相机、相册 初步整理
我能找到的是 UC 插件平台（http://plus.uc.cn/document/plugin/doc1.html），当前只支持调用照相机，尚不支持调用相册。如文档截图（http://plus.uc.cn/document/plugin/doc11.html）：优点：UC浏览器比较流行缺点：局限性仍较大，仍然需要安装插件。插件以 apk 格式封装，故也只能应用于 安卓 平台上，iOS2014-07-28 09:48:02
49230
10
-
原创 记一次 JS 模拟 CSS active 效果的过程
所谓的界面触控效果，就是用户点下去的时候，界面立刻产生变化以反馈给用户知道：“ok，你点击的吩咐，我已晓得罗～”，也有人说“点击高亮的效果”。——毋庸置疑，这是人机交互中非常重要沟通手段，使用得也非常常见的。当时我要实现这效果的时候，自己还满认为，不就是网页上为链接加个 a:hover 效果嘛～链接不行的加个“图片翻转”不就可以了。——熟料，在移动终端上，花费的时间远超想像。首先，我倾向于采用纯样2012-12-03 22:23:47
16214
2
-
原创 简单制作网页分享按钮
话说这是一个人际互联的时候，SNS2014-07-18 22:26:45
4601
8