ruilin215
ruilin215

Qomo之快速上手


Qomo之快速上手
－－－－－

我发现，无论是哪种成功的语言，总是有一个快速入门的读物，而无论它们本身是
如何的复杂、艰涩或难于理解。反过来，不成功的语言，总是带有一堆技术性十足、
充满了想象和预期的文档。后者的这些文档，有些甚至比代码还多，但是这同样未
能挽救它们的失败。

于是，我同样地看到了Qomo。我发现Qomo发布过的文档中，总是有大量无法让人理
解的东西。如果你准备写一门语言，那么可能Qomo的文档和代码会给你许多启发。
而如果你只是打算用它，那么大概会变得很痛苦。然而，如果一个人因为想写一门
语言而去了解Qomo，那么他大概不会再使用Qomo，这是因为各自存有不同的目标。

于是，我想Qomo小组应该为“一个普通的使用者”而写一些东西。例如现在这篇。


一、装载Qomo
－－－－－
我们计划在将来为各种JavaScript应用环境加入一个定制的loader，用来装入Qomo
的其它部分。但现在，Qomo还主要是用在浏览器中。所以他的装载代码是这样：
  1. <!--intest.html-->
  2. <scriptsrc="js/Qomo.js"></script>

在这个示例中，我们假设你网站中的文件是按如下方式组织的：
  1. <your_site>\test.html
  2. <your_site>\js\Qomo.js
你可以将整个Qomo放在js目录下。这样它会是如下的目录结构：
  1. <your_site>\js\Build\*.*
  2. <your_site>\js\Components\*.*
  3. <your_site>\js\Framework\*.*
  4. <your_site>\js\Qomo.js
或者你也可以使用一个编码（压缩+混淆）过的版本，这会是一个独立的文件。


二、创建一个类，及其实例
－－－－－
Qomo主要扩展了一些面向对象的语法。最简单的用法，总是包括一个类注册的函
数。例如：
  1. //1.声明一个构造器
  2. functionMyObject(){
  3. //..
  4. }
  5. //2.类注册(创建这个类TMyObject)
  6. TMyObject=Class(TObject,'MyObject');

  8. //3.创建实例的两种(效果上是一样的)
  9. obj1=newMyObject();
  10. obj2=TMyObject.Create();
其中，TObject是Qomo类继承中关系中的基类。如果你构造更深层次的类，那么Class()
的第一个参数也可以TMyObject，或者其它任何的、Qomo识别的类。


三、如果你想为对象添加一些私有的属性(attributes)
－－－－－
如果你想这样做，那么你找对了东西，Qomo天生就是这种“私有”和“稳藏”而
设计的。这在上面的代码中，修改一下构造器就可以做到：
  1. //构造器
  2. functionMyObject(){
  3. Attribute(this,'Name','MyObject','r');
  4. Attribute(this,'Size',100);
  5. }
  6. //类
  7. TMyObject=Class(TObject,'MyObject');

  9. //实例
  10. obj1=newMyObject();
  11. obj2=newMyObject();

  13. //两个实例的私有属性不同
  14. obj1.set('Size',20);
  15. alert(obj1.get('Size'));//20
  16. alert(obj2.get('Size'));//100


四、让Qomo在网页中变得更有用
－－－－－
对于网页制作者来说，他们关心的只是网页中如何方便地使用Qomo，而并不是上面这些类、
子类如何创建。大多数情况下来说，的确如此。

而简单地说来，我们可能在关心在网页中如何存取一个页面上的东西，比如一个用ID标识
的对象。在Qomo中，这比较方便。
  1. <!--demo.html-->
  2. <scriptsrc="js/Qomo.js"></script>

  4. <body>
  5. <inputid="pwd"value="mypasswordinhere">
  6. </body>

  8. <script>
  9. //(*注)
  10. //$import('Components/Components.js');

  12. el=THtmlController.Create('pwd');
  13. alert(el.get('value'));
  14. </script>
