当前位置:千赢国际官网 > 千赢网页手机版登入 > 纯JavaScript代码实现文本比较工具,AngularJS身份验

纯JavaScript代码实现文本比较工具,AngularJS身份验

文章作者:千赢网页手机版登入 上传时间:2019-07-12

事先项目供给要求写三个纯js文本相比较工具,在此作者把代码共享在剧本之家平台供大家参谋,算法有待优化,本文写的不佳还请见谅。

AngularJS 简介

权限的规划中相比较普及的就是RBAC基于剧中人物的访谈调整,基本观念是,对系统操作的各类权力不是直接予以具体的用户,而是在用户集中与权力集结之间创设四个角色集结。每一项角色对应一组对应的权限。

先上效果图:

AngularJS 是四个 JavaScript 框架。它可透过 <script> 标签加多到 HTML 页面。

只要用户被分配了适龄的剧中人物后,该用户就有所此剧中人物的全数操作权限。那样做的利润是,不必在历次创立用户时都实行分红权限的操作,只要分配用户相应的角色就能够,何况剧中人物的权杖更换比用户的权杖更动要少得多,那样将简化用户的权力管理,减少系统的支出。

图片 1

AngularJS 通过 指令 扩大了 HTML,且经过 表明式 绑定数据到 HTML。

在Angular创设的单页面应用中,要促成那样的架构大家需求额外多做一些事.从完整项目上来说,大约有3处地点,前端程序员必要开始展览管理.

代码如下所示:

什么是 AngularJS?

  1. UI管理(依据用户全部的权柄,推断页面上的一部分剧情是还是不是出示)

把源码保存为html格式的文书就足以一贯运营了

AngularJS 使得开垦当代的单一页面应用程序(SPAs:Single Page Applications)变得进一步便于。

2. 路由拍卖(当用户访谈叁个它从不权限访谈的url时,跳转到一个荒唐提醒的页面)

