cari
Rumahhujung hadapan webtutorial jsCara menggunakan AngularJs untuk membina sistem pengurusan kebenaran [Simple]_AngularJS

1. Pengenalan

Artikel ini akan memperkenalkan cara menggunakan AngularJs pada projek sebenar. Artikel ini akan menggunakan AngularJS untuk membina sistem pengurusan kebenaran yang mudah. Tidak banyak yang ingin diperkatakan di bawah, mari terus ke topik.

2. Pengenalan kepada reka bentuk seni bina keseluruhan

Mula-mula, lihat lukisan reka bentuk seni bina keseluruhan projek:

Daripada gambar di atas anda boleh melihat struktur keseluruhan keseluruhan projek Seterusnya, saya akan memperkenalkan struktur keseluruhan projek secara terperinci:

Gunakan API Web Asp.net untuk melaksanakan perkhidmatan REST. Kaedah pelaksanaan ini telah mencapai penggunaan biasa, berasingan dan pengembangan perkhidmatan back-end yang lebih baik. Lapisan web bergantung pada antara muka perkhidmatan aplikasi dan menggunakan Castle Windsor untuk melaksanakan suntikan pergantungan.

Lapisan paparan (UI pengguna)

Lapisan paparan menggunakan halaman SPA yang dilaksanakan oleh AngularJS. Semua data halaman dimuatkan secara tidak segerak dan sebahagiannya dimuat semula Pelaksanaan ini akan mempunyai pengalaman pengguna yang lebih baik.

Perkhidmatan Permohonan

AngularJS meminta API Web melalui perkhidmatan Http untuk mendapatkan data, dan pelaksanaan API Web memanggil lapisan aplikasi untuk meminta data.

Lapisan infrastruktur

Lapisan infrastruktur termasuk pelaksanaan pergudangan dan pelaksanaan beberapa kaedah awam.

Lapisan gudang dilaksanakan menggunakan EF Code First, dan kaedah EF Migration digunakan untuk mencipta dan mengemas kini pangkalan data.

Lapisan LH.Common melaksanakan beberapa kaedah biasa, seperti pelaksanaan kelas bantuan log, sambungan pepohon ekspresi dan kelas lain.

Lapisan Domain

Lapisan domain terutamanya melaksanakan semua model domain projek, termasuk pelaksanaan model domain dan definisi antara muka pergudangan.

Selain memperkenalkan struktur lengkap, pelaksanaan perkhidmatan bahagian belakang dan pelaksanaan bahagian hadapan Web projek akan diperkenalkan secara berasingan.

3. Pelaksanaan perkhidmatan bahagian belakang

Perkhidmatan back-end terutamanya menggunakan Asp.net Web API untuk melaksanakan perkhidmatan back-end, dan Castle Windsor digunakan untuk melengkapkan suntikan pergantungan.

Di sini kami mengambil pengurusan pengguna dalam pengurusan kebenaran untuk memperkenalkan pelaksanaan perkhidmatan Rest Web API.

Pelaksanaan perkhidmatan REST yang menyediakan data pengguna:

public class UserController : ApiController
 {
  private readonly IUserService _userService;
  public UserController(IUserService userService)
  {
   _userService = userService;
  }
  [HttpGet]
  [Route("api/user/GetUsers")]
  public OutputBase GetUsers([FromUri]PageInput input)
  {
   return _userService.GetUsers(input);
  }
  [HttpGet]
  [Route("api/user/UserInfo")]
  public OutputBase GetUserInfo(int id)
  {
   return _userService.GetUser(id);
  }
  [HttpPost]
  [Route("api/user/AddUser")]
  public OutputBase CreateUser([FromBody] UserDto userDto)
  {
   return _userService.AddUser(userDto);
  }
  [HttpPost]
  [Route("api/user/UpdateUser")]
  public OutputBase UpdateUser([FromBody] UserDto userDto)
  {
   return _userService.UpdateUser(userDto);
  }
  [HttpPost]
  [Route("api/user/UpdateRoles")]
  public OutputBase UpdateRoles([FromBody] UserDto userDto)
  {
   return _userService.UpdateRoles(userDto);
  }
  [HttpPost]
  [Route("api/user/DeleteUser/{id}")]
  public OutputBase DeleteUser(int id)
  {
   return _userService.DeleteUser(id);
  }
  [HttpPost]
  [Route("api/user/DeleteRole/{id}/{roleId}")]
  public OutputBase DeleteRole(int id, int roleId)
  {
   return _userService.DeleteRole(id, roleId);
  }
 }

