javasee
javasee

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)

  • bootstrap row 之间的竖直方向的距离要怎么调整？ yzy85
    问：我有两个rowa和rowb,我发现这两个row之间的竖直方向的距离靠的有点近，我想调整a和b之间的距离，row之前的水平距离可以通过col-md-offset*调整，那竖直方向上的距离要怎么调整，谢谢！答：1、目前我是通过直接加一个空的h1标签，来拉开距离，感觉有点不太rails.大家有更合适的方法吗？谢谢！2、可以自己在css中给top-offset的class写个margin，然后把这个c
  • Selenium元素定位：深入探索与实践 傻啦嘿哟 python办公自动化selenium测试工具
    目录一、引言二、Selenium元素定位基础1.WebDriver与元素定位2.定位策略概览三、ID定位1.特点与优势2.示例代码四、ClassName定位1.特点与限制2.示例代码五、XPath定位1.特点与优势2.示例代码3.XPath高级用法六、CSSSelector定位1.特点与优势2.示例代码3.CSSSelector高级用法七、其他定位策略1.Name定位2.TagName定位3.Li
  • HTML+CSS面试试题（部分） 四分十七 前端学习htmlhtmlcss大数据
    目录1:主流浏览器的内核分别是什么？2:每个HTML文件开头都有，它的作用是什么3:div+css的布局较table布局有什么优点？4:img的alt属性与title属性有何异同5:strong标签与em标签的异同6:渐进增强和优雅降级之间的不同7:为什么利用多个域名来存储网站资源8:网页标准和标准制定机构的意义9:简述一下src与href的区别10:网页制作会用的图片格式有哪些11:微格式，前端
  • python反爬虫处理--处理动态内容加载（Selenium库） 范哥来了 python爬虫开发语言
    使用Selenium处理动态加载的内容Selenium是一个强大的工具，可以用来模拟真实用户与网页进行交互。这对于处理那些通过JavaScript动态加载内容的网站特别有用。下面我将介绍如何安装Selenium库以及如何使用它来抓取动态加载的内容。1.安装Selenium库首先，您需要确保已经安装了Selenium库。您可以使用pip来安装Selenium：pipinstallselenium此外
  • CSS - 妙用Sass Xxxxxl17 csssass前端
    官方文档：https://www.sass.hk/docs/1.例1：@each$themein$themeList{$themeKey:map-get($theme,'key');@mediascreenand(weex-theme:$themeKey){.btnText{max-width:150px;@includefont(map-get($theme,'medFont'),map-get
  • JavaScript 通过逗号将字符串拆分为数组 贾宝玉单臂擒方腊 javascript前端开发语言
    本文展示了如何在JavaScript中通过逗号将字符串拆分为数组。为此，我们可以使用split()方法此方法将指定的String划分为子字符串的有序列表，将这些子字符串保存到一个数组中并返回该数组。它根据separator;划分字符串它可以是singlespace,comma,colon或任何其他模式。这意味着当在提供的字符串中找到split()时，该方法在每个点拆分一个字符串separator，
  • uniapp微信小程序canvas隐藏 Ann_R uni-app微信小程序小程序
    亲测好用~HTML我是把canvas嵌套在view里并被view设置idCSS把它给顶出去#canvas{position:fixed;top:-9999999999999rpx;}本文作者：小泽沐优声本文链接：https://www.cnblogs.com/ooo51o/p/12956678.html版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。
  • JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理 zru_9602 热门话题javascript爬虫开发语言
    目录一、常量的混淆原理1.1对象属性的两种访问方式1.2十六进制字符串1.3Unicode字符串1.4字符串的ASCII码混淆1.5字符串常量加密1.6数值常量加密二、增加JS逆向者的工作量2.1数组混淆2.2数组乱序2.3花指令2.4jsfuck三、代码执行流程的防护原理3.1流程平坦化3.2逗号表达式混淆四、其他代码防护方案4.1eval加密4.2内存爆破4.3检测代码是否格式化一、常量的混淆
  • Javascript监听回车键和取消回车键提交 思想永无止境 Web前端javascript回车键回车事件
    添加回车事件：document.onkeydown=function(event){vare=event||window.event||arguments.callee.caller.arguments[0];if(e&&e.keyCode==13){$("save_btn").click();}};取消回车键提交
  • css表格宽度设置无效 思想永无止境 Web前端csshtmltable
    table-layout:fixedtable-layout:fixed，table和td设置宽度有效，但在第一行有合并列的情况时，列宽会被均分，从而导致td设置宽度无效（table宽度仍然有效）。table-layout:fixed的表格，各列宽度由第一行决定，后面指定的宽度会被忽略，当第一行合并后，所有列宽度会被均分。解决方法：在之后添加代码或者table-layout:autotable-l
  • 使用setimmediate实现可伸缩执行的脚本 load_life html5javascript浏览器functionchromeperformanceie
    看过我对JavaScript性能优化相关的讨论的同学们一定很了解我的一个癖好，就是将一大段的script分解成多个块来执行。通过使用setTimeout()，你可以去改变特定代码执行的时间，从而做到让UI现场执行已经在队列里的任务。比如，你可以通过这样的方式把要执行的代码在50ms后加到UI线程队列里：setTimeout(function(){//dosomething},50)那么，在50ms
  • 工程化与框架系列（22）--前端性能优化（中） 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端性能优化状态模式
    前端性能优化（运行）引言运行时性能直接影响用户交互体验和应用流畅度。本文将深入探讨前端运行时性能优化的各种策略和技术，包括渲染优化、内存管理、计算优化等关键主题，帮助开发者构建高性能的Web应用。运行时性能概述运行时性能优化主要关注以下方面：渲染性能：减少重排重绘，优化动画效果内存管理：防止内存泄漏，优化内存使用计算优化：提升JavaScript执行效率事件处理：优化事件监听和响应异步操作：合理使
  • Vue.js 开发入门指南 2401_89793006 热门话题vue.jsflutter前端
    Vue.js开发入门指南Vue.js是一款流行的前端框架，它轻量、高效且易于上手，非常适合构建交互式Web应用。本文将介绍Vue.js的基础概念，并带你实现一个简单的Vue应用。1.Vue.js简介Vue.js是一个渐进式JavaScript框架，核心库专注于视图层，并且易于与其他库或现有项目集成。它的主要特点包括：双向数据绑定：数据和视图保持同步。组件化开发：方便代码复用，提高开发效率。虚拟DO
  • npm、Yarn 与 pnpm：选择最适合你的包管理工具 奶凶的小熊崽 前端npmnpm前端node.js
    在前端项目中，npm、pnpm和yarn都是包管理工具，主要用于管理JavaScript依赖。它们的核心功能类似，但在性能、依赖管理方式、磁盘空间占用等方面有所不同。以下是它们的详细对比，以及在项目中的选择建议。一、三者的基本介绍1️⃣npm（NodePackageManager）官方默认包管理器，随Node.js一起安装（无需额外安装）。版本：npmv1-v4（较早版本）：安装速度较慢，存在幽灵
  • VSCode 配置优化指南：打造高效的 uni-app、Vue2/3、JS/TS 开发环境 奶凶的小熊崽 vscodevscodeuni-appjavascripttypescriptvue
    VSCode配置优化指南，适用于uni-app、Vue2、Vue3、JavaScript、TypeScript开发，包括插件推荐、设置优化、代码片段、调试配置等，确保你的开发体验更加流畅高效。1.安装VSCode如果你还未安装VSCode，可前往VSCode官网下载最新版并安装。2.安装推荐插件(1)Vue相关插件✅VueLanguageFeatures(Volar)（Vue3推荐）✅Vetur（
  • JavaScript ES6 - 函数扩展 黑木令 ES6语法解析JavaScriptjavascript前端es6开发语言
    本章节的主要内容是:ES6函数扩展一:函数扩展1.函数新增特性:1.参数默认值2.rest参数3.扩展运算符4.箭头函数5.this绑定6.尾调用如图所示:1.ES6函数参数默认值/**1.函数参数默认值1.ES6设置默认值,直接写在参数定义的后面。2.细节知识点:1.ES6参数变量是默认声明的,所以在函数体中不能用let/const再次声明,否则会报错。2.ES6默认值不是传值,而是每次都重新计
  • hasOwnProperty是什么？【JavaScript方法】 幸运小圣 JavaScriptjavascript开发语言
    hasOwnPropertyhasOwnProperty是什么？用于判断一个对象是否包含特定的自身属性。它只会返回对象自身具有的属性，而不会返回从原型链上继承的属性。obj.hasOwnProperty(prop)obj是需要检查的对象。prop是需要检查是否存在的属性名（字符串）。返回值:如果对象obj具有名为prop的自身属性，则返回true。否则返回false。constobj={name:
  • iOS安全和逆向系列教程 第16篇：Frida入门与高级应用 自学不成才 iOS安全和逆向系列教程cocoamacosobjective-c
    iOS逆向工程专栏第16篇：Frida入门与高级应用前言欢迎来到iOS逆向工程专栏的第16篇文章！在上一篇中，我们探讨了Cycript这一强大的逆向分析工具。今天，我们将深入学习功能更为强大、更为灵活的动态插桩工具——Frida。Frida作为现代iOS逆向工程中最受欢迎的工具之一，其强大的跨平台能力和灵活的JavaScript引擎使得我们能够轻松地分析和修改iOS应用的运行时行为。无论是逆向分析
  • PySide(PyQT)，怎样在非QObject对象上应用信号槽框架 深蓝海拓 pyside6系统学习pyside6学习笔记数据库
    在PySide（以及PyQt）中，信号和槽机制是基于QObject类实现的。只有继承自QObject的类才能够定义和使用信号与槽。那么如果画面中的对象不是QObject类，就无法使用信号和槽。比如下面的代码就会出错：importsysfromPySide6.QtCoreimportSignalfromPySide6.QtWidgetsimportQApplication,QGraphicsScen
  • Github 2025-03-02 php开源项目日报Top10 老孙正经胡说 githubphp开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，今日(2025-03-02统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量PHP项目10Blade项目1JavaScript项目1Nextcloud服务器：安全的数据之家创建周期：2796天开发语言：PHP,JavaScript协议类型：GNUAfferoGeneralPublicLicensev3.0Star数量：248
  • html 页面滚动时 div位置不变,js实现页面刷新滚动条位置不变 weixin_28785069 html页面滚动时div位置不变
    今天因为这个问题困扰了很久网上的例子都尝试没效果，后来发现一点原来是内容最外层没有div的原因protectedoverrideboolHeaderScriptFilter(Topevery.Framework.Web.Configuration.Scriptval){switch(val.Key){case"ajaxpro2.prototype":case"ajaxpro2.core":case
  • 【前端进阶】Web Worker性能优化实战：解码10万条数据不卡顿 爱上大树的小猪 前端性能优化
    为什么需要WebWorker？JavaScript是单线程语言，当处理大量数据（如解析10万条JSON数据）时，主线程会被阻塞，导致页面卡顿、无法响应点击事件。WebWorker是浏览器提供的多线程解决方案，可以将耗时任务放到后台执行，解放主线程！实战目标主线程流畅渲染，10万条数据解码不卡顿！代码案例与分步解析1.模拟10万条数据//生成10万条模拟数据functiongenerateMockD
  • 一款便捷操作移动设备的PC工具
    说明该项目基于【Tinyui】框架开发。为电脑端（Windows/MacOS/Linux）操作移动设备提供便捷操作的工具。项目代码已开源：☞Github☜☞Gitee☜功能运行由于采用Python语言开发，因此需要安装Python运行环境，Python2.x（建议使用最后一个版本：2.7.18），Python3.x（推荐3.9以上版本）命令行运行$pythontools.pyWindows系统，直
  • 【Node.js入门笔记1---初始Node.js)】 阿陈陈陈 node.js笔记
    Node.js入门笔记1初始Node.js1.Node.js简介2.Node.js中js的运行环境3.Node.js可以做什么4.Node.js怎么学初始Node.js1.Node.js简介Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，用于在服务器端运行JavaScript代码。它让开发者可以用JavaScript编写后端（服务器端）程序，打破了传统上JavaScr
  • HTML5 Canvas 智慧浩海 HTMLhtml5前端html
    标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。什么是canvas?HTML5元素用于图形的绘制，通过脚本(通常是JavaScript)来完成.标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用canvas绘制路径,盒、圆、字符以及添加图像。浏览器支持表格中的数字表示支持元素的第一个浏览器版本
  • 智慧树刷课神器：自动化学习新体验 詹坦直Lucinda
    智慧树刷课神器：自动化学习新体验zhihuishu智慧树刷课插件，自动播放下一集、1.5倍速度、无声项目地址:https://gitcode.com/gh_mirrors/zh/zhihuishu在开源社区的一隅，我们发现了一款专为学生打造的高效学习辅助工具——“智慧树刷课插件”。这款由JavaScript为主要编程语言构建的开源项目，旨在简化在线课程的学习过程，特别是针对广大学生头疼的智慧树网课
  • jQuery 入门到精通 abments 前端jquery前端javascript
    jQuery入门到精通：详尽指南目录jQuery简介jQuery基础安装jQueryjQuery选择器DOM操作事件处理jQuery进阶动画效果AJAX插件项目实践简单的待办事项列表获取和显示API数据高级技巧性能优化调试技巧资源和总结1.jQuery简介jQuery是一个快速、小巧且功能丰富的JavaScript库，它使HTML文档的遍历和操作、事件处理、动画以及AJAX交互更简单。jQuery
  • 使用Electron构建桌面应用程序：一个全面指南 AxCybersecurity electronjavascript前端
    Electron是一个强大的框架，它使开发人员能够使用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。本文将介绍如何使用Electron来构建一个简单的桌面应用程序，并提供相应的源代码示例。什么是Electron？Electron是一个开源的框架，由GitHub开发，用于构建跨平台的桌面应用程序。它基于Chromium和Node.js，允许开发人员使用Web技术构建
  • 希音(Shein)前端开发面试题集锦和参考答案 大模型大数据攻城狮 arcgiswebpack前端攻击xsscsrfreact前端面试
    用Node写过什么工具或npm包在实际开发中，使用Node编写过多种实用工具和npm包。自动化构建工具开发了一个简单的自动化构建工具，用于处理前端项目的资源压缩和合并。在前端项目中，为了优化性能，需要对CSS和JavaScript文件进行压缩，减少文件体积，同时将多个小文件合并成一个大文件，减少HTTP请求。这个工具使用Node的fs模块进行文件的读写操作，通过terser库对JavaScript
  • 【Qt】Qt Widgets和QML（Qt Quick）开发界面的区别 ￡އއ昔年 qt开发语言
    Qt提供了两种主要的UI技术：QtWidgets和QML（QtQuick）。它们的核心区别主要体现在使用方式、架构、性能、开发难度和适用场景等方面。1.QtWidgetsvs.QML总体对比对比项QtWidgetsQML(QtQuick)语言C++(带QtUI库)QML+JavaScript(底层C++)渲染方式传统窗口系统控件（原生或模拟）基于OpenGL，使用GPU加速UI风格经典桌面UI（W
  • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
    课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
  • Guava Cache使用笔记 bylijinnan javaguavacache
    1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
  • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
    解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
  • Struct在jsp标签 不懂事的小屁孩 struct
    非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
  • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
    利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
  • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
    顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
  • java笔记4 a-john java
    操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
  • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
        笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
  • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
              我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
  • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
    ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
  • 九封信 bijian1013 人生励志
            有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
  • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
    PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
  • 分布式系统理论 bit1129 分布式
    FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
  • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
    最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
  • treetable bug记录 braveCS table
    // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
  • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
    import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
  • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
    1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
  • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
      对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
  • oracle I/O 从属进程 daizj oracle
    I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
  • 高级排序:希尔排序 dieslrae 希尔排序
    public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
  • 初二下学期难记忆单词 dcj3sjt126com englishword
    kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
  • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
    目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
  • git命令 shuizhaosi888 git
    ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "13241153187@163.com" //设置邮箱 ---------------查看环境配置 git config --li
  • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
    qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
  • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
     故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
  • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
    枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
  • 第11章 动画效果（上） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
  • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
    每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
  • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
    题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他