重庆前端html5分享大型WEB项目不可缺少的几个模块

重庆前端html5分享大型WEB项目不可缺少的几个模块,第1张

随着“互联网+”概念的普及,和移动互联网技术的成熟,越来越多的公司,需要更加智能、高效、合理、人性化的交互,对web前端的需求也会越来越大,同时由于web前端的技术框架种类繁多,更新也非常快,这样也需要大量的前端人员进行自己的技能提升。我们在做一个大型项目的时候,需要很多模块与元素去构建,接下来,重庆前端html5开发培训为大家分享在一个WEB项目中必不可少的几个模块。

一:webpack

什么是webpack?

为什么要用webpack?

传统web开发——在传统的web开发中,对于各种各样的资源,我们会通过html中的各种标签引入,那css资源文件来说,传统总,通常我们在定义好的css文件夹中创建一个css文件格式的的文件,在里面定义好的样式,在html中,通过标签将css资源引入进来,小型的项目这样做并没有什么大的问题,而且还比较快速。但随着公司的业务发展扩大,项目的也变得越来越大,这种方式的弊端就慢慢显现,项目臃肿,维护变得困难。webpack开发——在webpac开发中,通过我们定义好的资源加载规则,面对上面的大型项目时,在我们要新增资源文件,我们不需要再苦苦到几千行html文件中导入你新增的资源文件,只需要在你定义好的文件夹中新增文件,便可以正式投入到开发中了。这样的话大大简化了开发和维护的成本。

二:npm

什么是npm?

npm(nodejs packages manager)翻译过来就是node安装包管理工具,通俗来说,在开发过程总,一些常用的功能和实现,开发人员可以将他们封装起来,上传到npm,交给npm管理,其他开发人员变可以npm的命令,见这些封装好的代码块下载到自己的项目中供自己使用,这样避免了大家重复造轮子的尴尬现象,大大减少了开发难度和时间。

三:vue.js

什么是vue.js?

在讲vue.js之前,先一起来看看jquery,因为很多人都是从jquery转到vue.js,在转变的过程中,发现有些人开始学vue.j时候很难写出一个应用出来,在使用原生的js无论是对节点的获取,事件的监听和ajax的处理,都存在兼容的问题,开发过程中必须写大量的兼容性代码。而jquery出现正好的解决了这个问题。vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

vue.js——独特的一面

让从jquery转vue.js的开发人员很诧异的是,vue.js的视图层和model层是响应,我们只要修改了model层的数据,视图层会时时显示最新的数据结果。数据驱动,在DOM思想中,每当我们想 *** 控一样东西,我们总想去获取节点,在对这个节点进行 *** 作。而在vue.js中,这种想法是多余的,我们可以通过控制实例的的数据,来达到我们需要的结果。

vue.js可以做什么

vue.js只有30多k,相对动不动就300多k的库来说,这是非常适合来开发H5应用的,结合hbuider的runtime和native.js,开发出来的应用不仅跨平台,而且性能也相当不错,功能也和native app没有什么差异。

重庆中天学校JAVA培训老师建议毕业生,毕业了不要盲目挑战,做什么项目无所谓,关键是要有成长机会。大项目小项目没关系,主要是要能学到东西,不要好高骛远,不要随便下结论,不要对重复的工作厌倦,出了问题及时反馈领导,不要怕。

Worker能解决两个问题:解决程序阻塞问题:提升效率。不过Worker还有局限性,它不能 *** 作DOM。解决方法如下:

1、首先在创建之前,检测所用浏览器是否支持它,当前除了IE浏览器以外,其它主流浏览器都是支持的。

2、创建web worker文件:通过postMessage方法向 页面传回一段消息。

3、创建 Web Worker对象:添加一个事件监听器,传递消息时,执行事件监听器中的代码。

4、使用terminate方法终止 Web Worker。

5、最后检测是否存在 worker,如果不存在,则创建一个新的对象,然后运行 js代码中的内容。被调用的js文件内容如下。

用html5的localStorage方法就可以实现本地存储

<!DOCTYPE html>    

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

<div>name<input type="text" /></div>

<div>age<input type="text" /></div>

<div><input type="submit" /></div>

<script> 

document.getElementsByTagName("input")[2].onclick = function () {

var _name = document.getElementsByTagName("input")[0].value

var _age = document.getElementsByTagName("input")[1].value

localStorage.setItem("name", _name)

localStorage.setItem("age", _age)

}

</script>

</body>

</html>

需要配置服务端,本地运行无效


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7062362.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存