Seperti yang dapat dilihat daripada pelaksanaan kod di atas, perkhidmatan REST Pengguna bergantung pada antara muka IUserService dan tidak meletakkan semua logik perniagaan dalam pelaksanaan API Web dengan cara tradisional, tetapi merangkum beberapa pelaksanaan perniagaan khusus ke dalam In yang sepadan. lapisan aplikasi, Rest API hanya bertanggungjawab untuk memanggil perkhidmatan dalam lapisan aplikasi yang sepadan. Kelebihan reka bentuk ini ialah:

Jabatan perkhidmatan REST bergantung pada antara muka lapisan aplikasi, yang memisahkan tanggungjawab dan meninggalkan instantiasi perkhidmatan lapisan aplikasi kepada bekas suntikan kebergantungan yang berasingan untuk diselesaikan, manakala perkhidmatan REST hanya bertanggungjawab untuk memanggil kaedah perkhidmatan aplikasi yang sepadan kepada mendapatkan data. Penggunaan antara muka bergantung dan bukannya pelaksanaan kelas tertentu menghasilkan gandingan yang rendah antara kelas. Perkhidmatan REST tidak termasuk pelaksanaan logik perniagaan khusus. Reka bentuk jenis ini boleh membuat perkhidmatan dipisahkan dengan lebih baik Jika anda kemudiannya ingin menggunakan WCF untuk melaksanakan perkhidmatan REST, anda tidak perlu menulis logik berulang kali dalam kelas perkhidmatan REST WCF Ini betul-betul baik perkhidmatan aplikasi untuk melaksanakan perkhidmatan WCF REST. Oleh itu, pelaksanaan logik perniagaan diekstrak ke lapisan perkhidmatan aplikasi Reka bentuk ini akan menjadikan tanggungjawab perkhidmatan REST lebih tunggal dan pelaksanaan perkhidmatan REST lebih mudah dikembangkan.

 Pelaksanaan perkhidmatan aplikasi pengguna:

public class UserService : BaseService, IUserService
 {
  private readonly IUserRepository _userRepository;
  private readonly IUserRoleRepository _userRoleRepository;
  public UserService(IUserRepository userRepository, IUserRoleRepository userRoleRepository)
  {
   _userRepository = userRepository;
   _userRoleRepository = userRoleRepository;
  }
  public GetResults<UserDto> GetUsers(PageInput input)
  {
   var result = GetDefault<GetResults<UserDto>>();
   var filterExp = BuildExpression(input);
   var query = _userRepository.Find(filterExp, user => user.Id, SortOrder.Descending, input.Current, input.Size);
   result.Total = _userRepository.Find(filterExp).Count();
   result.Data = query.Select(user => new UserDto()
   {
    Id = user.Id,
    CreateTime = user.CreationTime,
    Email = user.Email,
    State = user.State,
    Name = user.Name,
    RealName = user.RealName,
    Password = "*******",
    Roles = user.UserRoles.Take(4).Select(z => new BaseEntityDto()
    {
     Id = z.Role.Id,
     Name = z.Role.RoleName
    }).ToList(),
    TotalRole = user.UserRoles.Count()
   }).ToList();
   return result;
  }
  public UpdateResult UpdateUser(UserDto user)
  {
   var result = GetDefault<UpdateResult>();
   var existUser = _userRepository.FindSingle(u => u.Id == user.Id);
   if (existUser == null)
   {
    result.Message = "USER_NOT_EXIST";
    result.StateCode = 0x00303;
    return result;
   }
   if (IsHasSameName(existUser.Name, existUser.Id))
   {
    result.Message = "USER_NAME_HAS_EXIST";
    result.StateCode = 0x00302;
    return result;
   }
   existUser.RealName = user.RealName;
   existUser.Name = user.Name;
   existUser.State = user.State;
   existUser.Email = user.Email;
   _userRepository.Update(existUser);
   _userRepository.Commit();
   result.IsSaved = true;
   return result;
  }
  public CreateResult<int> AddUser(UserDto userDto)
  {
   var result = GetDefault<CreateResult<int>>();
   if (IsHasSameName(userDto.Name, userDto.Id))
   {
    result.Message = "USER_NAME_HAS_EXIST";
    result.StateCode = 0x00302;
    return result;
   }
   var user = new User()
   {
    CreationTime = DateTime.Now,
    Password = "",
    Email = userDto.Email,
    State = userDto.State,
    RealName = userDto.RealName,
    Name = userDto.Name
   };
   _userRepository.Add(user);
   _userRepository.Commit();
   result.Id = user.Id;
   result.IsCreated = true;
   return result;
  }
  public DeleteResult DeleteUser(int userId)
  {
   var result = GetDefault<DeleteResult>();
   var user = _userRepository.FindSingle(x => x.Id == userId);
   if (user != null)
   {
    _userRepository.Delete(user);
    _userRepository.Commit();
   }
   result.IsDeleted = true;
   return result;
  }
  public UpdateResult UpdatePwd(UserDto user)
  {
   var result = GetDefault<UpdateResult>();
   var userEntity =_userRepository.FindSingle(x => x.Id == user.Id);
   if (userEntity == null)
   {
    result.Message = string.Format("当前编辑的用户“{0}”已经不存在", user.Name);
    return result;
   }
   userEntity.Password = user.Password;
   _userRepository.Commit();
   result.IsSaved = true;
   return result;
  }
  public GetResult<UserDto> GetUser(int userId)
  {
   var result = GetDefault<GetResult<UserDto>>();
   var model = _userRepository.FindSingle(x => x.Id == userId);
   if (model == null)
   {
    result.Message = "USE_NOT_EXIST";
    result.StateCode = 0x00402;
    return result;
   }
   result.Data = new UserDto()
   {
    CreateTime = model.CreationTime,
    Email = model.Email,
    Id = model.Id,
    RealName = model.RealName,
    State = model.State,
    Name = model.Name,
    Password = "*******"
   };
   return result;
  }
  public UpdateResult UpdateRoles(UserDto user)
  {
   var result = GetDefault<UpdateResult>();
   var model = _userRepository.FindSingle(x => x.Id == user.Id);
   if (model == null)
   {
    result.Message = "USE_NOT_EXIST";
    result.StateCode = 0x00402;
    return result;
   }
   var list = model.UserRoles.ToList();
   if (user.Roles != null)
   {
    foreach (var item in user.Roles)
    {
     if (!list.Exists(x => x.Role.Id == item.Id))
     {
      _userRoleRepository.Add(new UserRole { RoleId = item.Id, UserId = model.Id });
     }
    }
    foreach (var item in list)
    {
     if (!user.Roles.Exists(x => x.Id == item.Id))
     {
      _userRoleRepository.Delete(item);
     }
    }
    _userRoleRepository.Commit();
    _userRepository.Commit();
   }
   result.IsSaved = true;
   return result;
  }
  public DeleteResult DeleteRole(int userId, int roleId)
  {
   var result = GetDefault<DeleteResult>();
   var model = _userRoleRepository.FindSingle(x => x.UserId == userId && x.RoleId == roleId);
   if (model != null)
   {
    _userRoleRepository.Delete(model);
    _userRoleRepository.Commit();
   }
   result.IsDeleted = true;
   return result;
  }
  public bool Exist(string username, string password)
  {
   return _userRepository.FindSingle(u => u.Name == username && u.Password == password) != null;
  }
  private bool IsHasSameName(string name, int userId)
  {
   return !string.IsNullOrWhiteSpace(name) && _userRepository.Find(u=>u.Name ==name && u.Id != userId).Any();
  }
  private Expression<Func<User, bool>> BuildExpression(PageInput pageInput)
  {
   Expression<Func<User, bool>> filterExp = user => true;
   if (string.IsNullOrWhiteSpace(pageInput.Name))
    return filterExp;
   switch (pageInput.Type)
   {
    case 0:
     filterExp = user => user.Name.Contains(pageInput.Name) || user.Email.Contains(pageInput.Name);
     break;
    case 1:
     filterExp = user => user.Name.Contains(pageInput.Name);
     break;
    case 2:
     filterExp = user => user.Email.Contains(pageInput.Name);
     break;
   }
   return filterExp;
  }
 }

