`
liuguofeng
  • 浏览: 448786 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js库建设方案

 
阅读更多

前言:

自从互联网诞生之日起,JavaScript就成为统治web前端开发的通用语言,并在web开发人员群体中得到了广泛使用。JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等,并有多种皮肤样式可供选择,适合WEB开发工程师、前端制作工程师和界面设计师使用,适用于各种应用系统的开发。将这些常用的js、css样式等封装成库,达到最大程度的公用,这将能够大幅度地提高系统开发效率,降低开发成本。

一个良好设计的、适合自身产品的JavaScript基础库,能让一线工程师从繁重的基础问题中解放出来,将更多的精力用于优化业务逻辑和产品体验,从而提高研发效率。但这并非意味着所有公司都一味地采用通用开源的JavaScript库,因为业务特点和需求的不同,不同的公司所需要的JavaScript库的内容也不一样。从长期发展来看,针对自己公司业务的特点,设计最适合自己的JavaScript库才能够达到事半功倍的效果。

一、现状与存在的问题

目前公司现有系统前端的js脚本主要存在以下问题:

    1、浏览器兼容性问题

       系统js效果无法兼容IE6、IE7、IE8、FIREFOX等主流浏览器,出现页面错位、显示不全等问题。

    2、js书写不规范。

       不少系统页面js效果全部写在页面里面,页面杂乱,对于一些js效果需要单独js文件链接进来。

    3、js代码臃肿,客户端加载慢。

       客户端js代码实现复杂,代码量大;js代码冗余,无关代码较多。往往一个简单的效果,几行代码就能实现,确需要加入多个js文件。如我们只是写一个简单的图片滚动效果,一般情况下自己写就可以了,如果这时候用一个JQueryUI就显得臃肿了。

    4、js效果与现有系统框架冲突问题

       现有系统已使用前台框架与现有js代码相冲突,导致页面错误。如现有睿剑平台开发使用的是MooTools的类库,如果加入基于jquery的效果就会发生冲突。

    5、js代码与后台代码结合问题,导致js实现效果与UI设计的效果不一致。

       不少页面js效果需要按照UI设计进行包装,往往存在UI设计的界面实现不了或者界面走样

二、解决方案

    1、所有系统统一各js效果的UI界面和实现方式。

    2、js代码尽量精简而且规范,不要有任何多余的代码。

    2、对所有常用js效果进行封装,对外只提供调用的方法。

    3、增加兼容性,实现与现有的系统零冲突。

4、控件尽量做到高类聚,低耦合,拆分控件功能特性,让所有特性实现可插拔。

    5、各js效果要按需装载,保证从中调出的代码量是最小的

三、实现方式

    1、使用原生的js,不使用框架。

       缺点:书写复杂,代码量大,考虑浏览器兼容性

       优点:不依赖框架

    2、完全使用网上主流的js类库和组件,如jquery和jqueryUI,Extjs等

       优点:快速开发,简化操作,更多关注业务逻辑的实现,不用过分关心浏览器兼容等问题。

       缺点:不良依赖,忽略基础特性,受到框架的架构、设计的理念所限制和约束。

    3、自主开发全新类库和组件。

       优点:能灵活根据公司业务要求适应。

       缺点:工作量大,人力及条件达不到要求。

    4、使用网上主流的js类库,结合自身业务特点自主开发组件。

       优点:快速开发,简化操作,更多关注业务逻辑的实现,屏蔽浏览器兼容问题。

       缺点:不良依赖,忽略基础特性,受到类库的架构、设计的理念所限制和约束。

     建议:根据具体业务场景,使用主流js类库,结合自身业务特点自主开发组件与使用原生JS相结合。    

对于一些简单的页面效果,可以直接写一些原生的js代码实现,对于一些常用效果,可以将其封装成组件库,使用的时候用统一的语法调用,可以达到JS的结构与行为分离,使页面更干净,使用更方便,减少代码量,不易出错,浏览器兼容。

四、现有js库分析

现在业界的几种主流框架和类库,Jquery,mootools,prototype,YUI,Extjs,dojo,包括国内的淘宝的kissy,百度的七巧板等。

近期国外科技网站W3Techs公布了对近100万个网站进行调查分析报告显示:“jQuery是目前最流行的JavaScript库”。W3Techs发现被调查的网站中有61.0%的网站没有使用任何的JavaScript库,而使用jQuery的占到总数的29.2%,而使用MooTools、Prototyp、ASP.NET Ajax、Dojo等其他JavaScript库的总数只占到9.8%。jQurey占到了JavaScript市场份额的74.7%的市场份额。

如果除却环境原因,在各方面需求都非常均衡的情况下选择框架,个人认为可以从易用性,高性能,功能性,多浏览器兼容,跨平台,可扩展性等方面考虑。

考虑简单易用,Jquery的$远远领先了其他框架。

高性能上,根据主流框架选择器性能测试,Jquery在这方面也是出于领先地位。

功能上,包括UI和其他方面。现在各个框架基本都有自己的UI,不过EXT在这方面更强一些。

可扩展性方面:jquery有大量用户开发的插件可供使用

多浏览器兼容和跨平台现在已经成框架的最基本要求了,基本上每种框架都会跨浏览器。

分享到:
评论

相关推荐

    网站建设方案书写流程

    网站建设方案是规划和实施一个网站项目的关键步骤,它涵盖了从需求分析到项目实施的全过程。以下是一份详尽的网站建设方案书写的流程: 一、项目启动 在开始编写方案前,首先需要明确项目的目标和背景。这包括了解...

    基于“1 X”认证的“JavaScript程序设计”课程案例库建设研究.pdf

    然后,为确保基于“1+X”认证的“JavaScript程序设计”课程案例库建设研究工作能够有序完成,促进该课题研究工作的纵深发展,以及增强课题组成员的科研意识,通过会议研讨的形式,初步形成建设方案和实施计划。...

    2022年企业试验、仿真体系与研发云数据中心建设方案共48页.pptx

    【企业试验、仿真体系与研发云数据中心建设方案】 在当今数字化转型的时代,企业试验、仿真体系与研发云数据中心的建设成为提升效率、降低成本的关键。本方案详细阐述了新一代企业应用数据中心的基础平台,旨在构建...

    网上商城建设方案

    网上商城建设方案是一个详尽的计划,旨在指导企业或个人如何构建一个功能齐全、安全可靠的电子商务平台。在本文中,我们将深入探讨这个过程的关键要素,包括商城的背景、目标、市场分析、商业运作模式、建设流程、...

    wms数字化仓储物流(成品库)建设方案 (1).pptx

    ### WMS数字化仓储物流(成品库)建设方案关键知识点 #### 一、项目背景与目标 **项目背景:** - **仓储设备设施陈旧:** 当前成品库使用的仓储设备较为落后,无法满足高效、精准的仓储需求。 - **信息化水平低:*...

    葡萄酒网站建设方案葡萄酒网站建设方案.doc

    【葡萄酒网站建设方案】 一、网站建设目标 1. 提升品牌形象:通过专业且具有吸引力的网站设计,展示葡萄酒的独特魅力和品牌故事,提升公司在行业内的知名度和形象。 2. 提供信息平台:为消费者提供全面的葡萄酒...

    ecshop程序js库冲突patch

    "ecshop程序js库冲突patch"是针对这种问题的一个修复方案,由个人开发者或社区成员提出,用于解决ECShop中的JavaScript库冲突。 JavaScript库冲突通常发生在多个库同时使用时,因为它们可能都试图全局定义相同的...

    研发仿真体系应用数据中心建设方案.pdf

    研发仿真体系应用数据中心建设方案的知识点涉及数据中心的构建、管理与应用,企业级数据管理平台的发展,以及与仿真体系的结合。以下详细阐述这些知识点: 1. 数据中心建设方案:方案详细描述了如何建设一个集成了...

    电商平台建设方案详细.docx

    "电商平台建设方案详细" 本文将从电商平台建设方案的角度,详细介绍电商平台的架构、系统功能、开发框架、系统安全等方面的知识点。 一、项目总述 电商平台建设方案旨在为企业或个人提供网上交易洽谈的平台,帮助...

    宝克集团网站建设方案.doc

    【宝克集团网站建设方案】 在21世纪的信息时代,企业网站建设已经成为企业发展的必然趋势。随着互联网技术的快速发展,企业网站不仅是企业在虚拟世界的象征,更是实现电子商务、提升品牌形象和增强市场竞争力的关键...

    2022年研发仿真体系应用数据中心建设方案共39页.pptx

    【研发仿真体系应用数据中心建设方案】是一份详细阐述如何构建高效、智能化的企业级数据中心的方案。这份方案由多个部分组成,旨在为企业提供一个全面的数据管理和研发仿真的平台,以提高工作效率,促进数据的价值...

    学校网站建设方案详细.docx

    学校网站建设方案旨在构建一个高效、互动且具有教育特色的网络平台,以满足教育信息化的需求。该方案结合了现代互联网技术和教育领域的特点,旨在提升学校的信息化水平,促进教学、管理和服务的数字化进程。 1. ...

    生鲜水果电商平台建设方案.pdf

    这个“生鲜水果电商平台建设方案”着重于技术方案的探讨,旨在通过技术创新来改变传统的生鲜销售模式,为消费者提供更加便捷、安全的购物体验。下面将详细阐述此方案中的核心知识点。 一、平台架构设计 1. 前端设计...

    前端应用开发实训室建设方案.pdf

    为了适应这种变化,提供一个高效、实用的前端应用开发实训室建设方案至关重要。本文将深入探讨实训室建设的背景、必要性,并详细阐述具体的建设方案,包括平台介绍、课程体系等内容。 一、行业背景 随着互联网行业...

    旅游门户网站建设方案-最全的方案.docx

    旅游门户网站建设方案旨在提供一个全面的在线平台,以满足用户对旅游信息的需求,包括预订、查询、分享等服务。以下是对这一方案的详细说明: 1. **项目背景**: 在信息化时代,旅游行业借助互联网的力量,实现了...

    智慧核电设计数据中心建设方案.pdf

    【智慧核电设计数据中心建设方案】是针对核电设计领域的一个创新性解决方案,旨在利用现代信息技术提升核电设计过程的效率和质量。方案的核心是Hi-Key D3平台,这是一个新一代的数据管理平台,适应了“工业4.0”和...

    研发仿真体系应用数据中心建设方案.ppt

    【研发仿真体系应用数据中心建设方案】的PPT主要围绕企业级数据管理平台的构建和演化,以及在不同领域的应用展开。Hi-Key系列产品的迭代发展,展现了数据管理平台从基础框架到全面功能覆盖的过程。 Hi-Key TDM从1.0...

    工程建设仓库管理系统》是一款适用于工程建设单位使用的仓库库管管理系统.zip

    《工程建设仓库管理系统》是一款专为工程建设单位打造的高效、智能的仓库管理解决方案。这款系统集成了人工智能技术,旨在提升工程项目的物资管理效率,确保信息的准确性和及时性,从而优化库存控制,降低运营成本。...

Global site tag (gtag.js) - Google Analytics