NEJ网易web前端开发框架资源-CSDN文库

共353个文件

js：258个

html：70个

chm：6个

前端框架

4星 · 超过85%的资源需积分: 50 114 浏览量 2013-03-14 11:17:03 上传评论 1 收藏 3.65MB ZIP 举报

资源详情

资源评论

收起资源包目录

NEJ 网易web前端开发框架（353个子文件）

dispatcher.chm 518KB

component.chm 516KB

publisher.chm 419KB

dependency.chm 259KB

base.chm 158KB

template.chm 115KB

qunit.css 4KB

forLoadCss.css 0B

forLoadCss2.css 0B

communication.docx 1.07MB

communication.filter.docx 19KB

nej_blank.gif 43B

index.html 3KB

formTest.html 3KB

nej_proxy_frame.html 3KB

resizeTest.html 2KB

pagerTest.html 2KB

placeholderTest.html 2KB

sliderTest.html 2KB

tplTest.html 1KB

rangeSelectTest.html 1KB

animationTest.html 1KB

getTestResult.html 1KB

suggestTest.html 1KB

datepickTest.html 1KB

eventTest.html 1KB

carouselTest.html 1KB

sorterTest.html 1KB

scrollyTest.html 1KB

xdrTest.html 1023B

tabTest.html 1020B

multiSelectorTest.html 995B

pinchTest.html 993B

elementTest.html 988B

scrollerListTest.html 962B

cardWarpperTest.html 921B

windowTest.html 915B

regionSelectorTest.html 901B

draggerTest.html 898B

loadmoreTest.html 868B

swipeTest.html 868B

touchTest.html 866B

dragTest.html 865B

tapTest.html 860B

cyclerTest.html 854B

pullerRefreshTest.html 850B

requestTest.html 846B

colorpanelTest.html 833B

loadingTest.html 826B

arrowTest.html 822B

rangeTest.html 822B

pullerTest.html 822B

customTest.html 814B

maskTest.html 814B

cardTest.html 814B

customEventTest.html 810B

audioTest.html 809B

dispatcher2Test.html 807B

windowWarpperTest.html 800B

chartTest.html 800B

audioTest.html 798B

requestIntervalTest.html 798B

loadTest.html 782B

utilTest.html 737B

suggestTest.html 736B

layerTest.html 708B

cacheTest.html 700B

connectTest.html 693B

base64Test.html 690B

restTest.html 684B

optionsTest.html 684B

tagTest.html 681B

dwrTest.html 681B

md5Test.html 681B

constantTest.html 679B

platformTest.html 679B

globalTest.html 677B

testSpeed.html 674B

cardTest.html 582B

nej_proxy_upload.html 578B

message.html 334B

empty.html 0B

zh.js 58KB

qunit.js 50KB

element.js 47KB

form.js 34KB

util.js 29KB

dispatcher.2.js 25KB

event.js 23KB

jst.js 22KB

cache.list.js 20KB

sha.md5.js 19KB

event.js 18KB

resize.js 18KB

api.js 17KB

dwr.js 15KB

define.js 15KB

tpl.js 15KB

dwrTest.js 14KB

uploadimage.js 14KB

共 353 条

通讯机制使用手册

概述

随着富媒体应用的不断发展成熟，AJAX 的应用得到越来越多的普及，而 AJAX 应用的一个

核心功能-异步数据载入功能也就显得越为重要，包括 HTML5 的发展也为此提供了强大的

支持，NEJ 作为跨平台的 WEB 前端开发框架当然也为上层应用做了很好的支持。本文档

主要介绍 NEJ 中涉及通讯相关的技术的原理及使用，大家在使用 NEJ 时如果涉及到通讯相

关的内容可先阅读此文档。

本文档主要分以下几部分介绍 NEJ 中封装的通讯机制

 消息通讯：跨文档的消息通讯机制，主要是本地的不同框架之间的数据通讯

 异步请求：即所谓的 AJAX 请求，主要与服务器端进行通讯

消息通讯