Lapisan perkhidmatan aplikasi di sini sebenarnya boleh dioptimumkan lagi untuk merealisasikan pemisahan membaca dan menulis pada tahap kod, mentakrifkan antara muka IReadOnlyService dan antara muka IWriteServie, dan mengabstrakkan operasi tulis ke dalam BaseService menggunakan kaedah generik. Operasi menambah, memadam dan mengubah suai dikongsi Sebab operasi ini boleh dikongsi adalah kerana operasi ini sangat serupa, tetapi entiti operasi adalah berbeza. Malah, pelaksanaan seperti ini telah digunakan dalam projek sumber terbuka saya yang lain: OnlineStore Anda boleh merujuk kepada ini untuk melaksanakannya sendiri.

 Pelaksanaan lapisan pergudangan:

Perkhidmatan aplikasi pengguna tidak bergantung secara langsung pada kelas storan tertentu, tetapi juga bergantung pada antara muka mereka. Pelaksanaan kelas storan pengguna yang sepadan adalah seperti berikut:

public class BaseRepository<TEntity> : IRepository<TEntity>
  where TEntity :class , IEntity
 {
  private readonly ThreadLocal<UserManagerDBContext> _localCtx = new ThreadLocal<UserManagerDBContext>(() => new UserManagerDBContext());
  public UserManagerDBContext DbContext { get { return _localCtx.Value; } }
  public TEntity FindSingle(Expression<Func<TEntity, bool>> exp = null)
  {
   return DbContext.Set<TEntity>().AsNoTracking().FirstOrDefault(exp);
  }
  public IQueryable<TEntity> Find(Expression<Func<TEntity, bool>> exp = null)
  {
   return Filter(exp);
  }
  public IQueryable<TEntity> Find(Expression<Func<TEntity, bool>> expression, Expression<Func<TEntity, dynamic>> sortPredicate, SortOrder sortOrder, int pageNumber, int pageSize)
  {
   if (pageNumber <= 0)
    throw new ArgumentOutOfRangeException("pageNumber", pageNumber, "pageNumber must great than or equal to 1.");
   if (pageSize <= 0)
    throw new ArgumentOutOfRangeException("pageSize", pageSize, "pageSize must great than or equal to 1.");
   var query = DbContext.Set<TEntity>().Where(expression);
   var skip = (pageNumber - 1) * pageSize;
   var take = pageSize;
   if (sortPredicate == null)
    throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");
   switch (sortOrder)
   {
    case SortOrder.Ascending:
     var pagedAscending = query.SortBy(sortPredicate).Skip(skip).Take(take);
     return pagedAscending;
    case SortOrder.Descending:
     var pagedDescending = query.SortByDescending(sortPredicate).Skip(skip).Take(take);
     return pagedDescending;
   }
   throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");
  }
  public int GetCount(Expression<Func<TEntity, bool>> exp = null)
  {
   return Filter(exp).Count();
  }
  public void Add(TEntity entity)
  {
   DbContext.Set<TEntity>().Add(entity);
  }
  public void Update(TEntity entity)
  {
   DbContext.Entry(entity).State = EntityState.Modified;
  }
  public void Delete(TEntity entity)
  {
   DbContext.Entry(entity).State = EntityState.Deleted;
   DbContext.Set<TEntity>().Remove(entity);
  }
  public void Delete(ICollection<TEntity> entityCollection)
  {
   if(entityCollection.Count ==0)
    return;
   DbContext.Set<TEntity>().Attach(entityCollection.First());
   DbContext.Set<TEntity>().RemoveRange(entityCollection);
  }
  private IQueryable<TEntity> Filter(Expression<Func<TEntity, bool>> exp)
  {
   var dbSet = DbContext.Set<TEntity>().AsQueryable();
   if (exp != null)
    dbSet = dbSet.Where(exp);
   return dbSet;
  }
  public void Commit()
  {
   DbContext.SaveChanges();
  }
 }