(*注)在V2.1以前版本的Qomo缺省核心库中是不包括Components.js的。这种情况下需要使
用$import()来装载Components。但目前你正使用的这个版本，应该已经缺省包含了。在任
何情况下，你可以自行发布一个Qomo的集成(build)版本。这需要你用Qomo包中的：
Build\TestCase\T_CustomBuilder.html
来产生一个自己需要的Qomo代码包。记得选中“载入扩展界面控件”就好了。

上面这个例子说明，你可以为任意界面上的HTML元素添加一个THtmlController控制。它封
装了界面上的HTML元素的一些细节，如果你需要访问原始的HTML属性，那么使用el.get()
就可以了。

五、让Qomo做一个Html的控件
－－－－－
更进一步的说，你可以将任何界面上的一组Elements封装成为一个Qomo的类。这个类可以认
识界面上的这些组合在一起的东西是一个控件，或者其它。一个较为浅显的例子是：我们可
以将一个div与一个edit放在一起，使它变成一个TLabledEdit。这是个不错的主意：
  1. <scriptsrc="js/Qomo.js"></script>

  3. <body>
  4. <divid="edLabled"><span>hello,TLabledEdit.</span><br>
  5. <inputname="edit"value="...">
  6. </div>
  7. </body>

  9. <script>
  10. //后续将说明的代码
  11. //……
  12. </script>

那么我们到底如何将它实现为一个Html控件呢？首先，我们要在准确地找到所有要控制的
元素。下面是这样的一个基本框架：
  1. functionLabledEdit(){
  2. Attribute(this,'_label',null,'r');
  3. Attribute(this,'_edit',null,'r');

  5. this.get_label=function(){
  6. returnthis.assignedElement.children(0);
  7. }
  8. this.get_edit=function(){
  9. returnthis.assignedElement.children('edit');
  10. }

  12. //..其它的实现代码
  13. }

接下来，我们可以尝试为这个控件添加几个特性，以直接控制界面上的东西：
  1. functionLabledEdit(){
  2. //(略,同上...)

  4. this.getLableText=function(){
  5. returnthis.get('_label').innerText;
  6. }
  7. this.setLableText=function(v){
  8. this.get('_label').innerText=v;
  9. }

  11. this.getvalue=
  12. this.getValue=function(){
  13. returnthis.get('_edit').value;
  14. }

  16. this.setvalue=
  17. this.setValue=function(v){
  18. this.get('_edit').value=v;
  19. }
  20. }

然后注册它：
  1. TLabledEdit=Class(THtmlController,'LabledEdit');
然后我们来看看效果：
  1. vared=TLabledEdit.Create('edLabled');
  2. alert(ed.get('LableText'));
  3. ed.set('LableText','mylable:');
  4. ed.set('Value','hello,world.');

六、如此麻烦地做一个组件有什么价值？
－－－－－
有什么价值呢？如果我们的确需要控制这么一个“看起来象组件的HTML代码块”，那么
我们直接用几行脚本就可以办到。例如：
  1. document.getElementById('edLabled').children(2).value='hello,world.';
  2. //...

然而，组件系统的真正价值在于复用，类继承的价值亦复如此。如果偏离了复用来讨论
上述的一切，那无异于隔靴搔痒。我们来想象一下，如果我们需要一个使用FieldSet来
做标签的edit，那么又该如何做呢？更多的Editor？

好，我们在Qomo中基于上面的TLabledEdit代码来做一个。
  1. <body>
  2. <fieldsetid="edLabled2">
  3. <legend>请输入：</legend>
  4. <inputname="edit"value="...">
  5. </fieldset>
  6. </body>

  8. <script>
  9. functionFieldSetEdit(){
  10. }
  11. TFieldSetEdit=Class(TLabledEdit,'FieldSetEdit');

  13. //示例
  14. vared=TFieldSetEdit.Create('edLabled2');
  15. ed.set('Value','hello,world.');
  16. </script>
