张小桌
张小桌

webpack css工程化之css module

css module {ignore}

通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。
css module 开辟一种全新的思路来解决类名冲突的问题

思路

css module 遵循以下思路解决类名的冲突问题：
1.css的类名冲突往往发生在大型项目中
2.大型项目往往会使用构建工具（webpack等）搭建工程
3.构建工具允许将css样式切分为更精细的模块
4. 同js的变量一样，每个css模块文件中很难初见冲突的类名，冲突的类名往往发生在不同的css模块中
5. 只需要保证构建工具在合并样式代码后不会出现冲突即可
webpack css工程化之css module_第1张图片

实现原理

在webpack中，作为处理css的css-loader，它实现了css module的思想，要启动css module，需要将css-loader的配置modules设置为true。
css-loader 的实现方式如下
webpack css工程化之css module_第2张图片
原理极其简单，开启了css module后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。

由于hash值是根据模块路径和类名生成的，因此，不同的css模块，哪怕具有相同的类名，转换后的hash值也不一样。webpack css工程化之css module_第3张图片

如何应用样式

css module带来了一个新的问题：源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？

为了解决这个问题，css-loader会导出原类名和最终类名的对应关系，该关系是通过一个对象描述的

webpack css工程化之css module_第4张图片

这样一来，我们就可以在js代码中获取到css模块导出的结果，从而应用类名了

style-loader为了我们更加方便的应用类名，会去除掉其他信息，仅暴露对应关系

其他操作

全局类名

某些类名是全局的、静态的，不需要进行转换，仅需要在类名位置使用一个特殊的语法即可：

:global(.main){
    ...
}

使用了global的类名不会进行转换，相反的，没有使用global的类名，表示默认使用了local

:local(.main){
    ...
}

使用了local的类名表示局部类名，是可能会造成冲突的类名，会被css module进行转换

如何控制最终的类名

绝大部分情况下，我们都不需要控制最终的类名，因为控制它没有任何意义

如果一定要控制最终的类名，需要配置css-loader的localIdentName

其他注意事项

  • css module往往配合构建工具使用
  • css module仅处理顶级类名，尽量不要书写嵌套的类名，也没有这个必要
  • css module仅处理类名，不处理其他选择器
  • css module还会处理id选择器，不过任何时候都没有使用id选择器的理由
  • 使用了css module后，只要能做到让类名望文知意即可，不需要遵守其他任何的命名规范

练习


webpack.config.js配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            {
                // test: /\.css$/, use: ["style-loader", {
                //     loader: "css-loader",
                //     options: {
                //         // modules: {
                //         //     localIdentName: "[local]-[hash:5]"
                //         // }
                //         modules:true
                //     }
                // }]
                test: /\.css$/, use:["style-loader", "css-loader?modules"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        open: true//自动打开页面
    }
}

style1.css
/* 处理banner的样式 */

:global(.main){
    background: lightblue;
}

.c1 {
    color: red
}

.c2 {
    color: green
}



h1{
    font-weight: bold;
}

style2.css
/* article的样式 */

.c1 {
    color: blue;
}

.c2 {
    background: brown;
}

index.js
import style1 from  "./assets/style1.css"
import style2 from "./assets/style2.css"

console.log(style1)

const div1 = document.getElementById("div1");
div1.className = style2.c1;


index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="main">
        asdfasdfasf
    </div>
    <div id="div1">
        Lorem ipsum dolor sit.
    </div>
</body>
</html>

显示结果

在这里插入图片描述