<!doctype html>
<html>
<head>
<title>文本比较工具</title>
<style type="text/css">
*{padding:px;margin:px;}
html,body{
overflow-y: hidden;
}
.edit_div{
border: px solid #CCCCCC;
overflow: auto;
position: relative;
}
.edit_div textarea{
resize:none;
background: none repeat scroll transparent;
border: none;
width: %;
height:px;
overflow-y: scroll;
position: absolute;
left: px;
top: px;
z-index: ;
font-size: px;
white-space: pre-wrap;
word-wrap: break-word;
word-break:break-all;
}
.edit_div pre{ 
overflow-y: scroll;
white-space: pre-wrap;
word-wrap: break-word;
word-break:break-all;
width: %;
height:px;
text-align: left;
color: #ffffff;
z-index: ;
font-size: px;
}
</style>
</head>
<body>
<table style="width:%">
<tr>
<td style="width:%">
<div class="edit_div">
<pre id="edit_pre_"></pre>
<textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
<td style="width:%">
<div class="edit_div">
<pre id="edit_pre_"></pre>
<textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function test_scroll(){
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;
document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
}
function test_scroll(){
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;
document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
}
function textchange(){
var op = eq({ value: document.getElementById("edit_textarea_").value, value: document.getElementById("edit_textarea_").value });
document.getElementById("edit_pre_").innerHTML=op.value "rn";
document.getElementById("edit_pre_").innerHTML=op.value "rn";
}
function eq(op) {
if(!op){
return op;
}
if(!op.value_style){
op.value_style="background-color:#FECC;";
}
if(!op.value_style){
op.value_style="background-color:#FECC;";
}
if(!op.eq_min){
op.eq_min=;
}
if(!op.eq_index){
op.eq_index=;
}
if (!op.value || !op.value) {
return op;
}
var ps = {
v_i: ,
v_new_value: "",
v_i: ,
v_new_value: ""
};
while (ps.v_i < op.value.length && ps.v_i < op.value.length) {
if (op.value[ps.v_i] == op.value[ps.v_i]) {
ps.v_new_value  = op.value[ps.v_i].replace(/</g,"<").replace(">",">");
ps.v_new_value  = op.value[ps.v_i].replace(/</g,"<").replace(">",">");
ps.v_i  = ;
ps.v_i  = ;
if (ps.v_i >= op.value.length) {
ps.v_new_value  = ""   op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">")   "";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value  = ""   op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">")   "";
break;
}
} else {
ps.v_index = ps.v_i   ;
ps.v_eq_length = ;
ps.v_eq_max = ;
ps.v_start = ps.v_i   ;
while (ps.v_index < op.value.length) {
if (op.value[ps.v_index] == op.value[ps.v_i   ps.v_eq_length]) {
ps.v_eq_length  = ;
} else if (ps.v_eq_length > ) {
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_eq_length = ;
break;//只寻找最近的
}
ps.v_index  = ;
}
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_index = ps.v_i   ;
ps.v_eq_length = ;
ps.v_eq_max = ;
ps.v_start = ps.v_i   ;
while (ps.v_index < op.value.length) {
if (op.value[ps.v_index] == op.value[ps.v_i   ps.v_eq_length]) {
ps.v_eq_length  = ;
} else if (ps.v_eq_length > ) {
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_eq_length = ;
break;//只寻找最近的
}
ps.v_index  = ;
}
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {
ps.v_eq_max = ;
}
if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {
ps.v_eq_max = ;
}
if ((ps.v_eq_max == && ps.v_eq_max == )) {
ps.v_new_value  = ""   op.value[ps.v_i].replace(/</g,"<").replace(">",">")   "";
ps.v_new_value  = ""   op.value[ps.v_i].replace(/</g,"<").replace(">",">")   "";
ps.v_i  = ;
ps.v_i  = ;
if (ps.v_i >= op.value.length) {
ps.v_new_value  = ""   op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">")   "";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value  = ""   op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">")   "";
break;
}
} else if (ps.v_eq_max > ps.v_eq_max) {
ps.v_new_value  = ""   op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">")   "";
ps.v_i = ps.v_start;
} else {
ps.v_new_value  = ""   op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">")   "";
ps.v_i = ps.v_start;
}
}
}
op.value = ps.v_new_value;
op.value = ps.v_new_value;
return op;
}
function settextheight(){
var heigth=(document.documentElement.clientHeight-) "px"
document.getElementById("edit_pre_").style.height=heigth;
document.getElementById("edit_textarea_").style.height=heigth;
document.getElementById("edit_pre_").style.height=heigth;
document.getElementById("edit_textarea_").style.height=heigth;
}
window.onload=function(){
settextheight();
window.onresize=function(){
settextheight();
}
}
</script>
</body>
</html>

AngularJS 把应用程序数据绑定到 HTML 元素。

3. HTTP伸手管理(当大家发送二个数额乞请,如若回到的status是401依旧403,则一般重定向到三个荒谬提醒的页面)

上述代码是应用的纯JavaScript代码实现文件相比工具,希望对大家持有扶助!

AngularJS 能够仿造和重复 HTML 成分。

假诺要在客户端采取AngularJS做身份验证的话,推荐应用service来做,因为service是单例的,能够很便利的在颇具view,controller,directives,filters和别的service中国共产党享数据,而不用利用揭破全局变量的艺术,封装性也是有肯定的维系。

您可能感兴趣的篇章:

  • 多个相比较有效的Javascript工具函数代码
  • 多少个相比较实用的JavaScript 测量检验及效果工具
  • js文本框走动跑马灯效果代码分享
  • js点击文本框后才加载验证码实例代码
  • js总括文本框输入的字符数

AngularJS 能够隐藏和展现 HTML 成分。

二个简约的例证:

AngularJS 可以在 HTML 成分"背后"加多代码。

services.factory('UserService', [function() { 
var sdo = { 
isLogged: false, 
username: '' 
}; 
return sdo; 
}]);

AngularJS 协理输入验证。

AngularJS中选择service都是由此依赖申明的办法来做的,比方:

平凡,在AngularJS中选用JSON作为存款和储蓄数据的模子。大家兴许那样在controller中写model:

var controllers = angular.module('myApp.controllers', []);
/* ... */
controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
}]);

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:纯JavaScript代码实现文本比较工具,AngularJS身份验

关键词: 千赢国际官网