public class UserRepository :BaseRepository<User>, IUserRepository
 {
 }

4. Pelaksanaan bahagian hadapan AngularJS

Bahagian hadapan Web dilaksanakan menggunakan AngularJS dan menggunakan model pembangunan modular. Struktur kod khusus bahagian hadapan Web ditunjukkan dalam rajah di bawah:

App/images // 存放Web前端使用的图片资源
App/Styles // 存放样式文件
App/scripts // 整个Web前端用到的脚本文件
    / Controllers // angularJS控制器模块存放目录
    / directives // angularJs指令模块存放目录
    / filters // 过滤器模块存放目录
    / services // 服务模块存放目录
   / app.js // Web前端程序配置模块(路由配置)
App/Modules // 项目依赖库,angular、Bootstrap、Jquery库
App/Views // AngularJs视图模板存放目录

  使用AngularJS开发的Web应用程序的代码之间的调用层次和后端基本一致,也是视图页面——》控制器模块——》服务模块——》Web API服务。

  并且Web前端CSS和JS资源的加载采用了Bundle的方式来减少请求资源的次数,从而加快页面加载时间。具体Bundle类的配置:

public class BundleConfig
 {
  // For more information on bundling, visit http://go.microsoft.com/fwlink/&#63;LinkId=301862
  public static void RegisterBundles(BundleCollection bundles)
  {
   //类库依赖文件
   bundles.Add(new ScriptBundle("~/js/base/lib").Include(
     "~/app/modules/jquery-1.11.2.min.js",
     "~/app/modules/angular/angular.min.js",
     "~/app/modules/angular/angular-route.min.js",
     "~/app/modules/bootstrap/js/ui-bootstrap-tpls-0.13.0.min.js",
     "~/app/modules/bootstrap-notify/bootstrap-notify.min.js"
     ));
   //angularjs 项目文件
   bundles.Add(new ScriptBundle("~/js/angularjs/app").Include(
     "~/app/scripts/services/*.js",
     "~/app/scripts/controllers/*.js",
     "~/app/scripts/directives/*.js",
     "~/app/scripts/filters/*.js",
     "~/app/scripts/app.js"));
   //样式
   bundles.Add(new StyleBundle("~/js/base/style").Include(
     "~/app/modules/bootstrap/css/bootstrap.min.css",
     "~/app/styles/dashboard.css",
     "~/app/styles/console.css"
     ));
  }
 }

  首页 Index.cshtml

<!DOCTYPE html>
<html ng-app="LH">
<head>
 <meta name="viewport" content="width=device-width" />
 <title>简易权限管理系统Demo</title>
 @Styles.Render("~/js/base/style")
 @Scripts.Render("~/js/base/lib")
