Carrie_zzz
Carrie_zzz

angular之MVC，内置指令

认识angular

MVC

分类 用途
Model 模型表示数据的部分
View 视图这是用户看到并与之交互的界面
Controller 控制器是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户的输入，并向模型发送数据
  • MVC是一种使用MVC（Model View Controller 模型-视图-控制器）设计创建Web应用程序的模式
  • MVC分层同时也简化了分组的开发。不同的开发人员可同时开发视图，控制器逻辑和业务逻辑
  • MVVM模式由视图（View），视图模型（ViewModel），模型（Model），三部分组成，同今年刚过这三部分实现UI逻辑，呈现逻辑和状态控制，数据与业务的分离
  • View将和ViewModel互动（通过$scope对象），将监听Model的变化，这些可以通过View来发送和渲染，由HTML来展示你的代码。
    使用MVVM模式的好处
  • 低耦合：View可以独立于Model变化和修改，一个viewModel可以绑定到不同的view
  • 可重用性：可以把一些试图的逻辑放在ViewModel里面，让很多的View重用这段视图逻辑
  • 独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModel）,设计人员可以专注于界面（View）的设计
  • 可测试性：可以针对ViewModel来对界面进行测试
    • -

用户输入——>Controller（控制器，接受用户请求并且把数据传递给业务模型）——>Model（模型，业务处理，从数据库中读取数据）——>View（视图，选择视图呈现给用户）——>用户输入

内置指令

  • 指令指的是当关联的HTML结构进入编译阶段时应该执行的操作
  • 当浏览器启动，开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说一个angular应用启动
  • （1）angular编译器就会遍历dom树来解析HTML，寻找这些指令属性的函数
  • （2）在一个dom元素上找到一个或多个这样的属性指令函数
  • （3）他们就会被收集起来，排序，然后按照优先级顺序被执行
  • 组件形指令主要是为了将复杂的视图分离，实现高内聚低耦合，是自封装和内聚性的整体，包含了视图和交互逻辑，比如登录框
  • 装饰性指令是为dom添加行为或使之具有能力，如：可拖动，添加样式
    组件形

<html ng-app="zzmod">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <zfrom>zfrom>
    body>
    <script src="js/angular.js">script>
    <script type="text/javascript">
        angular.module('zzmod',[]).directive('zfrom',function(){
            //要用这个dom内容添加到原来指令的内部
            return {
                template:'
用户名
'
            }
        }).directive('red',function(){
            return {
                //scope作用域，当前元素本身
                link:function(scope,element){
                    element.css('color','red');
                    element.css('border','1px solid red');
                }
            }
        });

    script>
html>

装饰形


<html ng-app="zzz">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div red>
            zzzzz
        div>
        <span red>enenne span>
    body>
    <script  src="js/angular.js">script>
    <script type="text/javascript">
        //定义一个指令（指令的名字，指令的定义
        angular.module('zzz',[]).directive('red',function(){
            return {
                //scope作用域，当前元素本身
                link:function(scope,element){
                    element.css('color','red');
                    element.css('border','1px solid red');
                }
            }
        })
    script>
html>

依赖注入
只需要声明要使用的对象，就可以自动得到，不需要自己创建
单项数据绑定
双向数据绑定
- 当view中有任何数据发生了变化，那么这个变化也会自动的反馈到scope的数据上，scope模型会自动的更新
- 当scope模型发生变化时，view中的数据也会更新到最新值


<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        {{name}}
        <input type="text" ng-model="name"/>
    body>
    <script src="js/angular.js">script>
    <script type="text/javascript">
        //找到ng-app之后，会生成一个$rootScope
    script>
html>

过滤器

过滤器 作用
lowercase 转小写
uppercase 转大写

为什么需要mvc

  • 项目规模越来越大，需要切分模块和职责
  • 消除重复 的代码，实现复用
  • 方便重构，修改哟个地方不影响其他的功能

  • 核心目标是模块化和复用

    共享同一个数据


<html ng-app="z">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div ng-controller="z1">
            {{Service.count}}
            <input type="button" value="加一" ng-click="add()"/>
        div>
        <div ng-controller="z2">
            {{Service.count}}
            <input type="button" value="加一" ng-click="add()"/>
        div>
    body>
    <script src="js/angular.js">script>
    <script type="text/javascript">
        angular.module('z',[]).controller('z1',function($scope,Service){
            $scope.Service=Service;
             $scope.add=function(){
                    Service.add();
             }
        }).controller('z2',function($scope,Service){
             $scope.Service=Service;
             $scope.add=function(){
                    Service.add();
             }
             console.log(Service);
            console.log($scope.count);
        }).factory('Service',function(){
            return {
                count :0,
                add:function(){
                    this.count++;

                }
            }
        })
    script>