由于同源策略的限制，非同域的文档之间不能直接进行数据通讯或共享，因此我们引入这

部分内容来分析解决非同域及同域的文档之间的数据通讯或共享问题。

这里的消息通讯是指应用在客户端跨文档之间的消息交互，可以保证在不会被恶意攻击的

前提下进行跨文档的数据共享方式，这里不会涉及到客户端与服务器端的信息交互。

本部分内容对应的 W3C 的规范见 http://www.w3.org/TR/webmessaging/，关于这部

分规范的详细介绍可参阅专题分享《HTML5 Web Message》

原理

消息通讯主要包含两个过程：

 收消息：文档通过监听当前窗体的 onmessage 事件来接收来自其他窗体的消息

 发消息：文档可以通过给定的接口向指定的窗体发送消息，包括跨域的窗体

原理示意图如下所示

这里我们可以简单理解为各个窗体之间有一个消息通道，对于消息通道的关系我们定义为

以下两种类型：

 直接父子关系：消息通道所在的窗体为父子关系

 兄弟及祖孙关系：消息通道所在的窗体为兄弟关系，或者父窗体和子窗体的若干层子

窗体关系

在 NEJ 中我们主要封装的是直接父子关系的窗体之间的消息交互，其他关系的窗体均可通

过此方式来解决。

实现

NEJ 对于这部分的实现主要分为两部分，一部分针对高版本浏览器，即已经支持 HTML5

Web Message 规范的浏览器，采用规范定义的 API；另一部分针对 Trident 引擎的低版

本浏览器，主要是 IE6-7 的版本，采用的是 window.name 的方式传递数据。

NEJ 对这部分的封装主要在 {lib}util/ajax/message.js 中，项目使用时直接依赖该文件

即可，然后直接使用提供的 API 进行操作。

高版本浏览器

发送消息

发送消息主要通过规范定义的 window.postMessage 接口来实现

类型描述

输入

Variable

发送的数据，可以是基本类型，也可以是 File、Blob 等

对象，注 IE8-9 支持传递字符串格式的数据

String

目标可接收消息的源信息，如果目标的源不是该参数指

定的源则忽略此消息，如果所有源均可接收消息则可以

传“*”，如果只允许同域的窗体接收消息则可以传“/”

Array

消息通道对象，主要用来代理非直接父子关系的窗体之

间的消息通讯

输出

Void

无

描述发送消息到指定窗体

接收消息

窗体通过监听 window 上的 onmessage 事件来接收其他窗体发过来的消息，接收的消息

对象如下所示

这里我们主要关注的是 data、origin、source 属性，实际应用中 data 和 origin 的使用

会比较常见。

低版本浏览器（IE）

这里的低版本浏览器主要针对 Trident 引擎的浏览器，如 IE6-7 版本，对于这类浏览器本

身对 Web Message 规范的实现不完善，因此 NEJ 中采用 window.name 作为代理来实

现消息的传递。

原理

这里我们主要利用 Trident 引擎下跨域窗体可设置 window.name 的特性来实现消息的传

递，具体实现原理示意图如下所示

假设上图 Window1 需要传递消息至 Window2 中，则消息的传递步骤如下：

1. Window1 的消息发送器按照指定协议拼装消息

2. Window1 的消息发送器将拼装好的消息字符串设置到 Window2 的 window.name

属性上

3. Window2 起定时器轮询 window.name 的变化情况

4. Window2 发现 window.name 中 Window1 设置的消息串，按照指定协议解码

5. Window2 触发 window 上的 onmessage 事件通知上层应用收到消息

反之亦然

协议

这里的协议主要指 window.name 上设置的消息串的格式

 必须以字符串 MSG| 作为起始，且必须大写字符

 参数以键值对方式传入，键与值之间用 = 连接，所有键值均做

encodeURIComponent 编码，键值对之间以 | 字符分隔，如 a=b|b=a%26b

 将以上结果做 escape 后设置到目标 window 的 name 属性上，如 MSG%7Cdata

