Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to transform jquery into layui module, which is very detailed and has certain reference value. Friends who are interested must finish it!

Jquery is built into Layui

It will only load if the module you are using is dependent on it, and if your page has already introduced jquery into script, it will not load repeatedly. The built-in jquery module removes the global $and jQuery.

This is described in the layui document, which has built-in jq, but removes the global $and jQuery objects, that is, the global external interface in window is removed.

The implementation of the drag-and-drop component assumes that siam.js is an extension that provides a method like this

Original content $.fn.siam = function (params) {var dom = this; dom.html (params);}; setTimeout (function () {$("# test"). Siam ('this is new content'); / / delayed execution will change the div content to > this is new content

This is how some traditional jq extensions are implemented. For the dom you call, it will continue to handle operations. As I said at the beginning of this article, I am using drag-and-drop components, and the extension will handle dom as draggable elements with other event elements through such external interfaces.

Problem conflict

The above two points are basic additions to the problem. In layui, the global $and Jquery objects are removed, and the following code is included in the default extension

; (function ($, window, document, undefined) {. Extended content}) (window.jQuery | | window.Zepto, window, document)

At the end, it relies on loading window.Jquery objects, window objects, document objects

Passed to the closure above corresponds to $, window, document, undefined (it's the same because it's not passed)

As a result, the $used in the closure has no value, and an error is reported as soon as the extension is loaded

$is not defined or Typeerror Cannot Read Property fn of undefined

Testing the introduction of jq files alone won't solve the problem. (because of the loading order of the template I used, I first loaded layui's built-in jq)

Layui custom module

This is the introduction of the official website.

Layui.code/** extends a test module * * / layui.define (function (exports) {/ / hint: modules can also rely on other modules, such as: layui.define ('layer', callback); var obj = {hello: function (str) {alert (' Hello'+ (str | | 'mymod'));}; / / output test interface exports (' mymod', obj);})

We can use the method of layui custom module to pass in other modules of layui so that the extension can manipulate the jq object in layui

Layui.define (["jquery"], function (exports) {var $= layui.jquery; / / change the first line; (function ($, window, document, undefined) {with the above. Expand the content / / replace the last line with the following var obj = {}; exports ("custom module name", obj);})

Use

Layui.use (['form','jquery',' custom module name'], function (admin, form) {var $= layui.jquery; var obj = layui. Custom module name; / / normal use, such as my $("# test"). Desta ('open');}); the above is all the content of the article "how to transform jquery into a layui module". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.