html>

Model模型的使用

  • MVC借助于$scope实现
  • $scope是基本javascript对象
  • $scope是一个树形结构，与DOM标签平行
  • 子 scope对象遵循原型继承，会继承父 s c o p e 对 象 遵 循 原 型 继 承 ， 会 继 承 父 scope上的属性和方法
  • 每一个angular应用只有一个根$rootscope对象的(ng-app）上
  • $scope是MVC和双向数据绑定的基础
  • $scope是表达式执行的上下文环境
  • 有自己的生命周期 创建->注册监控者->模型变化->检测变化->销毁
  • scope提供一些工具方法 s c o p e 提 供 一 些 工 具 方 法 watch/$apply
  • $scope可以传播事件，类似于DOM事件，可以向上也可以向下传播

向上向下传递


<html ng-app="zz">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div ng-controller="ParentCtrl">
            parent:{{count}}
            <div ng-controller="sonCtrl">
                <input type="text" ng-model='num'/>
                <input type="button" ng-click="$emit('add',num)" value="向上发射"/>
                <input type="button" ng-click="$broadcast('add',num)" value="向下发射" />
                son:{{count}}
                <div ng-controller="grandCtrl">
                    grandson:{{count}}
                div>
            div>
        div>
    body>
    <script src="js/angular.js">script>
    <script type="text/javascript">
        angular.module('zz',[]).controller('ParentCtrl',function($scope){
            $scope.count=0;
            $scope.$on('add',function(eve,num){
                $scope.count+=num;
            });
        }).controller('sonCtrl',function($scope){
            $scope.count=0;
            $scope.$on('add',function(eve,num){
                $scope.count+=num;
            });
        }).controller('grandCtrl',function($scope){
            $scope.count=0;
            $scope.$on('add',function(eve,num){
                $scope.count+=num;
            });
        });
    script>
html>

指令-控制器

  • ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上
  • 不要复用Controller,一个控制器值负责一个视图
  • 不要再控制器中操作DOM，使用指令
  • 不要再Cotroller里做数据过滤喝格式化，使用filter过滤器
  • 控制器之间不要相互调用，控制器之间的交互通过事件交互

模块化

  • 模块化是哦你过来分割，组织喝打包软件
  • 每个模块安城一个特定的子功能
  • 所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能
  • 一切是从模块开始，.module就是容器，其他的元素都挂在module里面
  • 模块是一些功能的集合，如控制器，服务，过滤器，指令等子元素组成的整体

ng-model原理

  • angular加载完成之后会启动，首先找ng-app指令
  • 找到后认为ng-app里面的所有的内容都归angular来管
  • 找子层标签所有的指令，然后就可以找到ng-model
  • 找到后会生成数据模型，然后挂在作用域上面
  • 使用此数据模型的变量和视图进行绑定

ng-bind

  • ng-bind和AngularJS功能类似，但是ng-bind是再angular解析渲染完毕之后才讲数据显示出来
  • 使用花括号语法的时候，因为浏览器需要先加载页面，渲染它。然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind。避免没有被渲染的页面被用户看到

你可能感兴趣的:(前端)

  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Cool Admin5(Go版)后台管理系统开发框架搭建使用记录 后青春期的诗go 经验分享golang开发语言后端go
    一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
  • 计算机专业的就业方向 LTPP 人工智能gitjavac++开发语言面试考研
    计算机专业的就业方向亲爱的新生们，欢迎你们踏上计算机科学的旅程！作为一名计算机专业的学生，你们即将进入一个充满无限可能的领域。今天，我将为大家介绍计算机专业的一些主要就业方向，帮助你们了解未来的职业选择。1.软件开发软件开发是计算机专业学生最常见的就业方向之一。软件开发涉及编写、测试、维护应用程序、系统软件等。根据工作性质的不同，软件开发可以进一步细分为以下几个方向：前端开发：前端开发主要负责设计
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • 基于python+django+vue.js开发的社区养老管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    业余时间开发的社区养老系统，基于python/vue技术开发。学习过程问题可以留言。功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：老人管理、护工管理、亲属管理、病史管理、房间管理、活动管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_yanglao演示地址ht
  • Vue.js 事件处理与修饰符详解 vvilkim vuevue.js前端javascript
    Vue.js是一个流行的前端框架，它提供了强大的事件处理机制，使得开发者可以轻松地处理用户交互。Vue的事件处理通过v-on指令实现，同时还提供了丰富的事件修饰符和按键修饰符，帮助我们更高效地处理事件。本文将详细介绍Vue的事件处理机制、修饰符的使用方法，并结合示例代码展示如何在实际开发中应用这些功能。1.v-on指令与事件处理在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行Java
  • 深入理解Vue 3：计算属性与侦听器的艺术 qcidyu 实战案例性能优化模板路由侦听器计算属性Vue3
    title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性
  • 前端（vue)学习笔记（CLASS 4）：组件组成部分与通信 肥肠可耐的西西公主 vue.js前端学习
    1、组件的三大组成部分（结构/样式/逻辑）注意点：1、结构只能有一个根元素2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件3、el根实例独有，data是一个函数，其他配置项一致样式注意点：默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题1、全局样式：默认组件中的样式会作用到全局2、局部样式：可以给组件加上scoped属性，可以让样式
  • 前端学习路线：从零基础到初级工程师的完整指南（2025最新版） 超浪的晨 前端学习
    前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体
  • Tauri+Dotnet+Vue3+Vite桌面应用程序创建 是楊不是杨 前后端vue.netcorerust前端框架
    环境需求Node.js(已安装)Rust(安装Rust，必要).NETCoreSDK(用于后端)TauriCLI(通过Rust安装)1.创建Vue3+Vite前端项目初始化项目：bash复制代码npmcreatevite@latesttauri-vue3-dotnet--templatevuecdtauri-vue3-dotnet安装必要依赖：bash复制代码npminstall启动开发服务器，确
  • 使用 React 和 Vite 使用 Tauri 构建番茄钟 pxr007 react.jsrust前端
    Tauri是一组工具，可让您使用前端框架构建跨平台桌面应用程序。当与React和Vite结合使用时，它可以用于为所有桌面平台构建极其快速的二进制文件。开发人员可以使用Tauri通过Web技术编写安全、精简和快速的跨平台桌面应用程序。对于许多开发人员来说，Electron通常是这些应用程序的首选框架，但Tauri现在已经做好了竞争的准备。在这篇文章中，我们将构建一个简单的番茄钟计时器，我邀请您按照自
  • Angular 17与Material Design 3的结合之旅 t0_54program 编程问题解决手册angular.js前端javascript个人开发
    引言随着前端技术的不断发展，用户界面的设计和体验变得越来越重要。MaterialDesign3作为谷歌推出的最新设计语言，其简洁、直观的设计理念吸引了众多开发者的关注。特别是对于Angular开发者来说，如何将MaterialDesign3与Angular框架无缝结合是一个值得探讨的问题。本文将带你一步一步了解如何在Angular17中使用MaterialDesign3组件。准备工作在开始之前，我
  • Maven 的核心包 旷野说 mavenjava
    由于前端项目不是核心，阅读nexus-public源代码似乎绕远路了。nexus-oss社区版主要就是集成maven的上传包、认证、包解析、包存储这几个核心功能，前端实现重新可以使用新的现代前端工具来提高生产力。故重新疏理一下maven的核心机制，即要深入解析Maven的源代码，需要结合其核心设计思想、模块架构和实际运行机制。一、前置知识准备Maven基础熟悉pom.xml结构、生命周期（Life
  • 探索DeepSeek：前端开发者不可错过的新一代AI技术实践指南 formerlyai 人工智能前端
    引言：为什么DeepSeek成为技术圈焦点？最近，国产AI模型DeepSeek凭借其低成本训练、高性能输出和开源策略，迅速成为开发者社区的热门话题。作为覆盖语言、代码、视觉的多模态技术矩阵，DeepSeek不仅实现了与ChatGPT相媲美的能力，还通过强化学习驱动的架构创新，解决了大模型落地中的成本与效率瓶颈。对于前端开发者而言，DeepSeek的API接入能力和私有化部署方案，为智能应用开发提供
  • 一篇文章让你实现前端JS 、 Golang 、 Python如何接入DeepSeek大模型实现自己的AI 一只理智恩 AI前端后端pythongolangjavascript
    本文将通过三种技术栈实现与DeepSeek大模型的对话交互，提供可直接运行的代码示例及详细注释。一、通用准备步骤1.获取API密钥登录DeepSeek开发者平台创建应用获取DEEPSEEK_API_KEY2.创建测试环境#项目结构deepseek-demo/├──frontend/#前端代码│└──index.html├──go-backend/#Golang后端│└──main.go├──py-
  • 前端知识点---一行代码检测数据类型(javascript) *星之卡比* javascriptjavascript前端原型模式
    typeof只能检测基本数据类型和函数,instanceof不能检测基本数据类型如何一句话检测数据类型呢?function_typeof(value){returnObject.prototype.toString.call(value).slice(8,-1).toLowerCase();}结果是一个全为小写的字符串下面来一步一步分析这段代码:原型链解析Object是原型链中最上层的构造函数，但
  • SvelteKit 最新中文文档教程（4）—— 表单 actions
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • 文件上传漏洞总结（含原因+防御措施）+白名单+黑名单+内容、头+解析漏洞/修补方案 南部余额 漏洞总结安全漏洞web安全安全
    文件上传漏洞简单总结+白名单+黑名单+内容、头+解析漏洞/修补方案问题什么是文件上传漏洞?危害?防御措施?文件上传(验证/绕过)措施?前端js类绕过?后端黑名单绕过特殊解析后缀.htaccess解析大小写绕过点绕过空格绕过::$DATA绕过配合解析漏洞(*待补充)双后缀名绕过白名单绕过MIME绕过%00截断0x00截断0x0a截断内容及其他绕过?文件头检测二次渲染条件竞争突破getimagesiz
  • 前端缓存接口数据 jjjjjjjjj¢ 笔记前端
    在前端缓存接口数据时，可以结合浏览器缓存策略、前端存储（localStorage、sessionStorage、IndexedDB）、内存缓存（变量存储）、ServiceWorker等方式，选择适合的方案。使用浏览器HTTP缓存（推荐，依赖后端支持）如果接口数据不会频繁变化，可以使用HTTP缓存策略（强缓存+协商缓存），减少不必要的请求。后端设置Cache-Control在接口响应头中，服务器可以
  • element-ui简介、安装和使用代码 alankuo 前端前端
    一、Element-UI简介Element-UI是一套基于Vue.js的桌面端组件库，由饿了么前端团队开源。它提供了丰富的组件，如按钮、表单、表格、菜单、对话框等，这些组件具有统一的视觉风格和交互设计，能够帮助开发者快速构建美观、易用的Web应用程序。Element-UI的特点包括：丰富的组件库涵盖了Web应用开发中常见的各种组件需求，无论是简单的UI元素还是复杂的交互组件都能找到，大大减少了开发
  • vue2和vue3的响应式原理有何不同？
    大家好，我是V哥。Vue2和Vue3在响应式原理上存在显著差异，下面为你详细介绍。如果你是前端开发，V哥建议抓紧入坑鸿蒙，2025年鸿蒙趋势将引领国产化替代的新征程，大量内推岗位等你来拿。推荐一本鸿蒙NEXT书《鸿蒙HarmonyOS开发之路》卷1，可以让你少走弯路。Vue2响应式原理Vue2使用Object.defineProperty()方法来实现响应式系统。该方法可以直接在一个对象上定义一个
  • Ajax原理笔记 小鱼ccd 前端
    1.后端如何把数据传给前端？后端通常通过HTTP接口（API）把数据传给前端，一般流程如下：（1）后端提供API接口后端使用SpringBoot开发API，通常返回JSON数据。例如，在Controller层定义一个接口，返回商品列表：@RestController@RequestMapping("/api/products")publicclassProductController{@GetMa
  • css预处理器sass 小华0000 scss前端css
    在前端开发的世界中，CSS是构建网页样式的基础。然而，随着项目规模的增大，纯CSS的编写和维护往往会变得复杂而繁琐。为了解决这些痛点，Sass（SyntacticallyAwesomeStyleSheets）应运而生。Sass是一种CSS预处理器，它扩展了CSS的功能，让CSS的编写更加高效、灵活和易于维护。本文将深入探讨Sass的概念、优势、语法、以及如何在实际项目中应用它，帮助你提升CSS技能
  • 前端学习网站大全 洪布斯
    CSDN-专业IT技术社区：https://www.csdn.net/GitHub：https://github.com/jQuery插件库-收集最全最新最好的jQuery插件：http://www.jq22.com/Iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn/菜鸟教程-学的不仅是技术，更是梦想!：https://www.runoob.com/Animat
  • 前端面试技巧与实践 北辰alk 前端前端面试职场和发展
    在当今快速发展的互联网行业中，前端开发已经成为了一个至关重要的角色。随着技术的不断进步和用户需求的日益复杂，前端工程师的职责不再仅仅是实现页面的布局和交互，而是需要具备全方位的技术能力和工程思维。根据2023年StackOverflow的开发者调查报告，前端开发仍然是全球最受欢迎的技术岗位之一，竞争也愈发激烈。在这样的背景下，前端面试成为了每个开发者职业生涯中的重要关卡。无论是初入职场的新人，还是
  • 2025前端面试题超全面解析（附答案与深度扩展） 北辰alk 前端前端
    文章目录一、HTML篇（扩展版）1.**HTML5语义化标签的实际应用场景**2.**WebComponents实战：如何封装一个自定义按钮组件？**3.**WebWorker的用途与限制**二、CSS篇（扩展版）1.**CSS盒模型详解：border-boxvscontent-box**2.**CSS动画性能优化技巧**3.**CSS预处理器（Sass/Less）核心功能对比**三、JavaSc
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他