你可能感兴趣的:(webpack,js)

  • 【软件测试】接口自动化测试用例通常包含哪些要素 小马哥编程 自动化测试用例
    接口自动化测试用例通常包含以下要素：用例ID：唯一标识符，便于追踪和管理。用例名称：简要描述测试目的。接口信息：URL：接口地址。请求方法：如GET、POST、PUT、DELETE等。请求参数：Headers：如Content-Type、Authorization等。QueryParameters：GET请求中的查询参数。Body：POST/PUT请求的请求体，通常为JSON或XML。预期结果：状
  • .NET 6 WebApi使用JWT wenqi.xu .net.netcore
    JWT（JsonWebToken）jwt是一种用于身份验证的开放标准，他可以在网络之间传递信息，jwt由三部分组成：头部，载荷，签名。头部包含了令牌的类型和加密算法，载荷包含了用户的信息，签名则是对头部和载荷的加密结果。jwt鉴权验证是指在用户登录成功后，服务器生成一个jwt令牌并返回给客户端，客户端在后续的请求中携带该令牌，服务通过令牌的签名来确定用户的身份和权限。这种方式可以避免在每个请求中都
  • 使用Yarn创建Grafana模板的完整指南 云服务器linux运维yarn
    在本篇文章中，我将带你逐步完成如何使用Yarn生成Grafana模板的过程。Grafana是一款开源的数据可视化工具，我们可以使用它来创建各种仪表板，以便更好地监控和展示数据。请跟随我一起来完成这一过程。整体流程概览在开始之前，我们先来看看整个操作的流程。以下是步骤的概述，以表格形式展示：步骤描述1安装Node.js和Yarn2创建新的Yarn项目3安装Grafana的API客户端库4编写Graf
  • 页面跳转隐藏url参数 Otaku love travel htmlhtml前端
    在某些特定的情况下，直接请求会在url显示参数传值等，基于简单的安全性考虑，可以去掉参数，但是传参问题有出现了，以下提供了一个简单的解决方案1、a标签直接url跳转改为点击事件2、调用以下方法httpPostLocationUrl/***页面跳转*@paramurl请求地址xxx\xxx?xxx=xx&xx=xx*@paramparams可选参数json对象数据{‘a’:1}*/functionh
  • Go 语言使用Protobuf 进行序列化详解 尘鹄 Go语言学习之路golang开发语言后端rpcgo
    文章目录Go语言使用Protobuf进行序列化详解1.Protobuf是什么?2.安装Protobuf及Go依赖3.编写.proto文件4.实现序列化和反序列化Go语言使用Protobuf进行序列化详解1.Protobuf是什么?以下是Protobuf官方中文文档的概述:Protobuf(ProtocolBuffers)是一种语言中立、平台中立的可扩展机制，用于序列化结构化数据。它类似于JSON，
  • web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript IT-司马青衫 前端课程设计html
    ‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1
  • 在 ASP.NET Core WebAPI 中使用 JWT 验证 .NET跨平台 ASP.NETCoreWebAPIIdentityServer4OAuth2.0协议.NETCOREWEBAPIJWT
    为了保护WebAPI仅提供合法的使用者存取，有很多机制可以做，透过JWT(JSONWebToken)便是其中一种方式，这篇示范如何使用官方所提供的System.IdentityModel.Tokens.Jwt扩充套件，处理呼叫API的来源是否为合法的使用者身分。顺道一提，要产生JWTToken有很多套件可以帮助开发者快速建立，JWT这个NuGet套件就是其中一个，但这裡我使用官方所提供的Syste
  • API身份验证使用JWT的.NET实现 雨夜思绪~静谧思考 .net
    API身份验证使用JWT的.NET实现在现代的应用程序开发中，API身份验证是一项至关重要的任务。JWT（JSONWebToken）是一种常用的身份验证机制，它使用JSON格式表示身份验证信息，并使用签名进行验证。在.NET平台上，我们可以使用一些库来实现JWT身份验证。本文将介绍如何使用.NET来进行API身份验证并使用JWT作为身份验证机制。引入依赖项首先，我们需要在我们的项目中引入相关的依赖
  • Webpack打包构建流程 码上跑步 webpack前端node.js
    webpack的打包构建流程为什么需要打包？在前端有非常多的资源，如css、js、vue、vue、图片、字体等。有些资源需要加工处理1.ts->jsts-loader2.css->css-loader+style-loader3.图片->file-loader+url-loader4.html->html-webpack-plugin需要对产物进行优化optimization（webpack优化配
  • webpack 码上跑步 webpack前端node.js
    webpack介绍webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.官网:webpack由来模块化存在一些问题1.ESM的兼容性问题2.模块文件过多,网络请求频繁3.前端的所有资源包括html和css都需要模块化构建工具应运而生,需要一个集编译,模块打包,支持不同的资源的模块打包工具.Web
  • Vue初体验 码上跑步 vue.js前端
    Vue基础Vue是什么？Vue是javascript的渐进式框架。Vue初识Vue工作时必须要创建一个Vue的实例，并且传入一个配置对象。root容器里的代码是符合html的语法但是新添加了一些Vue语法，在这些地方Vue会自动进行解析。root容器里的代码称为Vue模版。Vue实例和容器是一一对应的。在实际开发中只有一个Vue，配合组件使用。在vue里的插值{{}}内部只要写js表达式就能正常解
  • vue脚手架 码上跑步 vue.js前端javascript
    Vue脚手架脚手架是官方提供的标准化开发工具。下载配置//全局安装vue的脚手架npminstall@vue/cli-g//在项目目录下开启一个脚手架vuecreate‘项目名’//进入项目目录，直接运行npmrunserve1.vue.js与vue.runtime.xxx.js的区别：（1).vue.js是完整版的Vue，包含：核心功能+模板解析器。（2）.vue.runtime.xxx.js是
  • vue打包编译【自动删除node_modules下的.cache缓存文件夹】 Eternitysy javascript前端vue.js
    vue项目不断打包编译后，在node_modules目录下的.cache文件夹里的文件就越来越多，手动删除数量巨大，时间太长，下面是自动删除.cache这个文件夹的方法1.先安装依赖包rimraf：npminstallrimraf-g--save-dev2.在package.json文件的scripts部分添加一个脚本命令："scripts":{"clean":"rimrafnode_module
  • 【推荐项目】044-中医门诊管理系统 蜗牛 | ICU 推荐项目java前端框架毕设springmybatis
    044-中医门诊管理系统介绍javaspringbootvuejs中医门诊管理系统为了帮助您更清晰地整理中医门诊管理系统的功能，我将按照您提供的角色和功能进行归类和整理。以下是整理后的功能列表：角色划分核心管理员医生药师用户（普通患者）管理端功能（核心管理员）统计用户统计（按注册时间、活跃度等）药物销售统计处方统计咨询统计用户管理用户列表（查看、编辑、删除）用户角色分配用户权限管理医生管理医生列表
  • 关于Jquery基本内容一 gloria123_ jquery前端javascript
    jQuery(jQ)html+css+js1jQ是一个js库,封装了大量的特定的集合(函数和方法)如animate()、css()、show()等2使用jQ大大提高开发效率,简化dom操作常见的js库jQueryYUIDojoExtJszeptojQuery选择器$(selector)筛选方法parent()$(“li”).parent()children(selector)$(“ul”).chi
  • 【推荐项目】 043-停车管理系统 蜗牛 | ICU 推荐项目springbootvue.jsjava前端框架
    043-停车管理系统介绍使用springbootvuejsmysql技术搭建框架。智能停车管理系统描述后端框架：采用SpringBoot与MySQL的强强联合，为系统提供稳健、高效的服务支撑。前端框架：前端选用Vue.js，打造流畅、美观的用户交互界面。管理员功能：用户信息管理：轻松管理用户信息，包括新增、编辑、删除及查询用户。界面清晰，操作便捷，确保用户数据的安全与准确。车位信息管理：实时查看车
  • Vue数据响应式原理 tuoluoo vue学习笔记vue.js前端javascript
    前言Vue是一个结构的框架,也就是数据层、视图层、数据-视图层；响应式的原理就是实现当数据更新时，视图层也要相应的更新响应式实现基于发布订阅模式和数据劫持实现1.发布订阅模式：vue使用发布订阅模式来实现数据变动的通知和更新2.数据劫持：vue通过object.defineProperty对数据进行劫持Vue2响应式原理基于js的object.defineProperty()方法，该方法可将传入的
  • promise:看这一篇就够了！ tuoluoo 深入前端前端javascript
    前言如果一个函数的执行结果需要另一个函数的执行结果，而这一个函数的执行结果还需要另一个函数的执行结果这种情况一直嵌套下去该如何处理？举个实际的例子：我们需要从一个api获取用户信息，然后基于用户id从另一个api获取用户的订单列表，最后根据订单中的商品id获取商品详情。ps:每个步骤都是异步的，并且后一步骤依赖于前一步骤的结果。由于js是单线程语言，在es6之前解决上述问题就需要用到回调函数cal
  • React 生命周期方法详解 七公子77 reactreact.js前端前端框架
    一、生命周期三个阶段挂载阶段（Mounting）更新阶段（Updating）卸载阶段（Unmounting）二、生命周期方法详解（简化版）1.挂载阶段方法触发时机用途注意事项constructor()组件初始化时初始化state，绑定事件处理函数避免直接调用setState，仅用于初始化。render()必须实现，返回JSX渲染UI不可调用setState，否则导致无限循环。componentDi
  • Vue3 基础教程：从入门到实践 (保姆级教学) 前段技术人 学习前端vue.jsvue
    一、Vue3简介Vue.js是一款用于构建用户界面的JavaScript框架，而Vue3作为其最新的主要版本，带来了诸多令人瞩目的改进与新特性，使其在前端开发领域备受青睐。（一）Vue3的优势性能提升：Vue3重写了虚拟DOM算法，显著提高了挂载、更新和渲染的速度。在处理大型列表或频繁数据更新的场景时，Vue3的表现更为出色，能够为用户带来更流畅的交互体验。例如，一个包含大量商品信息的电商产品列表
  • javaweb内置对象request,response,out,session,Application等 菜鸟小T javahttpstruts
    JSP内置对象是一些不用声明，也不用像一般的java代码一样需要用new去获取实例的对象，这些对象可以直接在JSP页面的脚本部分使用。一、request对象：1.response和request对象是JSP的内置对象中比较重要的两个，这两个对象提供了对服务器和浏览器通信方法的控制，在JSP中，内置对象request封装了用户提交的信息，即使用HTTP协议处理客户请求时，表单提交的数据就存放在req
  • BERT（Bidirectional Encoder Representations from Transformers）的序列分类模型，简单学习记录 努力努力再努力呐 BERTbert分类学习
    一、代码#本地离线模型使用fromtransformersimportAutoModelForCausalLM,AutoTokenizer,pipeline,BertForSequenceClassification,BertTokenizer#设置具体包含config.json的目录，只支持绝对路径model_dir=r"models\bert-base-chinese"#model_dir=r
  • JavaScript-闭包 tuoluoo JavaScript学习javascript
    闭包概念在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包形成：函数中嵌套函数作用：函数内部调用外部变量、构造函数的私有属性、延长变量生命周期优点：希望一个变量长期存在内存中、模块化代码避免全局变量的污染、私有属性缺点：无法回
  • 面试题之webpack file-loader和url-loader 阿丽塔~ webpack前端node.js面试
    在面试中，关于Webpack中file-loader和url-loader的区别是一个常见的问题。file-loader和url-loader的区别1.功能定义file-loader：主要用于处理静态资源文件（如图片、字体等），将其复制到输出目录，并返回文件的URL。适用于较大文件或需要单独存储的资源。url-loader：是file-loader的扩展，它在处理文件时会先判断文件大小。如果文件大
  • vscode 插件开发 typescript部分报错 Object is possibly 'undefined'. 故事里故去 vscode
    在tsconfig.js中:strict设置false状态{"compilerOptions":{"strict":false,//...}}
  • .net WebAPI返回xml、json格式 dengqiu2187 json
    WebAPI返回xml、json格式简单示例usingSystem.Net.Http.Formatting;publicclassTestController:ApiController{publicstaticListlist=newList{newStudent{Name="张三",Age=25,Weight=153.5M},newStudent{Name="李四",Age=18,Weight
  • 如何更新已经发布的 NPM 组件库 校长2008 npmvuenode.js
    要更新已经发布的NPM组件库，可以按照以下步骤操作：更新版本号：每次发布新的版本，都需要更新package.json中的version字段。NPM使用语义化版本规则，即格式为major.minor.patch，例如1.0.1。版本号的更新规则为：major：主版本变更，通常是重大更新或不兼容变更。minor：次版本更新，一般是新增功能，并且向后兼容。patch：补丁版本更新，通常是小的修复和优化。
  • .net 6.0 webapi支持 xml返回xml json返回json 故事里故去 自用C#.netxmljson
    //添加控制器并配置格式化器varbuilder=WebApplication.CreateBuilder();builder.Services.AddControllers(options=>{options.Filters.Add();options.ReturnHttpNotAcceptable=true;//强制要求Accept头匹配//添加XML格式化器options.InputForm
  • Spring Cloud之远程调用OpenFeign参数传递 新绿MEHO SpringCloudJAVAJavaspringcloud
    目录OpenFeign参数传递传递单个参数传递多个参数传递对象传递JSONOpenFeign参数传递传递单个参数服务提供方product-service@RequestMapping("/product")@RestControllerpublicclassProductController{@AutowiredprivateProductServiceproductService;@Reques
  • Ubuntu 下 nginx-1.24.0 源码分析 - ngx_modules 若云止水 ubuntunginxlinux
    定义在objs\ngx_modules.c#include#includeexternngx_module_tngx_core_module;externngx_module_tngx_errlog_module;externngx_module_tngx_conf_module;externngx_module_tngx_openssl_module;externngx_module_tngx_
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他