您的位置:

js框架源码原理(web框架原理)

js框架源码原理(web框架原理)

更新:

本文目录一览:

Three.js源码解读一:Object3D

可能很多同学会发现,学习Three.js的API非常容易,但是真正理解API的作用却非常难。其实让大家感到难的并不是Three.js本身,而是Three.js背后所隐藏的3D图形学知识。本系列Three.js源码解读文章,会帮你一边补齐3D图形学的基础知识,一边真正理解到Three.js的实现原理,知其然,知其所以然。

Object3D是ThreeJS中大部分物体的基类,它包含了物体的位移,旋转,缩放,以及各个物体父子关系的js实现。选取Object3D几个重要的属性做解释:

一个3D对象往往由多个父子对象组成,父对象的位移, 旋转, 缩放会传递给所有的子对象。

this.parent指向父对象,this.children包含了所有的子对象。

通过 add 为物体添加子对象。需要注意的是,如果该子对象有其他的父对象,会先解除子对象和旧的父对象的父子关系,然后将子对象添加到新的父对象中。

this.matrix表示物体自身的本地形变,this.matrixWorld表示物体的全局形变。当物体没有父对象时,全局形变就是本地形变。

为什么对象组合这么重要呢?看下面的例子:

这两个立方体共同组成了一个3D对象,下面的立方体为底座,上面的立方体为操作臂。当底座转动的时候,操作臂会同样转动,所以操作臂的形变会传递给底座。当操作臂旋转时,底座不会被影响。

这里,底座就是操作臂的父对象。只要简单的将底座的全局形变(this.parent.matrixWorld)和操作臂的本地形变(this.matrix)相乘,就能得到操作臂的最终形变。是不是很方便?

3D物体的位移,旋转,缩放都可以通过矩阵表示。其中,旋转除了通过矩阵,还可以通过欧拉角和四元数表示。