真的吗？！FieldSetEdit实现时不需要任何的代码？！

是的。尽管两个组件的表达形式完全不一样，但是由于我们分离了逻辑实现与界面表
面，所以我们只需要调整少数（甚至于象这样无需修改）就可以适应变化了。

Oh。有高手看出来了，我实际上偷了个懒：这里的edLabled2的“HTML结构”与前一
种没有本质的不同。是的，好吧，为了让你相信Qomo具有“节省代码”的能力，那么
我们就弄复杂一点。


七、将一个控制层的组件，复用在其它框架库中
－－－－－
我们找一个相对复杂的Edit，例如我们拿一个YahooUI中的、能自动完成的Edit。大概，
我们要装入一个YahooUI，然后初始化它。最后，再装入我们的代码。OK，就象这样：
  1. <!--loadyui-->
  2. <linkrel="stylesheet"type="text/css"href="yui/build/fonts/fonts-min.css"/>
  3. <linkrel="stylesheet"type="text/css"href="yui/build/autocomplete/assets/skins/sam/autocomplete.css"/>
  4. <scripttype="text/javascript"src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  5. <scripttype="text/javascript"src="yui/build/animation/animation-min.js"></script>
  6. <scripttype="text/javascript"src="yui/build/datasource/datasource-min.js"></script>
  7. <scripttype="text/javascript"src="yui/build/autocomplete/autocomplete-min.js"></script>

  9. <!--yuicomponent,codecopyfromyuiexamples-->
  10. <bodyclass="yui-skin-sam">
  11. <h3>Enterastate:</h3>
  12. <divid="myAutoComplete">
  13. <inputid="myInput"type="text">
  14. <divid="myContainer"></div>
  15. </div>

  17. <scripttype="text/javascript">
  18. YAHOO.example.Data={
  19. arrayStates:[
  20. "Alabama",
  21. "Alaska",
  22. "Arizona",
  23. "Arkansas",
  24. "California",
  25. "Colorado",
  26. "Connecticut"]
  27. };

  29. YAHOO.example.BasicLocal=function(){
  30. //UseaLocalDataSource
  31. varoDS=newYAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
  32. //Optionaltodefinefieldsforsingle-dimensionalarray
  33. oDS.responseSchema={fields:["state"]};

  35. //InstantiatetheAutoComplete
  36. varoAC=newYAHOO.widget.AutoComplete("myInput","myContainer",oDS);
  37. oAC.prehighlightClassName="yui-ac-prehighlight";
  38. oAC.useShadow=true;
  40. return{
  41. oDS:oDS,
  42. oAC:oAC
  43. };
  44. }();
  45. </script>
  46. </body>
  47. <!--endofyuiload-->
OH! 这么多代码~~ 不过都是Yahoo UI的。Qomo要做的事则很简单：
  1. <!--续上例-->

  3. <!--loadqomo-->
  4. <scriptsrc="js/Qomo.js"></script>

  6. <!--ourscomponentanddemo-->
  7. <script>
  8. functionLabledEdit(){
  9. //(同上,略...)
  10. }
  11. TLabledEdit=Class(THtmlController,'LabledEdit');

  13. //新的TYuiEdit组件
  14. YuiEdit=function(){
  15. this.get_label=function(){
  16. returnthis.assignedElement.previousSibling;
  17. }
  18. this.get_edit=function(){
  19. returnthis.assignedElement.children.tags('input')(0);
  20. }
  21. }
  22. TYuiEdit=Class(TLabledEdit,'YuiEdit');

  24. //以下示例代码
  25. vared=TYuiEdit.Create('myAutoComplete');
  26. alert(ed.get('LableText'));
  27. ed.set('Value','hello,world.');
