- 博客(46)
- 资源 (19)
- 收藏
- 关注
RSS订阅
原创 HTML5 单页应用/框架 - View.js介绍
什么是单页应用单页应用，是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用。换句话来讲，用户视觉效果，与技术实现的载体，并不是一定要一一对应的。采取哪种技术方案，取决于产品设计、技术组成以及方案之间的优劣平衡。 放到 Web 前端环境中，这个承载了多个视觉效果的载体，就是 html 文件（或 asp，jsp 等）。为便于描述，本文将使用多个术语。其名称及对应的含义如下所示：...
2017-09-21 11:52:28
23694
原创 gitignore 使用注意事项
a.txt 匹配任意目录下的 a.txtfoo/* 无法匹配子目录，因为 * 只匹配 “/” 外的任意多个字符已经被跟踪的文件，即使重新添加至 ignore 中也不会生效如果规则的开始或中间部分含有 “/” 符号，则以相对 .gitignore 父目录的方式，匹配对应的文件或目录。亦即 /a/b* 等同于 a/b*（中间有 “/”）。例如：doc/frotz/ 匹配 doc/frotz 目录, 但不匹配 a/doc/frotz没有以 “/” 结尾的规则同时匹配文件和目录；以 “/” 结尾的规则只匹.
2020-07-01 08:36:07
3280
原创 解决“输入框被虚拟键盘遮挡”问题的尝试
前言“输入框被虚拟键盘遮挡” 的问题，不少同学都遇到过。尤其是对于页面尺寸固定，且输入框只能显示在下半部分，甚至边缘位置的情况，遮挡现象会成为阻挡用户获得确定性或安全感的一大障碍。如果你想要简化问题处理，可以尝试与产品经理沟通，将输入框的呈现位置调整至页面的上半部分即可。但如果你并不想要绕过这个问题，想要和它磕一磕，就需要继续往下看，深入地了解这一问题。对比经对比，iPhone 上的输入框...
2020-01-11 17:22:05
2994
原创 如何批量引用脚本
背景使用 h5 开发大型应用程序时，必然会遇到页面需要加载大量脚本的需求。这些脚本通常可以按特定单位，如：局部模块，划分成多组。从解耦的角度上，我们可能需要在页面上声明模块引用，然后交由工具自动引入模块的内部脚本。形如下图所示：.jsref 文件是自定义的，代表脚本引用集合的 html 文件实现借助 node.js，上述诉求并不难实现：确定 jsref 文件的引用语法，例如：&l...
2020-01-09 10:17:56
463
原创 H5 向 小程序的 实时通讯方法
背景信息对于WebView 中的 H5 向 小程序 的单方向通讯方式，腾讯官方给出了 如下方案：大家可以点击 这里 查看官方文档 。看到官方提供了解决办法，焦虑感顿时降低了不少。但仔细一看，不免又发愁起来：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的...
2019-08-30 16:01:55
6318
4
原创 三十一、HTML5单页框架View.js介绍 - 如何实现自适应布局
前言自适应，是指网页能够根据屏幕尺寸自动调整内容的展现方式，包括但不限于：字体大小、元素大小 和 元素位置 等，使得在不同分辨率下都能给用户带来接近一致，或者友好的操作体验的特性。实现自适应的方式有很多，使用『媒介查询』或『rem字体单位』就是常见的解决办法。本文并不打算深度介绍这两种技术，只讨论 “如何使用rem字体单位结合View.js完成网页的自适应布局” 这一问题。对上述两种技术感...
2019-08-28 21:11:59
749
原创 论项目工程化
时间紧，任务大，歘欻欻就能进去2-30人，但人投进去，平均人效有多少，真有计算过吗？如果没有猜错，大概率上你是划模块按人头分配任务的吧？且不论你描述的任务目标有多准确，能在多大程度上指导任务的开展，但就划模块按人头分配任务的这件分配方式，就是你技术无能，给自己卸担子的表现。按人头分配任务，中间实施过程不闻不问，看起来是以结果为导向，但这些任务能不能得出结果，你有多大把握？没有规范，没有技术分层，...
2019-08-25 10:54:31
263
原创 十九、HTML5单页框架View.js介绍 - 视图跳转（一）
视图跳转，是指用户看到的界面切换为另一个界面的过程，亦即活动视图转移的过程。（同一时刻，只有一个视图处于活动状态。）视图跳转时，View.js将自动调整地址栏中的hash部分，使其始终反映出当前的活动视图ID。如：http://wzhsoft.com/index.html#home-page其中，home-page 即为新活动视图的视图ID。在执行视图切换动作时，如果开发者使用了 视图...
2019-08-04 12:45:03
471
原创 三十、HTML5单页框架View.js介绍 - 视图直接访问
一个视图是否可以 『直接访问』，是指使用含有视图位置的URL打开页面时，页面装载完毕后呈现的第一个页面是否即为URL中指定的视图。如果是，则说明该视图是可以直接访问的，否则说明该视图是不能直接访问的。例如：除非明确指定，否则每个视图都默认是『不能』直接访问的 。开发者可以通过属性 data-view-directly-accessible 指定视图是否可以直接访问，例如：<secti...
2019-06-12 20:20:20
628
2
原创 十六、HTML5单页框架View.js介绍 - 视图上下文
变量命名冲突正如 单页应用独有的问题 篇章所述，当将多个视图的功能糅合在一起提供单页的访问形式时，开发者需要手动管控可能出现多个视图之间的变量命名冲突问题。视图之间的变量冲突，可以借助闭包解决，亦即将视图功能逻辑封装在一个外界不可见的黑盒子里，如下所示：;(function(){ var viewId = &amp;quot;home-page&amp;quot;; var view = View.ofId(viewId)...
2019-04-27 23:19:18
312
原创 从NPM同步包至CNPM
如果你发布了新版本的插件至npm官方仓库，然后马上就要使用cnpm安装该插件，可能会遇到装不上最新插件的情况。虽然cnpm周期性从npm上自动同步，但难免会有时间上的延迟。开发者可以使用如下办法解决：打开网址：https://npm.taobao.org/在搜索框中输入插件名称，并按键 <Enter> 回车搜索点击搜索到的插件，进入插件详情界面点击 cnpm inst...
2019-04-24 09:26:30
4205
原创 二十九、HTML5单页框架View.js介绍 - 视图命名空间
视图命名空间，允许相同ID的视图的同时存在。视图的唯一标记，由视图的命名空间和视图ID两部分构成。默认情况下，开发者不需要指定命名空间，命名空间默认为：“default”。当多个相同ID的视图需要共存时，开发者就需要设定不同的命名空间。命名空间可通过dom属性：data-view-namespace设定，例如：<section id = "home-page" data-view-na...
2019-04-17 20:20:36
281
原创 二十八、HTML5单页框架View.js介绍 - 识别浏览器的前进与后退
细心的读者可能已经发现，在 前文给的例子 中，通过点击浏览器的前进与后台按钮，我们可以触发不同的视觉切换效果。这是如何实现的呢？答案是：View.js实时追踪浏览信息View.js监听history的popstate事件，通过比对最新的浏览信息和弹出的浏览信息得出视图浏览的先后顺序View.js根据比较结果，得出视图切换类型：3.1 View.SWITCHTYPE_HISTORYFOR...
2019-04-12 14:31:11
586
原创 论 “WEB前端框架选择”
前端框架层出不穷，日新月异，看得人眼花缭乱，应接不暇。如果没有一定的定力，不从自身情况出发，一昧的蹭热度炫酷，就很容易迷失在一股股的狂热浪潮中。框架抛弃你的时候，是不会给你打招呼的。...
2019-04-12 09:11:01
355
原创 二十七、HTML5单页框架View.js介绍 - 视图切换动画
在开发单页应用时，界面之间的转场动画通常是必要的。可以给客户提供更好的视觉体验。使用View.js开发的单页应用同样支持设定转场动画。我们来看一个例子：...
2019-03-19 09:02:06
917
原创 二十六、HTML5单页框架View.js介绍 - 视图回退显示
View.js允许开发者设定视图是否可以『直接访问』，亦即：是否可以根据视图的URI位置打开视图我们来看一个可以直接打开的例子：如上图所示，视图：“attr_data-view-rel”便是可以直接访问的。我们再来看一个不能直接打开的例子：是什么？为什么？怎么用？哪里？什么时候？...
2019-03-06 13:31:41
297
原创 二十五、HTML5单页框架View.js介绍 - 视图布局
作为用户视觉的页面载体，每个视图都可能拥有自己独特的布局。下图是移动端常见的布局结构：其中，顶部标题栏和底部导航栏，以及可能存在的标签页栏，通常情况下是需要固定位置显示的。开发者一般采用绝对定位的方式将其固定。但在页面涉及用户输入的场景下，为避免弹出的虚拟键盘将底部导航 “顶上去” 的情况等，View.js 建议开发者使用脚本动态布局来实现位置固定的目的，亦即：[可滚动正文] 的高度 =...
2019-03-03 20:14:49
1015
原创 二十四、HTML5单页框架View.js介绍 - 视图标题
视图标题，是由每个视图分别声明，展示在浏览器标签页上的、独立的窗口标题。开发者可以借助视图标题实现 『进入不同页面展现不同标题』 的效果，如下图所示：实现上述效果，开发者只需要在视图的DOM节点上声明data-view-title属性并将视图标题赋值为属性值即可，如下图所示：&lt;section id="doc_what-is-spa" data-view="true" data-vi...
2019-03-03 18:43:26
369
原创 二十三、HTML5单页框架View.js介绍 - 日志输出
为辅助开发者更清晰地排查问题，View.js内置了格式化日志输出组件，输出效果如下图所示：每个视图实例均含有名为logger的实例句柄，开发者可以直接使用。支持的日志级别包括（级别从低到高）：debugloginfowarnerror如上图所示，输出内容包括：月、日、时、分、秒组合成的时间信息日志实例名称，由字符：&quot;[&quot; 和 “]” 包裹消息模板。亦即方法的第一个参数...
2019-02-24 16:01:13
385
原创 二十二、HTML5单页框架View.js介绍 - 视图配置
在正式介绍视图配置的功能作用之前，我们先来看一看我们在面临『相似而又不同』的需求时，我们是如何处理的。如上图所示，针对不同的需求，虽然相当比例的功能是一致的，但我们仍然需要以硬拷贝代码的方式分别实现需求A，需求B和需求C。当代码衍生出多个副本的时候，开发团队就难免会遇到代码同步的问题：在副本A中发现的故障，需要同步在副本B、副本C中解决；在副本B中丰富的功能，需要同步至副本A、副本C中...
2019-02-20 22:19:31
332
原创 二十一、HTML5单页框架View.js介绍 - 初始化
通常情况下，使用View.js驱动的单页应用，在其页面打开，亦即html载体被浏览器装载后，将自动执行初始化动作。初始化动作包括：执行初始化监听器通过API：View.beforeInit({Function} callback) 添加识别并标识操作系统类型识别并标识操作系统类型亦即，在html结点上使用 data-view-os 属性自动标识识别到的操作系统。如：data-v...
2019-02-20 20:31:02
376
原创 关于 客户端流水线开发 的感触
客户端开发，需要了解业务、了解系统的当前运作方式。没有不懂业务、不熟悉现状就能开发出溜得上天的客户端。而“掌握业务”的项目要求，似乎没有开发者应当区别对待，可以幸运逃离的。我们也是一样，即便我们把客户端的功能开发，拆分成了“切图 → 开发”的流水线，也并不意味着“掌握业务，满足业务”的要求，都应该由流水线的下游全面满足。上游的切图开发者，也具有同等责任。如果不了解现状、不了解业务，切图...
2018-12-19 15:31:06
370
原创 十八、HTML5单页框架View.js介绍 - 视图选项
我们在上一章节中讲述了多视图协作时视图参数的使用方式，本文将就视图之间的参数传递问题做进一步的补充描述。使用了视图参数的开发者会遇到的第一个问题，可能是：视图参数在目标视图刷新后获取不到是的，确实是这样。作为最灵活、支持类型最全面的传参方式，视图参数的传递是临时性的，一次性的，是在内存中发生的。这意味着：视图刷新后，视图参数消失视图参数只能批量设置。亦即，第二次视图进入传递的视图参...
2018-12-10 18:07:37
423
原创 十七、HTML5单页框架View.js介绍 - 视图参数
正如前文所说，视图是View.js的核心概念，也是实现业务的核心载体。如果业务相对简单，每个视图都各自为营，彼此互相独立，那么问题不大，开发工作会相当轻松。但真实的世界里，终端往往是需要多个页面进行互相交互、彼此传递数据，共享信息的。比如这样的场景：网购确认订单界面，需要与收货地址列表界面交互，使得用户在收货地址列表界面触摸特定收货地址后，界面自动切回确认订单界面，并把选定的收货地址信息呈现到...
2018-12-07 20:30:18
423
原创 十四、HTML5单页框架View.js介绍 - 事件驱动（二）
有哪些事件？事件key以及参数是什么？什么时候触发？是否同步触发？ 3-5beforeenter, enter, afterenter的使用方式（github源码贴图）事件驱动样例：视图进入时查询呈现、视图离开时重置视图 3-5事件驱动的扩展用法 3事件驱动可以辅助实现文件管理，用于更加细化的组织视图文件。...
2018-12-07 13:57:58
249
原创 十三、HTML5单页框架View.js介绍 - 事件驱动（一）
引语事件驱动是View.js的核心特性，是View.js的框架逻辑与业务逻辑糅合的主要桥梁，同时也是开发者驱动业务、实现多人协作的首要入口。借助事件驱动，开发者可以以相对低廉的成本，较为宽松的耦合实现绝大部分业务逻辑的功能开发，并能够与此同时保持工程松散、灵活的文件组织。对于注重工程可维护性的开发人员和管理人员而言，View.js尤其有用。事件驱动语法添加监听：xx.on([evtName]...
2018-12-04 23:04:48
407
原创 十二、HTML5单页框架View.js介绍 - 视图容器
不需要 Npm 的单页应用框架：View.js - http://view-js.com在使用View.js开发移动端应用时，我们通常以视图为单位拆分并实施对应的功能开发。一个视图完整的包括了一个单独的界面所要展现的所有内容。也就是说，视觉上一个页面中的所有内容，都是一个特定的视图所提供的。虽然视图之间可能含有视觉上的共性元素，但出于简化问题的考虑，View.js并不打算支持视图内局部元素...
2018-11-25 18:22:36
2001
1
原创 十一、HTML5单页框架View.js介绍 - 视图群组
不需要 Npm 的单页应用框架：View.js - http://view-js.com正如前文所述，每个视图都是唯一的，都有唯一的ID与之对应。视图ID，作为视图的唯一性标记，是浏览位置、代码区域，以及视图导向的主要参考系。视图切换时，视图ID清晰地表述了切换操作的目标位置，使得View.js可以没有歧义地完成视图导航。但这不是问题的全部。有一些场景，是视图ID所无法“完美”应对...
2018-10-24 17:53:54
428
原创 十、HTML5单页框架View.js介绍 - 伪视图
不需要 Npm 的单页应用框架：View.js - http://view-js.com伪视图，是并不存在，但可以指导View.js进行视图切换的视图。这些视图通常具有特殊含义，如：首页、上一个界面、后一个界面等。这些视图并不是固定的，是会随着浏览位置的变更而发生变化的。View.js预置了如下几个伪视图： “:back”。代表上一个浏览的视图 “:forwar...
2018-10-09 17:36:26
472
原创 九、HTML5单页框架View.js介绍 - 活动视图
不需要 Npm 的单页应用框架：View.js - http://view-js.com活动视图，是指当前处于活动状态的视图，也是指当前可以被用户看到的视图。在使用View.js构建的应用程序中，任何情况下都只有一个视图处于活动状态，因而活动视图会随用户浏览位置的变更而发生变化。开发者可以通过API：View.getActiveView()获取当前的活动视图，如下所示：...
2018-10-09 17:19:53
328
原创 八、HTML5单页框架View.js介绍 - 默认视图
不需要 Npm 的单页应用框架：View.js - http://view-js.com当使用View.js构建的应用程序同时包含多个视图时，开发者可能需要明确指定页面加载完成后要默认呈现的第一个视图。这个需要默认呈现的视图，就是默认视图。在没有明确指定时，View.js将默认使用DOM树中自上而下的第一个视图为默认视图。必要时，开发者可以使用 data-view-default ...
2018-10-09 16:56:51
525
原创 七、HTML5单页框架View.js介绍 - 视图
不需要 Npm 的单页应用框架：View.js - http://view-js.com视图，是用户视觉上看到的一页内容，也是由 View.js 驱动的单页应用的页面区块载体。视觉上一个界面向另一个界面的切换，在技术上则是同一HTML页面中一个视图区块向另一个视图区块的切换。作为页面功能的单元载体，每个视图都是唯一的，都有唯一的ID及命名空间（开发者通常并不需要指定视图的命名空间，我们...
2018-09-28 20:15:12
838
原创 六、HTML5单页框架View.js介绍 - 使用View.js的注意事项
不需要 Npm 的单页应用框架：View.js - http://view-js.com命名冲突使用时，View.js将在window上附加名为：“View”的对象，如果工程中有其他插件使用了相同名称，则会引起插件冲突。浏览器兼容性View.js的设计初衷，是为了满足H5的移动端功能开发需要。鉴于android和iOS统治者移动操作系统的绝大部分市场，两者又有着相似的浏览器内核...
2018-09-28 19:53:01
1393
原创 五、HTML5单页框架View.js介绍 - View.js的比较优势
不需要 Npm 的单页应用框架：View.js - http://view-js.com“比较优势”，是经济学的术语，是指生产者可以使用更低的机会成本生产产品或提供服务的的优势。和其它框架相比，View.js为单页应用开发提供了的以下几个关键特性彰显了它的比较优势：无需配置和开发，视图导航开箱可用 允许在视图切换时传递任意类型的参数 允许自定义视图切换动画 允许自定义视图配置...
2018-09-18 14:27:02
8022
原创 四、HTML5单页框架View.js介绍 - 单页应用的优势
不需要 Npm 的单页应用框架：View.js - http://view-js.com我们先来个直观的体验。由于技术架构的不同，单页应用有着多项多页应用无法比拟的优势，例如：“页面”切换速度快； 支持复杂类型的数据传递，如：DOM元素、Object对象、回调方法等； 可为页面切换过程添加转场动画 ； 资源不需要重复加载“页面”切换速度快这里的“页面”，是用户...
2018-08-31 20:57:11
1460
原创 二、HTML5单页框架View.js介绍 - 实践单页应用的要求
不需要 Npm 的单页应用框架：View.js - http://view-js.com单页应用，是客户端优化使用体验，提升交互使用感受所衍生出来的实践理念，因此隶属于客户端功能架构的范畴。实践单页应用的必要前提，是客户端能够清晰地与服务端逻辑剥离开来，能够在两者之间清晰地绘制一条边界线，并有可持续发展的通讯桥梁将两者有机结合起来。我们通常将其称之为“前后端分离”。前后端分离，要求...
2018-08-26 10:23:56
618
原创 三、HTML5单页框架View.js介绍 - 单页应用要解决的问题
不需要 Npm 的单页应用框架：View.js - http://view-js.com位置传播单页应用要解决的第一个问题，就是浏览位置的传播问题：页面在通过 URL 传播打开时，浏览器展现的画面与传播前画面并不一致之所以会这样，是因为客户端做出的“切换页面（单页应用中，切换页面通过切换显示的区块实现）” 操作，仅会在终端用户与程序的交互过程中，在事件监听句柄中被动发...
2018-08-16 00:06:25
1615
原创 一、HTML5单页框架View.js介绍 - 什么是单页应用
不需要 Npm 的单页应用框架：View.js - http://view-js.com单页应用， 意为使用技术上的一个承载体实现多个功能的应用。单页应用， 可以是Windows桌面应用，可以是Android客户端、iOS客户端，也可以是WEB程序。对于WEB程序，可以是PC应用，也可以是移动应用。这篇文章将要探讨的，是单页应用在WEB程序中的应用和实践。单页应用，是一种理念...
2018-08-11 17:04:04
1987
javascript面向对象编程(荐).pdf
2011-08-20
java线程程序编写
2011-08-12
网站设计网页上传助手
2011-07-30
网站设计网页上传小助手
2011-07-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人