Object3D的rotation代表物体旋转的欧拉角表示,quaternion代表了四元数表示,他们是3D物体统一旋转的不同数学表达方式。(矩阵,欧拉角,四元数表示旋转

onRotationChange , onQuaternionChange 这两个回调用于同步欧拉角和四元数,保证他们代表着相同的旋转角度。

3D交互一个很大一部分工作量是需要在物体的本地空间( this.matrix )和世界空间( this.matrixWorld )进行坐标转换。

javascript框架是什么意思?有什么作用?怎么理解?最好举个例子

浅谈js框架设计 在这个JavaScript框架随处乱跑的时代,你是否考虑过写一个自己的框架?下面的内容也许会有点帮助。

一个框架应该包含哪些内容?

1.语言扩展

大部分现有的框架都提供了这部分内容,语言扩展应当是以ECMAScript为基础进行的,不应当依赖任何宿主环境,也就是说,作为一个框架的设计者,你应当保证你的语言扩展可以工作在任何宿主环境中,而不是仅仅适合浏览器环境。你必须保证把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等环境中都能正确的工作,举个现实一点的例子setTimeout不可以出现在其中,你也不能用XMLHTTP加载脚本运行,尽管它们看起来很贴近语言。保持这一部分的独立性可以让你方便的移植你的框架到其他宿主环境下。 

2.数据结构和算法

JS本身提供的内置对象非常有限,很多时候,框架应该提供一些数据结构和算法来帮助使用者更好的完成逻辑表达。但我认为随便翻本数据结构或者算法书用JS挑几个实现了加到框架中是不负责任的,多数数据结构应当以库的形式存在而非框架。框架中的数据结构应该足够常用而且实现不是非常复杂的,可以考虑的如集合、哈希表、链表、有序数组以及有序数组上的二分搜索。对JS来说,对象是一个天然的字符串哈希表,而集合很容易在哈希表上实现,因此只需要处理掉Object的内置方法,我们就可以实现一个高效的集合或哈希表。

3.DOM扩展

JS主要应用于Web开发,目前所有的框架也都用于浏览器环境,那么,浏览器端环境里重点中的重点DOM当然也是框架的扩展目标了,如果一个框架不提供DOM的扩展,那么其实基本没什么用处了。需要注意的是,DOM扩展也有w3c的标准可依,所以,不要尝试为各种浏览器做一些奇怪的扩展,比如FF下面的element们的prototype,框架的编写者应当无视它们。DOM扩展的主要任务之一是兼容性,不同浏览器上的DOM实现相差很多,框架必须消除这些实现带来的差异,提供统一的访问方式。当然,做为框架,应当提供一些更为方便的接口,将宿主提供的DOM对象用js对象封装是个不错的想法,但是同时这也很可能会造成内存泄露,所以做这事之前,了解内存泄露是必要的。实际上,自己想象的扩展远不如W3C的设计,比如如果你能更完整地实现XPath,你就能比JQuery做的更好。

4.AJAX扩展

大部分现有框架出现的原因都是因为AJAX,所以如果你想设计一个受欢迎的框架,AJAX是必须要做的。跟DOM扩展很相似,AJAX扩展的主要任务是兼容和内存泄露,对AJAX的核心组件XMLHttpRequest对象,必须在IE6中使用ActiveX创建,而ActiveX又有各种版本,而随之而来的内存泄露和兼容性变得非常麻烦,比如:事件函数名大小写、this指向、事件函数的null赋值。处理好这些兼容性的基础上,可以做进一步的工作,提供一些常用的实现。应该指出的是,除非你确定你提供的接口比原来的更好,否则不要改变原来的XMLHttpRequest对象的接口,比如写一个Request函数来代替open和send,如果你不清楚W3C的专家们为什么这么设计,请不要把他们想象成傻瓜。我想自己另外写一个兼容且内存安全的XMLHttpRequest加入到自己框架的命名空间里,使它从外部看上去跟W3C描述的XMLHttpRequest一模一样是不错的办法,对XMLHttpRequest我认为唯一可以考虑的修改是提供onsuccess事件。当然针对一些复杂功能的AJAX扩展也是可行的,比如HTMLHttpRequest类似的扩展可以让AJAX初学者喜欢你的框架。

5.效果

时间效果是最能刺激用户神经的,渐隐、缓动、滑动、颜色渐变这些都很不错,其实技术难度也不是很高。拖动效果则是浏览器中一个很重要的效果,用鼠标事件来模拟本来很容易,不过兼容和setCapture也是很麻烦的事情。这一部分内容量力而为就可以了。

7.脚本管理

因为大家非常喜欢C++风格的include或者JAVA风格的import,很多框架提供了基于AJAX的脚本管理,不过同步加载的效率问题是巨大的。之前我们曾经作过各种尝试,希望找到一个浏览器中不用XMLHTTP加载外部js的方法,但是最后得出的结论是:不可能。

关于这个,略微思考就可以知道,Java C++ C#都是编译型语言,include 和import都是编译期处理,在js中做到类似的事情是不太可能的。为了实现类似的功能,我想我们可以利用服务端程序或者编写一个文本工具来实现。

YUI将所有的js文件依赖关系提取出来的做法是可行的,不过这不能算是include的实现方式了,维护依赖关系不是一件很简单的事情。

8.控件

EXT的成功告诉我们:提供优质的控件才是框架的王道。你不能指望优质的扩展会吸引更多使用者。多数人只关心如何快速完成手边的工作。当然不是所有框架都要提供这部分内容。控件好坏取决于能力和美工,不过至少要保证框架里的控件不会内存泄露。

框架设计的若干原则:

1.不要做多余的事

对这框架设计来说,我认为一个非常必要的原则就是不要做多余的事情,举个极端的的例子:

function add(a,b)

{

return a+b;

}

这样的代码如果出现在框架中,就是个十足的笑话。不过大多数时候,事情不是那么明显,很多框架试图用某种形式在JS中"实现"OOP,但是实际上,JS本身是OO的(ECMA262中明确指出来的,不像某些人所说是基于对象云云)只是有一些语法跟Java等语言不同。那么显然这些OOP的"实现"其实是跟上面的例子一样的道理。另一个例子是Array.prototype.clone

Array.prototype.clone=function(){

return this.slice();

}

2.慎用prototype扩展

很多框架利用修改原生对象的prototype来做语言扩展,但我认为应当小心地看待这件事,毫无疑问这将造成一定的命名污染,你无法保证框架的使用者或者与你的框架共存的其他框架不会使用同样的名字来完成其他的事情。特别需要注意的是,Object和Array这两个对象的prototype扩展格外的危险,对Object来说,如果Object被修改,那么框架的使用者将无法创建一个未被修改的干净的对象,这是一个致命的问题,尤其如果你的使用者喜欢用forin来反射一个对象的属性。Array.prototype修改的危险来自js一个不知有意还是无意的小小设计,对原生的Array来说,任何情况下for和forin的遍历结果是相同的,而因为无法控制自定义的属性是不可枚举的,任何Array.prototype的修改都会破坏这种特性。一方面,我认为不应当推荐用forin遍历数组,这其中包含着错误的语义。另一方面,框架的设计者必须尊重这些使用者,因为对于ECMA所定义的语法而言,它是正确的做法。其中包含着这样一个简单的事实:假如你的框架中修改了Array.prototype,那么一些之前能正确工作的代码变得不可正确工作。

直接修改prototype看上去非常诱人,但是在考虑它之前应当先考虑两种可能的方案:

(1)函数

提供一个以对象为第一个参数的函数比如 Array.prototype.each =

function ForEach(arr,f)

{

if(arr instanceof Array)/*...*/;

}

(2)继承

以return的形式继承一个内置对象 比如考虑Array.prototype.each=

function ArrayCollection()

{

var r=Array.apply(this,arguments);

r.each=function(){/*......*/};

return r;

}

套用一句名言,不要修改原生对象的prototype,除非你认为必要。不过修改原生对象的prototype确实有一些特殊的用途(就是"必要的情况"),主要体现在2点:文字量支持和链式表达。举一个例子可以体现这两点:

var cf=function f(a,b,c,d)

{

/*........*/

}.$curry(3,4).$curry(5).$run();

如果希望实现类似上面的表达方式,可能就需要扩展Function.prototype,权衡一下的话,如果你认为命名污染的代价是值得的,那么也是可以提供给使用者的。

一个比较讨巧的办法是把选择权利交给使用者,提供一个扩展器:

function FunctionExtend()

{

this.$curry=function(){/*......*/};

this.$run=function(){/*......*/};

}

如果用户喜欢可以FunctionExtend.apply(Function.prototype); 如果不喜欢扩展 则可以

var r=function(){/*......*/};

FunctionExtend.apply(r);

3.保持和原生对象的一致

不知你有没有注意到,内置对象Function Array等都有这样的性质:

new Function()跟Function的结果完全一致(String Number Boolean这种封装型对象没有这样的性质)

如果框架中提供的类也具有这种性质,会是不错的选择。这仅仅是一个例子,如果你注意到了其他细节,并且让框架中的类和原生对象保持一致,对使用者来说是非常有益的。

4.尊重语言 尊重用户

编写框架应该尊重依赖的语言环境,在对原有的元素修改之前,首先应该考虑到原来的合理性,任何语言的原生环境提供的都是经过了精心设计的,在任何修改之前,至少应该考虑这几点:效率、命名规范、必要性、与其他功能是否重复。如果你没有付出至少跟语言的设计者相当的工作量,你的做法就是欠考虑的。

编写框架也应该尊重用户的所有习惯,将编写者的喜好强加给使用者并不是框架应该做的事情。框架应该保证大部分在没有框架环境下能运行的代码都能在框架下正常工作,这样用户不必为了使用你的框架而修改原有的代码。

5.规范命名和使用命名空间

减少命名污染可以让你的框架跟其他框架更好地共存。很多框架使用了命名空间来管理,这是良好的设计。命名应该是清晰且有实际意义的英文单词,如前面3所述,为了保持和原生对象的一致,命名规则最好贴近原生对象,比如类名第一字母大写,方法名用驼峰命名。捎带一提prototype中的$实在是非常糟糕的设计,无法想象$出现的目的仅仅是为了让使用者少写几个字母。这种事情应该交给你的用户在局部代码中使用

js源码解释

处理图片的一段js脚本,

var GIF89a=document.location.href;//先取本页的链接

GIF89a=GIF89a.substring(0,GIF89a.lastIndexOf('/'));//截取最后一个“/”后面的部分,也就是文件的名字

然后在本页中添加一个object

到底什么是js框架啊,我就知道js代码,jquery是js的框架!但是到底怎么理解框架啊,框架到底是什么样的?

很直白的说,其实js框架就是对js代码一层封装,提供了一些教常用的方法。

如jquery,就是用js代码自己写了很多函数,放到jquery.js文件中,作为一个js的函数库。别人可以直接引用这个js文件,然后用里面的js方法完成常用的操作。这就是jquery框架的本质。

为什么要使用框架?优势在哪里?优势在于,它封装的函数的操作性比js强,很多操作只需简单的jquery的函数就能完成,而且是对所有浏览器都兼容的,如果你直接使用js有时要考虑浏览器兼容性。

extjs框架工作原理

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

js框架源码原理(web框架原理)

本文目录一览: 1、Three.js源码解读一:Object3D 2、javascript框架是什么意思?有什么作用?怎么理解?最好举个例子 3、js源码解释 4、到底什么是js框架啊,我就知道js代

2023-12-08
js原生源码下载(原生js框架)

本文目录一览: 1、怎么样把flash+js的全网站源码下载下来 2、怎么把一个网页的js代码下载 下来啊 3、怎么样下载js 怎么样把flash+js的全网站源码下载下来 建议你用整站下载器试一下,

2023-12-08
php框架yii学习使用(yii框架的优点及原理)

2022-11-10
重学java笔记,java笔记总结

2022-11-23
js编程环境框架(js编程环境框架图)

本文目录一览: 1、JS的常用开发框架有哪些 2、JS有哪些框架? 3、javascript框架有哪些 4、JS有哪些框架 5、有哪些优秀的前端js框架 6、什么是js框架? JS的常用开发框架有哪些

2023-12-08
php好用的后台管理框架,后端框架php

2022-11-17
php后台管理框架源码(开源框架php)

2022-11-10
java框架搭建,java框架搭建div

2023-01-09
微信框架php,微信框架源码

2022-11-26
android的js框架(android js引擎)

本文目录一览: 1、Android真的推荐用MVI模式?MVI和MVVM有什么区别? 2、在Android上怎样实现JAVA和JS交互 3、android 混合开发 用什么框架好 4、Android如

2023-12-08
java主流框架,目前流行的java框架

2023-01-10
js代码结构设计(JavaScript框架设计)

本文目录一览: 1、javascript框架是什么意思?有什么作用?怎么理解?最好举个例子 2、js编程: 根据搜索值过滤树结构 3、如何写出规范的JavaScript代码 4、什么是js框架? 5、

2023-12-08
php框架的连贯查询实现原理,php框架的连贯查询实现原理是

2022-11-18
java开发框架知识点总结(java基础框架有哪些)

2022-11-09
golangweb框架,golang web 框架

2022-11-27
java的三大框架,java的三大框架要学多久

2022-11-29
什么php框架可以自定义路由,php框架路由原理

2022-11-20
java学习框架的顺序(java什么时候学框架)

2022-11-08
javajsf框架,jsf框架菜鸟教程

本文目录一览: 1、IT培训分享Java软件开发工程师需要的最佳框架 2、Java目前主流框架都有哪些? 3、java,jsf是什么 IT培训分享Java软件开发工程师需要的最佳框架 Java是当下最

2023-12-08
php框架,PHP框架设计理念

2023-01-04