我们的示例代码，也就是应用程序的逻辑部分，相对于我们前面使用TLabledEdit的例子来说，并
未发生改变。而我们使用了非常复杂的——当然我也认为是非常不错的——Yahoo UI组件。


六、构造更深层次的类
－－－－－
如同上面的示例一样，我们总有可能在JavaScript中使用继承层次很深的类。如果并且JavaScript自
身的（原型继承的）方法来实现，那么我们需要调用父类的方法时就会比较麻烦。而在Qomo中，扩展
了调用父类方法的inherited()，使得这个过程变得很简单。
  1. //构造器
  2. functionMyObject(){
  3. Attribute(this,'Size',100);
  4. }

  6. functionMyObjectEx(){
  7. this.getSize=function(){
  8. return2*this.get();//<-在特性(attribute)读写器(方法)中调用缺省的或父类的读写方法
  9. }

  11. this.aMethod=function(){
  12. alert('hi,inMyObjectEx');
  13. }
  14. }

  16. functionPowerObject(){
  17. this.aMethod=function(){
  18. this.inherited();//<-在方法中调用父类方法
  19. alert('hi,inPowerObject');
  20. }
  21. }

  23. //类注册
  24. TMyObject=Class(TObject,'MyObject');
  25. TMyObjectEx=Class(TMyObject,'MyObjectEx');
  26. TPowerObject=Class(TMyObjectEx,'PowerObject');

  28. //示例
  29. obj=newMyObjectEx();
  30. pw=newPowerObject();
  31. alert(obj.get('Size'));
  32. pw.aMethod();

七、我需要Ajax!
－－－－－
当然，我知道很多人需要Ajax，尽管也有相当一部分人不知道为什么他们需要。事实上，在
Qomo中的Ajax用起来很简单。
  1. ajx=newAjax();

  3. ajx.open("GET",'http://www.sina.com.cn/',false);
  4. ajx.send(null);

  6. text=ajx.responseText;
  7. alert('thepagesizeis:'+text.length);
不错，很多人能看出来这只是对XMLHttpRequest的一个简单封装。所以知道这一点的人也明
白如何用一个函数来响应ajx.onreadystatechange，以及使用ajx中的'POST'方法来获取一
个远程数据。因此我就不细讲这些内容了，下面讨论Qomo中一个更有用的封装：Ajax池。

其实它真实的名字，是叫HttpGetMachine。我们先看一下不使用Ajax池的情况：
  1. functiondoAction(url,ctx){
  2. alert('Url:%s\nLength:%s'.format(url,ctx.length));
  3. }

  5. functiondoStateChange(state){
  6. if(state!=4)return;//waitdownloaded.

  8. varajx=this.get('XMLHTTP');
  9. if(ajx.status!=200&&ajx.status!=304&&ajx.status!=0)return;//stausisfailed.

  11. doAction(this.data.src,ajx.responseText);
  12. }

  14. //测试，不使用Ajax池
  15. varajx=newHttpGetMachine();
  16. ajx.OnStateChange.add(doStateChange);
  17. ajx.data={src:'http://www.sina.com.cn/'};
  18. ajx.OnStateChange('resume');
