zhangxin09的专栏

AJAX 风潮迅速席卷 web 开发，遗老遗少很不理解，认为 AJAX 开发的东西不够稳健，没有导航等等。和旧 web 开发相比，AJAX 最重要的改进恐怕是在浏览器上可以和 CS 一样，留有一份不被刷掉的内存数据。正因为有 AJAX，CS 传统的界面开发模式 MVC 可以顺利的转移至 web。

Vue.Draggable 为基于 Sortable.js 的 Vue 组件，用以实现拖拽功能。一般用法vuedraggable 新版本废弃了 options 属性，建议使用 v-bind 属性作为配置项HTML vs. Render VNode一开始，我用标签的方法，基本可以实现拖放，每处要拖放的地方，在子元素里面加多一层 <draggable /> 即可。因为组件嵌套组件，肯定涉及递归的概念。组件还好可以封装为 Vue 组件，从而实现递归，例如这个：<template&g

某些需求需要包含大量编辑控件的 table 列表界面，如下所示。默认下 table 包含 input 虽然有 v-model 但不是双向绑定的，不会同步到 list 数组的中的数据。需要自己通过事件同步修改。有两种方式实现，基于 render 渲染函数和 template slot 标签。/** * 列配置内容较多，故单独设一个类 */export default { data() { return { columns1: [

做前端的，如果你说专业做前端的，那么它的特点便是使用的技术多种多样，而且跨域性较大：有设计的、用用户体验分析系的，有编码开发的……显得斑驳庞杂。看似那么多的技术，作为前端人员，不能说都精通，但至少需要有所猎及，以便于“突击”，才称得上胜任。而所谓前端的“编码开发”又可以被认为是一个相当广泛的概念，同你所从事的工作过程中，很可能遇到的 css/js/as/sql 多种开发语言……可见作为前端开发人员，的确需要掌握许多技能。而其中的一环，正则表达式（RegExp），就是这么一个相当突出的一门本领，之所以形容为“

JavaScript 最初的使命是什么？就是搞“动态页面 DHTML（Dynamic HTML）”。DHTML 是个上古的词汇，widget 也不年轻了，不过还是能达意，就把它作为包名吧——意思为页面用的小控件。

前面说过，组件化是使用 Vue 引入之后带来的一大优点。未有 Vue 之前——那个年代——苦苦寻思没有一个好的组件化方案。在当初 JavaScript 连类都尚未健全的情况下，真是费煞了苦心，最简单的“对象”是有了，可那不能构建复杂的大型 UI 系统，颗粒度太低了。对象、组件的关系，一小一大分别自然很清楚。那么加多一个“类 Class”呢？你能理清楚这些名词的关系吗？面向对象与组件有什么区别与联系呢？其实不清楚没啥关系。码多了，你自然明白：）。关于 JS Class，我写过不少博文（https://blo

关于 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/ar

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。Css

TypeScript 倡导我们使用类型，顾名思义“类型的（Type）”、“脚本（Script）”。一般而言脚本语言追求轻便快捷，多数是无类型或弱类型的。然而在 ts 中要贯彻类型的思想，不仅是语言本身的一个飞跃，也是我们开发者自身要适应和理解必由之路。ts 在添加新特性的同时，仍向下兼容旧有的方式。最简单地说，你可以把旧的 js 代码一行不改，复制到 ts 文件中进行编译，编译器不会因为其中的错误中止编译（会提示或者警告，可忽略的）。并不是说我们忽略那些编译警告，不做 js 代码的升级，而是那样子允许了我们

模块管理一个框架或者库，自然有些纲领性的内容先要谈谈，这里就展开为大家介绍。用不用包管理？答案是否定的。对此，我们沿用老一套的做法，浏览器直接 <script src="xxx.js"> 引入 *.js 文件。但不代表不使用模块化管理，一个 ts 文件就是一个类，一个小模块，一个文件夹就是一个大模块。对于页面引用，你要确保所依赖的模块有哪些，然后通过 <script src="xxx.js"> 引入。这听上去很落后，也很原始，也可能会吓跑初来乍到想了解的朋友，但请君少安毋躁，且

导言最近感觉单纯 JavaScript 越来越不能胜任稍大型一点的项目，原因在于 JS 缺乏强类型支持，等于在代码层面少了一个辅助提示的功能，不能说明那个变量或者对象具体是什么，当然你可以通过为其添加注释或者，起一个更好的变量名，来给予代码维护者更多的信息。但是，这不是严格的约束，对于工程性而言简直不能称得上是有效的模式。于是很自然地我们青睐于类似 Java 那般类型安全语言实现强类型要求，不仅获得编码阶段的类型检查，而且在编译的时候能够减少错误，更有价值的在处于维护阶段的代码，强类型会使得代码更健壮和可

安装按照官网介绍进行安装（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 文件的开发环境依赖中。测试cons

渐现 Banner，也是轮播图的一种。现在我们用 Vue.js 组件封装它，而且是 TypeScript 语法的。本组件不依赖其他库或者函数。

其实之前的方法都不是太聪明（例如我写过的《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.classL

基本上都是自己写的工具构建前端工程，压缩/混淆 JavaScript 代码的工具必不可少。我们是 Java 平台的，就是说用 Java 去压缩 JS，这样比较方便。虽然咱们可以外部调用 node 等专门的前端构建工具，但那样不省事，能在 Java 圈子里面搞定就行，我们不搞太复杂的。好~闲话不多说，先看看低配版的。低配版这个低配版就几个函数组成，没以前来其他第三方的包，故称为“低配版”。简单实用也可以，我也用了很久。/** * This file is part of the Echo Web Ap

你需要的，还是 JavaScript 和 Web API。我希望阁下可以看看 Web API (detailed)，快速浏览一下然后回到本文。

我并不打算写一篇类似于《为何 JavaScript 社区如此不堪》的文章那是因为我觉得真没必要。只是我认为事情本来就很简单，而且以“就地取材”的方式去做事情也确实十分有趣。下面我就为您一一娓娓道来，到底 Web API 和原生 DOM 有多简单和多强大。

现今浏览器如此地强大，以至不同形式的网页形式缤纷而至，例如动画就是必不可少的一环。早期有全站 Flash 技术制成的，现今则是多种技术混合在内，包括 CSS3+Canvas + SVG，甚至利用 AE（Adobe After Effects）强大的滤镜所做的动画都可以搬到上来。关于 AE 技术的转换，笔者早期学习 Web 时就了解过，当时是 AE 可以转换为 Flash 动画的，体积比较大的说。...

开门见山，要点如下：向 H5 标准靠拢，不搞自己的 API/DSL，浏览器不兼容的就作 Polyfill 处理。这就考验 Polyfill 的能力了。原生实现，不依赖三方库表单数据 FormData直接发 FormData 会以 FormData 形式 POST，感觉不是太适合 /** * 表单序列化，兼容旧浏览器和 H5 FormData，返回 JSO...

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...

看到某君的时钟 Clock 代码 https://www.cnblogs.com/xingzhi/archive/2011/04/16/2017645.html，想学习怎么画一个时钟，逐重构之，也里面不合理的地方改进（例如用 js 写 css）。全部代码如下：<html><head> <meta charset="utf-8" /> <title...

手写过 CSS3 做 H5 动画，那过程很累，很低级。于是这次改用 TweenMax 库，感觉非常不错，原来它是做动画的老行尊，失敬失敬，早在 Adobe Flash 时代，这款就是知名的类库，知道现在还可以在其 GitHub 上找到它的 ActionScript 2/3 的开源代码，怪不得现在转到 JS 上面来，都那么的成熟。官网：https://greensock.com/源码：http...

随着 HTML5 的普及，越来越多视频网站使用 <video></video> 标签播放直播、点播内容（如下图所示）。使用 <video> 的好处，主要以下两点：可以直接在页面中播放，也就是所谓的“区域播放”，上半屏是视频播放，下半屏是其他内容，可以一边播放，一边看其他内容；某些应用如微信朋友圈的 Webview 限制外部打开视频，这样要在微信推广的话，区域播放就迫切需要了。

尽管要多加避免，但还别说，坑还真得常踩常有，不要以为手机端都是 Webkit 的天下就简单，不用处理浏览器之间的兼容问题，——其实不一致性的问题还是挺大的。

简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用第三方库即可完成（浏览器原生），简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。

《高效的JavaScript代码编写技巧》虽然是不算长的网上文章，但却是非常好的讲述。作者围绕了如何更高效地进行 DOM 操作，作出多方面、有经验的分析与总结。有的是语言编码的技巧（如循环），有的是浏览器本身不足而去要克服的问题，有的是常见的陷阱，要我们如何去注意并规避之。更重要的是，作者不但陈述了问题的现象，在列出解决问题方法的同时，还事先给出错误的实例，反面的示例，以让读者更好地对比，通过“比

理论上如果浏览器的库功能足够强大，是完全可可以代替第三方的库。事实上各家浏览器都在不断增强自家浏览器的特性一些群众呼声较高的功能或者 API 已经早早加入到浏览器标准规范中，直接调用即可。问题是，许多客户因为种种原因没有升级它们的浏览器，造成开发者面对此类的问题时候，只能采取第三方库或“打补丁”的方式兼容，所谓”Polyfill“ 正是如此。笔者较倾向于“打补丁”的方式，也就是编写补丁的时候，其接口尽量与标准规范的一致。这样的好处当然是兼容了新的通用方式，API 更显一致。

AJAX 就是 XHR 的应用，无需多说。请看看小弟我第 N 次的封装工作。

一般商业网站都有一个语言的需求，就是为了照顾使用正体中文的国人，会特地提供一个切换到正体中文的选项（或曰“繁体中文”）。传统做法是在服务端完成的，即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法，不是在服务端而是利用前端的 JavaScript 就可以切换正体中文。大概六年前我还专门写过这议题的博文，这篇也是奠基在那篇文章（旧文也是参考了一高手代码）之上，《对 JavaScri

HTTP/2HTTP 协议已重写。这已不是文本的协议，而是二进制的。二进制协议更加高效，并且不易出错。HTTP/2连接也是多路复用的，简单地说 - 允许你在一个连接中同时传输多个响应。The HTTP-protocol has been completely rewritten. The protocol is no longer textual, but binary. Binary proto

需求简单的表单设计。可自由拖拉的控件，简单易操作，快速创建专属于你的表单，满足数据收集需求。让你的制表功力，漂亮的不像实力派！丰富的表单模版。丰富的云表单库中有上万种表格模版供你选择，什么报名表、登记表、反馈表、邀请函、网络订单等各类表单应有尽有。一键启用，稍加修改后就可以为你所用。参考：http://maqetta.org/ 13年已经不更新了，基于 DojoJQuery

标签初步分析HTML Table 元素允许合并单元格。通常手写代码比较“反人类”思维，于是还是通过直观的可视化的工具来完成，例如奉为经典的 Dreamweaver。研究代码，td 行元素有一 rowspan 跨行的属性，表示跨行行数。如果当前这样有 x 个跨行，那么下面 tr > td （一共 x 行）中的每一行都可以少出现一个 td。如上图，上面有 rowspan 的 tr 的，...

上周学习了利用 CSS3 来制作页面动画，完成了下载页面动画的开发。按照需求要实现“渐显 FadeIn”的效果。

这是一个非常简单的例子，主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时，该元素会产生高亮的效果。所谓“高亮”，仅仅是我们想定义的这样子。具体是什么效果随便我们而定。CSS 选择符的写法为“ 元素: hover { ……（欲变化的样式）……}。常常使用 hover 的一个地方就是 a 元素，也就是定义鼠标移至 a 元素的样式。把 hover 推广到其他非 a 元素当然也可以。我们这个收缩面板，主要就是使用到了这个 hover 会动态变化的特性。

兵马未动，粮草先行。安排好 debug 工作的道理也一样，调试的基本工作务必先于开发之前搞得好，不然后果很严重……！哈哈，这样的开场白太那个了……其实实不相瞒，俺的实际情况是，到项目后期才懂得那么一点页面调试手段，之前怎么弄……不怕见笑，还是 console.log/alert 几招，甚至几招都算不上，，好原始的说……嗯，少废话，来上货，，

必须指出，实际上并没有一种确切的方法可以判定终端是否一个桌面浏览器，但是，我们总是可以把多种条件的组合一起去检查，进而来综合判断出，对方终端是否一个非移动类型的终端。

我能找到的是 UC 插件平台（http://plus.uc.cn/document/plugin/doc1.html），当前只支持调用照相机，尚不支持调用相册。如文档截图（http://plus.uc.cn/document/plugin/doc11.html）：优点：UC浏览器比较流行缺点：局限性仍较大，仍然需要安装插件。插件以 apk 格式封装，故也只能应用于 安卓 平台上，iOS

所谓的界面触控效果，就是用户点下去的时候，界面立刻产生变化以反馈给用户知道：“ok，你点击的吩咐，我已晓得罗～”，也有人说“点击高亮的效果”。——毋庸置疑，这是人机交互中非常重要沟通手段，使用得也非常常见的。当时我要实现这效果的时候，自己还满认为，不就是网页上为链接加个 a:hover 效果嘛～链接不行的加个“图片翻转”不就可以了。——熟料，在移动终端上，花费的时间远超想像。首先，我倾向于采用纯样

话说这是一个人际互联的时候，SNS

像在座阅读此文的读者一样，由于自身的兴趣，我对 AJAX 编程方面的研究是持续不断的。随着该领域的深入，我越来越发觉所谓的浏览器 DOM，即 HTML DOM，是一个非常值得关注的点。在与资深的技术人员们交换意见的时候，也曾谈到过这样的观点，就是关于 DOM Level1，我们仍然缺乏具有深度的、规范的辅助读物，而且网络上搜索也比较少见。我们真正的想法在于，工作的时候我们不仅仅是去翻阅工具库/AP