发明内容
本申请实施例提供了一种网页优化方法,在保证了angularjs1本身可以在IE8运行的前提下,还确保它的相关控件同样可以在IE8下运行,从而使得angularjs1框架下的浏览器页面能够正常显示。
有鉴于此,本发明第一方面提供了一种网页优化方法,包括:
下载预设值以下版本的前端框架;
引入界面开发框架;
添加有关所述界面开发框架的第一补丁,所述第一补丁用于使得网页浏览器IE8兼容所述界面开发框架;
添加jQuery文件和Bootstrap文件,需要说明的是,本申请需要在引入jQuery文件和Bootstrap文件之前引入第一补丁即respond.js和HTML5.js;
添加关于超级文本标记语言HTML5的第二补丁,所述第二补丁用于修复所述前端框架相关控件;
重新定义HTML标签,基于IE8浏览器不能识别自定义标签指令,因此需要重新定义HTML标签;
通过源码修改所述前端框架相关控件的属性以使得网页浏览器IE下的页面布局显示正常。
本申请实施例首先在整体的应用框架上解决了与IE8的兼容问题,然后分析了具体控件与IE8产生冲突的原因,据此有针对性地对控件的属性进行修改以使得angularjs1下的各个控件在IE8中能正常使用。
结合本申请实施例第一方面,在本申请实施例第一方面的第一种实施方式中,所述方法包括:
所述前端框架包括AngularJS1和jQuery,所述界面开发框架包括Bootstrap,所述AngularJS版本的预设值为1.2.30,所述jQuery版本的预设值为1.9.1。
结合本申请实施例第一方面的第一种实施方式,在本申请实施例第一方面的第二种实施方式中,所述方法包括:
所述第一补丁包括respond.js和HTML5.js,这两个文件使得不支持或不完全支持HTML5的浏览器能够识别HTML5新增的标签,让AngularJS1的路由布局可以在IE8下正常使用。
结合本申请实施例第一方面的第二种实施方式,在本申请实施例第一方面的第三种实施方式中,所述方法包括:
所述第二补丁包括es5-shim.js和es5-sham.js,这两个补丁使得不支持es5api的浏览器支持es5api。
结合本申请实施例第一方面的第三种实施方式,在本申请实施例第一方面的第四种实施方式中,所述添加关于超级文本标记语言HTML5的第二补丁之后,所述方法还包括:
在代码中加入foreach语句和getElementsByClassName方法。由于IE8不支持foreach语句和getElementsByClassName方法,因此需要添加代码弥补该缺点。
结合本申请实施例第一方面,在本申请实施例第一方面的第五种实施方式中,所述方法包括:
所述前端框架相关控件包括树控件、表格控件和上传控件。
结合本申请实施例第一方面的第五种实施方式,在本申请实施例第一方面的第六种实施方式中,通过源码修改所述前端框架相关控件的属性包括:
将所述树控件的源码中的catch,finally的属性改为‘catch’、‘finally’;
在所述表格控件的源码中加入getComputedStyle补丁;
将所述上传控件的源码中的$applyAsync属性修改为$evalAsync。
本申请解决了AngularJS中的各个控件与IE8不兼容的问题。
本发明第二方面提供了一种网页优化装置,所述装置包括:
下载模块,用于下载预设值以下版本的前端框架;
引入模块,用于引入界面开发框架;
第一添加模块,用于添加有关所述界面开发框架的第一补丁,所述第一补丁用于使得网页浏览器IE8兼容所述界面开发框架;
所述第一添加模块,还用于添加jQuery文件和Bootstrap文件;
所述第一添加模块,还用于添加关于超级文本标记语言HTML5的第二补丁,所述第二补丁用于修复所述前端框架相关控件;
定义模块,用于重新定义HTML标签;
修改模块,用于通过源码修改所述前端框架相关控件的属性以使得网页浏览器IE下的页面布局显示正常。
结合本申请实施例第二方面,在本申请实施例第二方面的第一种实施方式中,所述前端框架包括AngularJS1和jQuery,所述界面开发框架包括Bootstrap,所述AngularJS版本的预设值为1.2.30,所述jQuery版本的预设值为1.9.1。
结合本申请实施例第二方面的第一种实施方式,在本申请实施例第二方面的第二种实施方式中:
所述第一补丁包括respond.js和HTML5.js。
结合本申请实施例第二方面的第二种实施方式,在本申请实施例第二方面的第三种实施方式中:
所述第二补丁包括es5-shim.js和es5-sham.js。
结合本申请实施例第二方面的第三种实施方式,在本申请实施例第二方面的第四种实施方式中:
第二添加模块用于在代码中加入foreach语句和getElementsByClassName装置。
结合本申请实施例第二方面,在本申请实施例第二方面的第五种实施方式中,所述装置包括:
所述前端框架相关控件包括树控件、表格控件和上传控件。
结合本申请实施例第二方面的第五种实施方式,在本申请实施例第二方面的第六种实施方式中,所述修改模块包括:
修改单元,用于将所述树控件的源码中的catch,finally的属性改为‘catch’、‘finally’;
添加单元,用于在所述表格控件的源码中加入getComputedStyle补丁;
所述修改单元,用于将所述上传控件的源码中的$applyAsync属性修改为$evalAsync。
本申请实施例第三方面提供了一种计算机设备,所述计算机设备包括处理器、存储器以及总线,所述处理器和所述存储器通过所述总线进行连接,所述存储器用于存储软件程序,所述处理器通过运行存储在所述存储器的所述软件程序,执行上述任一方面的方法。
本申请实施例第四方面提供了一种计算机可读存储介质,该计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行如上述任一方面的方法。
从以上技术方案可以看出,本申请实施例具有以下优点:
本申请实施例提供了一种网页优化的方法,通过降低前端应用框架AngularJS的版本、对应的jQuery版本来适应IE8,并添加用于页面布局的Bootstrap的第一补丁和关于HTML5的第二补丁,同时修改树控件、表格控件和上传控件源码中的属性使得原本不能兼容的AngularJS以及各个控件在IE8的版本下能正常使用,解决了浏览器版本限制的问题,极大的减轻了普通开发人员的兼容性负担。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
制作网页、搭建应用程序都离不开超级文本标记语言(HyperText MarkupLanguage,HTML)语言,HTML语言是一种用静态文本展示设计的声明式语言,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容,具体包括:文字如何处理,画面如何安排,图片如何显示等。但是用静态的HTML语言构建动态应用存在很多缺陷,AngularJS可以克服HTML在构建应用上的不足,AngularJS是一个为动态WEB应用设计的结构框架,AngularJS可以扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足。AngularJS有着诸多特性,其中包括MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等
与AngularJS类似的前端应用框架还有jQuery,它提供一种简便的javascript设计模式。
页面设计对于网页和应用程序来说也是不可或缺的环节,Bootstrap用于页面布局的样式设计和CSS等,是一种用户界面(user interface,UI)设计工具,一般搭配angularjs使用。
现如今随着浏览器版本的增加,一些版本的浏览器与AngularJS有着兼容性的问题,例如AngularJS1不支持微软公司推出的第八代网页浏览器IE8,即使降低AngularJS1和jQuery的版本来适配IE8,同时在页面引入HTML5的补丁,试图让AngularJS1开发的网页运作起来,但是AngularJS1相关控件的兼容性问题还未得到妥善解决,并且不支持IE的Bootstrap版本也会导致网页页面布局混乱的情况,具体如图1和图2所示,图1为某个网页正常情况下的页面布局,图2为降低了AngularJS1和jQuery版本的情况下该网页的显示状况,从两幅图对比可看出,虽然降低AngularJS1和jQuery版本勉强可以让网页运作,但是由于没有彻底解决AngularJS1相关控件例如表格、表单、日历与IE8的兼容性问题、手动写入的补丁无法修复更新速度较快的HTML5标签,因此网页还是存在部分内容丢失,原本的页面格局被改变,页面不能正常切换等问题。
因此本申请实施例提供了一种网页优化的方法,如图3所示,图3为本申请实施例提供的网页优化的方法的流程示意图,具体包括:
101、下载预设值以下版本的前端框架;
浏览器兼容性一直是前端开发中不得不面对的一个问题,但是AngularJS1.2.30以上的版本并不支持IE8,如果强行在AngularJS1.2.30以上的版本使用IE8,则会导致网页的显示混乱甚至出现错误,因此前端框架AngularJS1的版本需设置在1.2.30或以下。
jQuery也是一个前端应用框架,实质上是一个JavaScript代码库,它封装JavaScript常用的功能代码,可用来优化HTML文档操作、事件处理、动画设计。jQuery与AngularJS不同在于它更偏向于用一段具体的代码描述需要实现的场景,而AngularJS是先定义出一个框架,通过框架下的view model控制所有的页面变化,通过改变这个viewmodel实现场景的变化,这样就无需再重新写具体的代码。
在使用angularjs的时候,有可能会使用一些jQuery插件,如果配合进行使用,那么本申请实施例中的前端应用框架则包括angularjs和jQuery,即需要降低angularjs的版本至1.2.30或以下,同时降低jQuery的版本至1.9.1或以下版本。
本申请实施例中,可以先自动对AngularJS和jQuery的版本进行判断,若AngularJS的版本小于等于1.2.30且jQuery的版本小于等于1.9.1,则直接使用当前版本,若不符合该条件,则自动下载符合条件的低版本。
102、引入界面开发框架;
Bootstrap是用于设计页面布局样式和CSS的界面开发框架,是一种UI设计工具,一般搭配angularjs使用,因此需要引入支持IE8的Bootstrap 3.3版本。
103、添加有关所述界面开发框架的第一补丁,所述第一补丁用于使得网页浏览器IE8兼容所述界面开发框架;
本申请实施例中有关界面开发框架即Bootstrap的补丁包括respond.js和HTML5.js,respond.js是为浏览器提供媒体查询的文件,HTML5.js可让不支持或不完全支持HTML5的浏览器支持HTML5标签,由于IE9以下版本的浏览器对HTML5的新增标签不能识别,从而导致CSS不起作用,因此需要加入HTML5.js文件。
104、引入jQuery文件和Bootstrap文件;
需要说明的是:步骤103和步骤104之间具有先后顺序,步骤103需在步骤104之前执行,即添加补丁respond.js和HTML5.js要在引入jQuery文件和Bootstrap文件之前。
105、添加关于超级文本标记语言HTML5的第二补丁,所述第二补丁用于修复所述前端框架相关控件;
ECMAScript5是基于JavaScript规范标准的最新修正,与HTML5本质类似。ECMAScript5给出了一系列新的应用程序接口(application programming interface,API),API又称为应用编程接口,浏览器支持大部分接口,也有少量API不是所有浏览器都支持,因此可引入es5-shim.js和es5-sham.js,使得不支持es5API的浏览器支持es5API。
106、重新定义HTML标签;
大部分浏览器支持自定义的HTML标签,但是IE8却不能直接识别,因此在IE8下不能使用自定义标签,例如<echart-ng></echart-ng>,而要使用不属于自定义标签的类型,例如<div echart-ng></div>。
107、通过源码修改所述前端框架相关控件的属性以使得IE8的页面布局在所述前端框架中显示正常。
AngularJS依赖的相关控件具体包括树控件、表格控件和上传控件等,上述步骤中的方法是解决AngularJS本身与IE8之间的兼容性问题,本步骤中趋于解决AngularJS的相关控件与IE8的兼容性问题,不仅使得angularjs1本身可以在IE8运行,同时确保它的相关控件也可以在IE8下运行。
本申请实施例首先在整体的应用框架上解决了与IE8的兼容问题,然后分析了具体控件与IE8产生冲突的原因,据此有针对性地对控件的属性进行修改以使得angularjs1下的各个控件在IE8中能正常使用。
可选地,在上述实施例的基础上,本发明实施例提供的网页优化方法的第一个可选实施例中,所述前端框架包括AngularJS1和jQuery,所述AngularJS版本的预设值为1.2.30,所述jQuery版本的预设值为1.9.1。
本申请实施例为了解决AngularJS和IE8的兼容性问题,需要先降低AngularJS1和jQuery的版本,具体的,将AngularJS降至1.2.30或以下,将jQuery降至1.9.1或以下。
在现有技术中,通过降低AngularJS和jQuery版本可使得AngularJS能够在IE8下使用,但是此时页面布局还处于混乱状态,因此还需要在此基础上继续改善。
因此在上述第一个可选实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中:
引入界面开发框架Bootstrap,所述引入的Bootstrap的版本为3.3。
Bootstrap负责页面布局的设计,Bootstrap与AngularJS搭配共同完成网页制作,因此在降低AngularJS版本的前提下,也需要适应性地调整Bootstrap的版本,引入的Bootstrap的版本应为3.3版本。
本申请实施例对Bootstrap设置特定的版本以此来保证用于网页页面布局的Bootstrap能在IE8中正常运行,为网页的正常显示奠定了基础。
在上述实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中,所述第一补丁包括respond.js和HTML5.js。
本申请实施例中引入的第一补丁具体包括respond.js和HTML5.js,这两个文件使得不支持或不完全支持HTML5的浏览器能够识别HTML5新增的标签,让AngularJS1的路由布局可以在IE8下正常使用。
本申请实施例针对浏览器无法识别HTML5新增标签的缺陷,引入了相应的补丁进行修正,解决了AngularJS1和IE8不兼容的细节问题。
在上述实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中,所述第二补丁包括es5-shim.js和es5-sham.js。
关于HTML5的第二补丁包括es5-shim.js和es5-sham.js,这两个补丁使得不支持es5api的浏览器支持es5api。
本申请实施例使得原本不可用的浏览器在添加了有关应用程序接口方面的补丁之后也支持es5api,因此对浏览器的选用要求变低了,因此可选择的浏览器数量增加,体现了本方案的实用性。
在上述实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中,所述添加关于超级文本标记语言HTML5的第二补丁之后,所述方法还包括:
在代码中加入foreach语句和getElementsByClassName方法。
foreach语句是用于循环的语句,即将数组或对象集合中的每个元素重复地进入一组表达式。getElementsByClassNam的作用是获取指定类名的所有元素。由于IE8不支持foreach语句和getElementsByClassName方法,因此需要添加代码弥补该缺点。
在调用foreach之前插入下面的代码,即可在浏览器不支持的情况下使用foreach()。
插入有关getElementsByClassName的代码具体如下:
本申请实施例加入了IE8缺少的foreach语句和getElementsByClassName方法,解决了HTML5补丁不能及时跟进最新HTML5规范的问题。
在上述实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中,所述前端框架相关控件包括树控件、表格控件和上传控件。
在实际应用中,用户直接接触到的是AngularJS下的各个控件,使用的也是这些控件,在解决了AngularJS本身兼容性问题的同时,还需要考虑其相关控件与IE8的兼容性问题。
在上述实施例的基础上,本发明实施例提供的网页优化方法的又一个可选实施例中,通过源码修改所述前端框架相关控件的属性包括:
将所述树控件的源码中的catch,finally的属性改为[“catch”]、[“finally”];
在所述表格控件的源码中加入getComputedStyle补丁;
将所述上传控件的源码中的$applyAsync属性修改为$evalAsync。
getComputedStyle补丁是一个用于获取页面元素样式的补丁,具体可获取页面的布局、样式、颜色等等。
AngularJS的核心之一就是$digset循环,在每一个$digset循环中,检测列表中的所有的检测对象都会被执行,用来执行$digset循环的方法可以是$applyAsync或$evalAsync,由于$apply()会触发整个应用中的所有$digset循环,因此当应用中有大量绑定关系的时候调用$applyAsync会降低数据处理的效率,因此我们可以将$applyAsync修改成$evalAsync。
本申请实施例中具体分析了AngularJS中各个控件与IE8不兼容的原因,然后根据原因有针对性地修改源码中相关控件的属性,以使得相关控件能够在IE8下正常使用。
本申请实施例还提供了一种网页优化装置,所述网页优化装置调用相关程序执行上述实施例中的网页优化方法部分或全部过程。
网页优化装置的功能模块如图4所示,所述装置20包括:
下载模块201,用于下载预设值以下版本的前端框架;
引入模块202,用于引入界面开发框架;
第一添加模块203,用于添加有关所述界面开发框架的第一补丁,所述第一补丁用于使得网页浏览器IE8兼容所述界面开发框架;
所述第一添加模块203,还用于添加jQuery文件和Bootstrap文件;
所述第一添加模块203,还用于添加关于超级文本标记语言HTML5的第二补丁,所述第二补丁用于修复所述前端框架相关控件;
定义模块204,用于重新定义HTML标签;
修改模块205,用于通过源码修改所述前端框架相关控件的属性以使得网页浏览器IE下的页面布局显示正常。
本申请实施例首先通过下载模块和引入模块在整体框架上解决了与IE8的兼容问题,并且分析了具体控件与IE8产生冲突的原因,据此有针对性地通过修改模块对控件的属性进行修改以使得angularjs1下的各个控件在IE8中能正常使用。
可选地,在上述图4所对应的实施例的基础上,请参阅图5,本发明实施例提供的网页优化装置的另一实施例中,所述装置还包括:
第二添加模块206,用于在代码中加入foreach语句和getElementsByClassName装置。
本申请在代码库中加入了foreach语句和getElementsByClassName方法,解决了HTML5补丁不能及时跟进最新HTML5规范的问题。
可选地,在上述图4所对应的实施例的基础上,请参阅图6,本发明实施例提供的网页优化装置的另一实施例中,所述修改模块205包括:
修改单元2051,用于将所述树控件的源码中的catch,finally的属性改为‘catch’、‘finally’;
添加单元2052,用于在所述表格控件的源码中加入getComputedStyle补丁;
所述修改单元2051,用于将所述上传控件的源码中的$applyAsync属性修改为$evalAsync。
本申请实施例中具体分析了AngularJS中各个控件与IE8不兼容的原因,然后根据原因有针对性地修改源码中相关控件的属性,以使得相关控件能够在IE8下正常使用。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统,装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,以上实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。