使用Ajax池也没什么复杂的：
  1. <!--在网页中，用于显示输出-->
  2. <body>
  3. <textareaid="txt"style="width:800px;height:600px"></textarea>
  4. </body>

  6. <script>
  7. functiondoAction(ord,url,ctx){
  8. vartxt=document.getElementById('txt');
  9. varstr='machie(%s)toprocessaurl\n\
  10. -Url:%s\n\
  11. -Length:%s\n\n';

  13. txt.value+=str.format(ord,url,ctx.length);
  14. }

  16. functiondoStateChange(state){
  17. if(state!=4)return;//waitdownloaded.

  19. with(this.get('XMLHTTP')){
  20. switch(status){
  21. case200:
  22. case304:
  23. case0:
  24. doAction(this.id,this.data.src,responseText);break;
  25. default:
  26. //stausisfailed.
  27. alert('failed:'+status)
  28. }
  29. }
  30. }

  32. //pool的处理函数.id仅用于识别在处理中的mac序号，不是必须的.
  33. varid=1;
  34. functiondoOnStateChange_pool(mac,state){
  35. if(!mac.id)mac.id=id++;//为machine做一个标识
  36. doStateChange.call(mac,state);
  37. }

  39. //池化管理-创建处理池(允许最多3个处理机实例)，并填入数据
  40. varpool=newPool(THttpGetMachine,3);
  41. pool.OnStateChange.add(doOnStateChange_pool);
  42. pool.push({src:'http://www.sina.com.cn/'});
  43. pool.push({src:'http://www.snda.com.cn/'});
  44. pool.push({src:'http://www.tom.com/'});
  45. pool.push({src:'http://www.google.com/'});
  46. //more...
  47. </script>

Ajax池实质上是帮助用户管理THttpGetMachine的创建与调度，由pool来决定什么时候传给
哪个具体的Machine以数据，并如何响应这个数据的处理状态。


九、其它的东西
－－－－－
Qomo V2.1将原来的LocalDB、Graphi等全部从代码包中移除了，我们将重写它。这个工作很快
就会开始。仅从复杂性上讲，V2.1有一个不错的开端，为此我们还移除了现有的大多数Controls。

Qomo V2.x有一个并行的项目，叫QoBean。QoBean目前还没有发布一个正式版本，但它已经有非
常好的表现：它比Qomo少%30多的代码，但性能却提供了30~40%。这个版本将会合并到Qomo V3中
去，以替代现有的Qomo内核。

Qomo中有一些小工具，例如Common\ParserLite.js，以及TimeMachine.js（不是时光穿梭机啊）。
还有一些用于检测效率，例如Debug\TestCase\RegExpPerformanceTool.html。当然，最重要的，
还是位于根目录下的Build工具，和一个相对无素的示例：Samples.html。

在FF3里，你必须使用根目录下的Samples.html来launch其它的演示，而不能从硬盘上直接打开
它们。这是因为FF3调整了本地文件的Ajax存取安全性设定。

在Qomo里，对象还有一些更为复杂的用法。例如注册接口，以及切面系统等。这些比较高级的用法，
你可以在Qomo的代码包中去查找示例，或者在Blog中找到有关机制的说明文档。

直接下载发布包：

http://download.csdn.net/source/689574

http://download.csdn.net/source/689579


Qomo最新的代码：
https://qomo.svn.sourceforge.net/svnroot/qomo/trunk

QoBean最新的代码：
https://qomo.svn.sourceforge.net/svnroot/qomo/qobean

你可能感兴趣的:(JavaScript,Ajax,css,Yahoo,yui)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 学会这招！用python爬取微博评论（无重复数据） Python白白白白
    python爬取微博评论（无重复数据）前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流，切勿用于非法用途！！！前言前段时间微博上关于某日记的评论出现了严重的两极分化，出于好奇的我想对其中的评论以及相关用户做一
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • ComfyUI AnimateDiff-Lightning 教程 jayli517 ComfyUIAIGC
    介绍项目主页：https://huggingface.co/ByteDance/AnimateDiff-Lightning在线测试（有墙）：https://huggingface.co/spaces/ByteDance/AnimateDiff-Lightning国内镜像：https://hf-mirror.com/ByteDance/AnimateDiff-LightningAnimateDiff
  • ajax的同源策略 Spring_Bear
    问题之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。同源策略简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：目前，如
  • ComfyUI中的sam模型国内下载方法 jayli517 ComfyUIpythonstablediffusion
    was-node-suite-comfyui这个节点安装的时候，有它内部的config配置文件，里面其实给了一些下载地址，配置文件里是这么写的："sam_model_vith_url":"https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth","sam_model_vitl_url":"https://dl.fba
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他