1. Base2. Layout3. Module4. State5. Theme1) Base rulesBase rules are the defaults.eg:html, body, form { margin: 0; padding: 0; }input[type=text] { border: 1px solid #999; }a { color: #039; }a:hover { color: #03C; }2) Layout rulesdivide the page into sections. Layouts hold one ormore modules together
转载
2013-09-21 11:36:00
226阅读
2评论
一个页面由基本结构体构成:框架、模块、原件。 框架:是构成页面的基础结构,是页面的骨架。框架就可以描述出一个页面的基本轮廓了。如:index.html最外围有一个div(.g-index),页头(.g-hd),主体(.g-bd)。页脚(.g-ft) 模块:是页面上数量最多的,也是最重要的一部分,是代码复用的主体部分,模块就是按照功能划分的,如:导航栏、轮播图、登录窗口等。模块之
原创
2022-10-28 04:23:18
138阅读
CSS Moduless 是一个流行的,用于模块化和组合CSS的系统。 vue-loader 提供了与 CSS Modules 的一流集成,可以作为模拟 scoped css 的替代方案<template>
<p :class="$style.red">moduless</p>
<p :class="{[$style.red]: isRed}">
转载
2021-04-18 19:12:59
370阅读
2评论
1.命名规范,如BEMBEM 的意思就是块(block)、元素(element)、修饰符(modifier)。是由 Yandex 团队提出的一种前端命名方法论。2.css in js使用 js 语言写 css,完全不需要些单独的 css 文件,所有的 css 代码全部放在组件内部,以实现 css 的模块化。CSS in JS 其实是一种编写思想
原创
2022-01-30 11:13:20
10000+阅读
1.命名规范,如BEMBEM 的意思就是块(block)、元素(element)、修饰符(modifier)。是由 Yandex 团队提出的一种前端命名方法论。2.css in js使用 js 语言写 css,完全不需要些单独的 css 文件,所有的 css 代码全部放在组件内部,以实现 css 的模块化。CSS in JS 其实是一种编写思想,目前已经有超过 40 多种方案的实现,最出名的是 styled-components。3. css modules使用JS编译CSS文件,使其具备
原创
2021-07-12 11:21:19
241阅读
前言现在网页的复杂度越来越高,js代码越来越庞大,早已不像原来那样实现一些特效即可。一个项目可能需要n个人来完成,分别负责不同的功能。这些不同的功能划分在我看来就是一个个模块,我们不需要了解模块内部逻辑,只关心模块的对外接口。我们需要什么功能时只需引入合适的模块即可极大的提高了多人开发时的效率。正文一、如何实现模块化按照前言所说,模块有以下两个特征:可以实现特定的功能、可以提供对外接口。var m
转载
2023-08-04 15:17:08
250阅读
在多次面试中被问了关于前端模块化的问题,一直没有答得完整,一方面是自己紧张,但更多的其实是自己对模块化没有足够的了解。借此机会,结合之前看过的文章重新梳理一下关于模块化的知识。一,对模块化的需求在javascript的初期,js文件加载都是使用<script>标签直接引入,简单直接,当时的js内容不多,功能简单,所以并无不妥。到后来,随着网页开发技术的发展,对js的要求变得越来越高,文
转载
2023-08-11 14:31:37
218阅读
模块化CSS——在CSS中引入面向对象编程思想 如何划分模块——单一职责 模块化可以让代码高度重用,显著提高开发效率。关于模块化,比较成熟的是编程领域的“类”。在面向对象编程方式中,“类”是个非常核心的概念,可以说面向对象思想的基础就是“类”。关于模块化,“类”有很多成熟的技巧,例
转载
2024-03-10 16:46:18
28阅读
# 实现 jQuery 模块化的流程
实现 jQuery 模块化可以帮助我们更好地组织和管理代码,提高代码的可维护性和复用性。以下是实现 jQuery 模块化的步骤和相应的代码示例。
## 步骤一:创建模块
首先,我们需要创建一个模块,该模块将包含我们自己定义的功能和方法。可以使用自执行函数来创建模块,并将其赋值给一个全局变量,以便在其他地方使用。以下是一个示例的模块创建代码:
```ja
原创
2023-10-08 09:11:42
50阅读
JavaScript模块化(Module)模块化的理解1、什么是模块化2、模块化的进化过程3、面临的问题模块化的规范1、CommonJS2、AMD/RequireJS3、CMD/SeaJS4、ES6总结 模块化的理解1、什么是模块化将一个复杂的程序,依据一定的规则(规范)封装成一个或多个块(文件), 并进行组合在一起块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信2
转载
2023-09-21 12:48:25
149阅读
一、Layui框架简介Layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而
转载
2024-04-07 17:42:36
80阅读
BEM风格代码案例:
转载
2020-03-02 20:34:00
116阅读
2评论
为什么要CSS模块化?
转载
2022-03-22 18:23:54
405阅读
模块化演进阶段一:文件即模块,使用<script>标签引入污染全局作用域命名冲突无法管理模块依赖关系阶段二:命名空间方式,文件暴露一个全局对象,所有方法挂载到全局对象上形成命名空间缓解命名冲突,但无法避免没有私有属性,从而无法避免出现私有属性值被不小心更改的情况依赖关系仍然无法管理阶段三:IIFE立即执行函数表达式,可以给全局对象上挂载属性来暴露接口,也可以返回一个对象来暴露接口。私有
转载
2023-11-24 05:59:29
42阅读
JavaScript 是一门混乱的语言,好的特性和坏的特性混杂在一起。而不同浏览器对标准的解析不一致,使得这门语言更加混乱,在这种情况下遵循最佳实践有诸多好处,至少不会掉入坑里。所以就有了《JavaScript: The Good Parts》这类书专门教最佳实践。可惜读完后再去看别人的 js 代码,会发觉几乎没有谁做得很标准。一、jQuery 插件的类别在 jQuery 中要使用一个插件,一般有
转载
2023-12-03 09:11:19
102阅读
一、node.js模块化概念模块化的概念和python中的模块是一样的概念。node.js中的模块化是遵顼的common.js标准 1.每一个js文件都是一个模块 2.在浏览器端: 浏览器是不认识node.js语法的,必须先要提前编译打包处理二、模块加载1.加载内置模块const fs = require('fs')2.加载第三方模块const moment = require('moment')
转载
2023-12-17 14:04:28
92阅读
# jQuery JS 模块化:让你的代码更整洁高效
随着现代前端开发的推进,模块化编程越来越受到开发者的欢迎。相较于传统的全局变量和函数,模块化的方式不仅能提高代码的可读性,而且能够避免各种潜在的命名冲突。本文将重点探讨如何在使用 jQuery 时实现模块化,并提供相应的代码示例。
## 什么是模块化?
模块化是将代码分割为独立模块的编程风格,每个模块负责特定的功能。这种做法可以使得代码更
原创
2024-10-24 04:08:42
65阅读
jQuery 模块化库是为了提供增强的功能和更灵活的开发体验而进行的一次重要演进。随着 web 开发的快速发展,jQuery 库逐渐引入模块化结构以应对日益复杂的应用需求。为了有效迁移和使用 jQuery 模块化库,本文将详细阐述其版本对比、迁移指南、兼容性处理、实战案例、排错指南及生态扩展等方面的内容。
## 版本对比
### 时间轴(版本演进史)
```mermaid
timeline
目录目录
自述
继承
状态
总结
预告自述 看到好的文章就喜欢转载收藏一波,这会看了一篇《从css谈模块化——jack_lo》的文章,文章所述内容跟自己此前的很多想法都有不谋而合、思想共鸣之处(你就吹吧你~)。本人此前也没有学习或参考过类似的CSS模块化的文章,纯粹是自己怎么乐意怎么写的状态,实在是惭愧于自己此前写过的代码
转载
2022-11-28 18:48:45
64阅读
JS模块(JQuery) 文章目录JS模块(JQuery)简介什么是jQuery为什么使用jQuery引入jQuery的方法使用步骤语法解释文档就绪jQuery 选择器其他jQuery事件什么是事件?jQuery 事件方法语法常见方法事件方法$(document).ready()click()dblclick()mouseenter()mouseleave()mousedown()mouseup(
转载
2023-12-28 14:10:12
12阅读