%3D%257B%2522url%2522%253A%2522http%253A%252F

%252Fa.b.com

传递的参数信息主要包括

参数名称参数描述

origin

目标接收消息的源信息

data

传递的消息数据，序列化为 JSON 字符串

ref

当前窗体的访问地址

self

当前窗体名称，默认为_parent

缺陷

由于浏览器的限制本解决方案会存在以下一些问题

1. 可能会有消息丢失

由于使用的是定时器轮询 window.name 的变化，而 window.name 为所有其他窗体

共享的资源，但是其他窗体仅有设置权限而没有读取权限，因此无法保证在一次读取

消息后到下一次读取消息的这段时间内没有两个及两个以上的到达消息，如果出现这

种情况则最后设置的消息会覆盖之前的消息，因此之前的消息无法到达当前窗体中。

2. 没能真正意义上保证 origin 的限制条件

由于无法读取一个窗体的 location 信息，因此对 origin 的验证是在接收到消息后由

NEJ 框架额外做的封装，因此从真正意义上来说这个消息还是已经到达了当前窗体中，

因此可能会存在信息的泄漏情况

综上所述，对于低版本浏览器建议尽量避免传递一些敏感信息，同时系统也尽量避免强依

赖消息传递机制来实现系统的重要功能。

使用

对于消息的通讯部分 NEJ 主要提供了一个 nej.j._$postMessage 接口用来发送消息，提

供通过 nej.e._$addEvent 接口添加 window 上的 onmessage 事件监听接收到的消息。

评论收藏

内容反馈

yangsheng37

2014-12-01

还行，勉强可以用

NEJ 网易web前端开发框架

评论1

最新资源

NEJ 网易web前端开发框架

评论1

最新资源

相关推荐

NEJ网易前端框架 v0.5.2

NEJ网易前端框架-其他

网易前端JS框架

nej-toolkit-example:前端打包发布工具演示案例

web前端开发框架那些事

web前端开发期末大作业（标准框架，改改就能用）

web_js_css_frame:前端开发的干货,包含pc端,移动端js库,框架,css框架,工具等等..

基于ruoyi框架web前端开发电商系统用例

面向Web2.0的web应用前端开发框架设计研究.pdf

synbass:极致简单，全新基于composer PHP开发框架：Composer + Symfony + NEJ +NEC。欢迎大家Fork此项目，共同完善！

toolkit2-example:发布工具案例说明

JS图片无损压缩工具.zip

图片无损压缩工具

基于nodejs平台环境和express的web前端开发框架做的网页设计大作业EMC

mok-js:前端开发服务框架，解决JSCSSHTML模块化开发问题，同时作为前端开发时常用到的web服务器、反向代理服务器、工具集成平台等。mok4js解决JavaScript模块化，moktext解决CSS和HTML模块化

ngp-web:前端开发工程，包含数据逻辑核心、业务框架、区块、组件材料和前端应用脚手架

smpe-admin-web:SMPE-ADMIN前端开发框架

calcite-web：Calcite设计计划的权威性前端开发资源。 包括可扩展的基本组件和样式，以及ArcGIS属性的模块化高效框架

构建高可伸缩性的WEB交互式系统（下）

CodingGuide:编程规范收集

【CN更新版】JUJUMAO-WINXPSP3笔记本专用CD克隆装机版 2011.05

网易云歌词情感分析系统 框架：python3.9 + flask web + echart + mysql

网易微专业web前端开发课程三个月从入门成为前端开发工程师系列视频教程 web前端视频

PHP、web前端开发-Bootstrap框架介绍.pptx

网易web前端开发师面试问答的经历.doc编程资料

网易云歌词情感分析系统,框架：python3.9 + flask web + echart + mysql

web practice_doneedf_web前端开发html简单框架_

calcite-web：Calcite设计计划的权威性前端开发资源。包括可扩展的基本组件和样式，以及ArcGIS属性的模块化高效框架

网易云歌词情感分析系统框架：python3.9 + flask web + echart + mysql