深入解析JavaScript中函数的Currying柯里化
<p><strong>引子<br>
</strong>先来看一道小问题：<br>
有人在群里出了到一道题目：<br>
var s = sum(1)(2)(3) ....... 最后 alert(s) 出来是6 <br>
var s = sum(1)(2)(3)(4) . ... 展开
<p><strong>引子<br>
</strong>先来看一道小问题：<br>
有人在群里出了到一道题目：<br>
var s = sum(1)(2)(3) ....... 最后 alert(s) 出来是6 <br>
var s = sum(1)(2)(3)(4) ....... 最后 alert(s) 出来是10 <br>
问sum怎么实现？<br>
刚看到题目，我第一反应是sum返回的是一个function，但是没有最终实现，印象中看到过类似的原理，但是记不清了。<br>
<br>
后来同事说，这个是叫柯里化，<br>
实现方法比较巧妙：<br>
<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
function sum(x){
var y = function(x){
return sum(x+y)
}
y.toString = y.valueOf = function(){
return x;
}
return y;
}
</pre>
</div>
<p>下面我们就深入来看一下currying柯里化~</p>
<p><strong>什么是柯里化？</strong></p>
<p>柯里化是这样的一个转换过程，把接受多个参数的函数变换成接受一个单一参数(注：最初函数的第一个参数)的函数，如果其他的参数是必要的，返回接受余下的参数且返回结果的新函数。</p>
<p>当我们这么说的时候，我想柯里化听起来相当简单。JavaScript中是怎么实现的呢？<br>
假设我们要写一个函数，接受3个参数。</p>
<div class="blockcode">
<pre class="brush:js;">
var sendMsg = function (from, to, msg) {
alert(["Hello " + to + ",", msg, "Sincerely,", "- " + from].join("\n"));
};
</pre>
</div>
<p>现在，假定我们有柯里化函数，能够把传统的JavaScript函数转换成柯里化后的函数：</p>
<div class="blockcode">
<pre class="brush:js;">
var sendMsgCurried = curry(sendMsg);
// returns function(a,b,c)
var sendMsgFromJohnToBob = sendMsgCurried("John")("Bob");
// returns function(c)
sendMsgFromJohnToBob("Come join the curry party!");
//=> "Hello Bob, Come join the curry party! Sincerely, - John"
</pre>
</div>
<p><strong>手动柯里化</strong></p>
<p>在上面的例子中，我们假定拥有神秘的curry函数。我会实现这样的函数，但是现在，我们首先看看为什么这样的函数是如此必要。<br>
举个例子，手动柯里化一个函数并不困难，但是确实有点啰嗦:</p>
<div class="blockcode">
<pre class="brush:js;">
// uncurried
var example1 = function (a, b, c) {
// do something with a, b, and c
};
// curried
var example2 = function(a) {
return function (b) {
return function (c) {
// do something with a, b, and c
};
};
};
</pre>
</div>
<p>在JavaScript，即使你不指定一个函数所有的参数，函数仍将被调用。这是个非常实用JavaScript的功能，但是却给柯里化制造了麻烦。</p>
<p>思路是每一个函数都是有且只有一个参数的函数。如果你想拥有多个参数，你必须定义一系列相互嵌套的函数。讨厌！这样做一次两次还可以，可是需要以这种方式定义需要很多参数的函数的时候，就会变得相当啰嗦和难于阅读。（但是别担心，我会马上告诉你一个办法）</p>
<p>一些函数编程语言，像Haskell和OCaml，语法中内置了函数柯里化。在这些语言中，举个例子，每个函数是拥有一个参数的函数，并且只有一个参数。你可能会认为这种限制麻烦胜过好处，但是语言的语法就是这样，这种限制几乎无法察觉。</p>
<p>举个例子，在OCaml,你可以用两种方式定义上面example：</p>
<div class="blockcode">
<pre class="brush:js;">
let example1 = fun a b c ->
// (* do something with a, b, c *)
let example2 = fun a ->
fun b ->
fun c ->
// (* do something with a, b, c *)
</pre>
</div>
<p>很容易看出这两个例子和上面的那两个例子是如何的相似。</p>
<p>区别，然而，是否在OCaml也是做了同样的事情。OCaml，没有拥有多个参数的函数。但是，在一行中声明多个参数就是嵌套定义单参函数“快捷方式”。</p>
<p>类似的 ，我们期待调用柯里化函数句法上和OCaml中调用多参函数类似。我们期望这样调用上面的函数：</p>
<div class="blockcode">
<pre class="brush:js;">
example1 foo bar baz
example2 foo bar baz
</pre>
</div>
<p>而在JavaScript，我们采用明显不同的方式：</p>
<div class="blockcode">
<pre class="brush:js;">
example1(foo, bar, baz);
example2(foo)(bar)(baz);
</pre>
</div>
<p>在OCaml这类语言中，柯里化是内置的。在JavaScript，柯里化虽然可行（高阶函数），但是语法上是不方便的。这也是为什么我们决定编写一个柯里化函数来帮我们做这些繁琐的事情，并使得我们的代码简洁。</p>
<p><strong>创建一个curry辅助函数</strong></p>
<p>理论上我们期望可以有一个方便的方式转换普通老式的JavaScript函数（多个参数）到完全柯里化的函数。</p>
<p>这个想法不是我独有的，其他的人已经实现过了，例如在wu.js 库中的.autoCurry()函数（尽管你关心的是我们自己的实现方式）。</p>
<p>首先，让我们创建一个简单的辅助函数 .sub_curry:</p>
<div class="blockcode">
<pre class="brush:js;">
function sub_curry(fn
/*, variable number of args */
) {
var args = [].slice.call(arguments, 1);
return function () {
return fn.apply(this, args.concat(toArray(arguments)));
};
}
</pre>
</div>
<p>让我们花点时间看看这个函数的功能。相当简单。sub_curry接受一个函数fn作为它的第一个参数，后面跟着任何数目的输入参数。返回的是一个函数，这个函数返回fn.apply执行结果，参数序列合并了该函数最初传入参数的，加上fn调用的时候传入参数的。</p>
<p>看例子：</p>
<div class="blockcode">
<pre class="brush:js;">
var fn = function(a, b, c) { return [a, b, c]; };
// these are all equivalent
fn("a", "b", "c");
sub_curry(fn, "a")("b", "c");
sub_curry(fn, "a", "b")("c");
sub_curry(fn, "a", "b", "c")();
//=> ["a", "b", "c"]
</pre>
</div>
<p>很明显，这并不是我门想要的，但是看起来有点柯里化的意思了。现在我们将定义柯里化函数curry：</p>
<div class="blockcode">
<pre class="brush:js;">
function curry(fn, length) {
// capture fn's # of parameters
length = length || fn.length;
return function () {
if (arguments.length < length) {
// not all arguments have been specified. Curry once more.
var combined = [fn].concat(toArray(arguments));
return length - arguments.length > 0
? curry(sub_curry.apply(this, combined), length - arguments.length)
: sub_curry.call(this, combined );
} else {
// all arguments have been specified, actually call function
return fn.apply(this, arguments);
}
};
}
</pre>
</div>
<p>这个函数接受两个参数，一个函数和要“柯里化”的参数数目。第二个参数是可选的，如果省略，默认使用Function.prototype.length 属性，就是为了告诉你这个函数定义了几个参数。</p>
<p>最终，我们能够论证下面的行为：</p>
<div class="blockcode">
<pre class="brush:js;">
var fn = curry(function(a, b, c) { return [a, b, c]; });
// these are all equivalent
fn("a", "b", "c");
fn("a", "b", "c");
fn("a", "b")("c");
fn("a")("b", "c");
fn("a")("b")("c");
//=> ["a", "b", "c"]
</pre>
</div>
<p>我知道你在想什么…</p>
<p>等等…什么？！</p>
<p>难道你疯了？应该是这样！我们现在能够在JavaScript中编写柯里化函数，表现就如同OCaml或者Haskell中的那些函数。甚至，如果我想要一次传递多个参数，我可以向我从前做的那样，用逗号分隔下参数就可以了。不需要参数间那些丑陋的括号，即使是它是柯里化后的。</p>
<p>这个相当有用，我会立即马上谈论这个，可是首先我要让这个Curry函数前进一小步。</p>
<p><strong>柯里化和“洞”(“holes”)</strong></p>
<p>尽管柯里化函数已经很牛了，但是它也让你必须花费点小心思在你所定义函数的参数顺序上。终究，柯里化的背后思路就是创建函数，更具体的功能，分离其他更多的通用功能，通过分步应用它们。</p>
<p>当然这个只能工作在当最左参数就是你想要分步应用的参数！</p>
<p>为了解决这个，在一些函数式编程语言中，会定义一个特殊的“占位变量”。通常会指定下划线来干这事，如过作为一个函数的参数被传入，就表明这个是可以“跳过的”。是尚待指定的。</p>
<p>这是非常有用的，当你想要分步应用（partially apply）一个特定函数，但是你想要分布应用（partially apply）的参数并不是最左参数。</p>
<p>举个例子，我们有这样的一个函数：</p>
<div class="blockcode">
<pre class="brush:js;">
var sendAjax = function (url, data, options) {
/* ... */
}
</pre>
</div>
<p>也许我们想要定义一个新的函数，我们部分提供SendAjax函数特定的Options,但是允许url和data可以被指定。</p>
<p>当然了，我们能够相当简单的这样定义函数：</p>
<div class="blockcode">
<pre class="brush:js;">
var sendPost = function (url, data) {
return sendAjax(url, data, { type: "POST", contentType: "application/json" });
};
</pre>
</div>
<p>或者，使用使用约定的下划线方式，就像下面这样：</p>
<div class="blockcode">
<pre class="brush:js;">
var sendPost = sendAjax( _ , _ , { type: "POST", contentType: "application/json" });
</pre>
</div>
<p>注意两个参数以下划线的方式传入。显然，JavaScript并不具备这样的原生支持，于是我们怎样才能这样做呢？</p>
<p>回过头让我们把curry函数变得智能一点…</p>
<p>首先我们把我们的“占位符”定义成一个全局变量。</p>
<div class="blockcode">
<pre class="brush:js;">
var _ = {};
</pre>
</div>
<p>我们把它定义成对象字面量{},便于我们可以通过===操作符来判等。</p>
<p>不管你喜不喜欢，为了简单一点我们就使用_来做“占位符”。现在我们就可以定义新的curry函数，就像下面这样：</p>
<div class="blockcode">
<pre class="brush:js;">
function curry (fn, length, args, holes) {
length = length || fn.length;
args = args || [];
holes = holes || [];
return function(){
var _args = args.slice(0),
_holes = holes.slice(0),
argStart = _args.length,
holeStart = _holes.length,
arg, i;
for(i = 0; i < arguments.length; i++) {
arg = arguments;
if(arg === _ && holeStart) {
holeStart--;
_holes.push(_holes.shift());
// move hole from beginning to end
} else if (arg === _) {
_holes.push(argStart + i);
// the position of the hole.
} else if (holeStart) {
holeStart--;
_args.splice(_holes.shift(), 0, arg);
// insert arg at index of hole
} else {
_args.push(arg);
}
}
if(_args.length < length) {
return curry.call(this, fn, length, _args, _holes);
} else {
return fn.apply(this, _args);
}
}
}
</pre>
</div>
<p>实际代码还是有着巨大不同的。 我们这里做了一些关于这些“洞”(holes)参数是什么的记录。概括而言，运行的职责是相同的。</p>
<p>展示下我们的新帮手，下面的语句都是等价的：</p>
<div class="blockcode">
<pre class="brush:js;">
var f = curry(function(a, b, c) { return [a, b, c]; });
var g = curry(function(a, b, c, d, e) { return [a, b, c, d, e]; });
// all of these are equivalent
f("a","b","c");
f("a")("b")("c");
f("a", "b", "c");
f("a", _, "c")("b");
f( _, "b")("a", "c");
//=> ["a", "b", "c"]
// all of these are equivalent
g(1, 2, 3, 4, 5);
g(_, 2, 3, 4, 5)(1);
g(1, _, 3)(_, 4)(2)(5);
//=> [1, 2, 3, 4, 5]
</pre>
</div>
<p>疯狂吧？！</p>
<p>我为什么要关心？柯里化能够怎么帮助我？</p>
<p>你可能会停在这儿思考…</p>
<p>这看起来挺酷而且…但是这真的能帮助我编写更好的代码？</p>
<p>这里有很多原因关于为什么函数柯里化是有用的。</p>
<p>函数柯里化允许和鼓励你分隔复杂功能变成更小更容易分析的部分。这些小的逻辑单元显然是更容易理解和测试的，然后你的应用就会变成干净而整洁的组合，由一些小单元组成的组合。</p>
<p>为了给一个简单的例子，让我们分别使用Vanilla.js, Underscore.js, and “函数化方式” (极端利用函数化特性)来编写CSV解析器。</p>
<p>Vanilla.js (Imperative)</p>
<div class="blockcode">
<pre class="brush:js;">
//+ String -> [String]
var processLine = function (line){
var row, columns, j;
columns = line.split(",");
row = [];
for(j = 0; j < columns.length; j++) {
row.push(columns[j].trim());
}
};
//+ String -> [[String]]
var parseCSV = function (csv){
var table, lines, i;
lines = csv.split("\n");
table = [];
for(i = 0; i < lines.length; i++) {
table.push(processLine(lines));
}
return table;
};
Underscore.js
//+ String -> [String]
var processLine = function (row) {
return _.map(row.split(","), function (c) {
return c.trim();
});
};
//+ String -> [[String]]
var parseCSV = function (csv){
return _.map(csv.split("\n"), processLine);
};
</pre>
</div>
<p><strong>函数化方式</strong></p>
<div class="blockcode">
<pre class="brush:js;">
//+ String -> [String]
var processLine = compose( map(trim) , split(",") );
//+ String -> [[String]]
var parseCSV = compose( map(processLine) , split("\n") );
</pre>
</div>
<p>所有这些例子功能上是等价的。我有意的尽可能的简单的编写这些。</p>
<p>想要达到某种效果是很难的，但是主观上这些例子，我真的认为最后一个例子，函数式方式的，体现了函数式编程背后的威力。</p>
<p><strong>关于curry性能的备注</strong></p>
<p>一些极度关注性能的人可以看看这里，我的意思是，关注下所有这些额外的事情？</p>
<p>通常，是这样，使用柯里化会有一些开销。取决于你正在做的是什么，可能会或不会，以明显的方式影响你。也就是说，我敢说几乎大多数情况，你的代码的拥有性能瓶颈首先来自其他原因，而不是这个。</p>
<p>有关性能，这里有一些事情必须牢记于心：</p>
<ul>
<li>存取arguments对象通常要比存取命名参数要慢一点</li>
<li>一些老版本的浏览器在arguments.length的实现上是相当慢的</li>
<li>使用fn.apply( … ) 和 fn.call( … )通常比直接调用fn( … ) 稍微慢点</li>
<li>创建大量嵌套作用域和闭包函数会带来花销，无论是在内存还是速度上</li>
<li>在大多是web应用中，“瓶颈”会发生在操控DOM上。这是非常不可能的，你在所有方面关注性能。显然，用不用上面的代码自行考虑。</li>
</ul>
<p></p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
微信小程序商城项目之商品属性分类（4）
<p>续上一篇的文章：<a href="https://www.jb51.net/article/111367.htm" target="_blank">微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）</a><br>
所提及的购物数量的加减， ... 展开
<p>续上一篇的文章：<a href="https://www.jb51.net/article/111367.htm" target="_blank">微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）</a><br>
所提及的购物数量的加减，现在说说商品属性值联动选择。</p>
<p>为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分</p>
<p style="text-align: center"><img alt="" id="theimg" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-770334601eb0e5549d5538eb782aee1e"><br>
</p>
<p>现在就为大家介绍这个小组件，在小程序中，该如何去写<br>
下图为本项目的图：</p>
<p style="text-align: center"><img alt="" id="theimg" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-29e926e386a9b1e6932ebbcee8a408c9"><br>
</p>
<p>wxml：<br>
</p>
<div class="blockcode">
<pre class="brush:xml;">
<view class="title">商品属性值联动选择</view>
<!--options-->
<view class="commodity_attr_list">
<!--每组属性-->
<view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">
<!--属性名-->
<view class="attr_name">{{attrValueObj.attrKey}}</view>
<!--属性值-->
<view class="attr_value_box">
<!--每个属性值-->
<view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"
data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view>
</view>
</view>
</view>
<!--button-->
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="submit">确定</button>
</view>
</pre>
</div>
<p>wxss：<br>
</p>
<div class="blockcode">
<pre class="brush:css;">
.title {
padding: 10rpx 20rpx;
margin: 10rpx 0;
border-left: 4rpx solid #ccc;
}
/*全部属性的主盒子*/
.commodity_attr_list {
background: #fff;
padding: 0 20rpx;
font-size: 26rpx;
overflow: hidden;
width: 100%;
}
/*每组属性的主盒子*/
.attr_box {
width: 100%;
overflow: hidden;
border-bottom: 1rpx solid #ececec;
}
/*属性名*/
.attr_name {
width: 20%;
float: left;
padding: 15rpx 0;
}
/*属性值*/
.attr_value_box {
width: 80%;
float: left;
padding: 15rpx 0;
overflow: hidden;
}
/*每个属性值*/
.attr_value {
float: left;
padding: 0 10rpx;
margin: 0 10rpx;
border: 1rpx solid #ececec;
}
/*每个属性选中的当前样式*/
.attr_value_active {
background: #FFCC00;
border-radius: 10rpx;
color: #fff;
padding: 0 10rpx;
}
/*禁用属性*/
.attr_value_disabled {
color: #ccc;
}
/*button*/
.btn-area {
margin: 1.17647059em 15px 0.3em;
}
.btn {
margin-top: 15px;
background-color:#FFCC00;
color: #fff;
}
.btn:first-child {
margin-top: 0;
}
</pre>
</div>
<p>js：<br>
</p>
<p>数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。 </p>
<div class="blockcode">
<pre class="brush:js;">
Page({
data: {
firstIndex: -1,
//准备数据
//数据结构：以一组一组来进行设定
commodityAttr: [
{
priceId: 1,
price: 35.0,
"stock": 8,
"attrValueList": [
{
"attrKey": "型号",
"attrValue": "2"
},
{
"attrKey": "颜色",
"attrValue": "白色"
},
{
"attrKey": "大小",
"attrValue": "小"
},
{
"attrKey": "尺寸",
"attrValue": "S"
}
]
},
{
priceId: 2,
price: 35.1,
"stock": 9,
"attrValueList": [
{
"attrKey": "型号",
"attrValue": "1"
},
{
"attrKey": "颜色",
"attrValue": "黑色"
},
{
"attrKey": "大小",
"attrValue": "小"
},
{
"attrKey": "尺寸",
"attrValue": "M"
}
]
},
{
priceId: 3,
price: 35.2,
"stock": 10,
"attrValueList": [
{
"attrKey": "型号",
"attrValue": "1"
},
{
"attrKey": "颜色",
"attrValue": "绿色"
},
{
"attrKey": "大小",
"attrValue": "大"
},
{
"attrKey": "尺寸",
"attrValue": "L"
}
]
},
{
priceId: 4,
price: 35.2,
"stock": 10,
"attrValueList": [
{
"attrKey": "型号",
"attrValue": "1"
},
{
"attrKey": "颜色",
"attrValue": "绿色"
},
{
"attrKey": "大小",
"attrValue": "大"
},
{
"attrKey": "尺寸",
"attrValue": "L"
}
]
}
],
attrValueList: []
},
onShow: function () {
this.setData({
includeGroup: this.data.commodityAttr
});
this.distachAttrValue(this.data.commodityAttr);
// 只有一个属性组合的时候默认选中
// console.log(this.data.attrValueList);
if (this.data.commodityAttr.length == 1) {
for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {
this.data.attrValueList.selectedValue = this.data.commodityAttr[0].attrValueList.attrValue;
}
this.setData({
attrValueList: this.data.attrValueList
});
}
},
/* 获取数据 */
distachAttrValue: function (commodityAttr) {
/**
将后台返回的数据组合成类似
{
attrKey:'型号',
attrValueList:['1','2','3']
}
*/
// 把数据对象的数据（视图使用），写到局部内
var attrValueList = this.data.attrValueList;
// 遍历获取的数据
for (var i = 0; i < commodityAttr.length; i++) {
for (var j = 0; j < commodityAttr.attrValueList.length; j++) {
var attrIndex = this.getAttrIndex(commodityAttr.attrValueList[j].attrKey, attrValueList);
// console.log('属性索引', attrIndex);
// 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置
if (attrIndex >= 0) {
// 如果属性值数组中没有该值，push新值；否则不处理
if (!this.isValueExist(commodityAttr.attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
attrValueList[attrIndex].attrValues.push(commodityAttr.attrValueList[j].attrValue);
}
} else {
attrValueList.push({
attrKey: commodityAttr.attrValueList[j].attrKey,
attrValues: [commodityAttr.attrValueList[j].attrValue]
});
}
}
}
// console.log('result', attrValueList)
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList.attrValues.length; j++) {
if (attrValueList.attrValueStatus) {
attrValueList.attrValueStatus[j] = true;
} else {
attrValueList.attrValueStatus = [];
attrValueList.attrValueStatus[j] = true;
}
}
}
this.setData({
attrValueList: attrValueList
});
},
getAttrIndex: function (attrName, attrValueList) {
// 判断数组中的attrKey是否有该属性值
for (var i = 0; i < attrValueList.length; i++) {
if (attrName == attrValueList.attrKey) {
break;
}
}
return i < attrValueList.length ? i : -1;
},
isValueExist: function (value, valueArr) {
// 判断是否已有属性值
for (var i = 0; i < valueArr.length; i++) {
if (valueArr == value) {
break;
}
}
return i < valueArr.length;
},
/* 选择属性值事件 */
selectAttrValue: function (e) {
/*
点选属性值，联动判断其他属性值是否可选
{
attrKey:'型号',
attrValueList:['1','2','3'],
selectedValue:'1',
attrValueStatus:[true,true,true]
}
console.log(e.currentTarget.dataset);
*/
var attrValueList = this.data.attrValueList;
var index = e.currentTarget.dataset.index;//属性索引
var key = e.currentTarget.dataset.key;
var value = e.currentTarget.dataset.value;
if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
// 取消选中
this.disSelectValue(attrValueList, index, key, value);
} else {
// 选中
this.selectValue(attrValueList, index, key, value);
}
}
},
/* 选中 */
selectValue: function (attrValueList, index, key, value, unselectStatus) {
// console.log('firstIndex', this.data.firstIndex);
var includeGroup = [];
if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选
var commodityAttr = this.data.commodityAttr;
// 其他选中的属性值全都置空
// console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList.attrValues.length; j++) {
attrValueList.selectedValue = '';
}
}
} else {
var commodityAttr = this.data.includeGroup;
}
// console.log('选中', commodityAttr, index, key, value);
for (var i = 0; i < commodityAttr.length; i++) {
for (var j = 0; j < commodityAttr.attrValueList.length; j++) {
if (commodityAttr.attrValueList[j].attrKey == key && commodityAttr.attrValueList[j].attrValue == value) {
includeGroup.push(commodityAttr);
}
}
}
attrValueList[index].selectedValue = value;
// 判断属性是否可选
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList.attrValues.length; j++) {
attrValueList.attrValueStatus[j] = false;
}
}
for (var k = 0; k < attrValueList.length; k++) {
for (var i = 0; i < includeGroup.length; i++) {
for (var j = 0; j < includeGroup.attrValueList.length; j++) {
if (attrValueList[k].attrKey == includeGroup.attrValueList[j].attrKey) {
for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
if (attrValueList[k].attrValues[m] == includeGroup.attrValueList[j].attrValue) {
attrValueList[k].attrValueStatus[m] = true;
}
}
}
}
}
}
// console.log('结果', attrValueList);
this.setData({
attrValueList: attrValueList,
includeGroup: includeGroup
});
var count = 0;
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList.attrValues.length; j++) {
if (attrValueList.selectedValue) {
count++;
break;
}
}
}
if (count < 2) {// 第一次选中，同属性的值都可选
this.setData({
firstIndex: index
});
} else {
this.setData({
firstIndex: -1
});
}
},
/* 取消选中 */
disSelectValue: function (attrValueList, index, key, value) {
var commodityAttr = this.data.commodityAttr;
attrValueList[index].selectedValue = '';
// 判断属性是否可选
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList.attrValues.length; j++) {
attrValueList.attrValueStatus[j] = true;
}
}
this.setData({
includeGroup: commodityAttr,
attrValueList: attrValueList
});
for (var i = 0; i < attrValueList.length; i++) {
if (attrValueList.selectedValue) {
this.selectValue(attrValueList, i, attrValueList.attrKey, attrValueList.selectedValue, true);
}
}
},
/* 点击确定 */
submit: function () {
var value = [];
for (var i = 0; i < this.data.attrValueList.length; i++) {
if (!this.data.attrValueList.selectedValue) {
break;
}
value.push(this.data.attrValueList.selectedValue);
}
if (i < this.data.attrValueList.length) {
wx.showToast({
title: '请完善属性',
icon: 'loading',
duration: 1000
})
} else {
wx.showToast({
title: '选择的属性：' + value.join('-'),
icon: 'sucess',
duration: 1000
})
}
}
}) </pre>
</div>
<p>运行效果：</p>
<p style="text-align: center"><img alt="" id="theimg" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-4c85d6d4c7cd3ecdbb2eeadf6e8cf0bd"></p>
<p>demo地址：<a href="http://xiazai.jb51.net/201704/yuanma/weixinliandongselect(jb51.net).rar" target="_blank">微信小程序商城项目之商品属性值联动选择</a></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持社区。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
javascript 运算数的求值顺序
比如 <br><div class="codetitle"><span><a class="copybut" data="89741" id="copybut89741" onclick="doCopy('code89741')" style="CURSOR: pointer"><u>复制代码< ... 展开
比如 <br><div class="codetitle"><span><a class="copybut" data="89741" id="copybut89741" onclick="doCopy('code89741')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code89741"> <br>a * b + c; <br></div> <br>，先算乘方，再算乘除，最后算加减 <br>，有括号，先算括号里面的，同一级运算按照从左到右的顺序依次进行 <br>这一点所有的程序设计语言都采取数学中数字的计算顺序。当然程序设计语言中还有一些不同于数学中的运算符。那运算数的求值顺序是如何的呢？ <br>如下 <br><div class="codetitle"><span><a class="copybut" data="81455" id="copybut81455" onclick="doCopy('code81455')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code81455"> <br>// 求 a 和 b的和 <br>sum = a + b; <br></div> <br>，从内存中取a的值 <br>，从内存中取b的值 <br>，进行相加运算 <br>貌似描述的很弱智，理所当然就是这样的。有人可能觉得先取b的值，再取a，然后相加。这样最后的结果也是一样的。的确是这样。但如果运算数是一个函数执行呢？ <br>sum = a + fun(); <br>假设fun函数中仅return 一个数字。这时无论是先取a的值，再去fun执行后的值也是无所谓的。最终的结果都一样。说到这里，仍然没有新鲜，纠结的地方。 <br>但如果fun不仅返回了数字，还改变了a呢？ 比如以下JavaScript代码 <br><div class="codetitle"><span><a class="copybut" data="59428" id="copybut59428" onclick="doCopy('code59428')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code59428"> <br>var a = 5; <br>function fun(){ <br>a = 10; <br>return 20; <br>} <br>var b = a + fun(); // b 的值？ <br></div> <br>fun 函数不仅返回了20，还改变了a的值。而a 正是参与相加运算的a。这时a取 5 还是 10 参与相加运算呢？ 如果是5则b的值为25，如果是10，则b为30。JavaScript语言中结果是25。但C语言中却是30，如下 <br><div class="codetitle"><span><a class="copybut" data="98949" id="copybut98949" onclick="doCopy('code98949')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code98949"> <br>int a = 5; <br>int fun(){ <br>a = 10; <br>return 20; <br>} <br>int b = a + fun(); // 30 <br></div> <br>因此，只有当函数有副作用的时候，运算数的求值顺序不同会导致结果不同。很明显，各个语言实现不同。 <br>JavaScript语言中，从左到右，a取5，fun执行后返回20，最后是 5+20。注意，虽然参与此次运算时a取5，但a值实际上已经改变了。如下 <br><div class="codetitle"><span><a class="copybut" data="80387" id="copybut80387" onclick="doCopy('code80387')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code80387"> <br>var a = 5; <br>function fun(){ <br>a = 10; <br>return 20; <br>} <br>var b = a + fun(); // b 的值？ <br>alert(a); // 10 <br></div> <br>C语言中，先执行fun，fun中改变了a的值，为10，取a为10参与本次 “加”运算，fun返回20。结果是 10+20。 <br>可以看到，无论是JavaScript还是C。a的值最后都改变了，为10。区别在于：参与相加运算时，JavaScript 取未被改变的值5， C取改变了的值10。 <br>C语言中，运算也是从左到右的。但当有函数作为运算数时，会先执行函数。而改函数如果有副作用时，取被改变后的a值参与本次运算。无论fun和a的顺序。如下将fun放在前面，在C语言中结果仍然是30 <br><div class="codetitle"><span><a class="copybut" data="62633" id="copybut62633" onclick="doCopy('code62633')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code62633"> <br>int a = 5; <br>int fun(){ <br>a = 10; <br>return 20; <br>} <br>int b = fun() + a; // 30 <br></div> <br>JavaScript中如果fun与a交换了顺序，则结果不是25了。 <br><div class="codetitle"><span><a class="copybut" data="89336" id="copybut89336" onclick="doCopy('code89336')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code89336"> <br>var a = 5; <br>function fun(){ <br>a = 10; <br>return 20; <br>} <br>var b = fun() + a; // b为30 <br></div> <br>相关： <br><a href="https://www.jb51.net/article/28079.htm" target="_blank">函数的副作用</a>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
ES6中Symbol类型用法实例详解
<p>本文实例讲述了ES6中的Symbol类型。分享给大家供大家参考，具体如下：</p>
<p>Symbol是在ES6中新加入的类型。</p>
<p>正如我们所知，JavaScript中有以下几种类型：</p>
<p><span s ... 展开
<p>本文实例讲述了ES6中的Symbol类型。分享给大家供大家参考，具体如下：</p>
<p>Symbol是在ES6中新加入的类型。</p>
<p>正如我们所知，JavaScript中有以下几种类型：</p>
<p><span style="color: #0000ff">Undefined </span>,<span style="color: #0000ff">Null </span>,<span style="color: #0000ff">Boolean </span>,<span style="color: #0000ff">Number </span>,<span style="color: #0000ff">String</span>, <span style="color: #0000ff">Object</span>。</p>
<p>但是上述类型在处理某些情况的时候是远远不够的。下面我们来举一个例子：</p>
<p>假设我们要移动div，也需要在某些情况下判断该div是否处于移动状态，所以我们会想到给div这类的对象设置一个属性。</p>
<div class="blockcode">
<pre class="brush:js;">
if (element.isMoving) {
smoothAnimations(element);
}
element.isMoving = true;
</pre>
</div>
<p>但是这样会存在一些问题，比如：</p>
<p>我们<span style="color: #ff6600"><strong>可能和第三方的库冲突</strong></span>；</p>
<p>我们<span style="color: #ff6600"><strong>可能和未来的标准冲突等</strong></span>。</p>
<p>于是可以采用第二种方法，也就是采用加密函数，制定一个值：</p>
<div class="blockcode">
<pre class="brush:js;">
var isMoving = SecureRandom.generateName();
...
if (element[isMoving]) {
smoothAnimations(element);
}
element[isMoving] = true;
</pre>
</div>
<p>这样确实解决了冲突问题，但却带来了调试问题，我们每次查看该对象属性时都会看见一大堆垃圾命名。</p>
<p>于是为了解决冲突问题，ES6提出了Symbol这样的新类型。</p>
<p><span style="color: #ff0000">Symbol是一种特殊的、不可变的数据类型，可以作为对象属性的标识符使用</span>。我们看demo：</p>
<div class="blockcode">
<pre class="brush:js;">
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
</pre>
</div>
<p><code>Symbol("foo")</code> 不会强制字符串 "foo" 进入一个Symbol，它<strong><span style="color: #0000ff">每次都创建一个新的Symbol</span></strong>：</p>
<div class="blockcode">
<pre class="brush:js;">
Symbol("foo") === Symbol("foo"); // false
</pre>
</div>
<p>所以可以利用这个特性来创建私有属性：</p>
<div class="blockcode">
<pre class="brush:js;">
(function() {
// 创建symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
})();
var c = new MyClass("hello")
c["key"] === undefined//无法访问该属性，因为是私有的
</pre>
</div>
<p>也可以利用Symbol来解除上面所说的冲突问题：</p>
<div class="blockcode">
<pre class="brush:js;">
// create a unique symbol
var isMoving = Symbol("isMoving");
...
if (element[isMoving]) {
smoothAnimations(element);
}
element[isMoving] = true;
</pre>
</div>
<p>当然，也可以通过另外的调用方法来生成<span style="color: #0000ff"><strong>可以与外界共享的Symbol类型，就是Symbol.for方法</strong></span>。</p>
<p><code>Symbol.for(key)</code> 方法会根据给定的键 key，来从 symbol 注册表中找到对应的 symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入 symbol 注册表中。</p>
<div class="blockcode">
<pre class="brush:js;">
Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中，键为 "foo"
Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbol
Symbol.for("bar") === Symbol.for("bar"); // true，证明了上面说的
Symbol("bar") === Symbol("bar"); // false，Symbol() 函数每次都会返回新的一个 symbol
var sym = Symbol.for("mario");
sym.toString();
// "Symbol(mario)"，mario 既是该 symbol 在 symbol 注册表中的键名，又是该 symbol 自身的描述字符串
</pre>
</div>
<p>所以为了防止冲突，我们最好给symbol带上前缀：</p>
<div class="blockcode">
<pre class="brush:js;">
Symbol.for("mdn.foo");
Symbol.for("mdn.bar");
</pre>
</div>
<p>希望本文所述对大家ECMAScript程序设计有所帮助。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
Javascript页面跳转常见实现方式汇总
<p>本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考，具体如下：</p>
<p><strong>概述</strong></p>
<p>相信很多Web开发者都知道，在开发Web程序的时候，对于页面 ... 展开
<p>本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考，具体如下：</p>
<p><strong>概述</strong></p>
<p>相信很多Web开发者都知道，在开发Web程序的时候，对于页面之间的跳转，有很多种，但是有效的跳转则事半功倍，下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式，拿出和大家共享一下。</p>
<p><strong>第一种：直接跳转加参数</strong></p>
<div class="blockcode">
<pre class="brush:js;">
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
</pre>
</div>
<p>直接跳转无参数：<br>
</p><div class="codetitle"><span><a class="copybut" data="51054" id="copybut51054" onclick="doCopy('code51054')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code51054"><script>window.location.href='http://www.baidu.com';</script></div><p><br>
<strong>第二种：返回上一次预览界面</strong></p>
<div class="blockcode">
<pre class="brush:js;">
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>
</pre>
</div>
<p>标签嵌套：</p>
<div class="blockcode">
<pre class="brush:js;">
<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>
</pre>
</div>
<p><strong>第三种：指定跳转页面 对框架无效。</strong></p>
<div class="blockcode">
<pre class="brush:js;">
<script language="javascript">
window.navigate("top.jsp");
</script>
</pre>
</div>
<p><strong>第四种：指定自身跳转页面 对框架无效。</strong></p>
<div class="blockcode">
<pre class="brush:js;">
<script language="JavaScript">
self.location='top.htm';
</script>
</pre>
</div>
<p><strong>第五种：指定自身跳转页面 对框架有效。</strong></p>
<div class="blockcode">
<pre class="brush:js;">
<script language="javascript">
alert("非法访问！");
top.location='xx.aspx';
</script>
</pre>
</div>
<p><strong>第六种：按钮式 在button按钮添加 事件跳转</strong>。<br>
</p><div class="codetitle"><span><a class="copybut" data="42768" id="copybut42768" onclick="doCopy('code42768')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code42768"><input name="pclog" type="button" value="GO" onClick="location.href='login.aspx'"></div><p><br>
<br>
<strong>第七种：在新窗口打开：<br>
</strong></p><div class="codetitle"><span><a class="copybut" data="20741" id="copybut20741" onclick="doCopy('code20741')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code20741"><a href="javascript:" onClick="window.open('login.aspx','','height=500,width=611,scrollbars=yes,status=yes')">开新窗口</a></div><p><br>
<br>
应用实例：</p>
<div class="blockcode">
<pre class="brush:js;">
<head>
<script language="javascript">
function old_page()
{
window.location = "login.aspx"
}
function replace()
{
window.location.replace("login.aspx")
}
function new_page()
{
window.open("login.aspx")
}
</script>
</head>
<body>
<input type="button" onclick="new_page()" value="在新窗口打开s"/>
<input type="button" onclick="old_page()" value="跳转后有后退功能"/>
<input type="button" onclick="replace()" value="跳转后没有后退功能"/>
</body>
</pre>
</div>
<p>希望本文所述对大家JavaScript程序设计有所帮助。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
深入分析js中的constructor和prototype
我们在定义函数的时候，函数定义的时候函数本身就会默认有一个prototype的属性，而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子，来说明这个 <br><div class="codetitle ... 展开
我们在定义函数的时候，函数定义的时候函数本身就会默认有一个prototype的属性，而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子，来说明这个 <br><div class="codetitle"><span><a class="copybut" data="75251" id="copybut75251" onclick="doCopy('code75251')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code75251"> <br>function a(c){ <br>this.b = c; <br>this.d =function(){ <br>alert(this.b); <br>} <br>} <br>var obj = new a('test'); <br>alert(typeof obj.prototype);//undefine <br>alert(typeof a.prototype);//object <br></div> <br>从上面的例子可以看出函数的prototype 属性又指向了一个对象，这个对象就是prototype对象,请看下图
<p><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-6c71d260b54c5abc2916cc2743adfbc3.png"></p>
<p><strong>a.prototype 包含了2个属性，一个是constructor ，另外一个是__proto__</strong></p>
<p>这个constructor 就是我们的构造函数a，这个也很容易理解。</p>
<p>那么__proto__ 是什么呢？</p>
<p><span>这个就涉及到了原型链的概念：</span></p>
<p><span> 每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性 时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样 一直找下去。</span></p>
<p><strong>请看mozzlia 对它对它的描述</strong></p>
<p><span style="FONT-SIZE: 15px; FONT-FAMILY: tahoma, arial, helvetica, sans-serif">When an object is created, its <code>__proto__</code> property is set to constructing function's <code>prototype</code> property. For example <code>var fred = new Employee();</code> will cause <code>fred.__proto__ = Employee.prototype;</code>.</span></p>
<p><span style="FONT-SIZE: 15px; FONT-FAMILY: tahoma, arial, helvetica, sans-serif">This is used at runtime to look up properties which are not declared in the object directly. E.g. when <code>fred.doSomething()</code> is executed and <code>fred</code> does not contain a<code>doSomething</code>, <code>fred.__proto__</code> is checked, which points to <code>Employee.prototype</code>, which contains a <code>doSomething</code>, i.e. <code>fred.__proto__.doSomething()</code> is invoked.</span></p>
<p><span style="FONT-SIZE: 15px; FONT-FAMILY: tahoma, arial, helvetica, sans-serif">Note that <code><em>__proto__</em></code> is a property of the instances, whereas <code>prototype</code> is a property of their constructor functions.</span></p>
<p>不管你信不信，我们来看图</p>
<p><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-c7a1aaa011c1795e75aa37786a67483d.png"><br>在后面如果加上 alert(obj.__proto__ === a.prototype) //true</p>
<p>同理，在这里我们来分析出new 运算符做了那些事情</p>
<ol>
<li> var obj={}; 也就是说，初始化一个对象obj。
</li><li>obj.__proto__=a.prototype;
</li><li> a.call(obj);也就是说构造obj，也可以称之为初始化obj。 </li></ol>
<p>我们将这个例子改造一些，变得复杂一点。<br></p><div class="codetitle"><span><a class="copybut" data="66965" id="copybut66965" onclick="doCopy('code66965')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code66965"> <br>function a(c){ <br>this.b = c; <br>this.d =function(){ <br>alert(this.b); <br>} <br>} <br>a.prototype.test = function(){ <br>alert(this.b); <br>} <br>var obj = function (){} <br>obj.prototype = new a('test'); <br>obj.prototype.test1 =function(){ <br>alert(22222); <br>} <br>var t = new obj('test'); <br>t.test();//alert('test'); <br></div><p><br>我们来分析下这个过程 <br><br>由 var t = new obj('test'); 我们可以得到 t.__proto__ = obj.prototype,但是上面指定obj.prototype =new a('test'); 可以这样来看下 <br><br>obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype; <br><br>那么obj.prototype.__proto__ = a.prototype,由 t.__proto__ = obj.prototype 可以得出 t.__proto__.__proto__ = a.prototype, <br><br>所以对象t先去找本身是的prototype 是否有test函数，发现没有，结果再往上级找，即 t.__proto__ ,亦即obj.prototype 寻找test函数 ，但是obj.prototype 也没有这个函数，然后再往上找。即 <br><br>t.__proto__.__proto__ 找，由于t.__proto__.__proto__ = a.prototype 在 a.prototype 中找到了这个方法，输出了alert('test') <br><br>从这里可以分析得出一个结论，js中原形链的本质在于 __proto__ <br><br>再看看一个列子 <br></p><div class="codetitle"><span><a class="copybut" data="44939" id="copybut44939" onclick="doCopy('code44939')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code44939"> <br>function a(c){ <br>this.b = c; <br>this.d =function(){ <br>alert(this.b); <br>} <br>} <br>var obj = new a('test'); <br>alert(obj.constructor);//function a(){} <br>alert(a.prototype.constructor);//function a(){} <br></div><p> <br>根据上面讲到的__proto__ 我们来分析下，首先obj是没有constructor 这个属性的，但是 obj.__proto__ = a.prototype;就从 <br><br>a.prototype中寻找，而 a.prototype.constructor 是就a，所有两者的结果是一一样的. </p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
JS实现OCX控件的事件响应示例
<p>JS支持OCX控件的事件（event），当OCX控件定义的事件发生时，JS可以捕获该事件并对事件进行相应的处理。</p>
<p>个人理解，其实就是事件的响应由谁来完成，OCX控件自身肯定是可以实现的，JS提供的这 ... 展开
<p>JS支持OCX控件的事件（event），当OCX控件定义的事件发生时，JS可以捕获该事件并对事件进行相应的处理。</p>
<p>个人理解，其实就是事件的响应由谁来完成，OCX控件自身肯定是可以实现的，JS提供的这种机制使JS也可以完成OCX控件事件的响应。</p>
<p>简单举例如下：</p>
<p>首先在OCX控件中添加自定义事件（预定义事件同理，如鼠标点击等，没亲自试，感觉原理应该是一样的），</p>
<p>事件应该是属于窗口的，所以在Ctrl类上单击右键，Add->Add Event，如下图：</p>
<p>在打开的对话框中输入事件名称，例如OnChange，如果需要参数，设置参数信息，点击 [ 完成 ]，向导自动生成代码，如下</p>
<p></p><div class="codetitle"><span><a class="copybut" data="45495" id="copybut45495" onclick="doCopy('code45495')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code45495"><br>
// 事件映射 <br>
BEGIN_EVENT_MAP(CH_OcxCtrl, COleControl) <br>
EVENT_CUSTOM_ID("OnChange", eventidChange, OnChange, VTS_NONE) <br>
END_EVENT_MAP()<br>
</div><p><br>
好了，事件定义完成，接下来需要触发该事件，可在OCX控件的某个函数中调用OnChange()来触发事件。<br>
OCX控件的事件定义至此完成。</p>
<p>接下来是JS中的对事件的响应，代码如下，</p>
<p></p><div class="codetitle"><span><a class="copybut" data="37209" id="copybut37209" onclick="doCopy('code37209')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code37209"><br>
<script language="javascript" for="MyCtrl" event="OnChange()" type="text/javascript"> <br>
Call(); //也可直接写操作代码<br>
</script><br>
</div><p><br>
MyCtrl是该控件在本页面中的OCX控件对象ID（name好像也可以，没有试过），可在javascript中操作该对象。<br>
OnChange()是OCX控件中的事件，这里的事件名称必须与OCX控件中的事件名称一样。<br>
如果事件带参数，当触发事件的时候，OCX控件会传递相应的参数，例如事件有两个参数p1和p2，可写为event = “OnChange(param1,param2)”，此时param1、param2会对应接收到p1、p2，同理Call(param1,param2)。</p>
<p></p><div class="codetitle"><span><a class="copybut" data="15183" id="copybut15183" onclick="doCopy('code15183')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code15183"><br>
<script type="text/javascript" Language=Javascript> <br>
function Call(param1,param2) <br>
{ <br>
alert(param1+param2); //操作代码<br>
} <br>
</script><br>
</div><p><br>
写的仓促，语言表达不是很清晰，基本思路是这样，用以备忘。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
Webpack 4.x搭建react开发环境的方法步骤
<p>本文介绍了了Webpack 4.x搭建react开发环境的方法步骤，分享给大家，也给自己留个笔记</p>
<p>必要依赖一览(npm install) 安装好。<br>
</p>
<div class="blockcode">
<pre class= ... 展开
<p>本文介绍了了Webpack 4.x搭建react开发环境的方法步骤，分享给大家，也给自己留个笔记</p>
<p>必要依赖一览(npm install) 安装好。<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack": "^4.16.5"
...
}</pre>
</div>
<p>babel系列是干什么用的呢？是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在，所以单纯的babel是不够的，此外要让babel作用于webpack，需要给webpack添加一个loader（以前版本叫loader，4.x版本开始改用‘rules'），在工程根目录新建webpack.config.js文件，并添加如下代码：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [
];
//以上代码可以忽略，没有必要不要添加noParse，因为依赖代码中可能会有环境的判断，而浏览器中是拿不到process变量的，会报错！
var config = {
//这里是打包的入口
entry: path.resolve(__dirname, './react/app.js'),
resolve: {
alias: {
}
},
//打包完成后输出到./build/bundle.js文件中
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
mode: 'development',
module: {
//上述的规则，loader就放在这里，这段没什么好说的，从Webpack官方文档上直接拿来用
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//刚刚下载的module之一
presets: ['babel-preset-env']
}
}
}
]
}
};
//遍历你的自定义要排除的依赖，安装到node_modules里的依赖一般不需要排除掉
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
</pre>
</div>
<p>以上代码可以直接用，请先将注释去掉。有了以上文件配置，你可以直接在package.json中添加scripts来打包你的app.js。<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
...
"scripts": {
...
"build-config": "webpack",
...
}
...
</pre>
</div>
<p>执行<code>npm run build-config</code>可执行打包操作，但是目前为止还是会报错，因为缺少babel设置，webpack打包时无法识别jsx语法，什么时jsx语法？就是在js代码中写的类似于dom结构的东西，如下:<br>
</p>
<div class="blockcode">
<pre class="brush:xhtml;">
...
<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>
{'Hello ' + this.state.text}
</h1>
...</pre>
</div>
<p>要解析这个东西还需要添加.babelrc文件，在其中添加：<br>
</p>
<div class="blockcode">
<pre class="brush:plain;">
{
"plugins": ["transform-react-jsx"]
}
</pre>
</div>
<p>这句主要是说在babel参与打包时，会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js<br>
</p>
<div class="blockcode">
<pre class="brush:plain;">
> webpack
Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
Asset Size Chunks Chunk Names
bundle.js 715 KiB main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
+ 21 hidden modules
</pre>
</div>
<p>webpack打包的好处就是这里，可以让你的app加载速度更快，如上的包总计715kb，隐藏了没有用到的模块21个。这就是为什么要搭手脚架开发的理由。</p>
<p><span style="color: #ff0000"><strong>jsx-transform的坑</strong></span><br>
</p>
<p>此外还有一点要说一下，就是在引入React时，请整个引入，要么就额外引入它在编译后的代码中可能会用到的api，否则会说什么什么没找到而导致页面加载不出来。看编译后的代码：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
this.setState({
text: "Clicked"
});
}
}, {
key: "render",
value: function render() {
return _react2.default.createElement(
"h1",
{ onClick: this.handleClick.bind(this), style: { color: "red" } },
'Hello ' + this.state.text
);
}
}]);
</pre>
</div>
<p>如果你不引入react, 编译后render()函数中的_react2会是React.createElement而React显然是找不到这个变量的。看到编译后的代码，你可能更能理解，哦在jsx的dom中那样写原来是这个意思啊···<br>
</p>
<p><span style="color: #ff0000"><strong>Vscode中开发，需要配置好eslint</strong></span><br>
</p>
<p>react中有大量的es6的写法，如果不配置eslint你会看到大量飘红，首先是在项目的开发环境安装依赖：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
"devDependencies": {
···
"eslint": "^5.3.0",
"eslint-plugin-import": "^2.14.0"
···
}
</pre>
</div>
<p>在项目根路径下添加.eslintrc.json，并添加以下代码[^eslint]：<br>
</p>
<div class="blockcode">
<pre class="brush:js;">
{
"parserOptions": {
//使用的ecma版本
"ecmaVersion": 6,
"sourceType": "module",
//使用jsx特性
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
//忽略console的警告
"no-console": "off",
"semi": ["error", "always"]
}
}
</pre>
</div>
<p><span style="color: #ff0000"><strong>参考：</strong></span><br>
</p>
<ul>
<li><a href="http://eslint.cn/docs/user-guide/configuring" rel="external nofollow" target="_blank">eslint官方文档 </a></li>
<li><a href="https://www.npmjs.com/package/babel-plugin-transform-jsx" rel="external nofollow" target="_blank">babel-plugin-transform-jsx文档 </a></li>
<li><a href="http://webpack.css88.com/loaders/babel-loader.html" rel="external nofollow" target="_blank">webpack4.15.1 官方文档</a></li>
<li><a href="https://babeljs.io/docs/en/babelrc" rel="external nofollow" target="_blank">babelrc 配置文档</a></li>
<li><a href="https://www.jb51.net/article/145696.htm" target="_blank">React+Webpack快速上手指南(虽然已经过时，还有部分不适用，但是还是借鉴了一部分代码) </a></li>
<li><a href="https://github.com/ruanyf/jstraining/blob/master/docs/engineering.md" rel="external nofollow" target="_blank">阮一峰 四课时培训课，虽然过时，但是还是能带你体验一番前端开发 </a></li>
</ul>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持社区。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
BootStrap导航栏问题记录
<p>今天完成的事情：（实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。）</p>
<p>我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨 ... 展开
<p>今天完成的事情：（实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。）</p>
<p>我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后，突然灵机一闪。</p>
<p>能不能通过内部的固定高度，来实现垂直平分的效果呢。</p>
<p>在查看psd图的效果是导航栏的a是垂直平分的。</p>
<p style="text-align: center"><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-b7d1f6289d0ab2bfabd8ef22d2542ac4.png" style="font-size: medium; font-family: Simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></p>
<p>那么我可否通过固定a超链接的高度来实现垂直平分呢？</p>
<div class="blockcode">
<pre class="brush:js;">
<div "h-nav">
<nav "container navbar navbar-default" role="navigation">
<div "row">
<div "navbar-header df-jcsbc">
<a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>
<div "collapse navbar-collapse" id="navbar-collapse">
<ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
<li ""><a href="test9-1.html" rel="external nofollow" >首页</a></li>
<li ""><a href="test9-3.html" rel="external nofollow" ><span "dib">职业</span></a></li>
<li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li>
<li ""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span "dib pat">关于</span></a></li>
</ul>
</div>
</div>
</nav>
</div></pre>
</div>
<p>带着这种想法，我设定了如下属性。</p>
<div class="blockcode">
<pre class="brush:js;">
#h-cell-1 a{
display:inline-block;
height:97px;
margin-left:32px;
font-size:17.8px;
text-decoration: none;color:white;
}</pre>
</div>
<p style="text-align: center"><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-d60d82600ef88e9cf024733de7f44911.png" style="font-size: medium; font-family: Simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></p>
<p>为此怎么实现垂直居中呢？</p>
<p>第一点想到的是position定位了</p>
<p>既然要实现相对于a超链接的position，那么必须引入一个span盒子了。</p>
<div class="blockcode">
<pre class="brush:js;">
<li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li></pre>
<br>
</div>
<p>然后增加</p>
<div class="blockcode">
<pre class="brush:js;">
#h-cell-1 li{height:97px;}
#h-cell-1 a{
display:inline-block;
position:relative;
width:40px;
height:97px;
margin-left:32px;
border-bottom:2px solid #20B176;
font-size:17.8px;
text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}</pre>
</div>
<p>就可实现垂直居中了！</p>
<p>但另外一个问题又接着出现了，在galaxy5的小屏幕下，下拉菜单的li间距太大，不美观。</p>
<p style="text-align: center"><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-86d4c58a359e4cd432775f1585e8ff38.png" style="font-size: medium; font-family: Simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></p>
<p>又该怎么办呢？</p>
<p>这个是在28号晚上想到方法的。灵感也是看了其他同学的日报。他们提到媒体查询。</p>
<p>好，什么是媒体查询。建议百度。这里不做介绍。</p>
<p>媒体查询是吧，好那么久好办了。</p>
<div class="blockcode">
<pre class="brush:js;">
@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}</pre>
<br>
</div>
<p>ok，完美。</p>
<p>但是还有问题啊！</p>
<p style="text-align: center"><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-abc1e743d889ca39f9073a0ad45c3bc8.png" style="font-size: medium; font-family: Simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></p>
<p>图标，和按钮原本是不垂直居中的啊！那这个怎么搞！</p>
<div class="blockcode">
<pre class="brush:js;">
<div "navbar-header df-jcsbc">
<a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div></pre>
</div>
<p>他们不是都在navbar-header的盒子里吗？</p>
<p>那不能通过flex两端对齐来实现垂直吗？</p>
<p>试试看</p>
<p>加了个</p>
<div class="blockcode">
<pre class="brush:js;">
.df-jcsbc{display:flex;justify-content: space-between;align-items: center;} </pre>
</div>
<p>但是效果不理想啊！总体来说，.navbar-brand 和navbra-toggle实现了垂直居中。</p>
<p style="text-align: center"><img alt="" src="http://201901.oss-cn-hangzhou.aliyuncs.com/jb/2426819-a188c6621225d9d83f5d513d3bf2b37d.png" style="font-size: medium; font-family: Simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></p>
<p>那，怎么办呢？</p>
<p>我是直接弄</p>
<div class="blockcode">
<pre class="brush:js;">
.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:0;
}
.navbar-header img{position:absolute;
left:20px;}
.navbar-header button{position:absolute;
margin:0;
right:20px;}</pre>
</div>
<p>padding和margin来使他们让出位置来的。</p>
<p>然后通过定位稍微调了点左右距离。</p>
<p>最后就可以实现垂直居中了。</p>
<p>明天及今天计划的事情：（是按照大娃师兄，提出的UI自检 ：首先对照字体大小，颜色，边距，定位等问题，之后在不同的分辨率下查看是否有布局错乱，不协调等问题。来做test10。）</p>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
<p>以上所述是小编给大家介绍的BootStrap导航栏问题记录，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对社区网站的支持！</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
javascript完美实现给定日期返回上月日期的方法
<p>本文实例讲述了javascript完美实现给定日期返回上月日期的方法。分享给大家供大家参考，具体如下：</p>
<p>在项目开发中，使用javascript对日期进行处理时，因为在查询中都会有一个初始值，大多都会 ... 展开
<p>本文实例讲述了javascript完美实现给定日期返回上月日期的方法。分享给大家供大家参考，具体如下：</p>
<p>在项目开发中，使用javascript对日期进行处理时，因为在查询中都会有一个初始值，大多都会在当前日期的基础上推一个月，在这种情况下，如果自己写一个，需要考虑的情况较多，在这里给大家分享一下一个比较完善的解决这个问题的方法。供大家参考。例如：给定截止日期enddate=2010-07-31</p>
<p>计算得到开始日期startdate=2010-06-30</p>
<p>这个问题的关键在于对以下几处的考虑：</p>
<p>1、startdate跨年</p>
<p>2、startdate是2月(需考虑闰年的情况)</p>
<p>3、大小月</p>
<div class="blockcode">
<pre class="brush:js;">
<html>
<script type="text/javascript">
function getInitStartDate(enddate) {
var comp = enddate.split("-");
var year = comp[0];
var month = comp[1];
var date = comp[2];
if (month == "01") { //前一月跨年
month = 12;
year = year - 1;
} else {
month = month - 1;
if (month == 2 && date > 28) {
date = isLeapYear(year) ? 29 : 28;
} else if (date == 31) {
switch (month) {
case 4:
case 6:
case 9:
case 11:
date = 30;
break;
default:
break;
}
}
}
month = ("" + month).length == 1 ? ("0" + month) : ("" + month);
var dateFormat = year + "-" + month + "-" + date;
return dateFormat;
}
function isLeapYear(y) { //判断y是否为闰年
return (y % 4 == 0) && (y % 400 == 0 || y % 100 != 0);
}
alert(getInitStartDate("2010-07-31"));
</script>
</html>
</pre>
</div>
<p>配套给出一个格式化日期的方法：</p>
<div class="blockcode">
<pre class="brush:js;">
<script language="JavaScript">
Date.prototype.format = function(format) //author: meizz
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
alert(new Date().format("yyyy-MM-dd"));
alert(new Date("january 12 2008 11:12:30").format("yyyy-MM-dd hh:mm:ss"));
</script>
</pre>
</div>
<p><span style="color: #800000"><strong>PS：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：</strong></span></p>
<p><span style="color: #ff6600"><strong>在线日期/天数计算器：<br>
</strong></span><a href="http://tools.jb51.net/jisuanqi/date_jisuanqi" target="_blank">http://tools.jb51.net/jisuanqi/date_jisuanqi</a></p>
<p><span style="color: #ff6600"><strong>在线日期计算器/相差天数计算器：<br>
</strong></span><a href="http://tools.jb51.net/jisuanqi/datecalc" target="_blank">http://tools.jb51.net/jisuanqi/datecalc</a></p>
<p><span style="color: #ff6600"><strong>在线日期天数差计算器：<br>
</strong></span><a href="http://tools.jb51.net/jisuanqi/onlinedatejsq" target="_blank">http://tools.jb51.net/jisuanqi/onlinedatejsq</a></p>
<p><span style="color: #ff6600"><strong>在线天数计算器：<br>
</strong></span><a href="http://tools.jb51.net/jisuanqi/datejsq" target="_blank">http://tools.jb51.net/jisuanqi/datejsq</a></p>
<p>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《<a href="https://www.jb51.net/Special/321.htm" target="_blank">JavaScript时间与日期操作技巧总结</a>》、《<a href="https://www.jb51.net/Special/472.htm" target="_blank">JavaScript查找算法技巧总结</a>》、《<a href="https://www.jb51.net/Special/439.htm" target="_blank">JavaScript错误与调试技巧总结</a>》、《<a href="https://www.jb51.net/Special/297.htm" target="_blank">JavaScript数据结构与算法技巧总结</a>》、《<a href="https://www.jb51.net/Special/281.htm" target="_blank">JavaScript遍历算法与技巧总结</a>》及《<a href="https://www.jb51.net/Special/119.htm" target="_blank">JavaScript数学运算用法总结</a>》</p>
<p>希望本文所述对大家JavaScript程序设计有所帮助。</p>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
JS获取select-option-text_value的方法
<p>HTML代码：<br></p><div class="codetitle"><span><a class="copybut" data="31156" id="copybut31156" onclick="doCopy('code31156')" style="CURSOR: pointer" ... 展开
<p>HTML代码：<br></p><div class="codetitle"><span><a class="copybut" data="31156" id="copybut31156" onclick="doCopy('code31156')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code31156"><br><select id="month" onchange="selectInput(this)"><br> <option value="01">January</option><br> <option value="02">February</option><br> <option value="03">March</option><br> <option value="04">April</option><br> <option value="05">May</option><br> <option value="06">June</option><br> <option value="07">July</option><br> <option value="08" selected="selected">August</option><br> <option value="09">September</option><br> <option value="10">October</option><br> <option value="11">November</option><br> <option value="12">December</option><br></select><br></div>
<p>用jQuery获取 select选中对象的value、text<br></p><div class="codetitle"><span><a class="copybut" data="22870" id="copybut22870" onclick="doCopy('code22870')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code22870"><br>$(function(){<br> $("#month").change(function() {<br> alert($(this).find("option:selected").val());<br> alert($(this).find("option:selected").text());<br> });<br>});<br></div>
<p>如果用JS获取 select选中对象的value是很容易的<br></p><div class="codetitle"><span><a class="copybut" data="844" id="copybut844" onclick="doCopy('code844')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code844"><br>function selectInput(oSelect) {<br> alert(oSelect.value);<br>}<br></div>
<p>如果要用JS获取 select选中对象的text呢 ？<br></p><div class="codetitle"><span><a class="copybut" data="40365" id="copybut40365" onclick="doCopy('code40365')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code40365"><br>function selectInput(oSelect) {<br> alert(oSelect.options[oSelect.selectedIndex].text);<br>}<br></div>
<p>如果select 没有默认则设第一个为默认？<br></p><div class="codetitle"><span><a class="copybut" data="21802" id="copybut21802" onclick="doCopy('code21802')" style="CURSOR: pointer"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code21802"><br>document.getElementById("test“).options[0].selected=true;<br></div>
<div class="clearfix">
<span class="jbTestPos" id="art_bot"></span>
</div> 收起
最活跃汽油
衍生品话题
70%期权投资者都来期权论坛
百度期权第一页进本站
