vcxiaohan2
vcxiaohan2

自定义一个简单的前端模板引擎

前言

  • 一次在前端技术沙龙会议上，演讲者分享主题《Node.js性能调优实践》时，提到了在node配合artTemplate渲染页面时，并发高且返回数据量大的情景下，会遇到渲染的性能瓶颈，当时演讲者有提到几种解决方法：说artTemplate在渲染模板时会使用到拷贝继承，这个效率明显低于原型继承，修改源码即可
    今天去看了下最新的artTemplate源码，发现继承方法已经改为原型继承了
    自定义一个简单的前端模板引擎_第1张图片
  • 台下有人发言说也可以使用一些诸如webpack的loader加载器，将渲染的模板进行加载并预编译为实际的方法缓存起来，这样渲染的时候直接调用方法，能极大的提高效率
  • 由于当时对模板引擎的原理不甚了解，听得有点蒙，事后得空来稍稍研究下

知识点普及

  • html嵌入模板的几种方法
    • 不同方法的优劣势请参考HTML5 标签元素简介

    • 本文选用的是方法1

      
<script type="text/template">
  "xxx.png">
script>


<textarea style="display: none;">
  <img src="xxx.png">
textarea>


<xmp style="display: none;">
  <img src="xxx.png">
xmp>


<template>
  <img src="xxx.png">