</head>
<body ng-controller="navigation">
 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">简易权限管理系统Demo</a>
   </div>
   <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
     <li class="{{item.isActive&#63;'active':''}}" ng-repeat="item in ls">
      <a href="#{{item.urls[0].link}}">{{item.name}}</a>
     </li>
    </ul>
    <div class="navbar-form navbar-right">
     <a href="@Url.Action("UnLogin", "Home", null)" class="btn btn-danger">
      {{lang.exit}}
     </a>
    </div>
   </div>
  </div>
 </nav>
 <div class="container-fluid">
  <div class="row">
   <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
     <li class="{{item.isActive&#63;'active':''}}" ng-repeat="item in urls"><a href="#{{item.link}}">{{item.title}}</a></li>
    </ul>
   </div>
   <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div ng-view></div>
   </div>
  </div>
 </div>
 @Scripts.Render("~/js/angularjs/app")
</body>
</html>

五、运行效果

  介绍完前后端的实现之后,接下来让我们看下整个项目的运行效果:

六、总结

  到此,本文的所有内容都介绍完了,尽管本文的AngularJS的应用项目还有很多完善的地方,例如没有缓冲的支持、没有实现读写分离,没有对一些API进行压力测试等。但AngularJS在实际项目中的应用基本是这样的,大家如果在项目中有需要用到AngularJS,正好你们公司的后台又是.NET的话,相信本文的分享可以是一个很好的参考。另外,关于架构的设计也可以参考我的另一个开源项目:OnlineStoreFastWorks

以上所述是小编给大家介绍的使用AngularJs打造权限管理系统的方法,希望对大家有所帮助!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Ganti aksara rentetan dalam javascriptGanti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Tutorial Persediaan API Carian Google CustomTutorial Persediaan API Carian Google CustomMar 04, 2025 am 01:06 AM

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

Bina Aplikasi Web Ajax anda sendiriBina Aplikasi Web Ajax anda sendiriMar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Contoh warna json failContoh warna json failMar 03, 2025 am 12:35 AM

Siri artikel ini ditulis semula pada pertengahan 2017 dengan maklumat terkini dan contoh segar. Dalam contoh JSON ini, kita akan melihat bagaimana kita dapat menyimpan nilai mudah dalam fail menggunakan format JSON. Menggunakan notasi pasangan nilai utama, kami boleh menyimpan apa-apa jenis

10 JQuery Syntax Highlighters10 JQuery Syntax HighlightersMar 02, 2025 am 12:32 AM

Tingkatkan Penyampaian Kod Anda: 10 Penyeret Sintaks untuk Pemaju Coretan kod perkongsian di laman web atau blog anda adalah amalan biasa bagi pemaju. Memilih penyapu sintaks yang betul dapat meningkatkan daya tarikan dan daya tarikan visual dengan ketara. T

8 plugin susun atur halaman jquery yang menakjubkan8 plugin susun atur halaman jquery yang menakjubkanMar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

10 JavaScript & JQuery MVC Tutorial10 JavaScript & JQuery MVC TutorialMar 02, 2025 am 01:16 AM

Artikel ini membentangkan pemilihan lebih daripada 10 tutorial mengenai rangka kerja javascript dan jquery model-view-controller (MVC), sesuai untuk meningkatkan kemahiran pembangunan web anda pada tahun baru. Tutorial ini merangkumi pelbagai topik, dari Foundatio

Apa itu ' ini ' Dalam JavaScript?Apa itu ' ini ' Dalam JavaScript?Mar 04, 2025 am 01:15 AM

Mata teras Ini dalam JavaScript biasanya merujuk kepada objek yang "memiliki" kaedah, tetapi ia bergantung kepada bagaimana fungsi dipanggil. Apabila tidak ada objek semasa, ini merujuk kepada objek global. Dalam penyemak imbas web, ia diwakili oleh tetingkap. Apabila memanggil fungsi, ini mengekalkan objek global; tetapi apabila memanggil pembina objek atau mana -mana kaedahnya, ini merujuk kepada contoh objek. Anda boleh mengubah konteks ini menggunakan kaedah seperti panggilan (), memohon (), dan mengikat (). Kaedah ini memanggil fungsi menggunakan nilai dan parameter yang diberikan. JavaScript adalah bahasa pengaturcaraan yang sangat baik. Beberapa tahun yang lalu, ayat ini

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa