Rumah hujung hadapan web Tutorial Layui 改造传统jquery扩展为layui模块方法介绍

改造传统jquery扩展为layui模块方法介绍

Nov 23, 2019 pm 01:41 PM
layui

改造传统jquery扩展为layui模块方法介绍

Layui中内置了jquery

只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery。

这是layui文档中的描述,它内置了jq,但是去除了全局的$和jQuery对象,也就是在window的全局对外接口被删除了。

拖拽组件的实现
假设siam.js是一个扩展,里面提供了一个类似这样的方法

<div id=&#39;test&#39;>原始内容</div>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
$.fn.siam = function(params){
    var dom = this;
    dom.html(params);
};


setTimeout(function(){
    $("#test").siam(&#39;这是新内容&#39;);
},800);
</script>
// 延迟执行完之后会把div内容变为 > 这是新内容
Salin selepas log masuk

这就是一些传统jq扩展的实现原理,对于你调用的dom,它会继续处理操作,如本文开始说的,我使用的是拖拽组件,扩展会通过这样子的对外接口 将dom处理为可以拖拽的,并且带有其他事件的元素。

问题冲突

以上两点是问题的基础补充,在layui中,去除了全局的$和Jquery对象,默认扩展中有以下代码

;(function($, window, document, undefined){
    .....扩展内容
})(window.jQuery || window.Zepto, window, document);
Salin selepas log masuk

在最后面,它依赖加载window.Jquery对象,window对象,document对象

传递到上面的闭包中
对应$, window, document, undefined(因为没有传递 所以也一样)

所以导致闭包中使用的$是没有值的,一加载这个扩展就报错

$ is not defined
或者
Typeerror Cannot Read Property fn of undefined
Salin selepas log masuk

测试过单独引入jq文件也解决不了问题,(我使用的模板加载顺序的原因,先加载了layui内置的jq)

layui自定义模块

这是官网的介绍

layui.code
/**
  扩展一个test模块
**/

layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define(&#39;layer&#39;, callback);
  var obj = {
    hello: function(str){
      alert(&#39;Hello &#39;+ (str||&#39;mymod&#39;));
    }
  };

  //输出test接口
  exports(&#39;mymod&#39;, obj);
});
Salin selepas log masuk

我们可以使用layui自定义模块的方法,将layui的其他模块传递进来,使扩展能操作layui中的jq对象

layui.define(["jquery"], function (exports) {
    var $ = layui.jquery;
    // 把第一行的 ;(function($, window, document, undefined){ 换成以上
    ...扩展内容

    // 把最后一行的换成以下
    var obj = {
    };
    exports("自定义模块名", obj);
});
Salin selepas log masuk

使用

 layui.use([&#39;form&#39;,&#39;jquery&#39;,&#39;自定义模块名&#39;], function (admin, form) {
     var $ = layui.jquery;
     var obj = layui.自定义模块名;

     // 正常使用 即可  比如我的
     $("#test").desta(&#39;open&#39;);
});
Salin selepas log masuk

注意,此篇文章并不是通用方法,只是简单阐述了我解决这个问题的思路和方案,可以参考学习。

更多layui框架知识请关注layui框架教程

Atas ialah kandungan terperinci 改造传统jquery扩展为layui模块方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

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.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mendapatkan data borang dalam layui Bagaimana untuk mendapatkan data borang dalam layui Apr 04, 2024 am 03:39 AM

layui menyediakan pelbagai kaedah untuk mendapatkan data borang, termasuk mendapatkan terus semua data medan borang, mendapatkan nilai elemen bentuk tunggal, menggunakan kaedah formAPI.getVal() untuk mendapatkan nilai medan yang ditentukan, menyerikan data borang dan menggunakannya sebagai parameter permintaan AJAX, dan mendengar acara penyerahan Borang mendapat data.

Bagaimana untuk menyediakan lompat pada halaman log masuk layui Bagaimana untuk menyediakan lompat pada halaman log masuk layui Apr 04, 2024 am 03:12 AM

Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.

Bagaimana layui melaksanakan penyesuaian diri Bagaimana layui melaksanakan penyesuaian diri Apr 26, 2024 am 03:00 AM

Susun atur suai boleh dicapai dengan menggunakan fungsi susun atur responsif rangka kerja layui. Langkah-langkahnya termasuk: merujuk rangka kerja layui. Tentukan bekas susun atur penyesuaian dan tetapkan kelas bekas layui. Gunakan titik putus responsif (xs/sm/md/lg) untuk menyembunyikan elemen di bawah titik putus tertentu. Tentukan lebar elemen menggunakan sistem grid (layui-col-). Cipta jarak melalui offset (layui-offset-). Gunakan utiliti responsif (layui-invisible/show/block/inline) untuk mengawal keterlihatan elemen dan cara ia muncul.

Mana satu lebih baik, layui atau elementui? Mana satu lebih baik, layui atau elementui? Apr 04, 2024 am 04:15 AM

Soalan: Mana satu lebih baik, layui atau ElementUI? Jawapan: Ia bergantung kepada keperluan projek. Layui lebih komprehensif, boleh disesuaikan dan sesuai untuk projek besar, manakala ElementUI lebih ringan, cantik dan mudah digunakan. Sebab khusus untuk pemilihan adalah seperti berikut: Pilih layui: Menyediakan rangkaian fungsi dan modul yang lebih luas yang membolehkan tahap penyesuaian penampilan dan gelagat komponen yang tinggi Sesuai untuk projek besar yang memerlukan pelbagai fungsi dan skalabiliti. Saiz yang lebih kecil dan kelajuan pemuatan lebih cepat Komponen mengikut prinsip Reka Bentuk Bahan , estetika tinggi, menyediakan sejumlah besar komponen siap, mengurangkan kerumitan pembangunan dan masa

Bagaimana untuk menjalankan layui Bagaimana untuk menjalankan layui Apr 04, 2024 am 03:42 AM

Untuk menjalankan layui, lakukan langkah-langkah berikut: 1. Import skrip layui 3. Gunakan komponen layui 4. Import gaya layui (pilihan); Dengan langkah ini, anda boleh membina aplikasi web menggunakan kuasa layui.

Apakah perbezaan antara layui dan vue? Apakah perbezaan antara layui dan vue? Apr 04, 2024 am 03:54 AM

Perbezaan antara layui dan Vue terutamanya ditunjukkan dalam fungsi dan kebimbangan. Layui memfokuskan pada pembangunan pesat elemen UI dan menyediakan komponen pasang siap untuk memudahkan pembinaan halaman manakala Vue ialah rangka kerja tindanan penuh yang memfokuskan pada pengikatan data, pembangunan komponen dan pengurusan keadaan, dan lebih sesuai untuk membina aplikasi yang kompleks. Layui mudah dipelajari dan sesuai untuk membina halaman dengan cepat; Vue mempunyai keluk pembelajaran yang curam tetapi membantu membina aplikasi berskala dan mudah diselenggara. Bergantung pada keperluan projek dan tahap kemahiran pembangun, rangka kerja yang sesuai boleh dipilih.

Apakah bahasa kerangka layui? Apakah bahasa kerangka layui? Apr 04, 2024 am 04:39 AM

Rangka kerja layui ialah rangka kerja bahagian hadapan berasaskan JavaScript yang menyediakan satu set komponen dan alatan UI yang mudah digunakan untuk membantu pembangun membina aplikasi web responsif dengan cepat. Ciri-cirinya termasuk: modular, ringan, responsif dan mempunyai dokumentasi lengkap dan sokongan komuniti. layui digunakan secara meluas dalam pembangunan sistem backend pengurusan, laman web e-dagang, dan aplikasi mudah alih. Kelebihannya ialah permulaan yang cepat, kecekapan yang dipertingkatkan, dan penyelenggaraan yang mudah Kelemahannya ialah penyesuaian yang lemah dan kemas kini teknologi yang perlahan.

Perbezaan antara rangka kerja layui dan rangka kerja vue Perbezaan antara rangka kerja layui dan rangka kerja vue Apr 26, 2024 am 01:27 AM

layui dan vue ialah rangka kerja bahagian hadapan adalah perpustakaan ringan yang menyediakan komponen dan alatan UI ialah rangka kerja komprehensif yang menyediakan komponen UI, pengurusan keadaan, pengikatan data, penghalaan dan fungsi lain. layui adalah berdasarkan seni bina modular, dan vue adalah berdasarkan seni bina komponen. layui mempunyai ekosistem yang lebih kecil, vue mempunyai ekosistem yang besar dan aktif. Keluk pembelajaran layui adalah rendah, dan keluk pembelajaran vue adalah curam. layui sesuai untuk projek kecil dan pembangunan pesat komponen UI, manakala vue sesuai untuk projek besar dan senario yang memerlukan fungsi yang kaya.

See all articles