template>
  • 正则表达式负向前瞻
    • 后文需要匹配字符串{{和{{=，这时候需要用到负向前瞻
  • eval和new Function的区别
    • 把字符串解析为可执行的方法，据说2者运行时性能有差异，暂不讨论
  • 浅析js模板引擎
    • 不同模板间的格式以及效率对比

思路

  • 在html中嵌入混有着各种原生js的模板
  • 使用js读取这段模板为字符串
  • 将这段字符串中特殊标记处(指{{、{{=、}})进行相应的替换，最终转换为一段可执行的代码
  • 这段代码执行后将返回拼接的dom结构，之后将dom结构添加到页面

实现

  • 待渲染的数据

    let data = {
  name: 'hvb',
  age: 22,
  hobbies: ['reading', 'coding'],
  friends: [
    { name: 'hwj', age: 12 },
    { name: 'hwb', age: 24 }
  ]
}

  • 待解析的模板(规定it为数据的来源，模板里面混入了es6语法)

    <script id="template" type="text/template">
  
    姓名：{{= it.name }}</p>
  
    年龄：{{= it.age }}</p>
  
    爱好：{{= it.hobbies[0] }}和{{= it.hobbies[1] }}</p>
  {{ for(let {name, age} of it.friends) { }}
    
    姓名：{{= name }}</p>
    
    年龄：{{= age }}</p>
  {{ } }}
script>

  • 解析函数(经过大量的拼接试错，得出能使被替换后的字符串正确运行的匹配替换规则，可自行研究)

    // 解析函数(注意模板中的数据来源均为it)
function render(id, it) {
  // 获取模板字符串
  let html = $(`#${id}`).html()
  // 把换行符替换为空 把{{替换为xx 把{{=替换为xx 把}}替换为xx
  html = html.replace(/\n/g, '').replace(/{{(?!=)/g, '\';').replace(/{{=/g, '\'+').replace(/}}/g, ';str+=\'')
  // 进行简单的拼接，通过eval执行
  return eval(`let str='';str+='${html}'`)
}

  • 高性能的解析函数(由于以上使用eval进行粗暴的解析，没有任何的优化，故运行效率低下，此处进行改进)

    // 使用单例模式来缓存解析后的方法(对比以上粗暴的eval解析，性能提升3倍左右)
let render = (function () {
  let fn = null
  return function (id, it) {
    if (!fn) {
      let html = $(`#${id}`).html()
      html = html.replace(/\n/g, '').replace(/{{(?!=)/g, '\';').replace(/{{=/g, '\'+').replace(/}}/g, ';str+=\'')
      fn = new Function('it', `let str='';str+='${html}';return str;`)
    }
    return fn(it)
  }
})()

  • 渲染结果

    // 调用方法
$('#a').append(render('template', data))

    自定义一个简单的前端模板引擎_第2张图片

思考

  • 模板引擎的思路大同小异，特别是在中途发现自己的思路跟doT.js很相近
  • 至于模板引擎的其他功能，如自定义模板标签、过滤xss、include等等暂不考虑
  • 模板引擎最核心是渲染性能，可以参考高性能JavaScript模板引擎原理解析

源码

以下还小小的对比了下自定义模板和doT.js的渲染性能，当然这对doT.js并不公平，因为我只实现了很小的一个功能


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>demotitle>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">script>
  <script src="https://cdn.bootcss.com/dot/2.0.0-beta.0/doT.min.js">script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

    div {
      border: 2px solid red;
    }
  style>
head>

<body>
  <h2>模板解析如下：h2>
  <div id="a">div>
  <h2>模板解析如下：（使用不同数据）h2>
  <div id="b">div>
  <script id="template" type="text/template">
    
姓名：{{= it.name }}</p>
    
年龄：{{= it.age }}</p>
    
爱好：{{= it.hobbies[0] }}和{{= it.hobbies[1] }}</p>
    {{ for(let {name, age} of it.friends) { }}
      
姓名：{{= name }}</p>
      
年龄：{{= age }}</p>
    {{ } }}
  script>
body>
<script>
  $(() => {
    // 一组数据
    let data1 = {
      name: 'hvb',
      age: 22,
      hobbies: ['reading', 'coding'],
      friends: [
        { name: 'hwj', age: 12 },
        { name: 'hwb', age: 24 }
      ]
    }
    // 一组不同的数据
    let data2 = {
      name: 'hvb111',
      age: 22111,
      hobbies: ['reading111', 'coding111'],
      friends: [
        { name: 'hwj111', age: 12111 },
        { name: 'hwb111', age: 24111 }
      ]
    }

    // 使用单例模式来缓存解析后的方法(对比以上粗暴的eval解析，性能提升3倍左右)
    let render = (function () {
      let fn = null
      return function (id, it) {
        if (!fn) {
          let html = $(`#${id}`).html()
          html = html.replace(/\n/g, '').replace(/{{(?!=)/g, '\';').replace(/{{=/g, '\'+').replace(/}}/g, ';str+=\'')
          fn = new Function('it', `let str='';str+='${html}';return str;`)
        }
        return fn(it)
      }
    })()

    // 使用模板渲染一组数据
    $('#a').append(render('template', data1))
    // 使用模板渲染一组不同的数据
    $('#b').append(render('template', data2))

    // 自定义模板性能测试
    console.time()
    for (let i = 0; i < 1000; i++) {
      $('body').append(render('template', data1))
    }
    console.timeEnd()

    // doT模板性能测试
    var evalText = doT.template($('#template').text())
    console.time()
    for (let i = 0; i < 1000; i++) {
      $('body').append(evalText(data1))
    }
    console.timeEnd()
  })
script>

html>

你可能感兴趣的:(javascript实例)

  • 通俗易懂：MySQL中如何设置只读实例并确保数据一致性？ 大龄下岗程序员 mysqljavamysqlspring
    在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication
  • v-for 实例 琪33
    v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
  • 知道这些概念，你会变得越来越聪明 金海波
    证实性偏差我们倾向于选择那些证实了我们的预期和假设的信息，同时倾向于忽视相反的信息。证实性偏见是选择性关注的实例。比如：从前有个人，丢了一把斧子。他怀疑是邻居家的儿子偷去了，便观察那人，那人走路的样子，像是偷斧子的;看那人的脸色表情，也像是偷斧子的;听他的言谈话语，更像是偷斧子的，那人的一言一行，一举一动，无一不像偷斧子的。不久后，丢斧子的人在上山的时候发现了他的斧子，第二天又见到邻居家的儿子，就
  • C#WPF控件TextBlock详解 未来无限 C#WPF程序设计c#wpf控件TextBlock回车换行多行显示强制回车换行
    本文讲解WPF控件TextBlock。目录定义常用属性实例如何实现自动换行？如何强制回车换行？
  • C#WPF窗口类 Window详解 未来无限 C#WPF程序设计c#wpfwindow类详解
    本文详解C#WPF窗口类Window。目录定义Window窗体属性Window窗体事件实例演示定义WPF中的Window继承于ContentControl，内部可以承载一个Content，当然，借助于ItemsControl或Panel，Content也可以向下添加多个
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • java基础相关面试题详细总结 。。。。。96 java开发语言
    1.Java中的数据类型有哪些？答：Java中的数据类型包括基本数据类型（如整数、浮点数、字符等）和引用数据类型（如类、接口、数组等）。2.什么是面向对象编程（OOP）？答：面向对象编程是一种编程范式，它将数据和对数据的操作封装在一起，形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答：类是对象的抽象描述，而对象是类的具体实例。一个类可以创建多个对象，每个对象都具有类中定义的
  • .NET Core 将实体类转换为 SQL(ORM 映射) 你小子在看什么…… .NET.netcoresqlsugarpostgresql
    一、环境说明PostgreSQL数据库Npgsql数据库连接库SqlSugarORM框架二、映射流程1、创建数据库：检查指定数据库是否存在，如果不存在则创建数据库。2、初始化SqlSugar实例：使用SqlSugarClient初始化数据库连接配置。3、筛选实体类：根据指定的命名空间和排除条件筛选需要创建表的实体类。4、创建表：使用CodeFirst.InitTables方法创建数据库表。////
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • JS判断数据类型 风落不归处 Javascriptjavascript前端
    一、typeoftypeof可以检测基本数据类型，但是碰到引用数据类型返回的都是object。typeof通常用来判断基本数据类型，但是用typeof来判断null和引用类型的实例返回的结果都是"object"lets="Nicholas";letb=true;leti=22;letu;letn=null;leto=newObject();functionFn(){}console.log(typ
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
    在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • C++ 如何去认识模板 SuhyOvO C++c++开发语言
    引言:C++模板是泛型编程的基石,允许程序员定义可与任何数据类型协作的函数和类。这种机制极大地增加了代码的灵活性和复用性,是C++最强大的特性之一。本文将深入探讨C++模板的概念、优势以及使用方法,帮助读者掌握这一重要的编程工具。文章目录模板简介模板的优势一、模板基础1.1模板的概念1.2函数模板1.3类模板二、模板进阶2.1模板的实例化2.2模板的特化2.3模板的默认参数2.4模板的嵌套三、模板
  • 部署es集群 liushaojiax elasticsearchjava大数据
    我们会在单机上利用docker容器运行多个es实例来模拟es集群。不过生产环境推荐大家每一台服务节点仅部署一个es的实例。部署es集群可以直接使用docker-compose来完成，但这要求你的Linux虚拟机至少有4G的内存空间创建es集群首先编写一个docker-compose文件，内容如下：version:'2.2'services:es01:image:elasticsearch:7.12
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
    Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
  • JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发javascript笔记前端
    JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
  • vue生命周期 涡看你就不是好人呐 vue.jsjavascript前端
    1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
  • 前端埋点解决方案 zhu_zhu_xia 前端
    一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
  • vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战vue.js前端javascript
    一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
  • 面试九 设计模式 余生有烟火 面试职场和发展c++linux设计模式
    单例模式通常被归类为创建型设计模式，因为它主要关注如何创建对象的实例，以及如何确保在整个应用程序生命周期中只有一个实例存在。1.为什么日志模块和数据库连接池需要单例模式使用单例模式来实现数据库连接池主要有以下几个原因：全局唯一性：数据库连接池在应用程序中通常是一个全局资源，多个部分都需要共享同一个连接池。使用单例模式可以确保整个应用程序中只存在一个数据库连接池的实例，避免了资源浪费和连接冲突。统一
  • 【设计模式】单例模式详解 略知java的景初 JAVA设计模式java设计模式
    单例模式：定义：确保一个类在任何情况下都绝对只有一个实例，并提供一个全局访问点。为了防止出现重复的创建。单例模式是JAVA中最简单的设计模式之一。属于创建型设计模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有一个对象被创建。这个类提供了访问唯一对象的方法，可以直接访问，不需要new。饿汉式：程序起始就初始化对象。publicclassHungr
  • C/C++中使用静态函数的好处是什么 kfjh c语言c++
    使用静态函数的好处主要体现在以下几个方面：文件作用域：静态函数只在声明它的文件内可见，这有助于隐藏实现细节，提高封装性。这意味着不同的开发者在编写各自的函数时，不必担心函数名冲突的问题，因为即使函数名相同，只要它们在不同的文件中并且是静态的，就不会互相干扰。无this指针：静态函数不依赖于类的实例，因此它们不能直接访问非静态成员变量和非静态成员函数。这使得静态函数更像是一个普通的函数，只是它们被定
  • APP UI自动化测试思路总结 程序员老鹰 ui测试工具开发语言软件测试经验分享程序人生程序员
    首先想要说明一下，APP自动化测试可能很多公司不用，但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的，所以为了更好的待遇，我们还是需要花时间去掌握的，毕竟谁也不会跟钱过不去。接下来，一起总结一下APPUI自动化测试的思路吧。一，开发语言选择通常用于自动化测试的编程语言有：Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自
  • 设计模式:单例模式 lucky_goose 设计模式单例模式设计模式
    单例模式应用场景懒汉模式饿汉模式单例模式应用场景当类的实例只能有一个时，使用单例模式懒汉模式懒汉模式指在第一次获取实例时，才对实例进行初始化//线程不安全的懒汉模式classSingleTon{private://静态成员变量，类内声明，类外初始化staticSingleTon*instance;//构造函数私有化SingleTon(){}SingleTon(constSingleTon&tmp)
  • JS的设计模式（23种） 是个车迷 JavaScriptjavascript设计模式开发语言
    JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象
  • Docker 安装mysql 主从复制 dylan_2017 Docker高级dockermysql容器
    目录1MySql主从复制简介1.1主从复制的概念1.2主从复制的作用2.搭建主从复制2.1pullmysql镜像2.2新建主服务器容器实例33072.2.1master创建my.cnf2.2.2重启master2.2.3进入mysql容器，创建同步用户2.3新建从服务器容器实例33082.3.1slave创建my.cnf2.3.2重启slave实例2.3.3在master中查看主从同步状态2.3.
  • 实例：NX二次开发使用链表进行拉伸功能（链表相关功能练习） 白雪公主的后妈 ug二次开发NX二次开发链表相关函数的应用
    一、概述在进行批量操作时经常会利用链表进行存放相应特征的TAG值，以便后续操作，最常见的就是拉伸功能。这里我们以拉伸功能为例子进行说明。二、常用链表相关函数UF_MODL_create_list创建一个链表，并返回链表的头指针。UF_MODL_put_list_item插入元素到链表中，不检验对象是否重复，或者已经存在。UF_MODL_ask_list_count获取链表对象数量，从头开始遇到NU
  • Algorithm 香水浓 javaAlgorithm
    冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];
  • mongoDB 复杂查询表达式 开窍的石头 mongodb
    1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n
  • Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space 0624chenhong jvmjboss
    转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------
  • 文件上传 下载 解析 相对路径 不懂事的小屁孩 文件上传
    有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。 下面总结一下遇到的问题： 文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。 在上传图片，或者文件时，使用form表单来操作。 前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&
  • 怎么实现qq空间批量点赞 换个号韩国红果果 qq
    纯粹为了好玩！！ 逻辑很简单 1 打开浏览器console；输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加
  • 判断是否为中文 灵静志远 中文
    方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((
  • 一个电话面试后总结 a-john 面试
    今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。 面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：   在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。   然后对list和map分别举几个类型：   list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了
  • MSSQL中Escape转义的使用 aijuans MSSQL
    IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL
  • 一个简单的存储过程 asialee mysql存储过程构造数据批量插入
               今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此：            DELIMITER $$ DROP PROCEDURE IF EXISTS inse
  • annot convert from HomeFragment_1 to Fragment 百合不是茶 android导包错误
    创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap
  • Weblogic10两种修改端口的方法 bijian1013 weblogic端口号配置管理config.xml
    一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &
  • mysql 操作指令 征客丶 mysql
    一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连； 二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys
  • 【Hive一】Hive入门 bit1129 hive
    Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive，在系统变
  • ajax 三种提交请求的方法 BlueSkator Ajaxjqery
    1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v
  • mongodb开发环境下的搭建入门 braveCS 运维
      linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-
  • 编程之美-最短摘要的生成 bylijinnan java数据结构算法编程之美
    import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran
  • json数据解析及typeof chengxuyuancsdn jstypeofjson解析
    // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&
  • 流程系统设计的层次和目标 comsci 设计模式数据结构sql框架脚本
                                  流程系统设计的层次和目标  
  • RMAN List和report 命令 daizj oraclelistreportrman
    LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可
  • 二叉树:红黑树 dieslrae 二叉树
        红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &
  • C语言homework3，7个小题目的代码 dcj3sjt126com c
    1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数，
  • 自定义按钮, 图片在上, 文字在下, 居中显示 dcj3sjt126com 自定义
    #import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa
  • MySQL查询语句练习题，测试足够用了 flyvszhb sqlmysql
    http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR
  • 转：MyBatis Generator 详解 happyqing mybatis
      MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.
  • 让程序员少走弯路的14个忠告 jingjing0907 工作计划学习
      无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放
  • nginx和NetScaler区别 流浪鱼 nginx
    NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方
  • 第11章 动画效果（下） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • FAQ - SAP BW BO roadmap blueoxygen BOBW
    http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i
  • 关于java堆内存溢出的几种情况 tomcat_oracle javajvmjdkthread
    【情况一】： 　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环； 　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决： 　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx
  • Manifest.permission_group权限组 阿尔萨斯 Permission
    结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他