web前端入门面对的git、angular和web开发必备的技术以及前端开发如何的运用技术?

举报
泽宇-Li 发表于 2020/06/17 09:33:25 2020/06/17
【摘要】 web前端入门面对的git、angular和web开发必备的技术以及前端开发如何的运用技术?

在接触web前端开发的这几周为了深入了解前端开发包括企业中维护等

探究了一些git开发的命令:

   git init 初始化程序

   git clone 克隆什么

   git  add 提交

   git status 检查当前状态

   git pull 拉取 除了这些还有很多的关于git 的命令

还有angular的开发命令:

   nmp start 开始

   nmp  new 什么 新建一个程序

   新建模块  moudle

   ng g m xxx  带有路由的模块

   ng  g c (componet)xxx//组件

前端开发总结了一下几个技术

html5:

          html5是万维网发布的最新语言规范,做web前端,精通html5是必须具备的技能之一

css3:

          css语言开发时朝着模块化发展的包括:盒子模型、列表模块、文字特效和多栏布局等css对整个web前端设计是必备的技能

java:

         java是一种直译式的脚本语言,是一种动态类型、弱类型、基于原类型的语言、内置支持类型掌握了java就掌握了前端不同动态的效果

jquery:

        是轻量级 js库它兼容css3JQuery,能够使用户更方便的处理html 实现动画效果 更方便的为网站提供ajax交互


AjAx:

      若是ui设计和服务框架之间的范围被严格的区分开,程序员就需要更新和变化技术集合了

1:静态页面

很早之前web界面都是在互联网上使用,网民浏览某个界面填写标签或列表后进行提交,有时候使用js来作为客户端校验的功能


<html>

<head>

<title>测试一</title>

</head>

<body>

<h1>主题</h1>

<p>段落内容</p>

</body>

2:带有简单逻辑的界面设计

用于将first和two的俩个输入框中的字符串连接然后弹出窗口显示


<html>

    <head>

        <title>测试</title>

    </head>

    <body>

        <input id="firstNameInput" type="text" /> 

        <input id="twoNameInput" type="text" /> 

        <input type="button" onclick="greet()" />

        <script language="JavaScript">

        function greet() {

            var firstName = document.getElementById("firstNameInput").value;

            var lastName = document.getElementById("twoNameInput").value;

            alert("Hello, " + firstName + "." + twoName);

        }

        </script> 

    </body>

</html>

3:结合服务端技术的编程语言

由于web前端 html界面不能进行数据保存所以出现了很多关于服务器的技术 那么如何实现把服务器和前端技术连接并保存前端内容呢?

使用post来提交数据如:


<form method="post" action="username.asp">form在前面的学习我们已经学过了包括action的运用

<p>First Name: <input type="text" name="firstName" /></p>

<p>Last Name: <input type="text" name="twoName" /></p>

<input type="submit" value="Submit" />

</form>

那么问题来了如果客户端和服务端的任务职责没明确划分比如一个字符串可以用js语言输出也可以用服务器语言输出,所以用到<%和%>标记的部分会在服务端执行,然后输出结果如:

<html>

<body>

<p>Hello hauwei!</p>

<p>

<%

response.write("Hello huawei from server!")

%>

</p>

</body>

到后来就有了JavaScript基础库

Prototype框架主要是为JavaScript代码提供了一种组织方式,对一些原生的JavaScript类型提供了一些扩展,比如数组、字符串,又额外提供了一些实用的数据结构,如:枚举,Hash等,除此之外,还对dom操作,事件,表单和Ajax做了一些封装。

前面我们提到的jQuery和他们就有所不同,比如jQuery提供了选择器用来选取界面的元素

基本语法是:

$("*") //选取所有元素

$("#lastname") //选取id为lastname的元素

$(".intro") //选取所有class="intro"的元素

$("p") //选取所有&lt;p&gt;元素

$(".intro.demo") //选取所有 class="intro"且class="demo"的元素

 链式表达式:

            在jQuery中可以使用链式表达来连续操作dom当然也可以不适用链式我们可以按下方法写出:                                              

var neat = $("p.neat");

neat.addClass("ohmy");

neat.show("slow");

但是有了链式表达式,我们只需要这么一行代码就可以完成这些:

$("p.neat").addClass("ohmy").show("slow");

最后一次出现了实质性变化数据模型和控制器:

数据模型主要是用来JavaScript类型上做一层封装,在数据中添加getset就更加有意义了比如把getset绑在restful服务商这样对于某处的读写就可以更新到数据库中,另一个特征是提供某一个时间用来监控数据的变化如:


var Todo = Backbone.Model.extend({

// Default attributes for the todo item.

defaults : function() {

return {

title : "empty todo...",

order : Todos.nextOrder(),

done : false

};

},

// Ensure that each todo created has `title`.

initialize : function() {

if (!this.get("title")) {

this.set({

"title" : this.defaults().title

});

}

},

// Toggle the 'done' state of this todo item.

toggle : function() {

this.save({

done : !this.get("done")

});

}

});

上述例子中,defaults方法用于提供模型的默认值,initialize方法用于做一些初始化工作,这两个都是约定的方法,toggle是自定义的,用于保存todo的选中状态

在Backbone中,是没有独立的控制器的,它的一些控制的职责都放在了视图里,所以其实这是一种MVP(Model View Presentation)模式,而AngularJS有很清晰的控制器层。

还是以这个todo为例,在AngularJS中,会有一些约定的注入,比如$scope,它是控制器、模型和视图之间的桥梁。在控制器定义的时候,将$scope作为参数,然后,就可以在控制器里面为它添加模型的支持。

function TodoCtrl($scope) {

$scope.todos = [{

text : 'learn angular',

done : true

}, {

text : 'build an angular app',

done : false

}];

$scope.addTodo = function() {

$scope.todos.push({

text : $scope.todoText,

done : false

});

$scope.todoText = '';

};

$scope.remaining = function() {

var count = 0;

angular.forEach($scope.todos, function(todo) {

count += todo.done ? 0 : 1;

});

return count;

};

$scope.archive = function() {

var oldTodos = $scope.todos;

$scope.todos = [];

angular.forEach(oldTodos, function(todo) {

if (!todo.done)

$scope.todos.push(todo);

});

};

}

对于html前端还有很多技术比如:视图、模板、路由、自定义标签随着web的变化让我们对语言需要更深入速度的了解他的情况
,所以很感谢华为的这次课程让我们对html前端从远古社会到工业革命的一个转变理念




【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。